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 multiple selectors select an element?

There are multiple selectors that match this element and define the same color property. That's what we call a "conflict". Which rule breaks the tie? Well, if one rule is more specific than
the others, then it wins.

6.2. If you had an element that belonged only to the greentea class there would be an obvious winner: the p.greentea selector is the most specific, so the text would be green. But you
have an element that belongs to all three classes: greentea, raspberry, and blueberry. 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 the p.blueberry rule.

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

http://jigsaw.w3.org/css-validator/