How CSS implements and selectors sample code sharing

CSS implementations and selectors

Contents of this lesson:

One, the implementation of CSS four ways

1, each HTML tag has a style style property with the value of the CSS code. (for one label)
2, the way you use the style label . are generally defined in the head tag. (for multiple identical labels)
3, when multiple pages use the same style, the style can be individually encapsulated as a CSS file import
<style type= "text/css" > @import url ("1.css");</style>
4. Link a CSS file via the link tag in the HTML Header tab
<link rel= "stylesheet" href= "1.css" Media properties optional, default device screen/>

Second, selector

tag Selector p{}
class selector . haha
The ID selector #qq (the value of the ID is unique in the page because it is used in addition to the CSS and is used for JavaScript)
Like the class selector and the ID selector usage, the ID selector has a higher priority than the class selector, and the lower priority is higher

Third, CSS Notes

CSS: The content of the Web page and display style are separated , improve the display function.

CSS cascading style sheet cascading style sheets

Separate the styles from the Web page, fully controlled by CSS, to enhance style reusability and extensibility.

Format: Selector {property Name: property value; Property Name: Property value; ...}

CSS is combined with HTML in 4 ways:

1. Each HTML tag has a style attribute

2. When more than one label in the page has the same style, you can define a style label to wrap the styles to reuse

       <style type= "text/css" >CSS code </style>

3. When multiple pages use the same style, you can encapsulate the style individually as a CSS file import

       <style type= "text/css" > @import url ("1.css");</style>

4. Link a CSS file via the link tag in the HTML header tag

       <link rel= "stylesheet" href= "1.css" Media properties optional, default device screen/>

Tip: To improve the reusability and extensibility of styles, define and encapsulate multiple styles separately as CSS files, such as P.css, p.css ... In a total CSS file, import these CSS files using import, and then import the total CSS file in the HTML page with the link tag.

Priority: The Style property set on the nearest principle label can override other styles

Selector:

1, Tag selector: Each HTML tag name is a selector

2, class selector: The class attribute in the tag specifies the definition style to add a JS reference with classname

3, ID selector: Tag id attribute, as far as possible to ensure unique, easy to get the element javascript

4. Extended selector:

A, association selector: the label table p represents the P area in the table

B, combo selector: multiple selectors comma delimited

c, for element selector: The state of the element, such as the default state of the hyperlink, click State, hover state, etc.

A:link a:visited a:hover a:active lvha Order

Remove hyperlink default underline: Text-decoration:none

P:first-letter P:first-line FOCUS:IE6 not supported

CSS filters: Styles that are enriched by some code

Web design,p+css

P and P tags belong to row level area, carriage return effect, span tag is block level area, no carriage return effect

Can add border, color and other properties, p tags do not nest p tags

Four, code one

<!--This lesson: first, the implementation of CSS four Way 1, each HTML tag has a style style property, the value of this property is the CSS code. (for a label) 2, the way the style label is used. are generally defined in the head tag. (for multiple identical labels) 3, when multiple pages use the same style, you can encapsulate the style separately as a CSS file import <style type= "text/css" > @import url ("1.css");</style> 4. Link a CSS file via the link tag in the HTML Header tab <link rel= "stylesheet" href= "1.css" Media property optional, default device screen/> II, selector tag Selector div{} class selector. The Hahaid selector #qq (the value of the ID is unique in the page, because it is used in addition to the CSS, but also for JavaScript) class selector and ID selector usage, the ID selector is higher priority than the class selector, the lower the priority is higher--><! DOCTYPE html>
Five, code two



<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "