1.1HTML CS
CSS Selector
Different style definitions have different application methods, and the corresponding style names are also different, so the style name is a selector and it should be easy to understand the difference The style of the application.
The name is a string of characters starting with a dot ".". This type of style must be used through the class attribute in the tag. This style must be applied via the class attribute in the tag.
Example:
.wenzi{font-size:20px;}
<p class=”wenzi”>类选择器样式</p>2. Tag selector:
The name is consistent with the html tag name. All tags with defined styles in the page will be selected if there is no class in the tag. If the selector style is applied, the content of this label will be displayed according to the label selector style. This style is automatically applied whenever a tag with the same name is defined.
Example:
p{font-color:#6ec;}The
tag on the page will be displayed in the color #6ec.
The name is a combination of "#" and a string of characters. Here "#" is the symbol of the ID selector. When a tag is When the value of the ID attribute is consistent with the character after "#", this style will be applied to this tag. This style applies to tags whose ID attribute value is the same as the character after #.
Example:
#idname{font-size:26px;}
<p id=”idname”>ID样式</p>It is not recommended that any two tags in the same page document have the same ID attribute value, so in web documents that comply with web standards, the ID style only corresponds to one tag. . If there are multiple tags that will use the same style as this style, then use the class selector instead of the ID selector to define the style.
3. Level selector:
(This is called derivative selector in the textbook, and level selector is my own name)
The corresponding tags of this style will be automatically applied.
Naming method See the example below.
In order to make it easier to understand, the nesting of the following tags is written in the following form:
<p> <img /> <span> a <strong> b </strong> c </span> </p>
These tags are nested together. The img and span tags are embedded in the p tag. The strong tag is embedded in the span tag. The img tag, span tag, and strong tag can be called subordinate tags of the p tag. The img tag and span tag can be called sub-tags of the p tag. The strong tag It is a child tag of the span tag, and vice versa is the superior tag or parent tag. Note that the strong tag is not a sub-tag of p, but a subordinate tag of p tag.
Then let’s look at two examples to illustrate this selector:
Example 1:
<p><img><span>a<strong>b</strong>c</span></p>
p span{font-color:#038;}Such a selector refers to the subordinate tag span tag embedded in the p tag style.
p strong{font-color:#865;}
Such a selector refers to the style of the subordinate tag strong tag embedded in the p tag
p span strong{ font-color:#921;}
This refers to the style of the subordinate tag strong of the subordinate tag span tag of tag p.
Note: As long as it is a subordinate tag, it can be defined in this way. As shown in this example, if there are other span tags in the document that are not subordinate tags of the p tag, this style will not be applied. The same below.
Example 2:
<p class=”abc”><img><span>a<strong>b</strong>c</span></p>
can also be defined like this:
.abc span{font-color:#038;}
.abc strong{font-color:#865;}
.abc span strong{font-color:#921;}This refers to the style of the subordinate tag of the tag with style abc applied.
Example 3:
#abc{}
<p id=”abc”><img><span>a<strong>b</strong>c</span></p>If the id style is defined and a tag id uses this attribute value, it can also be defined like this:
#abc span{font-color:#038;}
#abc strong{font-color:#865;}
#abc span strong{font-color:#921;}Pseudo class: Only introduce several status style definition methods of pseudo attributes of hyperlinks.
This style will be automatically applied to the tag a before the pseudo attribute.
a:link{}The style of the hyperlink when it is not visited.
a:active{}The style when the left mouse button is pressed but not released on the hyperlink.
a:hover{}The style when the mouse passes over the hyperlink.
a:visited{}The style of the hyperlink after being visited.
*Selector:
The name defined by this selector style is just a wildcard "*", which refers to all tags. In other words, all tags will automatically apply this style.
*{}
How to use styles
When the browser reads a style sheet, it will format the document according to the style sheet. There are three ways to insert a style sheet:
External style sheet
An external style sheet is ideal when styles need to be applied to many pages. Using external style sheets, you can change the look of your entire site by changing one file.
Internal style sheet When a single file requires special styling, an internal style sheet can be used. You can define internal style sheets via the ead><link rel="stylesheet" type="text/css" href="mystyle.css"></head>