样式选择器提权和字体图标样式

样式选择器优先级和提权

同级别选择器后面的样式覆盖前面的样式
不同级别：ID选择器>类选择器>标签选择器
如果需要继续提权使用多重选择器
计算公式：ID选择器数量，类选择器的数量，标签选择器的数量
通常用来重构原来的CSS样式

参考代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>样式选择器优先级和提权</title>
    <style>
      /* 同级别选择器 后面的样式覆盖前面的样式 */
      h3 {
        color: darkorchid;
      }
      h3 {
        color: darkorange;
      }
      /* 不同级别：ID选择器>类选择器>标签选择器  */
      .fruit {
        color: darkturquoise;
      }
      #apple {
        color: deeppink;
      }
      /* 如果需要继续提权使用多重选择器 
      计算公式：ID选择器数量，类选择器的数量，标签选择器的数量 
      通常用来重构原来的CSS样式*/
      /* [1,0,1] */
      h3#apple {
        color: gold;
      }
      /* [1,0,2] */
      body h3#apple {
        color: green;
      }
      /* [1,1,0] */
      #apple.fruit {
        color: hotpink;
      }
      /* [1,1,3] */
      html body h3#apple.fruit {
        color: mediumaquamarine;
      }
    </style>
  </head>
  <body>
    <h3 class="fruit" id="apple">苹果是一种低热量的食物</h3>
  </body>
</html>

字体和字体图标样式

字体图标源码下载后可以当做字体使用

参考代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>字体和字体图标样式</title>
    <style>
      .fruit {
        /* 正常写法 */
        font-family: sans-serif;
        font-size: 24px;
        font-style: italic;
        font-weight: lighter;
        /* 简写顺序：斜体 粗细 大小 字体 */
        font: italic lighter 30px sans-serif;
      }
      /* 字体图标源码下载后可以当做字体使用 */
      .iconfont.icon-shengdantubiao-08 {
        font-size: 48px;
        color: green;
      }
    </style>
    <link rel="stylesheet" href="iconfont/iconfont.css" />
  </head>
  <body>
    <h3 class="fruit" id="apple">苹果是一种低热量的食物</h3>
    <span class="iconfont icon-shengdantubiao-08"></span>
  </body>
</html>

盒模型的属性

主要属性大小边框外边框内边框

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盒模型的属性</title>
    <style>
      .box {
        width: 200px;
        height: 150px;
        background-color: greenyellow;
        box-sizing: border-box;
      }
      .box {
        /* 边框属性： 宽度,样式,颜色*/
        border: 1px solid grey;
      }
      .box {
        /* 内边框：上右下左 顺时针 */
        padding: 5px 10px 15px 20px;
        /* 将背景色裁切到到内容区 */
        background-clip: content-box;
        /* 缩写：左右相等 上下不相等 用三值 */
        padding: 10px 15px 5px;
        /* 上下相等 左右相等 用二值 */
        padding: 10px 15px;
        /* 上下左右都相等 用单值 */
        padding: 10px;
        /* 当使用三值和二值时,第二个值表示左右 */
      }
      .box {
        /* 外边框 四值三值二值和单值规则同内边框*/
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

样式选择器优先级和提权

字体和字体图标样式

盒模型的属性

相关文章