选择器优先级:
//一.当选择器级别相同时，和写的顺序有关,写到后面的会把前面的覆盖 h2 { color: gold; } h2 { color: violet; }//二.当选择器不同时,级别高覆盖级别低//on表示class级 .on { color: wheat; }//表示id级 #foo { color: blue; }<body> <h2 class="on" id="foo">hello php.cn</h2></body>
总结: id>class>tag
效果预览：
提权方式:
//有一个计算公式:[id选择器的数量,class选择器的数量, tag选择器的数量]//tag级向class级进位,class级向id级进位[id=0,class=0, tag=0] //[0,0,1] h2{ color: red; }//要继续提权,就要选择一个比h2 权重高的选择器组合就可以 // [0,0,2] tag=2 body h2{ color: skyblue; } //[0,1,0] class=1 .on{ color: slateblue; } //[1,0,0] id=1 #foo{ color: sandybrown; }<body> <h2 class="on" id="foo">hello php.cn</h2></body>
效果预览：
字体属性:
<style> .title { //简写后: font: italic lighter 36px sans-serif;//图标属性: .iconfont { font-family: "iconfont" !important; font-size: 36px; color: cornflowerblue; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }@font-face { font-family: "iconfont"; src: url("icon-font/iconfont.eot"); src: url("icon-font/iconfont.eot?#iefix") format("embedded-opentype"), url("icon-font/iconfont.woff2") format("woff2"), url("icon-font/iconfont.woff") format("woff"), url("icon-font/iconfont.ttf") format("truetype"), url("icon-font/iconfont.svg#iconfont") format("svg"); }</style>//第二个图标引入样式<link rel="stylesheet" href="icon-font/iconfont.css" /><body><span class="iconfont"></span><h2 class="title">php中文网</h2><span class="iconfont icon-kehuguanli"></span></body>
效果预览:
盒模型:
<style> .box{ width: 200px; height: 200px; background-color: rgb(130, 238, 220); box-sizing: border-box; } .box{ //每个边框可以设置三个属性: 宽度,样式,颜色 border: 5px solid #000; } .box{ //内边距 //四值 padding: 5px 10px 15px 20px; //将背景色裁切到内容区 background-clip: content-box; //三值语法 padding: 10px 20px 15px; //二值语法 padding: 10px 30px; //单值 padding: 10px; } .box { //外边距 //四值 margin: 5px 8px 10px 15px; //三值 margin: 15px 20px 30px; //二值 margin: 10px 15px; //单值 margin: 8px; }//总结: 四值,顺时针,上右下左 | 三值,左右相等,上下不等 | 二值,左右相等,上下相等 | 单值,四个方向全相等 </style><body> <div class="box"></div></body>
效果预览:
