zoukankan      html  css  js  c++  java
  • CSS选择器

    HTML标记定义

      <p>...</p>

      p { 属性:属性值 ; 属性1:属性值1 }

      p可以叫做选择器,定义那个标记中的内容执行其中的样式

      一个选择器可以控制若干个样式属性,他们之间需要用英语的“;”隔开,最后一个可以不加;

    Class定义

      <p class="oijwd">...</p>

      class定义是以“.”开始

      .oijwd { 属性:属性值 ; 属性1:属性值1 }

    ID定义

      <p id="oid">...</p>

      ID定义是以“#”开始

      #oid { 属性:属性值 ; 属性1:属性值1 }

    优先级问题

      ID>Class>HTML

      同级时选择离元素最近的一个

    组合选择器

      同时控制多个元素

      h1,h2,h3,p,.div,#abc { font-size:14px; color:red; }

      选择器组合可以用“,”隔开

    伪元素选择器

      a:link  正常链接的样式

      a:hover  鼠标放上去的样式

      a:active  选择链接时的样式

      a:visited  已经访问过的链接样式

    <!doctype html>
    <html>
        <head>
            <title>定义CSS样式(CSS选择器)</title>
            <meta charset="utf-8">
            <style type="text/css">
                /*
                p { color:red; font-size:28px; }
                .p { color:green; font-size:28px; }
                .pp{ color:red; }
                #ppp { color:blue; }
                #ppp p { color:red; }
                
                div { color:red;  }
                .p { color:green;  }
                #pp {  color:blue;   }
                
                .p { color:red;  }
                .p { color:green;  }
                    
                h1 , h2 , h3 , h4 , p, .div ,#div{ color:red ; font-size:40px } 
                
                */
                a:link { color:red; }
                a:hover { color:green; }
                a:active { color:yellow; }
                a:visited { color:blue; }
                
                
            </style>
        </head>
        <body>
            <!--
            <div id="pp" class="p">
                <h1>麦子学院麦子学院麦子学院</h1>
                <h2>麦子学院麦子学院麦子学院</h2>
                <h3>麦子学院麦子学院麦子学院</h3>
                <h4>麦子学院麦子学院麦子学院</h4>
            </div>
            <p>
            麦子学院麦子学院麦子学院
            </p>
            <div class="div">
            麦子学院麦子学院麦子学院
            </div>
            
            <div id="div">
            麦子学院麦子学院麦子学院
            </div>
            -->
            <a href="http://www.baidu.com" target="_blank">百度</a>
            <a href="http://www.baidu.com/ddddd" target="_blank">百度ddd</a>
            <a href="http://www.baidu.com/ddddsasad" target="_blank">百度dasdd</a>
            <a href="http://www.baidu.com/dasasadddd" target="_blank">百度asaddd</a>
            <a href="http://www.baidu.com/dsaadddd" target="_blank">百度ddsad</a>
            <a href="http://www.baidu.com/dsasaddd" target="_blank">百度ddd</a>
            <a href="http://www.baidu.com/dddasasdd" target="_blank">百度asaddd</a>
            <a href="http://www.baidu.com/dsaadddd" target="_blank">百度ddd</a>
        </body>
    </html>
  • 相关阅读:
    Java ee第七周作业
    Java ee第六周作业
    Java ee第五周作业
    Java ee第四周作业
    Java ee第三周作业
    第二周作业-web后台应用开发与xml
    Java ee第一周的作业
    在团队项目中我对自己的总结
    两人合作,黄金点游戏
    c语言实现wc功能
  • 原文地址:https://www.cnblogs.com/chy-op/p/9984096.html
Copyright © 2011-2022 走看看