Detailed tutorial on getting started with css_html/css_WEB-ITnose

1 First create a new css file in the webroot folder

You can name it style.css. The rendering is as follows:

                                                                                                                                                                                                     

/title>

3 css file format

Css rules mainly consist of selectors and declarations. A declaration consists of attributes and values. A rule can have multiple declarations. Of course, there can also be multiple selectors separated by commas

In this example, h1 is the selector, color and font-size are attributes, and red and 14px are values.

h1{color:red; font-size:14px;}

h1,h2,h3,h4,h5,h6{

color : green;

}

In order to look concise and clear, one statement occupies one line

                                                                                                                                                                                                                                              . Remember that there must be a semicolon ";" after a statement

The selector and the statement are separated by a "space"

We wrap the statement with curly brackets "{}"

If you don’t know what value is appropriate, you can directly search online

4 Introduction to css selector

4.1 CSS element selector

is also called a type selector, which is an element of html, such as p, a, h1. It can even be html itself. h1{font-family: sans-serif;}

4.2css selector grouping

Group multiple elements Grouped together

h1,h2, h3, h4, h5, h6 {color:blue;}

4.3 Class selector

in html In the file

This heading is very important.

This paragraph is very important.

In the css file

If only If you want to make changes to the h1 element

h1.important{color:blue;}

If you want to make changes to all the same classes

*.important {color:red;}

Of course, you can also omit the asterisk "*"

But be sure to pay attention to the dot "." in front of the class

4.4 ID Selector

In html file

This is a paragraph of introduction.

In css file

#intro{font-weight:bold;}

First, specify an id name in the html file, and then in the css file, add a pound sign to the id name "# ”

4.5 Attribute selector

Applicable to attributes of a certain element, such as the attribute href of a element

a[href]{color: red;} This will make the font of the link red

4.6 Descendant selector (including selector)

The descendant selector can be selected Elements that are descendants of an element

In an html file

This is a important heading

< p>This is a important paragraph.

In the css file

h1em {color:red;}

This way The effect is that only the above important turns red

4.7 pseudo-class

For example, in html

sometext

sometext

in css

p:first- child{

color: red;

}

The effect is that only the first "some text" turns red

4.8 pseudo-element

In html file

You can use the :first-letter pseudo-element to add a special effect to the firstletter of a text!

in css file

p:first-letter

{

color:#ff0000;

font-size:xx-large

}

In this way, the initial letter "Y" will become is red and becomes larger.

Finally, I would like to give you some advice, w3shcool has a relatively large introductory training for beginners in website development