Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS选择器提权方法及盒模型常用属性
Blogger Information
Blog 19
fans 0
comment 6
visits 19091
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS选择器提权方法及盒模型常用属性
葵花宝典
Original
542 people have browsed it

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>演示选择器组合实现优先级提权方式</title>
  7.     <style>
  8.       /* 优先级说明: [id,class,tag] 根据每项数量来判断优先级,三项值是进位关系,语言表达不明白只能看实例 */
  9.       /* 如果要提权,不用修改原来的模块,复制一份增加标签或类或ID,就提高了优先级 */
  10.       /* [1,0,0] */
  11.       #on {
  12.         color: dodgerblue;
  13.         font-weight: 800;
  14.       }
  15.       /* [0,1,0] */
  16.       .on {
  17.         color: crimson;
  18.       }
  19.       /* [0,0,2] */
  20.       body p {
  21.         color: chartreuse;
  22.       }
  23.       /* [0,0,1] */
  24.       p {
  25.         color: blueviolet;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <p id="on" class="on">选择器组合提权示例</p>
  31.   </body>
  32. </html>

演示字体与字体图标,盒模型常用属性的缩写方案

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>演示字体与字体图标,盒子间距</title>
  7.     <link rel="stylesheet" href="font/iconfont.css" />
  8.     <style>
  9.       p {
  10.         font-weight: 800;
  11.       }
  12.       /* 图标字体设置 */
  13.       .icon {
  14.         font-size: 40px;
  15.         color: forestgreen;
  16.         font-family: iconfont;
  17.       }
  18.       /* 链接样式 */
  19.       a:link {
  20.         color: #666;
  21.         text-decoration: none;
  22.       }
  23.       a:active {
  24.         color: #666;
  25.       }
  26.       a:visited {
  27.         color: #666;
  28.       }
  29.       a:hover {
  30.         color: lightsteelblue;
  31.       }
  32.       /* 盒子模型样式 */
  33.       /* border和padding为可见属性,设置后可看到 */
  34.       /* margin为设置元素间距离 */
  35.       div {
  36.         background-color: aquamarine;
  37.         padding: 40px 30px 0px; /*盒子内距*/
  38.         margin-bottom: 30px; /*盒子外距*/
  39.         width: 300px;
  40.         border: 1px solid #666;
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <p>
  46.       <a href="https://www.iconfont.cn/" target="_blank"
  47.         >字体图标来自阿里云iconfont</a
  48.       >
  49.     </p>
  50.     <div>
  51.       <label for="">保存</label> <span class="icon icon-baocun"></span>
  52.       <label for="">编辑</label> <span class="icon icon-bianji"></span>
  53.       <label for="">消息</label> <span class="icon icon-pinglun"></span>
  54.     </div>
  55.     <p>盒子模型属性设置演示</p>
  56.     <div id="on">
  57.       <span class="icon icon-jiahao"></span>
  58.       <span class="icon icon-guanbi"></span>
  59.     </div>
  60.     <div id="off">与上一盒子的间距</div>
  61.   </body>
  62. </html>

效果图示:
盒模型示例

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post