CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style. Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.
CSS Example
CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly brackets:
p {color:red;text-align:center;}
To make the CSS more readable, you can put one declaration on each line, like this:
Example
p {
color:red;
text-align:center; }
CSS Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.
The \or CSS2).
Selector .class #id * element
Example .intro #firstname * p
Example description
Selects all elements with class=\Selects the element with id=\Selects all elements Selects all
elements
Selects all
elements Selects all
elements inside
CSS 1 1 2 1 1 1
element,element div,p element element div p element>elemendiv>p t
element+elemendiv+p t
[attribute]
[target]
Selects all
elements where the parent is a
Selects all
elements that are placed immediately 2 after
Selects all elements with a target attribute
2 2
[attribute=value[target=_blaSelects all elements with target=\]
nk]
[attribute~=valu[title~=flowe]
[attribute|=language] :link :visited :active :hover :focus :first-letter :first-line :first-child
a:link a:visited a:active a:hover input:focus er]
[lang|=en]
Selects all elements with a title attribute containing the 2 word \
Selects all elements with a lang attribute value starting 2 with \
Selects all unvisited links Selects all visited links Selects the active link Selects links on mouse over
Selects the input element which has focus
1 1 1 1 2 1 1
p:first-letter Selects the first letter of every
element p:first-line
Selects the first line of every
element
p:first-child Selects every
elements that is the first child of its 2
parent
:before :after
p:before p:after
Insert content before every
element Insert content after every
element
2 2
:lang(language) p:lang(it) Selects every
element with a lang attribute value 2 starting with \
CSS Properties
CSS Property Groups
? ? ? ?
Background Border Dimension Font
and ? ? ? ?
Generated List Margin Padding
? ng ? ? ?
Print Table Text Positionicontent
outline
The \or CSS2).
Background Properties
Property
Description
CSS
background
Sets all the background properties in one declaration
1
background-attachmeSets whether a background image is fixed or scrolls with the rest of 1 nt
background-color background-image background-position background-repeat
the page
Sets the background color of an element Sets the background image for an element Sets the starting position of a background image Sets how a background image will be repeated
1 1 1 1
Border and Outline Properties
Property
Description
CSS
border
border-bottom border-bottom-color border-bottom-style border-bottom-width border-color border-left border-left-color border-left-style border-left-width border-right border-right-color
Sets all the border properties in one declaration Sets all the bottom border properties in one declaration Sets the color of the bottom border Sets the style of the bottom border Sets the width of the bottom border Sets the color of the four borders
Sets all the left border properties in one declaration Sets the color of the left border Sets the style of the left border Sets the width of the left border
Sets all the right border properties in one declaration Sets the color of the right border
1 1 1 1 1 1 1 1 1 1 1 1
border-right-style border-right-width border-style border-top border-top-color border-top-style border-top-width border-width outline outline-color outline-style outline-width
Sets the style of the right border Sets the width of the right border Sets the style of the four borders
Sets all the top border properties in one declaration Sets the color of the top border Sets the style of the top border Sets the width of the top border Sets the width of the four borders
Sets all the outline properties in one declaration Sets the color of an outline Sets the style of an outline Sets the width of an outline
1 1 1 1 1 1 1 1 2 2 2 2
Dimension Properties
Property
Description
CSS
height max-height max-width min-height min-width width
Sets the height of an element
Sets the maximum height of an element Sets the maximum width of an element Sets the minimum height of an element Sets the minimum width of an element Sets the width of an element
1 2 2 2 2 1
Font Properties
Property
Description
CSS
font font-family font-size font-style font-variant
Sets all the font properties in one declaration Specifies the font family for text Specifies the font size of text Specifies the font style for text
1 1 1 1
Specifies whether or not a text should be displayed in a small-caps 1 font
font-weight Specifies the weight of a font 1
Generated Content Properties
相关推荐：
loading