• 样式表


    分类

      •   内联
        <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写在样式后边,可打破优先级

  • 相关阅读:
    generator
    JS 中 apply 、call 、bind的详解
    前端面试题(24-js)
    JS原型链深入了解
    Java12新特性
    Java11-ZGC
    Java11新特性
    Java10新特性
    Java9新特性
    CF1385E【Directing Edges】 (拓扑排序)
  • 原文地址:https://www.cnblogs.com/rose1324/p/7891133.html
Copyright © 2020-2023  润新知