1、选择器优先级提权 演示代码：
<title>选择器优先级提权</title> <style> h2 { color: red; } .bt h2 { color: lawngreen; } #dbt { color: violet; } #box { border: 1px solid red; width: 500px; height: 200px; background-color:lightgreen; } #box div{ /* background-color: violet; */ } body #box{ background-color:lightslategray; } </style></head><body> <!-- 1. 实例演示选择器组合实现优先级提权方式; 2.实例演示字体与字体图标; 3.实例演示盒模型常用属性的缩写方案 --> <!-- 内联样式不属于选择器 --> <!-- 选择器优先级提权有一个规则：id > class > 标签；[0,0,1][0,1,0][1,0.2] --> <div id="box"> <div class="bt"> <h2 id="dbt">大标题，大标题</h2> </div> </div>
2、字体与字体图标演示 演示代码：
<title>字体与字体图标演示</title> <style> .fonts { color: red; /* 设置文字大小 */ font-size: 30px; /* 设置文字字体 */ /* font-family: SimHei; */ font-family: LiSu; } .fonts p{ color:red; } p{ font-size: 50px; color:blue; /* font-family:YouYuan; */ src: url(./icon/cilun.png); </style></head><body> <div class="fonts"> <h1>一段文字标题</h1> <p>文字主体内容：借钱这事儿，大家可能都遇到过：一时资金周转不开，借钱救个急。 从资金管理角度说，借钱是负债，要考虑个人资金流动性与偿债能力，要考察借贷成本能否覆盖资金收益。 可是眼下，出现了一个趋势：借钱越发随意，可能为了购买奢侈品、换个苹果手机，也可能为了办健身卡、上学习课，甚至买颗白菜也可以分期…… 与此映照，多家互联网借贷平台的广告画风殊异：老年人坐不惯经济舱，可以借钱升舱；父亲手头紧，借钱给孩子过生日。 这劲头，似乎越来越奇怪了</p> </div> <div> /* 给字体加图标： */ <p>设置按钮</p> <p>电话电话</p> </div>
3、实例演示盒模型常用属性的缩写方案
<title>实例演示盒模型常用属性的缩写方案</title> <style> .box { width: 300px; height: 300px; /* 边框 通过border设置，值由3部分组成，边框粗细（px）、边框样式、边框颜色。 border-winth:1px;设置边框粗细； border-style:solid;设置边框样式，solid (实线)、dashed (虚线)、dotted (点线)。 border-color:red; 设置边框颜色； */ /* 边距的简写：（值不分顺序） */ border: 5px red solid; /* 内边距(边框与内容之间的距离)padding 的简写语法：padding 是按顺时针的方式赋值；[上、右、下、左] ， padding：2px； 表示 上、右、下、左 内边距各2px； padding: 2px 5px; 表示 上下2px,左右5px; padding: 5px 6px 8px; 表示 上5px,左、右各6px,下8px; padding: 50px 20px 30px 18px; 表示上50px, 右20px,下30px,左18px; */ padding: 50px 30px; background-color: skyblue; /* margin外边距（盒子与盒子之间的距离）；简写语法和padding一样； 是按顺时针的方式赋值；[上、右、下、左] ， margin：2px； 表示 上、右、下、左 内边距各2px； margin: 2px 5px; 表示 上下2px,左右5px; margin: 5px 6px 8px; 表示 上5px,左、右各6px,下8px; margin: 50px 20px 30px 18px; 表示上50px, 右20px,下30px,左18px; */ /* 外边距 margin 简写语法： */ margin: 30px 20px 15px 9px; /* 盒子模型分为w3c盒子模型和ie盒子模型，w3c盒子模型的范围包括 margin border padding content,并且content部分不包括其他元素。 ie盒子模型，范围包括 margin border padding content ,但是border和padding计算到content内的； */ /* 设置盒子模型为ie盒子模型 （不影响盒子总体大小）*/ box-sizing: border-box; /* 设置盒子模型为w3c盒子（默认、会影响盒子总体大小） */ box-sizing: content-box; } </style></head><body> <div class="box"> 盒子模型 </div>
