Home >Web Front-end >Front-end Q&A >What are the style rules of css?

What are the style rules of css?

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-05-14 17:15:229488browse

CSS style rules are composed of two basic parts: selectors and declaration blocks. The selector determines which elements to apply the style to; the declaration block defines the corresponding style, which is contained within a pair of curly braces and consists of one or more declarations, and each declaration consists of an attribute and a value, separated by a colon. open.

What are the style rules of css?

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

CSS

The abbreviation of Cascading Style Sheet is CSS, which is the abbreviation of English Cascading Style Sheets. It is a standard defined and maintained by the W3C, a computer language used to add styles (fonts, spacing, colors, etc.) to structured documents (such as HTML documents or XML applications).

Overview

Both readers and authors of a web page can use CSS to determine the color, font, layout and other display characteristics of the file. The main purpose of CSS is to separate the structure of the file (written in HTML or other related languages) from the display of the file (CSS). This separation has many benefits:

  • The readability of the file is enhanced

  • The structure of the file is more flexible

  • Authors and readers can decide the display of the file themselves

  • The structure of the file is simplified

CSS can also use other display methods , such as sounds (if the browser has a reading function) or sensory devices for blind people. In addition, CSS can be used with XHTML, XML or other structured files, the only condition is that the browser displaying such files is equipped to accept CSS.

Each class or id in the HTML file can have its own display characteristics, and each HTML structure without id characteristics can also have its own display characteristics. Some of these structures are needed by HTML itself, and some are specially set up for CSS.

The advantages of using CSS are:

  • The display information of an entire website or part of a web page is concentrated in one place, and it is very easy to change them. Convenient

  • Different readers can have different styles. For example, some readers need larger fonts

  • The range of the HTML file itself has become smaller , its structure is simple, it does not need to contain displayed information

Style rules

The syntax of CSS is very simple, it uses a set of English words to express different styles and characteristics.

A style sheet consists of a set of rules. Each rule consists of a "selector" and a definition part. Each definition section contains a set of definitions separated by a semicolon (;). This set of definitions is placed between a pair of braces ({ }). Each definition consists of an attribute, a colon (:), and a value.

Selector

Usually an element in the file, such as ,

, and other tags in html, multiple Selectors can be separated by commas (,).

Property

CSS1, CSS2, and CSS3 specify many properties for the purpose of controlling the style of the selector.

Value

refers to the setting value accepted by the attribute, which can be composed of various keywords. Multiple keywords are mostly separated by spaces.

When you want to set styles for a range that does not have a tag definition, you can use the

and tags.

Regarding CSS style rules, we have three points to pay attention to:

Proximity principle

  • Priority relationship, From high to low: inline styles > internal styles > external styles.

Inheritance Principles

  • In inheritance, most properties of the border class cannot be inherited, such as padding, margin, background, etc.;

  • Tables cannot inherit the style of the parent class.

Override principle

  • Style conflicts due to inheritance will be evaluated by the nearest ancestor element;

  • When the inherited style conflicts with the directly specified style, the directly specified style gets the value;

  • When the directly specified style conflicts, the element with the higher style weight gets the value ;When the style weights are the same, the latter gets the value;

  • ! important style attributes cannot be overridden.

Recommended learning: css video tutorial

The above is the detailed content of What are the style rules of css?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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