首页 > 代码库 > 样式表的种类与选择器使用

样式表的种类与选择器使用

2024-09-01 03:47:51   215人阅读

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

    <style type="text/css">
        /**{color:#CF0}黄色*/
        /*#b1{color:#F00}红色*/
        /*.c3{color:#F0F}粉色*/
        /*span{color:#0F3}绿色*/
        div,span{color:#93F}/*紫色*/
        div.c3{color:#F00}/*红色*/
        div span{color:#0F0}/*绿色*/
        div.c2{color:#FF6}/*黄色*/
        
    </style>
    
    
    
</head>

<body>
    <div style="color:#0F3;">hello</div>
    
    <div class="c3">
         内联 
      优点控制精确 
      缺点是代码重置性很差；页面代码乱 优先级最高
    </div>
    <div class="c3">
         内嵌
      优点是代码重用性好
      缺点是控制没有内联精确 优先级其次
    </div>
    <div class="c3">
         外部嵌入
      优点是代码重用性最好
      缺点是控制最不精确 优先级和内嵌相同
    </div>
    
    <div id="b1">精准控制</div>
    
    <span>标签选择器</span>
    <span>标签选择器</span>
    <span>标签选择器</span>
    <span>标签选择器</span>
    <span>标签选择器</span>    
    
    <div>
        <span>这是span</span>
        <span>这是span</span>
        <span>这是span</span>
        <span>这是span</span>
        <span>这是span</span>
    </div>
    
   <div class="c2">
         内联 
      优点控制精确 
      缺点是代码重置性很差；页面代码乱 优先级最高
    </div>
    <div class="c2">
         内嵌
      优点是代码重用性好
      缺点是控制没有内联精确 优先级其次
    </div>
    <div class="c2">
         外部嵌入
      优点是代码重用性最好
      缺点是控制最不精确 优先级和内嵌相同
    </div> 
    
    
    <!--*选择<标签选择<class选择器<id选择--> 选择器优先级
    

    
</body>
</html>

 

样式表的种类与选择器使用


联系
我们