Home > Web Front-end > HTML Tutorial > Three selectors of CSS_html/css_WEB-ITnose

Three selectors of CSS_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:54:07
Original
993 people have browsed it

Tag selector

Tag selector is actually a tag in html code. Such as , ,

,

, in the code editor on the right. For example, the following code:

p{font-size:12px;line-height:1.6em;}
Copy after login

The function of the above css style code is to set the font size of 12px for the p tag and the line spacing to 1.6em.

Class selector

Class selector is the most commonly used in CSS style coding, such as the code in the code editor on the right : It can be realized that the fonts of "cowardly as a mouse" and "courage" can be set to red.

Grammar:

<strong>.</strong>类选器名称{css样式代码;}
Copy after login

Note:

1. Begins with a dot in English

2. Among them, the category The selector name can be named arbitrarily (but do not name it in Chinese)

How to use:

Step 1: Use appropriate tags to mark the content to be modified, as follows:

<span>胆小如鼠</span>
Copy after login

Step 2: Use class="class selector name" to set a class for the label, as follows:

<span <strong>class="stress"</strong>>胆小如鼠</span>
Copy after login

Step 3: Set the class selector css style, as follows :

.stress{color:red;}/*<strong>类前面要加入一个英文圆点</strong>*/
Copy after login

ID Selector

In many ways, ID selectors are similar to class selectors, but there are some important ones Differences:

1. Set id="ID name" for the label instead of class="class name".

2. The ID selector is preceded by the pound sign (#) instead of the English dot (.) .

The code editor on the right is a complete example of the ID selector.


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template