There are three ways of css in html:
1, inline style: with style attributes over elements set
<p style="font-size:20px; color:red">hello</p>
Separated by a semicolon between properties.
2, Internal Style: css style defined in the <head> of <style> element
<style> p{font-size: 20px;color: red} </style>
3, external style: css style defined in css file, then the <head> html Waibuyangshibiao by introducing the <style>
p{font-size: 20px;color: red}
<link href="xxx.css" type="text/css" rel="stylesheet" />
css file without <style> tag, write directly css styles on ok.
Internal | external style syntax: selector attribute names {1: 1 attribute value; property name 2: attribute value 2}
Three ways, between the properties are separated by a semicolon.
Priority: select the same type, inline highest, followed by internal and external again before the html property is set once again, the lowest default browser.
css Notes:
/ * Comment * /
css selector
1, element selector, class selector, id selector
p { Color : Red } / * element selector, set a style element for all p * / .red { Color : Red } / * class selector, through the element class = "red" references * / #user { Color : Red } / * ID selector, in the element by id = "user" reference, can only be used once * /
2, universal selector, packet selector
* { Color : Red } / * universal selector, all elements in a set pattern * / h1 of, .red { Color : Red } / * packet selector to simultaneously select a plurality of the same pattern set * /
3, descendant selectors, sub-selectors, sibling selectors
P div { Color : Red } / * descendant selector select <div> all <p> element, regardless of the <p> is the <div> children, grandchildren, great-grandchildren long ...... <p> a <div> progeny line * / div> P { Color : Red } / * sub-selector to select the <p>, <p> must <div> son * / div + P { Color : Red } / * sibling selector to select the <p>, <p> must <div> behind the first sibling element * /
4, attribute selector
[attr] / * containing attr attribute * / [attr = value] / * there attr attributes, and the attribute value value * / [attr ^ = value] / * there attr attributes, and the attribute values at the beginning value (as long as the value is beginning on OK * / [attr | = value] / * there attr attributes and attribute values are value at the beginning, value and back portions to - connect * / [attr $ = value] / * there attr attributes, and the attribute values value end * / [attr * = value] / * there attr attributes, and attribute values contained in the value (contained on OK) * / [attr ~ = value] / * there attr attributes, and the attribute value contained in the word value, value if the a complete word (and other words separated by spaces) * /
Attribute selector often used in conjunction with other selectors, such as:
button[type="button"] /*选择所有type="button"的<button> */
Attribute selector, attr not quotes, value not cited may be cited.
5, <a> link
A: Link / * all unvisited elements <a> * / A: hover / * mouse over <a> element * / A: the Active / * When you click <a> * / A: visited / * all access had <a> * /
The four styles are set in different periods of <a> elements.
6, form elements
: Focus / * focusing * / : the checked / * When you select * / : Enabled / * available * / : Disabled / * disable * / : the Read-only / * read only * /
May be used alone, may be used with form elements:
:focus{ } input:focus{ }
7, empty element
: empty {} / * all empty elements * / P: empty {} / * all empty <p> element * /
Empty element means that no properties, with no content, examples: <p> </ p>.
8, non
: Not (P) / * Select not <p> all the elements * /
() To make use of only the element selector, using another selector prone to error.
9, type series
P: First-of-type / * the first level of the same <P> * / P: Nth-of-type (n) / * same level in the n-th <P> * / P: Nth-Last -type -of (n) / * same level next to last n-th <P> * / P: last-of-type / * same level of the last <P> * / P: type-of-only / * the same level in only one <the p-> * /
Example:
p:first-of-type{color:red}
<body> <h1></h1> <p></p> <!--选中--> <p></p> <div> <h2></h2> <p></p> <!--选中--> <p></p> </div> </body>
As long as the first to the same level of <p> in.
10, child series
P: First-Child / * matches with <p>, <p> If the first child element of the parent element * / P: Nth-Child (n-) / * matches with <p>, <p> If n th element of the parent element * / P: Nth-Last-Child (n) / * matches with <p>, <p> If the parent element of the inverse of the n-th element * / P: Last-Child / * matching the <p>, <p> If the last child of its parent element * / P: child-only / * matches with <p>, <p> If only one child element of the parent element * /
Example:
p:first-child{color:red}
<body> <h1></h1> <p></p> <p></p> <div> <p></p> <!--选中--> <p></p> </div> </body>
11, the first word, the first line
P: First-Letter / * <p> element of the first character * / P: First-Line / * first row <p> element * /
12, pseudo-elements
P: before { / * Add <p> in front of the contents * / Content : "Hello" } P: After { / * add content later <p> of * / Content : "byebye" }
The default is to add the contents of inline elements, but and <p> in the same line display (equivalent to the added content into the <p> before the innermost element | behind), is not a true added elements, so called pseudo element.
Can be set to block level, the added content is displayed as a block-level elements:
P: before { / * Add the content in front <p> of * / Content : "Hello" ; the display : Block } P: After { / * add content later <p> of * / Content : "byebye" ; the display : Block }
Can be added to an element of set style:
P: before { Content : "Hello" ; / * separated by semicolons attribute * / the display : Block ; / * Add styles to add * / font-size : 20px ; Color : Red }
add pictures:
P: before { Content : "" ; / * Content attribute is required, is not added text may be set to the empty string * / the display : Block ; / * must be set as a block-level, to set the width, height, background added images can be displayed * / width : 100px ; height : 100px background-Image: url ( "1.png") ; }
Clear float:
p:before{ content:""; clear: both }
Colon pseudo-element can be used alone, it may be used a double colon.
:before <=> ::before
:after <=> ::after
The selector can be used with.