Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what is the composition of css stylesheets". In daily operation, I believe many people have doubts about what constitutes css stylesheets. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about what css stylesheets are made of. Next, please follow the editor to study!

The three components of the css style sheet: 1, selector, used to tell the browser to specify which objects the style will act on on the page; 2, attributes, which are the set style options provided by CSS, mainly including font attributes, text attributes, background attributes, layout properties, etc.; 3, property values, which are valid values for the specified attributes, and the attribute and attribute values are separated by the ":" sign.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Composition of css stylesheet

There are three parts in the CSS stylesheet: selectors, attributes, and property values. The syntax style is as follows:

Selector {attribute: attribute value;}

The syntax is as follows:

Selector: also known as selector, is a very important concept in CSS. All tags in HTML are controlled by different CSS selectors.

It tells the browser which objects the style will act on on the page, which can be a tag, all web page objects, specify class or id values, and so on. When parsing this style, the browser renders the display of the object according to the selector.

Property: the set style options provided by CSS, including font properties, text properties, background properties, layout properties, boundary properties, list item properties, table properties and so on. Some of these properties are only partially supported by browsers, so the use of the CSS property becomes more complex.

Attribute value (value): specifies a valid value for the attribute. The property and the property value are separated by a ":" sign. Use ";" to separate when there is more than one property value.

CSS selector

CSS selectors are commonly used tag selector, category selector, include selector, ID selector, class selector, and so on. Different HTML tags can be controlled by using a selector to achieve each effect. The three basic selectors are described in detail below.

1. Tag selector

HTML pages are made up of many standard machines, such as picture tags.

, hyperlink tags, table tags, etc., while the CSS tag selector declares which tags on the page adopt which CSS tags, such as the a selector, which is used to declare the style of all tags on the page.

For example: define a tag selector in which the font and color of the hyperlink are defined.

A {font_size:9px; color:#F93;}

two。 Category selector

Using the tag selector is very fast, but it has some limitations. If the page declares the tag selector, then all the contents of the tag on the page will change accordingly. There are three tags added to the page, and if you want each display to be different, you can't use the tag selector, so you need to introduce a category selector.

The name of the type selector is defined by itself and is defined with "." The defined attributes and attribute values should also follow the CSS specification. To apply the HTML tag of the category selector, simply declare it using the class attribute.

Example:

.one {font-family: Arial; font-size:24px; color:red;} .two {font-family: Arial; font-size:16px; color:red } .three {font-family: Arial; font-size:12px; color:red;} Application Select one

Body content 1

Apply selector two

Text content 2

Apply selector three

Text content 3

3.ID selector

The ID selector is selected to add style through the ID attribute in the HTML page, which is basically the same as the category selector, but it should be noted that because the HTML page cannot contain two identical ID tags, the defined ID selector can only be used once.

Name the ID selector with a "#" sign followed by the value of the ID attribute in the HTML tag.

For example, use the ID selector to control the styles in the page.

# first {font-size:18px} # two {font-size:24px} # three {font-size:36px} ID selector 1

ID Selector 2

ID selector 3

Extended knowledge: new Features of CSS 3

Module and Modular structure

The overall structure is not adopted in CSS 3, but the modular structure of division of labor and cooperation is adopted. This model structure is adopted to avoid the situation that the browser does not fully support a module. If the whole is divided into several modules, each browser can choose which module to support and which module not to support.

The common modules in CSS 3 are shown in the following table:

Module name function description Basic Box Model defines various box-related modules Line defines various line-related styles Lists defines various list-related styles Text defines various text-related styles Color defines various color-related styles Font defines various font-related styles Background and Border defines various backgrounds and borders-related styles Paged Media defines various headers, footers, The style of page element data such as the number of pages Writing Modes defines how the text data in the page is laid out so far The study on "what css stylesheets are made of" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.