h5-5 

 1 <style>
 2         #box1 p {
 3             color:red;
 4         }
 5         #box1 #box2 .box3 p {
 6             color:green;
 7         }
 8         /* 
 9             !important 可以提升权重
10             在就近原则中，无法提升继承的权重
11          */
12         .box1 .box2 p {
13             color:orange !important;
14         }
15     </style>
1 <div class="box1" id="box1">
2         <div class="box2" id="box2">
3             <div class="box3" id="box3">
4                 <p>文字颜色到底是什么呢？</p>
5             </div>
6         </div>
7     </div>

 

 1 <style>
 2         /* 
 3             color: red;
 4             color: #ffffff; 0~255  十六进制 红绿蓝
 5                         #ffffff  #fff 白色
 6                         #000000  #000 黑色
 7                         #ff0000  #f00 红
 8                         #00ff00  #0f0 绿
 9                         #0000ff  #00f 蓝
10                         #cccccc  #ccc 灰
11             color: rbg(123,34,56);
12 
13             font-family 字体
14                 英文字体 中文字体 书写字体一般先写英文后写中文
15                 font-family: "consolas","Arial","微软雅黑","宋体";
16                                                             SimSun
17             
18             font-size 字号
19                 font-size:16px; 浏览器不同，默认显示字号不一样，并且加载的最小字号不一样
20                 chrome浏览器 默认16px 支持显示最小12px
21                 ie6 默认字号14px 支持显示最小1px
22                 12/14/16 实际项目根据设计师指定
23 
24             line-height 行高
25                 一行文字实际占有的高度
26          */
27          p {
28              color: #d34f33;
29              /* line-height: 38px; */
30              font-size:20px;
31              line-height: 200%; /*百分比相对字号*/
32              font-family:"SimSun";
33          }
34     </style>
 <p>我是阿龙老师，老司机带你们飞</p>

 

 等同于

1 p {
2              color: #d34f33;
3              font: 20px/40px "SimSun";/*字号/行高 字体*/
4          }
 <p>我是阿龙老师，老司机带你们飞</p>

 

 

 1         /* 
 2             font-weight 字体加粗
 3                 font-weight:700       加粗 bold
 4                 font-weight:400       正常 normal
 5                 font-weight:100-700 100 200 300
 6           */
 7         .p2 {
 8              font-weight: 700;
 9          }
10          h1 {
11              font-weight: 400;
12          }            
1     <p>我是阿龙老师，老司机带你们飞</p>
2     <p class="p2">这是第二段</p>
3     <h1>标题</h1>

 

posted @ 2020-03-08 16:16  潜伏r  阅读(192)  评论(0)  编辑  收藏  举报