CSS 笔记二（Text/Fonts/Links/Lists）

CSS Text

1> Text Color

• used to set the color of the text

2> Text Alignment

• used to set the horizontal alignment of a text

text-align: left|right|center|justify|initial|inherit;

3> Text Decoration

• used to set or remove decorations from text

text-decoration: none|underline|overline|line-through|initial|inherit;

4> Text Transformation

• used to specify uppercase and lowercase letters in a text

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

5> Text Indentation

• The text-indent property specifies the indentation of the first line in a text-block

text-indent: length|initial|inherit;

6> Letter Spacing

• used to specify the space between the characters in a text

letter-spacing: normal|length|initial|inherit;

7> Word Spacing

• used to specify the space between the words in a text

word-spacing: normal|length|initial|inherit;

8> Line Height

• used to specify the space between lines

line-height: normal|number|length|initial|inherit;

　　Note: number: A number that will be multiplied with the current font size to set the line height

9> Text Direction

• used to change the text direction of an element

direction: ltr|rtl|initial|inherit;

CSS Fonts

The CSS font properties define the font family, boldness, size, and the style of a text.

1> Font Family

font-family: font|initial|inherit;

Two types of font family names:

• family-name - The name of a font-family, like "times", "courier", "arial", etc.
• generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".

Note:

1. Start with the font you want, and always end with a generic family
2. Separate each value with a comma.
3. If a font name contains white-space, it must be quoted.

Example

p {
    font-family: "Times New Roman", Times, serif;
} 

2> Font Style

• mostly used to specify italic text

font-style: normal|italic|oblique|initial|inherit;

3> Font Size

• used to set the size of the text

font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;

4> Font Weight

• used to specify the weight of a font

font-weight: normal|bold|bolder|lighter|number|initial|inherit;

5> Font Variant

• used to specify whether or not a text should be displayed in a small-caps font.

font-variant: normal|small-caps|initial|inherit;

CSS Links

1> Styling Links

Four links states

• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

Some order rules:

1. a:hover MUST come after a:link and a:visited
2. a:active MUST come after a:hover

2> Text Decoration

text-decoration: none|underline|overline|line-through|initial|inherit;

CSS Lists

• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items

1> CSS list-style Property

• The list-style property is a shorthand property.

list-style: list-style-type list-style-position list-style-image|initial|inherit;

The order of the property values

• list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
• list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
• list-style-image (specifies an image as the list item marker)

Example

ul {
    list-style: square inside url("sqpurple.gif");
}

2> CSS list-style-type Property

list-style-type: value;

Common Property Values

disc                 Default value. The marker is a filled circle    
circle               The marker is a circle    
cjk-ideographic      The marker is plain ideographic numbers    (一，二，三)
decimal              The marker is a number    (1,2,3)
decimal-leading-zero     The marker is a number with leading zeros (01, 02, 03, etc.)    
hiragana             The marker is traditional Hiragana numbering　(あ、い、う)
katakana             The marker is traditional Katakana numbering  (ア、イ、ウ)  
lower-alpha          The marker is lower-alpha (a, b, c, d, e, etc.)    
lower-roman          The marker is lower-roman (i, ii, iii, iv, v, etc.)    
none                 No marker is shown    
square               The marker is a square    
upper-alpha          The marker is upper-alpha (A, B, C, D, E, etc.)     
upper-roman          The marker is upper-roman (I, II, III, IV, V, etc.)    
initial              Sets this property to its default value. Read about initial    
inherit              Inherits this property from its parent element. Read about inherit

All Property Values

3> CSS list-style-position Property

• The list-style-position property specifies if the list-item markers should appear inside or outside the content flow.

list-style-position: inside|outside|initial|inherit;

Outside(Default value):

• Coffee
• Tea
• Coca-cola

Inside:

• Coffee
• Tea
• Coca-cola

4> CSS list-style-image Property

• The list-style-image property replaces the list-item marker with an image.

list-style-image: none|url|initial|inherit;

　　Note: Always specify the list-style-type property in addition. This property is used if the image for some reason is unavailable.

Example

ul {
    list-style-image: url('sqpurple.gif');
}