1. Understanding css
The full name of css is Cascading Style Sheets (cascading style sheet)
The latest version commonly used now is css3, which adds new features such as rounded corners , shadows , animations/transitions , and partial selectors
The priority of the css cascading style sheet is: id > class > label > wildcard, that is, the smaller the selection range, the higher the priority; (when the priority is the same, the same selector has different attributes, and then the element will take effect)
Two, css writing specification
css syntax:
selector { style property name: style property value; style property name2: style property value2; }
According to the location can be divided into:
- Inline style: write directly in the tag
example:
- Embedded: add a style tag in the head, and write in the style
example:
- External link: write css to another separate file and import it by adding a link in the head
example:
3. Selector
- Basic selector:
Universal selector: *{style attribute name: style attribute value;} - matches all tag elements
id selector: #id name {style attribute name: style attribute value;} - the only tag whose id attribute on the matching tag is the id name
Class selector: .class name {style attribute name: style attribute value;}——a tag whose class attribute on the matching tag is the class name
Label selector: label name {style attribute name: style attribute value;} - match the corresponding label
Group selector union selector: selector 1, selector 2{style attribute name: style attribute value;}——matches the corresponding label under the corresponding selector name
- cascading selector
Descendant selector: parent class selector (space) descendant name {style attribute name: style attribute value;}——match all descendant tags of the corresponding name under this parent class (for example: .div1 p{} selects all in div1 p tag)
Child selector: parent class selector > child name {style attribute name: style attribute value;}——matches the child tag with the corresponding name under this parent class Example: (.div1>p{} selects the one in div1 The first level of p tags; if div1 contains divs such as div1-1, the p tags in div1-1 will not be affected)
- pseudo class selector
:hover - mouse over
:action - when the mouse is clicked
a:link - when the hyperlink is not accessed
a:visited - the style after the hyperlink is visited