css的引用和css中的选择器

<!--
css:层叠样式表---作用：控制HTML的样式
使用：1.内联<style="样式名1：样式值1;样式名2：样式值2;....">    控制当前标签
      2.外联:在head标签里面，通过style标签     控制当前页面对应选择器的样式
           <style type="text/css">
             选择器{
                 样式1：样式值1;
                 ...
             }
           </style>
      3.外部引用<link rel="stylesheet" href="" type="text/css"/>
        外部文件定义样式：
        1）文件必须以.css
        2）选择器{
            样式名1:样式值1;
            }

    1.内联的优先级最高
    2.外联和外部引用同时存在----就近原则（一般来说：内联>外联>外部引用）
-->
<!-- 
 1.标签选择器----作用：根据标签来选择
 定义方式： 标签名{
       样式1：样式值1;
     }
 2.ID选择器----作用：根据id来选择对应ID的标签 -----id更多控制动作（js）---一个页面的id一般是唯一的
 <标签名 id="id名">
 #标签名{
     样式1：样式值1;
 }
 3.类选择器---作用：根据类名来选择对应类名的标签----类选择器更多的是控制样式
 <标签名 class="类名">
 .类名{
     样式1：样式值1;
 }
 ----------------------------
 4.子选择器
  定义方式：选择器 选择器 选择器...{
     样式1：样式值1;

  }
 5.属性选择器
 6.组合选择器----多个样式重合的时候
 定义方式：选择器,选择器,选择器...{
     样式1：样式值1;

 }

 -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            hr{
                background-color: blue;
                height: 50px;
            }
            .pcss{
                color: antiquewhite;
                font-size: 20px;
            }
            ul li{

            }
        </style>
    </head>
    <body>

      <hr  style="background-color: red; height: 50px;"/>

      <hr />
      <p class="pcss">中国国家主席<span>习大大</span>非常优秀</p>
      <ul>
        <li>苏州</li>
        <li>杭州</li>
        <li>扬州</li>
      </ul>

    </body>
</html>
css的引用和css中的选择器

猜你喜欢
