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:
- Start with the font you want, and always end with a generic family
- Separate each value with a comma.
- If a font name contains white-space, it must be quoted.
Example
1 p {
2 font-family: "Times New Roman", Times, serif;
3 }
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 linka:visited
- a link the user has visiteda:hover
- a link when the user mouses over ita:active
- a link the moment it is clicked
Some order rules:
- a:hover MUST come after a:link and a:visited
- 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
1 ul {
2 list-style: square inside url("sqpurple.gif");
3 }
2> CSS list-style-type Property
list-style-type: value;
Common Property Values
1 disc Default value. The marker is a filled circle
2 circle The marker is a circle
3 cjk-ideographic The marker is plain ideographic numbers (一,二,三)
4 decimal The marker is a number (1,2,3)
5 decimal-leading-zero The marker is a number with leading zeros (01, 02, 03, etc.)
6 hiragana The marker is traditional Hiragana numbering (あ、い、う)
7 katakana The marker is traditional Katakana numbering (ア、イ、ウ)
8 lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
9 lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
10 none No marker is shown
11 square The marker is a square
12 upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
13 upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
14 initial Sets this property to its default value. Read about initial
15 inherit Inherits this property from its parent element. Read about inherit
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
1 ul {
2 list-style-image: url('sqpurple.gif');
3 }