控制队列的元素有:
-
The list-style-type property and how it’s used to present different types of lists through a variety of marker styles for bulleted lists and numbered lists
Property | Value |
---|---|
list-style-type | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none Initial value: disc |
-
The list-style-image property and how it’s used to provide a custom marker for each list item
Property | Value |
---|---|
list-style-image | <uri> | none 如:list-style-image: url('arrow.png'); Initial value: none |
-
The list-style-position property and how it’s used to control the positioning of list item markers
Property | Value |
---|---|
list-style-position | inside | outside Initial value: outside |
这里的INSIDE和outside的意思是在元素的里面和外面
The list-style shorthand Property
Property | Value |
---|---|
list-style | <’list-style-type’> || <’list-style-position’> || <’list-style-image’> |
Initial value: n/a |
属性Backgrounds相关的设置:
-
How to use the background-color property to set a background color
Property | Value |
---|---|
background-color | <color> | transparent Initial value: transparent |
-
How to use the background-image property to specify a background image
Property | Value |
---|---|
background-image | <uri> | none Initial value: none |
-
How to use the background-repeat property to control background tiling
Property | Value |
---|---|
background-repeat | repeat | repeat-x | repeat-y | no-repeat |
Initial value: repeat |
-
How to use the background-position property to control how the background is positioned
Property | Value |
---|---|
background-position | [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] |
Initial value: 0% 0% |
-
How to use the background-attachment property to control whether the background scrolls with the page or remains fixed in place with respect to the view port
Property | Value |
---|---|
background-attachment | scroll | fixed |
Initial value: scroll |
-
How to use the background shorthand property to combine all the separate background properties into a single property
background | <’background-color’> || <’background-image’> || <’background-repeat’> || <’background-attachment’> || <’background-position’> |
Initial value: n/a |
Text Manipulation:
-
The letter-spacing property and how it is used to add or subtract space between the letters that make up a word
Property | Value |
---|---|
letter-spacing | normal | <length> Initial value: normal |
-
The word-spacing property and how it is used to add or subtract space between the words of a sentence
word-spacing | normal | <length> Initial value: normal |
-
The text-indent property and how it is used to indent the text of a paragraph
word-spacing | normal | <length> Initial value: normal |
-
The text-align property and how it is used to align the text of a document
text-align | left | right | center | justify Initial value: left |
-
The text-decoration property and how it is used to underline, overline, and strikethrough text
text-decoration | none | [ underline || overline || line-through || blink Initial value: none |
-
The text-transform property and how it is used to capitalize text or convert text to uppercase or lowercase letters
text-transform | capitalize | uppercase | lowercase | none Initial value: none |
-
The white-space property and how it is used to control the flow and formatting of text
white-space | normal | pre | nowrap Initial value: normal |
fonts:
-
The font-family property and how it is used to change the face of a font
Property | Value |
---|---|
font-family | [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] Initial value: Varies depending on the browser or user agent. |
-
The font-style property and how it is used to make a font italic or oblique
font-style | normal | italic | oblique Initial value: normal |
-
The font-variant property, a property similar to the text-transform property presented in Chapter 5 , and how this property is used to create a small-caps effect
font-variant | normal | small-caps Initial value: normal |
-
The font-weight property and how it is used to increase or decrease how bold or light a font appears
font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 Initial value: normal |
-
The font-size property and how it is used to increase or decrease the size of a font
font-size | <absolute-size> | <relative-size> | <length> | <percentage> Initial value: medium |
-
The font property and how it is used as shorthand to specify a number of other font properties
font | [ <’font-style’> || <’font-variant’> || <’font-weight’> ]? <’font-size’> [ / <’line-height’> ]? <’font-family’> ] caption | icon | menu | message-box | small-caption | status-bar |
The Box Model:
-
The CSS box model
Property | Value |
---|---|
Margin | [ <length> | <percentage> | auto ] {1,4} |
margin-top margin-right margin-bottom margin-left | <length> | <percentage> | auto |
-
CSS box model properties, padding, margins, borders, width, and height
Property | Value |
---|---|
Margin | [ <length> | <percentage> | auto ] {1,4} |
margin-top margin-right margin-bottom margin-left | <length> | <percentage> | auto |
-
Controlling line height
Property | Value |
---|---|
Margin | [ <length> | <percentage> | auto ] {1,4} |
margin-top margin-right margin-bottom margin-left | <length> | <percentage> | auto |
-
Establishing minimum and maximum dimensions
Width | <length> | <percentage> | auto initial value: auto |
-
Overflowing content
overflow | visible | hidden | scroll | auto initial value: visible |
CSS Buoyancy-Floating and Vertical Alignment:
-
The float property and how it is used to change the flow of elements in a document - for instance, to place text beside an image
Property | Value |
---|---|
float | left | right | none Initial value: none |
-
The clear property and how this property is used to cancel the effects of the float property
clear | none | left | right | both Initial value: none |
-
The vertical-align property and how this property is used to control the vertical alignment of text to create subscript or superscript text or control vertical alignment in table cells
vertical-align | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> Initial value: baseline |
Positioning:
-
The position property and the four types of positioning that CSS has to offer: static , relative , absolute , and fixed
Property | Value |
---|---|
position | static | relative | absolute | fixed Initial value: static |
top | <length> | <percentage> | auto Initial value: auto |
right | <length> | <percentage> | auto Initial value: auto |
bottom | <length> | <percentage> | auto Initial value: auto |
left | <length> | <percentage> | auto Initial value: auto |
-
The offset properties top , right , bottom , and left , and how these are used to deliver an element to a specific position in a web document
z-index | auto | <integer> Initial value: auto |
-
The z-index property and how this property is used to layer the elements of a document
-
Some practical applications of positioning, such as multicolumn layouts and vertically centering a positioned element
Tables:
-
The optional table elements that can make it easier to style a table and that make the structure more intuitive
-
Controlling placement of the table caption
Property | Value |
---|---|
caption-side | top | bottom Initial value: top |
-
Controlling the layout of the table
-
Controlling the spacing between table cells
border-spacing | <length> <length>? Initial value: 0 |
table-layout | auto | fixed Initial value: auto |