伪类选择器 状态匹配
一、链接：4个状态
1、默认没有访问的状态：:link;
2、已访问过的状态：:visited;
3、鼠标悬停状态:hover;
4、激活状态：:active;
<style>a:link {color: #ccc;text-decoration: none;}a:visited {color: #000;}a:hover {color: red;text-decoration: underline;}a:active {color: slateblue;}</style><a href="http://www.baidu.com">百度</a>
二、表单
<style>/* 快速选中只读的 */input:read-only {background-color: slategrey;}input[type=email] {background-color: springgreen;}input:required {background-color: teal;}input:disabled {background-color: violet;}</style><form action=""><p>用户名：<input type="text" name="username" value="admin" readonly></p><p>邮箱：<input type="email" name="email" value="admin@admin.com" required></p><p>密码：<input type="password" name="password" value="admin" disabled></p><p><button>提交</button></p></form>
选择器的优先级
1、当选择器相同时，写在后面的优先级大（离元素近的）
2、当标签选择器和类选择同时选中时，类选择的优先级大，级别高的层叠级别低的
3、id选择器>类选择>标签选择器
选择器的提权方式
1、声明的顺序对优先级的影响
<style>h1 {color: violet;}h1 {color: red;}</style><h1>php</h1>
效果图
2、选择器的类型对优先级的影响
<style>.php {color: violet;}h1 {color: red;}</style><h1 class="php">php</h1>
3、优先级计算公式
[id选择器的数量，类选择器的数量，标签选择的数量]；[0 ,0 ,0];
<style>html body h1 {color: rgb(20, 23, 32);}/* [0,0,3] */body h1 {color: violet;}/* [0,0,2] */h1 {color: red;}/* [0,0,1] */h1.php {color: salmon;}/* [0,1,1] */.php {color: salmon;}/* [0,1,0] */h1#p.php {color: rgb(30, 209, 45);}/* [1,1,1] */#p.php {color: rgb(201, 157, 15);}/* [1,1,0] */#p {color: rgb(10, 177, 243);}/* [1,0,0] */</style><h1 class="php" id="php">php</h1>
效果图
属性的简写
1、字体
font-size/line-height 大小/行高;
font-famil 字体;
font-style 样式;
font-weight 粗细;
简写：font:样式 粗细 大小/行高 字体；
字体图标小案例
<style>.iconfont.icon-shouye {font-size: 5em;}.iconfont.icon-sousuo {font-size: 5em;}</style><body><span class="icon iconfont icon-shouye"></span><span class="icon iconfont icon-sousuo"></span></body>
效果图
2、背景
background标签
background-color：背景颜色
background-image：背景图片;url();
background-repeat：重复；no-repeat repeat-x repeat-y;
background-size：大小;
background-position：位置;0 0;方位名词 top center bottom；
简写：background:颜色 图片 重复 位置；
盒模型
1、边框border
简写：htmlborder:1px solid #ccc;
2、内边距：padding：上 右 下 左(背景色会自动扩展到padding 将背景色裁切到padding backgroud-clip:content-box)
简写html padding:1px 2px 3px 4px
<style>.box {width: 200px;height: 200px;background-color: cyan;box-sizing: border-box;}.box {/* border-top-width: 5px;border-top-style: solid;border-top-color: red; *//* 简写 */border-top: 5px solid red;border-bottom: 10px solid blue;border: 1px solid #ddd;}.box {padding: 5px 10px 15px 20px;background-clip: content-box;}</style><body><div class="box"></div></body>
效果图
当左右相等，上下不相等 使用三值语法 上 左右 下
当左右相等，上下相等 使用二值语法 上下 左右
当四个方向都相等，使用单值语法；
3、外边距：控制多个盒子之间的排列间距
语法和padding一样；
margin:上 下 左 右；