CSS Cascading Style Sheets

CSS Cascading Style Sheets
CSS Cascading Style Sheets.
The style in the webpage is completely controlled by css.
Enhances style repeatability and scalability.
Format:

Selector {attribute name: attribute value; attribute name; attribute value ...}

Css and html code are combined in four ways:
1. Each html tag has a style attribute.
2. When multiple tags on a page have the same style, they can be reused.

3. When the styles of tags on multiple pages are the same, you can encapsulate the styles into a CSS file separately, which is defined in each page.

4. Use the link tag in the head tag in html to connect to a css file.


Tip: To improve the reusability and scalability of the same style, multiple tag styles can be defined separately and encapsulated into css files.
P.css, div.css, input.css...
Use the css import in a css file to import multiple tag style files.
Then, on the html page, use the link tag to import the total css file.

1. css
@ Import url(p.css );
@ Import url(div.css );

------------------------------------------------------------
Selector: it is actually the label container for the style to function.
After style separation, html encapsulates data with tags and then loads css to the specified tags.
Basic selector classification:
1. Tag selector: Each tag name in html.
2. class selector: it is actually the class attribute in each label, expressed in the form.
3. ID selector: it is actually the ID attribute in each tag, but to ensure ID uniqueness, it must be identified.
The ID can be used not only by css, but also by JavaScript.
Selector priority: ID> class> label

Extension selector:
1. Association selector: defines the style of tags in tags. Selector selector...
2. Combined selector: defines multiple selectors in the same style. Separate multiple selectors
3. Pseudo-element selector: it is actually a state of an element.
A: link: The status before the hyperlink is clicked.
A: visited: status after a hyperlink is clicked.
A: hover over the hyperlink.
A: active: Click the hyperlink.
When defining these States, there is an order: L V H
P: first-letter
P: first-line
: Focus: Unfortunately, IE6 does not support it, but Firfox does.

CSS Filter: in fact, rich styles are completed through some code.
Webpage Design Mode: div + css.
Div: Row-level area.
Span: block-level area.
P: Row-level area, where div cannot be nested.