CSS implementation and selector

Contents of this lesson:

1. Four ways to implement CSS

1, in each htmltagThere is astyle style attribute, and the value of this attribute is the css code. (For a tag)
2, usestyle tag. Generally defined in the head tag. (For multiple identical tags)
3, when multiple pages use the same style, the style can be individually packaged as aCSS fileImport

4, link a CSS file through thelink tagin the HTML header tag
Tag selectordiv{}
Class selector.haha
id selector#qq (The value of id is unique in the page, because this attribute is not only given to CSS Use, but also for javascript)
The class selector is used the same as the id selector. The priority of the id selector is higher than the class selector.The lower the priority, the higher

3. CSS Notes

css: Separate web page content and display styleto improve the display function.

CSS cascading style sheets

separates the styles in the web page and is completely controlled by CSS, enhancing style reusability and scalability.

Format: selector {Attribute name: attribute value; Attribute name: attribute value;...}

4 ways to combine CSS with HTML:

1. Each Every HTML tag has the style attribute

2. When there are multiple tags on the page with the same style, you can define the style tag to encapsulate the style for reuse

css”>css code

3. When multiple pages use the same style, the style can be individually encapsulated as a CSS file and imported

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

Tips: In order to improve the reusability and scalability of styles, define multiple styles separately and combine them Encapsulate it into CSS files, such as p.css, div.css... In a general CSS file, use import to import these CSS files, and then use the link tag in the HTML page to import the general CSS file.

Priority: Proximity principle The style attribute set on the label can override other styles

Selector:

1. Label selector: each The HTML tag name is a selector

2. Class selector: The class attribute in the tag is specified. Add a dot when defining the style. Use className

when referencing js. 3. ID selector: The id of the tag Attributes should be as unique as possible to facilitate JavaScript to obtain elements

4. Extension selector:

a. Association selector:The label in the labeltable div represents the table div div area

b.combinationselector: multiple selectors separated by commas

c. Element selector: the state of the element is such as the default state of a hyperlink, click Status, hover status, etc.

a:link a:visited a:hover a:active LVHA order

Delete hyperlinks by default underline: text-decoration: none

p :first-letter p:first-line focus: IE6 does not support

CSS filters: styles enriched by some codes

When designing web pages,DIV+CSS

# DIV and P tags belong to the row -level area, and the Enter effect. The SPAN tag is a block -level area, without the effect of the car. Set DIV tag

4. Code 1

1 16 17 18 19 20 Insert title here21 22 23 24 33 34 35 36 46 47 48 49 50

51 52 62 63 64 65 66 67

这是一个div区域1

这是一个div区域2

69 span区域170 span区域271

这是一个段落1

这是一个段落2

73 74 75 76

Copy after login

五、代码二

无标题文档

伪元素选择器演示

这是一个div区域1

这是一个div区域2

span区域1span区域2

这是一个段落1

这是一个段落2

Copy after login

The above is the detailed content of Four ways to implement CSS and introduction to selectors. For more information, please follow other related articles on the PHP Chinese website!