introducing css way selector

css way of introduction

08-css introducing a manner _ inline

Inline style:
- Add attributes in HTML tags
- The minimum scope, the role of the current label; the priority of the highest inline style

<body>
    <h3 style="color: red;">h3标签</h3>
    <h3>哈哈</h3>
</body>

_ introduction embodiment two inner css

Internal Style:
- Inside an HTML page write CSS code, generally written in the <head> , a style tag, attribute: type = "text / css"
- The role of the entire page is currently valid

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            h3{color: chocolate;}
        </style>
    </head>
    <body>
        <h3>h3标签</h3>
        <h3>哈哈</h3>
    </body>
</html>

_ introduction embodiment three external css

External style:
- CSS style definitions in another file, the suffix .css (text file)
- In the HTML page, the introduction of style sheets, use the link tags written in the head
  - Attribute: href = "css file path" | type = "text / css" | rel = "file and the current introduction page What is the relationship"
- Max. Reach, which page introduction, which effectively

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="css/1.css"  type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <h3>h3标签</h3>
        <h3>哈哈</h3>
    </body>
</html>

css/1.css

h3{
    color: blue;
}

css selector

11-css substantially selector

The selector is the role of HTML tags to style

Label element selector with HTML tags name as a selector, classified by tag name, specify the unified CSS style for the page in some sort of label. The basic syntax is as follows: 标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
ID selector id selector uses the "#" is identified, followed by the id. The basic syntax is as follows: the need in the html tags, add the attribute id = "name selector", for use with the ID selector #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
== == class selector class selector using (dot English) is identified, followed by the class name. "" The basic syntax is as follows: the need in the html tags, add the attribute class = "name selector", with class selector for use .类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<! DOCTYPE HTML > 
< HTML > 
    < head > 
        < Meta charset = "UTF-. 8" > 
        < title > </ title > 
        < style type = "text / CSS" > 
            / * tab element selector, the selector names and labels same name * / 
            h1 of { 
                Color : Red ; 
            } 
            / * ID selector * / 
            #one { 
                Color : Blue ; 
            } 
            / * class selector * /
            .two{
                color: yellow;
            }
        </style>
    </head>
    <body>
        <h1>123</h1>
        <h1>456</h1>       
        <h2 id="one">789</h2> 
        <h2 class="two">789</h2>
    </body>
</html>

css attribute selectors

Attribute selector, using the tag after the tag brackets

The basic syntax is as follows:标签名[标签属性=’标签属性值’] {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            input[type="text"]{
                color: red;
            }
            
            input[type="password"]{
                background-color: green;
            }
        </style>
    </head>
    <body>
        用户名<input type="text" /><br />
        密　码<input type="password" />
    </body>
</html>

css include a selector

Include a selector, using a space between two labels, the label specified parent to offspring label set style, you can be easily written in the pattern area.

The basic syntax is as follows:父标签后代标签{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div span{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>哈哈</div>
        <div>
            <span>div中的span</span>
        </div>
        <span>就是span</span>
    </body>
</html>

css pseudo-element selector

CSS pseudo-element is used to add special effects to some selectors. For example: hyperlinks different states can specify different effects.

Four states: not point too, point too, the mouse was suspended, activated

Style: fixed order lvha

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a:link{color: #333333; text-decoration: none;}/*没点过*/
            a:visited{color: #333333;text-decoration: none;}/*点过*/
            a:hover{color: red;text-decoration: none;}/*鼠标悬浮*/
            a:active{color: green;text-decoration: none;}/*激活*/
        </style>
    </head>
    <body>
        <a href="http://www.itheima.com">黑马</a>
        <a href="http://www.baidu.com">百度</a>
    </body>
</html>