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

This article mainly introduces "what are the knowledge points of css rules and selectors". In daily operation, I believe many people have doubts about the knowledge points of css rules and selectors. The editor consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the knowledge points of css rules and selectors?" Next, please follow the editor to study!

What is css?

● css refers to cascading style sheets (cascading style sheets)

The ● style defines how html elements are displayed

● styles are usually stored in stylesheets

● adds styles to html4.0 to solve the problem of separation of content and presentation.

● external stylesheets can greatly improve productivity

● external style sheets are usually stored in css files

● multiple style definitions can be cascaded into one

Note: before learning css, you need to have basic knowledge of html. It has been roughly introduced before. It will be described in detail later.

Css allows you to apply specific styles to html elements

The main benefit of css is that it allows you to separate style from page content

Only apply html, style and page content mixed together, such a page will become difficult to maintain

All web page styles can (and should) be separated from html documents and created as a separate css file to use.

Second, inline embedded external reference css

Inserting a style sheet in an web document is one of the ways to use inline styles. Use inline styles to apply unique styles to individual elements

To use inline styles, add style attributes to the related tags.

The following example shows how to create a paragraph with a gray background and white text:

This is an example of inline styling.

The running effect is as follows:

◆ defines the internal style in the element in the tag

For example: the style in the following code will work on all

In the paragraph

P {

Color:white

Background-color:gray

This is my first paragraph.

This is my second paragraph.

As a result, all the paragraphs turned into white fonts and gray backgrounds.

◆ external reference css: saves all css styles in an extension file with the same suffix .css

Then introduce the css file through the html tag in the section of the html page

Examples are as follows:

Html Code:

This is one of my paragraphs.

This is my second paragraph.

This is my third paragraph.

Css section:

P {

Color:white

Background-color:gray

All paragraphs are in the same style

Both the ● relative path and the absolute path can be used to define the href of the css file. In our example, the path is relative because the css file and the html file are located in the same directory

Three css rules and selector

Css is a style rule interpreted by a browser and then applied to the corresponding element in the document.

The style rule has three parts: selector property value

For example, the title color can be defined as:

H2 {color:orange;}

The selector points to the html element that needs to be styled

The declaration block contains one or more declarations separated by semicolons

Each declaration contains an attribute name and value separated by a colon

For example:

H3 {

Color:red

Background:#fff

The most common and easy-to-understand selector for ● is the type selector. The selector targets the element type on the page

For example, to locate all paragraphs on a page

P {

Color:red

Font-size:130%

● css declarations always end with a semicolon. The declaration block is surrounded by curly braces.

The id selector allows you to set html elements with id attributes, regardless of their location in the document tree.

Examples are as follows:

Html section:

What do you get for the holiday this year?

W3cschool members, give it away and say yes!

Css section:

# intro {

Color:white

Background-colot:gray

To select an element with a specific ID, use "#" and then follow it using the element's id

Class selectors work in a similar manner. The main difference is that the id of each element is unique, id can only be applied once per page, while class can be used multiple times on the page.

● to select elements with a specific class, use "." Symbol, followed by the name of the class

Avoid using numbers to name id and class

.mytext {

Color:black

Set the text color of class= "mytext" to black

● these selectors are used to select elements that are descended from another element. When selecting levels for future generations, you can choose as many levels as you need.

For example, to locate only the elements in the first paragraph of the "intro" section

Html section:

This is a paragraph.

This is the second paragraph.

This paragraph is not in the intro section

This paragraph is not in the intro section either.

Css section:

# intro .first em {

Color:pink

Background-color:gray

Therefore, only the selected elements will be affected.

# test p {

Color:red

Example above: set the color to red for all paragraphs belonging to id= "test" elements.

Four css comments

/ * this is a comment * / the comment is used to interpret your code and the browser will automatically ignore the comment. Similar to multiline comments in java

Cascading and inheritance of five css

The final appearance of the page is the result of a combination of different styles

Form a cascade through the three main sources of the style:

● a stylesheet created by the author of a page

Default styles for ● browsers

● user-defined style

Inheritance refers to the way properties flow on the page. Unless otherwise defined, child elements usually inherit the characteristics of the parent element

For example:

Body {

Color:green

Font-family:Arial

Passers-by

Result: the color of passerby An is green, and the style effect is the same as its parent element.

Because the paragraph tag (child element) is within the body tag (parent element), it will adopt any style assigned to the body tag.

At this point, the study of "what are the knowledge points of css rules and selectors" is over. I hope to be able to 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.