收藏
天蓬老师批改状态：合格
老师批语：
<!DOCTYPE html><html><head><meta charset='UTF-8'><title>选择器的优先级的提权方式</title><style>/* 1.声明顺序对优先级的影响*/div{color: indigo;}/* 在后面有一个相同的声明，根据源码的顺序，后面有效 */div{color: red;}/* **********************************************//* 2.选择器类型对优先级的影响 */.on{color: lawngreen;}/************************************************/div{color: indigo;}body div{color: red;}.on{color: lawngreen;}/* id>class>tag计算公式：【id选择器的数量，class选择器的数量，tag选择器的数量】body div:[id=0,class=0,tag=2]idv:[id=0,class=0,tag=1]tag级向class级进位，class级向id级进位.on div：[id=0,class=1,tag=1] *//************************************************//*也可用伪类 :root 代表html*/html body div{ /*[0,0,3]*/background: lawngreen;}.on{ /*[0,1,0]*/background: rgb(184, 129, 129);}.on.h{ /*[0,2,0]*/background:red;}</style></head><body><div class="on h">北京欢迎您！</div></body></html>
<!DOCTYPE html><html><head><meta charset='UTF-8'><title>字体与字体图标</title><!--引入icon小图标，路径不要错--><link rel="stylesheet" href="icon/iconfont.css"><style>/* 字体 font */.font{font-family: 'Courier New', Courier, monospace;font-size: 40px;font-style: italic; /*斜体*/font-weight: lighter; /*细*//* 简写形式 */font: italic lighter 40px 'Courier New', Courier, monospace;}</style></head><body><!--引入icon小图标有两种方式，选择了简单的一种。用哪个写哪个的名字--><span class="iconfont icon-kehuguanli"></span><h2 class="font">PHP中文网</h2></body></html>
<!DOCTYPE html><html><head><meta charset='UTF-8'><title>盒模型的属性缩写</title><style>.box{width: 200px;height: 200px;background: rgb(224, 169, 169);box-sizing: border-box;}.box{/* 边框：每个边框可以设置三个属性：宽度，样式，颜色*/border-top-width: 3px;border-top-color:skyblue;border-top-style: solid;/*简写形式*/border-top:rgb(0, 38, 255) 10px solid;border: 5px dashed yellow;}.box{/*内边距padding:上右下左；顺时针方向*/padding: 30px 20px 10px 8px;/* 将背景色裁切到内容区 */background-clip: content-box;/* 左右相等,上下不等 */padding: 30px 1px 8px;/* 左右相等，上下相等 */padding: 5px 30px;/* 上下左右都相等 */padding: 30px;/* 总结：第二个永远表示左右 */}.box{/* 外边距：上右下左，控制多个盒子之间的排列间距 */margin: 5px 8px 0px 30px;/* 左右相等,上下不等 */margin: 30px 1px 8px;/* 左右相等，上下相等 */margin: 5px 30px;/* 上下左右都相等 */margin: 30px;}</style></head><body><div class="box"></div></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
