day 37 CSS

Reference blog: https://www.cnblogs.com/majj/p/9021419.html

1.CSS three link style:

　　Inline link (highest priority)

　　Inscribed style

　　External style

< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-8" > 
    < title > the Document </ title > 
    <-! Weight: High priority right of the page whose major who weight is greater -> 
    <! - add style -> 
    < Link rel = "stylesheet" href = "./ index.css" > 
    < style of the type = "text / CSS" >
        / * Inscribed pattern * / 

        / * selector * / 
        span { 
            Color :Green ; 
            font-size : 30px ; 
        } 
    </ style > 
    < Script type = "text / JavaScript" the src = "./ JavaScript / The index.js" > </ Script > 


</ head > 
< body > 
    ! <- inline the highest priority is the highest form -> 
    < P style = "Color: Red; font-size: 30px;" > wusir </ P > 
    < span style = "Color: Purple;" > Alex </span>
    
</body>
</html>

Three kinds of link style

2.CSS selector

　　Selected is "common"

(1) CSS Cascading Style Sheets     
        effect: Modified page structure 
        <! - priority inline style is the highest of the highest -> 
        < P style = "Color: Red; font-size: 30px;" > wusir </ P > 
        < span style = "Color: Purple;" > Alex </ span > 
        
(2) CSS three introduced ways 
        - inline style 
            Note: priority inline style is the highest 
        - to form the 
        - external pattern 
            
(3) substantially select an 
     id selector 
            selected is unique characteristics, can not be repeated 
     in the tag selector 
            to select a page of Communist label 
     class selectors 
            selected the CCP is a page of labels, the class name can have multiple 
     wildcard selectors
            Usually the page is reset stylesheet

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > </ title > 
    < Link the rel = "this stylesheet" the href = "./ CSS / reset.css " > 
    < style type =" text / CSS " > 
        
    1. tab is selected by the selector 'common' 
        P { 
            Color : Red ; 
        }     
            
        UL,ol{
            list-style: none;
        }  
            / * Reset style * / , / * combination selector * / 

    2. class (class) selectors may also have common class name selected more 
        tips: 
            Do not go trying to use a class will finish our pages . The label should carry more than one class, the common set style 
            for each class to be as small as possible, have a common concept, allowing more tags use 
        .active { 
            Color : Yellow ; 
        } 
        
        .large { 
            font-size : 30px ; 
        } 

    is selected by the selector 3.id 'properties' id is unique 
        P1 { 
            Color : Green ; 
        } 
        
    4. * wildcard selector (not used in this work after   

        a layout of the page, if the write start css, must be reset

        {     
            Padding : 0 ; 
            margin : 0 ; 

        } 
        
        a { 
            text-Decoration : none ; 
        } Clear underlined a tag 
        
        .baidu { 
            Color : Blue ;          / * underlined * / 
            text-Decoration : underline ;         / * display state small hands * / 
            Cursor : pointer ; 
        } 
        
        INPUT { 
            border : none;     # (Frame) 
            width : 400px ; 
            height : 40px ; 
            border : 1px Solid # e0e0e0 ; (height, style, color) 
            font-size : 22px ;      (set the font size)
         } 

    </ style > 
</ head > 
< body > 
    < P ID = "P1" > Alex </ P > 
    < P ID = "P2" > alex2 </ P >
    < P > alex3 </ P > 
    < P > alex4 </ P > 
    < P > alex5 </ P > 
    < UL > 
        < Li class = "Active Large" >   # name but a plurality of categories, is selected to facilitate future may class different and accurate data to select what you want 
            alex1 
        </ li > 
        < li > 
            alex2 
        </ li > 
    </ ul > 
    < ul > 
        <li class="active">
            wusir
        </li>
    </ul>
    <a href="javascript:void(0);">百度一下</a>
    <span class="baidu">百度一下</span>
    <input type="text">

</body>
</html>