Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 样式选择器提权和字体图标样式
Blogger Information
Blog 9
fans 0
comment 0
visits 9118
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
样式选择器提权和字体图标样式
Jerry
Original
622 people have browsed it

样式选择器优先级和提权

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

参考代码：

  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.       /* 同级别选择器 后面的样式覆盖前面的样式 */
  9.       h3 {
  10.         color: darkorchid;
  11.       }
  13.       h3 {
  14.         color: darkorange;
  15.       }
  16.       /* 不同级别：ID选择器>类选择器>标签选择器  */
  18.       .fruit {
  19.         color: darkturquoise;
  20.       }
  22.       #apple {
  23.         color: deeppink;
  24.       }
  26.       /* 如果需要继续提权使用多重选择器 
  27.       计算公式：ID选择器数量，类选择器的数量，标签选择器的数量 
  28.       通常用来重构原来的CSS样式*/
  29.       /* [1,0,1] */
  30.       h3#apple {
  31.         color: gold;
  32.       }
  33.       /* [1,0,2] */
  34.       body h3#apple {
  35.         color: green;
  36.       }
  37.       /* [1,1,0] */
  38.       #apple.fruit {
  39.         color: hotpink;
  40.       }
  41.       /* [1,1,3] */
  42.       html body h3#apple.fruit {
  43.         color: mediumaquamarine;
  44.       }
  45.     </style>
  46.   </head>
  47.   <body>
  48.     <h3 class="fruit" id="apple">苹果是一种低热量的食物</h3>
  49.   </body>
  50. </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.     <style>
  8.       .fruit {
  9.         /* 正常写法 */
  10.         font-family: sans-serif;
  11.         font-size: 24px;
  12.         font-style: italic;
  13.         font-weight: lighter;
  14.         /* 简写顺序：斜体 粗细 大小 字体 */
  15.         font: italic lighter 30px sans-serif;
  16.       }
  17.       /* 字体图标源码下载后可以当做字体使用 */
  18.       .iconfont.icon-shengdantubiao-08 {
  19.         font-size: 48px;
  20.         color: green;
  21.       }
  22.     </style>
  24.     <link rel="stylesheet" href="iconfont/iconfont.css" />
  25.   </head>
  26.   <body>
  27.     <h3 class="fruit" id="apple">苹果是一种低热量的食物</h3>
  28.     <span class="iconfont icon-shengdantubiao-08"></span>
  29.   </body>
  30. </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.     <style>
  8.       .box {
  9.         width: 200px;
  10.         height: 150px;
  11.         background-color: greenyellow;
  12.         box-sizing: border-box;
  13.       }
  15.       .box {
  16.         /* 边框属性： 宽度,样式,颜色*/
  17.         border: 1px solid grey;
  18.       }
  20.       .box {
  21.         /* 内边框：上右下左 顺时针 */
  22.         padding: 5px 10px 15px 20px;
  23.         /* 将背景色裁切到到内容区 */
  24.         background-clip: content-box;
  25.         /* 缩写：左右相等 上下不相等 用三值 */
  26.         padding: 10px 15px 5px;
  27.         /* 上下相等 左右相等 用二值 */
  28.         padding: 10px 15px;
  29.         /* 上下左右都相等 用单值 */
  30.         padding: 10px;
  32.         /* 当使用三值和二值时,第二个值表示左右 */
  33.       }
  35.       .box {
  36.         /* 外边框 四值三值二值和单值规则同内边框*/
  37.         margin: 10px;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <div class="box"></div>
  43.   </body>
  44. </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