CSS基础

---

CSS常用选择器

1. HTML选择器
   li{color: blue;}将html标签作为选择器
2. 类选择器
   .a{color: gray;}将html标签中定义的属性类名作为选择器，格式为.+类名
3. id选择器
   #uid{color: black;}将html标签中定义的属性id作为选择器，格式为#+id名
4. 关联选择器
   ol li{color: brown;}类似html选择器，但是加上了限定，用空格隔开，含义为有序列表ol下的li标签按此样式修饰
5. 选择器组
   h1,h2,h3,h4{color: chartreuse;}给列出的html标签都按此样式修饰，标签之间用逗号隔开
6. 伪类选择器
   格式为标签名:伪类名，典型的用法是修饰超链接

a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* ⿏标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */

常用的伪类名：
first-child标签下的第一个元素
last-child标签下的倒数第一个元素

---

CSS常用属性

---

基本单位

em代表当前字体的尺寸，应用非常广泛
ex代表一个字体的x-height，通常是字体尺寸的一半
px代表计算机屏幕上的一个像素点
颜色的设置有三种形式

---

字体属性

font-size字体大小
text-indent:2em;首段缩进2个当前格式的字符
font-family字体
font-weight字体加粗
字体样式的设置有三种形式

---

文本属性

text-align文本的位置，取值为left，center，right
text-decoration字体画线，取值为none，underline下划线，line-through贯穿线
text-shadow文本的文字是否有阴影和模糊效果
letter-spacing⽂字或字⺟的间距
word-spacing表示空格的大小，用于字符的对齐
line-height行高，设置行高可以上下对齐
color字体颜色

---

background属性

background-color背景颜色
background-image背景图片
background-repeat是否重复，默认为重复，小图会铺满背景
background-position定位

---

边框，内补白与外补白

border宽度 样式 颜⾊;
border-color边框颜色
border-style边框样式，取值为solid实线，dotted点状线，dashed虚线
border-width边框长度
border-bottom:1px solid blue;绕过前面的属性，直接设置下部边框，宽度为1，实线，蓝色

padding检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
padding-top检索或设置对象顶边的内部边距
padding-right检索或设置对象右边的内部边距
padding-bottom检索或设置对象下边的内部边距
padding-left检索或设置对象左边的内部边距

margin检索或设置对象四边的外延边距
margin-top检索或设置对象顶边的外延边距
margin-right检索或设置对象右边的外延边距
margin-bottom检索或设置对象下边的外延边距
margin-left检索或设置对象左边的外延边距
margin: 0px auto;自动进行左右居中，在外补白和内补白置0的时候，紧靠上边界

---

Position属性

position定位⽅式，取值为absolute(绝对定位)、fixed(固定)、relative(定位参考，可对内部相对
absolute定位)
fixed主要用于制作导航栏等随着用户滑动保持的网页元素
z-index层叠顺序，值越⼤越在上⽅
top检索或设置对象与其最近⼀个定位的⽗对象顶部相关的位置

---

Layout布局

display是否及如何显示，取值为none隐藏，block块状显示()，flex弹性盒子
float指出了对象是否及如何浮动，取值为none，left，right
clear清除浮动，取值为none，left，right，both两侧

---