CSS Cascading Style Sheets
There are four methods to create CSS:
Example 1: <Div style = "width: 200px"> </div>
Example 2:
<HTML>
<Head>
<Style type = "text/CSS">
. Del {width: 200px ;}
</Style>
</Head>
<Body> </body>
</Html>
Example 3:
<HTML>
<Head>
<LINK rel = "stylesheet" type = "text/CSS" href = "CSS/de.css"/>
</Head>
<Body> </body>
</Html>
Example 4:
<HTML>
<Head>
<Style>
@ Import URL ("CSS/css.css ");
</Style>
</Head>
<Body> </body>
</Html>
Three ways to create styles: styles written in tags, inline styles, and styles introduced by external files.
Project Experience Summary-note:
1. Style written in the tag: normally, it is dynamically loaded in JS to achieve some interaction effect. (Normal static pages cannot be written in tags ).
2. inline style: in modular development, this situation occurs to reduce HTTP requests. It is usually used in the homepage with a large access volume, load the style of each module.
3. the style introduced by external files: (normal static pages must be introduced using external files). The purpose is very simple. First, to reduce the size of the entire static page, second, external files are easy to maintain, and the structural layer, presentation layer, and behavior layer are separated.
4. Finally, @ import URL is loaded. This mode is only used in modular Development (recommended );
Selector:
Id selector:
Structure: <Div id = "de"> </div>
Style File: # ID {width: 200px ;}
The ID selector uses a # symbol followed by the ID name you named.
Note: An ID can only be applied to one HTML Tag.
Class selector:
Structure: <Div class = "de"> </div>
Style File:. De {width: 200px ;}
The class selector uses a. symbol followed by the name of the class you named.
Note: Only numbers, letters, hyphens (-), and underscores (_) can be used in CSS class selectors, which must be case sensitive.
Tag selector:
In CSS rules, it is easy to identify tag selectors because they have the same name as the tags to be set. For example, H1 table img
Example: IMG {windth: 200px; Height: 200px ;}
Group selector:
In some implementations, the same color may be used in many places, so you can set the group selector. Example:
H1, H2, H3, H4, H5, H6 {color: red ;}
It can also be a class selector or ID selector ,. de ,. dell {color: Red ;}# de, # Dell {color: red;} can also be a combination mode: H1, P ,. de, # Dell {color: red ;}
General selector:
* Indicates the general purpose of each tag. For example, * {margin: 0px; padding: 0px;} # de * {color: red ;}
Note: The font color of all IDs in the De element is red.
Pseudo class:
Pseudo-class:
A: Link
Note: it refers to the link that the visitor has not accessed, the mouse has not slipped, or clicked.
A: visited
Note: it refers to the link that has been clicked.
A: hover
Note: When the mouse slides, the display effect of the link is changed.
A: active
Note: displays the effect of visitor clicks.
These are commonly used pseudo classes. For more information about pseudo classes, see the third edition of the CSS authoritative guide.
Derivative selector:
The derived selector is implemented based on the HTML genealogy.
Example: p a {color: red ;}
Note: The font color of all a labels under the P label is red.
Sub-selector:
The sub-Selector uses> to identify the relationship between HTML tags.
Example: div> H1 {color: red ;}Indicates that the font color of H1 under div is red.
Compatriot selector:
The compatriot selector represents adjacent labels and uses + to identify their relationships.
Example: H2 + P {color: red ;}Note: The font color of P labels adjacent to H2 is red.
Attribute selector:
Note: This selector is rarely used in actual development projects. Its example is as follows: how to use the title attribute selector to select all IMG labels:
IMG [title]
Explanation: The first part is the Tag Name (IMG), and the second part is the attribute name, [title]. In this way, all IMG tags with the title attribute are selected.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
