Front-end Base CSS rules

CSS syntax

A CSS rule consists of two main parts: a selector, and one or more declarations.

selector {property:value;             Property:value; ... property:value}

Four ways to introduce CSS 1. inline

Inline is a CSS style that is set in the Style property of the tag. This approach does not reflect the advantages of CSS, it is not recommended to use

2. Embedded

Inline is a set of CSS styles that are written in the

3-Link

Introduce a. css file into an HTML file

4. Import type

Introduce a standalone. css file into an HTML file, import using CSS rules to introduce external CSS files,<style> tags are also written in the

CSS Selector

Basic Selector

Combo Selector

E,f a multi-element selector that matches all E or F elements, separated by commas between E and F:d iv,p {color: #f00;} E F descendant element selector that matches all f elements that are descendants of the e element, separated by a space between E and F: Li a {font-weight:bold;} e > F child element Selector, matching all elements of e element F:d IV > P  {color: #f00;}   E + F adjoins the element selector, matching all sibling elements immediately following the E element F:d IV + P {color: #f00;} E ~ F Ordinary Sibling selectors (separated by dashes):. DIV1 ~ p{font-size:30px;}

Note, about tag nesting:

In general, block-level elements can contain inline elements or some block-level elements, but inline elements cannot contain block-level elements, which can contain only other inline elements. It is important to note that P tags cannot contain block-level labels.

Pseudo class

Anchor pseudo-class: Designed to control the display effect of links

"'        a:link (links that have not been contacted) are used to define the general state of the link.        A:hover (the state on which the mouse is placed on the link) for creating visual effects.                a:visited (visited links), used to read articles, can clearly judge the links that have been visited.                A:active (the state when the mouse is pressed on the link), which is used to show the link state when the mouse is pressed.                pseudo-Class selectors: pseudo-class refers to the different states of the label:                           a ==> point over state no point over state mouse hover state activation state                A:link {color: #FF0000}/* not visited link */                a:visited {C Olor: #00FF00}/* Visited link */                a:hover {color: #FF00FF}/* Mouse moved to link */                a:active {color: #0000FF}/* Selected link */format: Tag: pseudo Class name {CSS code;} '

The priority of the selector

Inheritance of CSS

Inheritance is a major feature of CSS, and it is dependent on the ancestor-descendant relationship. Inheritance is a mechanism that allows a style to be applied not only to a particular element, but also to its descendants. For example, a body-defined color value is also applied to the text of a paragraph.

Precedence of CSS

The so-called CSS precedence refers to the order in which CSS styles are parsed in the browser.

The particularity of the style sheet describes the relative weights of the different rules, and its basic rules are:

1 The weights of the inline style sheet are highest style= ""------------1000;

2 The number of ID attributes in the statistics selector. #id--------------100

3 Number of class attributes in the statistics selector: class-------------10

4 the number of HTML tag names in the statistics selector. P---------------1

By adding the number of strings to bits by these rules, the final weight is obtained, and then the comparison is based on the left-to-right order.

Front-end Base CSS rules