Basic knowledge of web page production (html) (3) html+css

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.

1.Class selector:

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 e388a4556c0f65e1904146cc1a846bee tag on the page will be displayed in the color #6ec.

ID selector:

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.

b3f2490baf53fb615269462d7d42eac1 tag in the head section.

<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style></head>

Inline styles

When special styles need to be applied to individual elements, you can use inline styles. The way to use inline styles is to use the style attribute in the relevant tag. Style properties can contain any CSS property. The following example shows how to change the color and left margin of a paragraph.

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

【Related recommendations】

1. Free html online video tutorial

2. html development manual

3. php.cn original html5 video Tutorial

The above is the detailed content of Basic knowledge of web page production (html) (3) html+css. For more information, please follow other related articles on the PHP Chinese website!