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

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