ONE THOUSAND AND THIRTY --css routine use

We have already learned the basis of common html, you can draw a direct most of 'naked', then so painted relatively simple, then how could he become more beautiful it? Leads to talk about here today --css

Let's look at how to add pages modified effect

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

</body>
</html>

The code above is a simple page, and then use the style attribute it first div decorate

<div style="background-color: #2549a2;height:30px">1</div>

What if we need to put all the div have the same effect decorate, the easiest way is to add each div have the same style properties

<body>
    <div style="background-color: #2549a2;height:30px">1</div>
    <div style="background-color: #2549a2;height:30px">2</div>
    <div style="background-color: #2549a2;height:30px">3</div>
</body>

So if you have a good number of div to be decorated, showing that this approach does not work, let's look at how to do division!

And CSS selectors

1.css file

Here we must first introduce the concept of css, it is in the style of the property on a piece, written in a style tag

<body>
    <style>
        #i1{background-color: red;
            height: 30px;}
    </style>
    <div id="i1">1</div>
    <div>2</div>
    <div>3</div>
</body>

This is a # i1 id selector , as long as the id and labeling requirements of the back as you apply directly. But as I said before, id controls is not repeated, that we can not have several controls to write several groups of style effects, and see a new attribute of div --class

<body>
    <style>
        .c1{background-color: red;
            height: 30px;}
    </style>
    <div class="c1">1</div>
    <div class="c1">2</div>
    <div class="c1">3</div>
</body>

that's it. This class is the most commonly used class selector .

Another option is: tag placed directly in front of the effect

<body>
    <style>
        div{background-color: red;
            height: 30px;}
    </style>
    <div class="c1">1</div>
    <span class="c1">2</span>
    <div class="c1">3</div>
</body>
</html>

This way is called the tag selector .

The following is a hierarchical label

<body>
    <style>
        span div{background-color: red;
            height: 30px;}
    </style>
    <div class="c1">1</div>
    <span class="c1">
        <div>123</div>
        12345
    </span>
    <div class="c1"></3div>
</body>

We define the span of only play in the div in css effect. Is the level selector . Or call the association picker. He can choose multi-level, each level separated by a space , but do not use too deep.

Combination selector

<body>
    <style>
        #i1,#i2,#i3{background-color: red;
            height: 30px;}
    </style>
    <div id="i1">1</div>
    <div id="i2">2</div>
    <div id="i3">3</div>
</body>
</html>

We put in a comma separated css multiple values is realized select multiple controls.

Attribute selectors

The property attribute selector is done

<body>
    <style>
        input[type='text']{width:100px;height:200px;} 
    </style>
    <div id="i1">
        <input type="text">
        <input type="password">
    </div>
    <div id="i2">2</div>
    <div id="i3">3</div>
</body>

First screening by the choice to re-label by property.

The above is the most common selector

In the form of CSS and priority

css priority

We look at the code

<body>
    <style>
        .c1{background-color: pink;}
        .c2{background-color: red;}
    </style>
    <div class="c1 c2" style="background-color: blue;">123</div> 
</body>

What effect is it out? No shots, and blue. So the priority is the css: style on the label, then the order is written in the css (on the lower priority).

css form of existence

We are now in the css, but if there are multiple html files need to use this period effect, copy and paste all over again in every document is clearly unrealistic in the body tag. Then how can we be more efficient? We can put all the code out in style in a file, the file is css file. Then we head in this document down into it

##########test.css##########
.c1{background-color: red}
.c2{background-color: black}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel='stylesheet' href="test.css">
</head>
<body>
    <div class="c1">1</div>
    <div class="c2">2</div>
    <div class="c1">3</div>
</body>
</html>

In this way, look at the introduction of each html file, you can use this css file to improve the reusability of code.

ONE THOUSAND AND THIRTY --css routine use

Guess you like