search

博客列表 >1216-选择器提权-字体图标-盒模型常用属性缩写

1216-选择器提权-字体图标-盒模型常用属性缩写

葡萄枝子
葡萄枝子原创
2020年12月17日 00:10:39555浏览

选择器提权-字体图标-盒模型常用属性缩写

作业内容：1. 实例演示选择器组合实现优先级提权方式; 2.实例演示字体与字体图标;3.实例演示盒模型常用属性的缩写方案

1. 实例演示选择器组合实现优先级提权方式

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>...</head>
  4.     <body>
  5.         <p class="paragraph on" id="foo">tag content</p>
  6.     </body>
  7. </html>
  1. <style>
  2.     /* 对元素 tag content 提权依次为 */
  3.     /* [0, 0, 1] */
  4.     p {
  5.         background-color: violet;
  6.     }
  8.     /* 1. 声明顺序覆盖提权 */
  9.     /* [0, 0, 1] */
  10.     p {
  11.         background-color: blueviolet;
  12.     }
  14.     /* 2. 元素组合提权 */
  15.     /* [0 ,0 ,2] */
  16.     body p {
  17.         background-color: brown;
  18.     }
  20.     /* [0, 0, 3] */
  21.     html body p {
  22.         background-color: burlywood;
  23.     }
  25.     /* [0, 1, 0] */
  26.     .paragraph {
  27.         background-color: cadetblue;
  28.     }
  30.     /* [0, 1, 1] */
  31.     p.paragraph {
  32.         background-color: chartreuse;
  33.     }
  35.     /* [0, 1, 2] */
  36.     body p.paragraph {
  37.         background-color: chocolate;
  38.     }
  40.     /* [0, 1, 3] */
  41.     html body p.paragraph {
  42.         background-color: coral;
  43.     }
  45.     /* [0, 2, 0] */
  46.     .paragraph.on {
  47.         background-color: cornflowerblue;
  48.     }
  50.     /* [0, 2, 1] */
  51.     p.paragraph.on {
  52.         background-color: cornsilk;
  53.     }
  55.     /* [0, 2, 2] */
  56.     body p.paragraph.on {
  57.         background-color: crimson;
  58.     }
  60.     /* [0, 2, 3] */
  61.     html body p.paragraph.on {
  62.         background-color: cyan;
  63.     }
  65.     /* [0, 3, 0] */
  66.     :root .paragraph.on {
  67.         background-color: darkblue;
  68.     }
  70.     /* [0, 3, 1] */
  71.     :root p.paragraph.on {
  72.         background-color: darkcyan;
  73.     }
  75.     /* [0, 3, 2] */
  76.     :root body p.paragraph.on {
  77.         background-color: darkgoldenrod;
  78.     }
  80.     /* [1, 0, 0] */
  81.     #foo {
  82.         background-color: darkgray;
  83.     }
  85.     /* [1, 0, 1] */
  86.     p#foo {
  87.         background-color: darkgreen;
  88.     }
  90.     /* [1, 0, 2] */
  91.     body p#foo {
  92.         background-color: darkkhaki;
  93.     }
  95.     /* [1, 0, 3] */
  96.     html body p#foo {
  97.         background-color: darkmagenta;
  98.     }
  100.     /* [1, 1, 0] */
  101.     .paragraph#foo {
  102.         background-color: darkolivegreen;
  103.     }
  105.     /* [1, 1, 1] */
  106.     p.paragraph#foo {
  107.         background-color: darkorange;
  108.     }
  110.     /* [1, 1, 2] */
  111.     body p.paragraph#foo {
  112.         background-color: darkorchid;
  113.     }
  115.     /* [1, 1, 3] */
  116.     html body p.paragraph#foo {
  117.         background-color: darkred;
  118.     }
  120.     /* [1, 2, 0] */
  121.     .paragraph.on#foo {
  122.         background-color: darksalmon;
  123.     }
  125.     /* [1, 2, 1] */
  126.     p.paragraph.on#foo {
  127.         background-color: darkseagreen;
  128.     }
  130.     /* [1, 2, 2] */
  131.     body p.paragraph.on#foo {
  132.         background-color: darkslateblue;
  133.     }
  135.     /* [1, 2, 3] */
  136.     html body p.paragraph.on#foo {
  137.         background-color: darkslategray;
  138.     }
  140.     /* [1, 3, 0] */
  141.     :root .paragraph.on#foo {
  142.         background-color: darkturquoise;
  143.     }
  145.     /* [1, 3, 1] */
  146.     :root p.paragraph.on#foo {
  147.         background-color: darkviolet;
  148.     }
  150.     /* [1, 3, 2] */
  151.     :root body p.paragraph.on#foo {
  152.         background-color: deeppink;
  153.     }
  154. </style>

2.实例演示字体与字体图标

  1. /* 已将 iconfont.* 复制到 css 目录 */
  2. <link rel="stylesheet" href="css/iconfont.css">
  1. <p>
  2.     <span class="iconfont icon-baidu"></span>
  3.     <span class="iconfont icon-google"></span>
  4. </p>

3.实例演示盒模型常用属性的缩写方案

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>...</head>
  4.     <body>
  5.         <div class="box">box conent</div>
  6.     </body>
  7. </html>
  1. /* 盒模型常用属性的缩写 */
  2. .box{
  3.     box-sizing: border-box;
  4.     width: 300px;
  5.     height: 200px;
  6.     text-align: center;
  7.     color: violet;
  8.     /* 边框 border */
  9.     border-width: 5px;
  10.     border-color: red;
  11.     border-style: solid;
  12.     border: 15px red solid;
  13.     /* 字体 font */
  14.     font-family: 'Times New Roman', Times, serif;
  15.     font-size: 36px;
  16.     font-weight: lighter;
  17.     font-style: italic;
  18.     font: italic lighter 36px sans-serif;
  19.     /* 背景 background */
  20.     background-image: url(https://www.php.cn/static/images/user_avatar.jpg);
  21.     background-repeat: no-repeat;
  22.     background-position: top center;
  23.     background: url(https://www.php.cn/static/images/user_avatar.jpg) no-repeat top center;
  24.     /* 内外边距，上右下左 */
  25.     padding: 10px 20px;
  26.     margin: 15px;
  27.     background-color: grey;
  28.     background-clip: content-box;
  29. }
上一条：css引入方式与上下文选择器 伪类结构相关下一条：CSS选择器优先级提权方式与字体、图标应用，盒模型常用属性缩写方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多