简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css基础学习（选择器优先级提权方式、字体、盒模型常用属性的缩写方案）
Blogger Information
Blog 40
fans 0
comment 1
visits 34283
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
735 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.         /* 1.选择器优先权：id>class>tag(标签选择器) 
  9.             a.声明顺序对优先级的影响：两个相同的声明，根据顺序生效，从上到下最后有效（浏览器读取css样式时为从上到下读取，后面的声明会将前面同类声明覆盖。）
  10.             2.选择器提权方式：一个标签的样式显示优先级公式，默认为[id=0,class=0,tag=0]
  11.         判断条件为数组内元素从第一个开始做比较，第一个元素开始比较大小，大着优先级大，相等则继续判断第二个元素大小。
  12.         例如：
  13.         */
  14.         /* 等级为[0,0,2] */
  15.         body p{
  16.             color: red;
  17.         }
  18.         /* 等级为[0,0,1] */
  19.         p{
  20.             color:green;
  21.         }
  22.         /* 等级为[0,1,0] */
  23.         .p{
  24.             color:indigo
  25.         }
  26.         /* 等级为[0,1,1] */
  27.         p.p{
  28.             color:blue
  29.         }
  30.         /* 等级为[0,2,0] */
  31.         .p.p2{
  32.             color:rgb(119, 55, 55);
  33.         }
  34.         /* 等级为[1,0,0] */
  35.         #p{
  36.             color: cornflowerblue;
  37.         }
  38.         /* ----------------------------------------------- */
  39.     /* <!-- 字体属性 --> */
  40.         .h2{
  41.             /* font-family: 'Courier New', Courier, monospace;字体样式
  42.             font-size: 26px;大小
  43.             font-style: normal;样式
  44.             font-weight: bold;粗细 */
  45.             /* 简写 */
  46.             font: normal bold 36px 'Courier New';
  47.         }
  48.         /* body{
  49.             background-color: bisque;
  50.             background-image: url("https://img.php.cn/upload/course/000/000/001/5ec659c41669a893.png");
  51.             background-repeat: no-repeat;
  52.             background-size: 300px;
  53.             background-position: top center;/* center可以不写，因为其为默认值 
  54.         } */
  55.         .div{
  56.             width: 100px;
  57.             height: 100px;
  58.             background-color: chartreuse;
  60.             /*边框
  61.              border-top-color: red;
  62.             border-top-width:2px;
  63.             border-top-style: solid; */
  64.             /* 缩写为 */
  65.             border:2px solid black;
  67.             /* 将背景色裁剪到内容区 */
  68.             background-clip: content-box;
  69.             /* 边距
  70.             外边距 margin:上 右 下 左;
  71.             内边距 padding:上 右 下 左;
  72.             简写：
  73.             如左右相等则使用三值语法：上 左右 下 /10px 40px 80px 
  74.             如上下相等左右相等则用二值语法：上下 左右 /10px 40px 
  75.             上下左右都相等则单值语法：上下左右/10px
  76.             三值和二值语法的第二个永远代表左右的值。
  77.             */
  78.             /* margin-top: 20px;
  79.             margin-left: 20px;
  80.             margin-bottom: 20px;
  81.             margin-right: 20px; */  
  82.             /* 缩写为 */
  83.             margin: 10px 20px 30px 40px;
  84.             padding: 10px 30px 50px 80px ;
  86.         }
  87.     </style>    
  88. </head>
  89. <body>
  90.     <!-- 选择器的优先级以及提权方式 -->
  91.     <!-- <p class="p p2" id="p">php</p> -->
  92. <!-- ------------------------------------------------------ -->
  93.     <!-- 字体属性 -->
  94.     <!-- <h2 class="h2">PHP中文网</h2> -->
  95. <!-- ------------------------------------------------------ -->
  97.     <!-- 盒模型常用属性的缩写方案 -->
  98.     <div class="div"></div>
  99. </body>
  100. </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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！