Shulou(Shulou.com)06/01 Report--

This article mainly introduces the CSS level selector how to set the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe everyone will read this CSS level selector how to set the article will have some gains, let's take a look at it.

In order to make the style of web page elements richer, and in order to make the content and style of web pages can be separated, CSS was born from this idea. CSS is an acronym for Cascading Style Sheets, which means Cascading Style Sheets. With CSS, most of the presentation style tags in html are discarded, html is only responsible for the structure and content of the document, and the presentation is completely handed over to CSS, html documents become more concise.

CSS Basic Syntax

CSS is defined as:

Selector {Attribute: Value;}

Selectors are names that associate styles with page elements, attributes are style attributes you want to set, and each attribute has one or more values. Colons are used between attributes and values, semicolons are used between one attribute and value and the next attribute and value, and the last semicolon can be omitted. Code example:

CSS can be introduced into a page in three ways:

1. Inline style: Write style directly on the label through the style attribute of the label.

2. Embedded: Create embedded style sheets on web pages through style tags.

3. External Chaining: Link external style files to the page through the link tag.

1. Label selector

Label selectors, which have a wide range of influence, are generally used to make general settings, or in hierarchical selectors.

Examples:

2. Class selector

Select elements by class name. One class can be applied to multiple elements, and multiple classes can also be used on one element. It is flexible and reusable. It is the most widely used selector in CSS.

Examples:

3. Level selector

Mainly used in label nesting structure, hierarchical selector is a selector written in combination with the above two selectors. It can be used in combination with label selector to reduce naming, and can also limit the scope of style through hierarchy.

Examples:

width Sets the width of the element (label), e.g. width:100px;

height Sets the height of the element (label), e.g. height:200px;

background Set element background color or background image, such as background:gold; Set element background color to gold

border Set the border around the element, for example: border:1px solid black; Set the border around the element to be a solid black line 1 pixel wide

The above can also be divided into four sides of the writing, respectively set the four sides:

border-top Set the top border, such as border-top:10px solid red;

border-left Set the left border, such as border-left:10px solid blue;

border-right Set the right border, such as border-right:10px solid green;

border-bottom sets the bottom border, e.g. border-bottom:10px solid pink;

padding Sets the distance between the content of the element and the border of the element, also known as padding, such as padding:20px;padding is set at the same time 4 edges, can also be split into four edges like border: padding-top, padding-left, padding-right, padding-bottom.

margin Sets the distance between the element and the outside world, also known as the outer margin, such as margin:20px;margin is set to 4 edges at the same time, or can be split into four edges like border: margin-top, margin-left, margin-right, margin-bottom.

float Set element float, float allows block elements to be arranged in a row, float is divided into left float: float:left; right float: float:right;

color Set the color of the text, such as: color:red;

font-size Sets the size of the text, such as font-size:12px;

font-family Set the font of the text, such as font-family:'Microsoft Yahei'; to avoid incompatibility with Chinese characters, it is generally written as font-family:'Microsoft Yahei';

font-weight Set whether text is bold, such as font-weight:bold; Set bold font-weight:normal Set not bold

line-height Sets the line height of the text, such as: line-height:24px; indicates that the text height plus the distance between the text is 24px, that is, the height occupied by each line is 24px

text-decoration Set the underline of the text, such as: text-decoration:none; Remove the underline of the text

text-align Set text horizontal alignment, such as text-align:center Set text horizontal center

text-indentSet the first line indent of text, e.g. text-indent:24px; Set the first line indent of text to 24px

About "CSS hierarchy selector how to set" the content of this article is introduced here, thank you for reading! I believe everyone has a certain understanding of the knowledge of "how to set CSS level selector." If you still want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.