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

This article mainly explains the "CSS grammar, selector, declaration method", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's train of thought slowly in depth, together to study and learn "CSS grammar, selector, declaration method"!

1. HTML form

Insert title here

Account number:

Password:

Gender:

Male

Female

Interests and interests:

Music

Read a book

Play ball

Avatar upload:

I have read and voluntarily abide by this agreement!

City:

Please select

Beijing

Shanghai

Guangzhou

Shenzhen

Hangzhou

Brief introduction:

This is the default value for the text field

II. CSS

CSS refers to cascading stylesheets. Styles define how HTML elements are displayed. Styles are usually stored in stylesheets.

3. How to use CSS

Inline mode: styles are defined in a single HTML element

Internal style sheets: styles are defined in the header element of the HTML page

External style sheet: define the style in an external CSS file (.css) referenced by the HTML page

Css style presentation

/ * comments on css * /

H3 {color:red;}

CSS

There are three styles of CSS

1. Inline style

two。 Internal style

3. External styl

IV. Characteristics of CSS rules

Inheritance: the declaration of the parent element can be inherited by the child element, such as font, color, etc.

Cascading: if there are multiple css rules for the same element, non-conflicting declarations can be superimposed

Priority: if there are multiple css rules for the same element, the declaration of conflicts shall prevail.

Css priority demonstration

/ * 1. Inheritance: the style of the parent element can be inherited by the child element (color, font) * /

Body {

Font-family: "stylish", "Microsoft Yahi"

}

/ * 2. Cascading: set a different declaration to an element and the effect will be superimposed * /

H2 {

Color:red

}

H2 {

Font-size:50px

}

/ * 3. Priority: set the same declaration for the same element, and the effect is subject to the latter, that is, the principle of proximity * /

H3 {

Color:green

}

/ *. /

H3 {

Color:yellow

}

HELLO WORLD!

Hello, World!

5. CSS selector

Element selector: select the target of the css action by the element name, such as

, etc.

Class selector: allows style syntax to be specified in a way independent of document elements: .className {}

Id selector: select the only element whose id is equal to a value. Specifies the style in a way independent of the document element, which acts only on the value of the id attribute * /

Selector group: write a set of selectors to select the union of the targets corresponding to each selector

Selector demonstration

/ * 2. Class selector: select all elements whose class is equal to a certain value. Class is a classification that programmers add to elements according to logic * /

.day {

Color: blue

}

/ * 3.id selector: select the only element whose id is equal to a certain value. Specifies the style in a way independent of the document element, which acts only on the value of the id attribute * /

# fighting {

Color:red

}

/ * 4. Selector group: write a set of selectors to select the union of the targets corresponding to each selector * /

.day, # fighting {

Font-weight: bold

}

/ * 5. Derived selector * /

/ * 5.1 Select the descendants of an element * /

# p5 b {

Color:red

}

/ * 5.2 Select the son of an element * /

# P5 > b {

Font-size: 30px

}

/ * 6. Pseudo-class selector: select a selector according to the state of the element * /

/ * 6.1 Select an unvisited hyperlink * /

A:link {

Color:green

}

/ * 6.2 Select a hyperlink that has been visited * /

A:visited {

Color: red

}

/ * 6.3 Select the button in the active state (clicking) * /

# i1:active {

Background-color: blue

}

/ * 6.4 Select a focused text box, password box, text field * /

# i2:focus {

Background-color: green

}

/ * 6.5 Select the picture of mouse hover (touch) * /

Img:hover {

Width: 250px

Height: 250px

}

Yesterday was another busy day.

Today is also a busy day.

The day after tomorrow is another busy day.

Anyway, life has to go on.

Room 5, Building 5, No. 200, Haidian District, Beijing

Baidu

Taobao

Wrong website

Border:

Insert title here

/ * 1. Four edges set the same border * /

P {

Border:1px dashed red

}

/ * 2. Set the border for a single edge * /

/ * left/right/top/bottom*/

H2 {

Border-left: 10px solid blue

}

/ * 3. The general width of the block element is 100% by default, and the height is adaptive. The more content, the higher it is. When he is given a fixed height, it may cause content overflow, * /

P {

Width: 300px

Height: 60px

/ * handling in case of overflow * /

Overflow:auto

}

Li Bai

Li Bai (701-762), a great romantic poet in Tang Dynasty, was a great romantic poet in Tang Dynasty.

It is praised as "Poetry Immortal" by later generations, and du Fu is also called "Li du", in order to distinguish it from the other two poets Li Shangyin and du Mu, namely "Little Li du".

Du Fu and Li Bai are also known as "Da Li du". According to the Book of the New Tang Dynasty, Li Bai is the ninth grandson of Emperor Xingsheng (Liangwuzhao King Li Jie).

Of the same clan as the kings of the Li and Tang dynasties. He is cheerful and generous, likes drinking and writing poems, and likes to make friends.

Margin:

Insert title here

Div {

Border:1px solid red

Width:100px

Height:100px

}

/ * 1. Four edges set the same margin () * /

# d1 {

Padding:20px

Margin:30px

}

/ * 2. Four sides set different margins (top right, bottom left) * /

# d2 {

Padding:10px 20px 30px 40px

Margin:40px 30px 20px 10px

}

/ * 3. Set margins for a single edge

Left/right/top/bottom*/

# d3 {

Padding-left: 20px

Margin-bottom: 40px

}

/ * 4. Set the same margin to the edge * /

/ * up and down first, then left and right * /

# d4 {

Padding:20px 40px

Margin:30px 10px

}

/ * 5. Special case of setting margins on edges * /

/ * when setting the outer margin, if the value of the left and right outer margin is auto, the element will be centered horizontally * /

# d5 {

Margin:20px auto

}

D0

D1

D2

D3

D4

D5

Thank you for your reading, the above is the content of "CSS grammar, selector, declaration method", after the study of this article, I believe you have a deeper understanding of CSS syntax, selector, declaration method, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.