Poechant's CSS learning note (poetry merchant's CSS learning notes)

To be continued (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 chocould use ". "To specify this class as" P. comment ". this selector cocould 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 cocould be PX, keyword (color, font-size), % and so forth.

Background-color: This property cocould control the background color of an element. (background color)

-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. (background image)

Border: This property puts a border around und an element. You can have a solid border, a ridged border, a dotted border. (Border)

-Numberpx

-Enum: dotted

-Color

Border-bottom:

Color: Use color property to set the font color of text elements. (font color)

-Color

Font-family: (font)

-Enum: Andale mono, Arial, Geneva, Georgia, sans-serif, times, Times New Roman, trebuchet MS, verdana

Font-size: (font size)

-Px

-%

-Em, for example 1.2em, this says that the font size shocould 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. (font width)

-Enum: bold, normal

Letter-Spacing: This property controls the spacing between letters. (font spacing)

Line-Height: This property sets the space between lines in a text element. (row spacing)

List-style: This property lets you change how list items look in a list. (list item style)

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
The others, then it wins.

6.2. If you had an element that belonged only to the greentea class there wocould be an obvious winner: The P. greentea selector is the most specific, so the text wocould 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 wocould 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 is ignored.

6.4. Multiple fonts can be specified in font-family. If the first Font does not exist, the second one will be used, and so on.

7. CSS validator

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