样式表

Posted on 2017-11-24 16:14  神笔码农  阅读(113)  评论(0)  编辑  收藏  举报

分类

    • 　　内联 
      <div style="color:red;">样式表测试</div>

      直接写在标签里面，优点：控制精确 ，缺点：代码重用性差

    • 内嵌 
      <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <style type="text/css">
        div{color:red;}
    </style>
</head>

      在<head>头标签内，优点：代码重用性高，缺点：不如内联精确

    • 外部 
      <link href="file:///E|/PRACTICE/css.css" rel="stylesheet" type="text/css" />

      在<head>头标签内引入.css文件，优点：代码重用性高，缺点：不如内联精确

优先级：内联>内嵌、外部

  • 选择器：在样式表内部使用，用于选取要控制的元素 
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <style type="text/css">
        #div1{color:red;}
        .div2{color:green;}
        div{font-size:14px;}
        *{background-color:blue;}
    </style>
</head>

<body>
    <div id="div1">样式表测试</div>
    <div class="div2">样式表测试2</div>
    <div class="div2">样式表测试3</div>
    <div class="div2">样式表测试4</div>
</body>

     

    • "#" 用于选择id，id为唯一的不可重复，选取一个
    • "."同于选择class，class可重复，选取多个
    • 直接用标签名选择对应标签，可选取多个
    • "*"用于选择多有元素

优先级：id>class>标签名>所有

  • !important写在样式后边，可打破优先级