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>
