CSS的基础属性

 

 

 

控制队列的元素有：

• 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