CSS样式相关知识点（一）：样式表、选择器、样式属性

一、样式表类型

• 第一种方式：内联/行内样式（不推荐）

直接在html文件的元素标签中写样式

• 第二种方式：内部样式表（新手练习可用）

将样式编写到head标签中的style标签里，通过CSS的选择器来选中元素并为其设置各种样式
优点：可以同时为多个标签设置样式，并且修改时只需要修改一处即可内部样式表更加方便对样式进行复用
缺点：内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用

• 第三种方式：外部样式表（推荐）

可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件

二、选择器

1 简单选择器：

• 元素选择器：<p> —— p{     }
• id选择器: <p id="xxxxx"> ——  #xxxxx{   }
• 类选择器：<p class="class1 class2">     ——  .class{    } 
• 通用选择器： *{ } 选中当前页面所有元素

2 组合选择器：

• 交集选择器（选中同时符合多个条件的元素）：div#id.class{    }（必须使用元素选择器开头，若有）
• 并集选择器：h1,p,#id,.class{  }

3 关系选择器：

• 后代选择器 (空格)
• 子选择器 (>)
• 相邻兄弟选择器 (+)下一个紧挨着的兄弟元素
• 通用兄弟选择器 (~)下边所有兄弟元素

4 伪类选择器（数量多）：

伪类用来描述一个元素的特殊状态。比如：第一个子元素、被点击的元素、鼠标移入的元素...

• :hover 悬停状态
• :first-child 第一个子元素
• :last-child 最后一个子元素
• :nth-child（）选中第n个子元素，特殊值：2n或 even 表示选中偶数位的元素；2n＋1 或 odd 表示选中奇数位的元素
• ……

5 伪元素选择器：

伪元素用于设置元素指定部分的样式。例如：设置元素的首字母、首行的样式，在元素的内容之前或之后插入内容……

• ：：after  在元素之后插入内容
• ：：before  在元素之前插入内容
• ：：first-letter 元素的首字母
• ：：first-line 元素的首行
• ：：selection 选择用户选择的元素部分

6 属性选择器：

• ［属性名］选择含有指定属性的元素
• ［属性名＝属性值］选择含有指定属性和属性值的元素
• ［属性名＾＝属性值］选择属性值以指定值开头的元素
• ［属性名＄＝属性值］选择属性值以指定值结尾的元素
• ［属性名＊＝属性值］选择属性值中含有某值的元素的元素

选择器权重：

内联样式 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
通配选择器 0，0，0，0
继承的样式没有优先级

• 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的），选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
• 如果优先级计算后相同，此时则优先使用靠下的样式
• 可以在某一个样式的后边添加 ！important，则此时该样式会获取到最高的优先级，甚至超过内联样式（慎用）

三、样式属性

1 盒子模型：

盒子：

• box-shadow
• box-sizing 尺寸计算方式

content-box 默认值，宽度和高度用来设置内容区的大小
border-box  宽度和高度用来设置整个盒子可见框的大小

边框border：

• border-style（必须）
• border-width
• border-color
• border-radius

（单独给各边设置样式）

• border-top/right/bottom/left-style/width/color: 

外边距margin：

• margin-top
• margin-right
• margin-bottom
• margin-left

内边距padding：

• padding-top
• padding-right
• padding-bottom
• padding-left

高度/宽度:

• height
• width

auto - 默认。浏览器自动计算高度和宽度
length - 以 px、cm 等定义高度/宽度
% - 以包含块的百分比定义高度/宽度
initial - 将高度/宽度设置为默认值
inherit - 从其父值继承高度/宽度

2 元素背景background：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

3 轮廓outline：

• outline-style
• outline-width
• outline-color
• outline-offset

4 文本text：

• text-align 水平对齐
• vertical-align 垂直对齐
• direction 方向
• text-decoration 装饰（下划线删除线等）
• text-transform 大小写转换
• text-indent 第一行缩进
• letter-spacing 字母间距
• line-height 行高
• word-spacing 词间距
• letter-spacing 字间距
• white-space 空白处理方式
• text-shadow 阴影

5 字体font：

• font-family
• font-style
• font-weight
• font-variant
• font-size

ps.图标字体使用方式：

引入图标库，然后在<i> 或 <span>标签中添加属性使用，eg. <i class="fas fa-bars">

6 列表list：

• list-style 简写属性
• list-style-type
• list-style-position
• list-style-image 指定列表项标记符号

7 表格：

• border    简写属性
• border-collapse    规定是否应折叠表格边框
• border-spacing    规定相邻单元格之间的边框的距离
• caption-side    规定表格标题的位置
• empty-cells    规定是否在表格中的空白单元格上显示边框和背景
• table-layout    设置用于表格的布局算法