Poechant's CSS Learning Note (詩商的CSS學習筆記)
To be continued (未完待續)...
1. Internal CSS style:
<style type="text/css">
...
</style>
2. External CSS style:
<link type="text/css" rel="stylesheet" href="mycss.css" />
Notice that <link> is an empty element.
3. Comment in CSS:
(null)
4. CSS selector
4.1. class selector:
If you have created a <p> element with "comment" class, then you chould use "." to specify this class as "p.comment". This selector could select all paragraphs in the "comment" class.
An element can be in more than one class, such as <p class="comment code article">.
4.2. id selector:
4.3. inherit selector:
5. Properties in HTML elements:
The values of these properties could be px, keyword(color, font-size), % and so forth.
background-color: This property could control the background color of an element.(背景顏色)
- kerword:Aqua,Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Orange, Purple, Red, Sliver, Teal, White, Yellow.
- %:rgb(80%, 40%, 0%)
- number:rgb(204, 102, 0)
- #number: e.g.#cc6600
background-image: You can use this property to put an image behind an element.(背景圖片)
border: This property puts a border around an element. You can have a solid border, a ridged border, a dotted border.(邊框)
- numberpx
- enum: dotted
- color
border-bottom:
color: Use color property to set the font color of text elements.(字型顏色)
- color
font-family: (字型)
- enum: Andale Mono,Arial,Geneva,Georgia,sans-serif,Times,Times New Roman,Trebuchet MS,Verdana
font-size:(字型大小)
- px
- %
- em, for example 1.2em, this says that the font size should be scaled by 1.2.
- keyword: xx-small, x-smal, small, medium, large, x-large, xx-large.
font-style: Use this property for italic or oblique text.
- keyword:italic,oblique
font-weight: This property controls the weight of the text.(字型粗細)
- enum: bold, normal
letter-spacing: This property controls the spacing between letters.(字間距)
line-height:This property sets the space between lines in a text element.(行間距)
list-style:This property lets you change how list items look in a list.(列表項樣式)
margin: You can set how much space between the edge of the element and its content.
margin-left
- e.g. 20%
margin-right
- e.g. 20%
text-align: You can set this property as left, right or center.(對其方式)
text-decoration:
-underline
6. Some keypoints
6.1.What if multipleselectors select an element?
There are multiple selectors that match this element and define the samecolorproperty. That's what we call a "conflict". Which rule breaks the tie? Well, if one rule is morespecificthan the others, then it wins.
6.2. If you had an element that belonged only to thegreenteaclass there would be an obvious winner: thep.greenteaselector is the most specific, so the text would be green. But you have an element that belongs toall threeclasses:greentea, raspberry, andblueberry. So, p.greentea, p.raspberry, and p.blueberry all select the element, and are of equal specificity. What do you do now?
You choose the one that is listed last in the CSS file. If you can't resolve a conflict because two selectors are equally specific, you use the ordering of the rules in your style sheet file. That is, you use the rule listed last in the CSS file (nearest
the bottom). And in this case, that would be thep.blueberryrule.
6.3. What will happen if there is an error in my CSS?
If you have errors in your CSS, usually what happens is all the rules below the error are ignored.
6.4. font-family 中可以指定多個字型,如果不存在第一個字型,就會使用第二個,依次類推下去。
7. CSS validator
相關文章
- CSS 學習筆記CSS筆記
- css學習筆記(一)CSS筆記
- HTML&CSS學習筆記HTMLCSS筆記
- CSS 基礎學習筆記CSS筆記
- Animation.css學習筆記CSS筆記
- div+css學習筆記CSS筆記
- css居中辦法學習筆記CSS筆記
- webpack 學習筆記:引入 CSS(下)Web筆記CSS
- CSS學習筆記:flex佈局CSS筆記Flex
- webpack 學習筆記:引入 CSS(上)Web筆記CSS
- 《css揭祕》學習筆記(一)CSS筆記
- day02_css學習筆記CSS筆記
- web前端學習筆記(CSS盒子的定位)Web前端筆記CSS
- CSS學習筆記之字型樣式CSS筆記
- CSS學習筆記——傳統定位篇CSS筆記
- CSS學習筆記(一) 盒子模型CSS筆記模型
- xhtml & css 簡易學習筆記(一)HTMLCSS筆記
- web前端學習筆記(CSS盒子的浮動)Web前端筆記CSS
- css樣式設定技巧學習筆記CSS筆記
- css樣式選擇器學習筆記CSS筆記
- 【學習筆記】CSS深入理解之margin筆記CSS
- 【學習筆記】CSS深入理解之overflow筆記CSS
- CSS基礎——浮動(float)【學習筆記】CSS筆記
- HTML5,CSS3,學習筆記HTMLCSSS3筆記
- 原生 CSS 網格佈局學習筆記CSS筆記
- 原生CSS網格佈局學習筆記CSS筆記
- (CSS學習記錄):CSS高階技巧CSS
- 深度學習 DEEP LEARNING 學習筆記(一)深度學習筆記
- 深度學習 DEEP LEARNING 學習筆記(二)深度學習筆記
- 【學習筆記】CSS深入理解之relative筆記CSS
- html+css複習筆記HTMLCSS筆記
- css noteCSS
- CSS筆記CSS筆記
- Deep Learning(深度學習)學習筆記整理系列深度學習筆記
- 博學谷 - CSS筆記05 - CSS 的複合選擇器CSS筆記
- angular學習筆記(九)-css類和樣式2Angular筆記CSS
- angular學習筆記(九)-css類和樣式1Angular筆記CSS
- angular學習筆記(九)-css類和樣式3Angular筆記CSS