CSS style Sheets

CSS (cascading style Sheets): Cascading style sheets, also called Cascading style sheets, referred to as style sheets

CSS implements the separation of structure from performance

Improved reusability and maintainability of code

The relationship between CSS and XHTML

XHTML for building the structure of a Web page

CSS styles for building HTML elements

XHTML is structure, CSS style is performance

XHTML attributes and CSS style usage principles

We recommend using CSS styles instead of XHTML attributes as much as possible

If the property is an XHTML-specific property, the XHTML attribute is used

If the property is a CSS style-specific property, the CSS style property is used

Linking to an external CSS file

Create a CSS file and write CSS rules

-css file extension. css

Linking to an external CSS file

Add <link/> elements inside the

<link type= "Text/css" rel= "stylesheet" media= "Media type" href= ""/>

Written in the header document

Writing <style> elements inside the

Add a style rule to the <style> element

<style type= "Text/css" >

h1 {Color:blue;}

</style>

Written inside the tag

The internal CSS style is implemented through the style property of the XHTML markup.

<p> General paragraph </p>

<p style= "color:red;" > paragraph (internal style) </p>

Precedence of CSS application methods

Inline style Highest

Interior style second

Lowest external style

internal and external styles conflict, depending on the order in which they are written

CSS Selector

Type Selector

The type selector is also known as the element selector

Type selector matches a specific HTML element in the document tree

<style>p{text-align:left;color:red;} </style>

Class Selector

Class selectors start with a point, and the class name cannot begin with a number.

Class selector matches elements using the specified class

The use of class selectors is accomplished by using the class property of the element

Multiple class names are separated by a space

<style>.class{text-align:left;color:red;} <style>span.class{text-align:left;color:red;}

Only the span element with the class attribute takes effect

ID Selector

ID selector starts with #

The ID selector matches the unique element in the document

The use of the ID selector is implemented by the ID of the HTML element

Note: An HTML element exists with an id attribute, then the ID can be applied to the

-CSS style

-javascript

-jquery

Group Selector

Group selectors are shorthand for selectors with the same properties

A comma-delimited selection of selectors

Descendant Selector

Descendant selectors are also known as derived selectors

Defines a style based on the context of the element in its position

Descendant selectors require that there is at least a parent-child relationship between selectors

Selectors are separated by a space

Descendant Selector

Defines a style based on the context of the element in its position

Descendant selectors require that only parent-child relationships exist between selectors

Selectors separated by greater than sign

Pseudo class Selector

CSS pseudo-classes are used to add special effects to certain selectors

The syntax of the CSS pseudo-class selector is:

Selector: Pseudo class Selector

CSS pseudo-class selectors can be divided into

-Dynamic elements

-ui element State Pseudo-class

Dynamic pseudo-classes are categorized based on the characteristics of HTML elements

Dynamic pseudo-class cannot appear in document source code or document tree

Dynamic pseudo-class can also be divided into

-Link pseudo-class

: Link for links that have not been accessed

: visited, applicable to visited links

-User-driven perjury class for rendering user actions

: hover, user-specified HTML element

: active,html element activated by user

: Focus, applied to the HTML element to get focused

a:link {color:red;text-decoration:none;} A:visited{color:black;text-decoration:underline;}

UI element State Pseudo-class

: Enabled, which represents a UI element that is enabled

: Disabled, which represents a UI element in the disabled state

: checked, which represents the UI element being selected

Pseudo element Selector

CSS pseudo-elements are used to set special effects to certain selectors

: Before, used to insert new content before the content of UN sue

: After, used to insert new content after the element's contents

The priority of the selector

Selector type	Weighted value
Type Selector	0,0,0,1
Pseudo element Selector	0,0,0,1
Class Selector	0,0,1,0
Pseudo class Selector	0,0,1,0
ID Selector	0,1,0,0
inline style	1,0,0,0

The weights of the selectors are added together, with a big priority, and if the weights are the same, then the precedence of the defined values

This article from "Qing rime from the Rain Fetish Moon" blog, declined reprint!

CSS style Sheets