收藏
天蓬老师批改状态：合格
老师批语：
<style>/* h2:[id=0,class=0,tag=1] */h2{background-color: lightgreen;}/*body h2:[id=0,class=0,tag=2] */body h2{background-color: lightskyblue;}/*html body h2:[id=0,class=0,tag=3] */html body h2{background-color: lightyellow;}/*html body h2.it:[id=0,class=1,tag=3] */html body h2.it{background-color: lightgrey;}/*html body h2#it.it:[id=1,class=1,tag=3] */html body h2#it.it{background-color: lightslategray;}</style>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体和字体图标的应用</title><style>/* 字体属性 */h2 {/* font-size: 20px;font-style: italic;font-weight: lighter; *//* 简写 */font: 16px italic lighter;}h2 span {color: red;}</style><link rel="stylesheet" href="style/icon-font/iconfont.css"></head><body><h2 class="title"><span class="iconfont icon-aixin"></span>字体样式<span class="iconfont icon-dianzan"></span></h2></body></html>
.box {width: 200px;height: 200px;background-color: slategray;box-sizing: border-box;}.box {/* 每个边框可以设置三个属性：宽度、样式、颜色 *//* border-top-width: 5px;border-top-color: red;border-top-style: solid; *//* 缩写border-top: 5px solid #000; */border-top: 5px solid #000;border-bottom: 10px solid lightcoral;/* 可以用border设置整个边框 */border: 3px solid lightgreen;}.box {/* 内边距padding：上右下左；顺时针方向写 */padding: 5px 10px 20px 15px;/* 页面看不到因为padding是透明的，且背景会自动扩展到padding *//* 将背景颜色裁切到内容区才能看到 */background-clip: content-box;/* 当左右相等上下不相等时，使用三值语法 */padding: 10px 20px 15px;/* 当左右相等上下也相等时，使用两值语法 */padding: 20px 30px;/* 如果四个方向全相等使用单值语法 */padding: 10px;/* 总结：当使用三值或二值时只要记住第二个永远表示左右就可以了 */}
.box {/* 外边距控制多个盒子之间的排列距离 *//* 四值，上右下左，顺时针 */margin: 5px 10px 20px 15px;/* 三值，左右相等，上下不相等 */margin: 5px 10px 15px;/* 两值，左右相等，上下相等 */margin: 5px 15px;/* 单值，都相等 */margin: 15px;}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
