(一) css基础知识
记录前端学习过程，方便查漏补缺，如有错误，请评论告知~
一、选择器
每个元素的样式规则都应该有开始和结束大括号（ { 和 } ），且每条样式规则都要以分号结尾
1.1 基础选择器：通配符、标签、类、id、属性
① 通配符：* ——> 选取页面中所有元素
// 语法示例
* {
padding:0;
margin:0;
}
② 标签选择器
// 语法示例
h1 {
color:pink;
}
③ 类选择器：以英文句号开头
// 语法
.类名 {
属性:属性值；
}
多类名：可以给一个标签指定多个类名，以空格分隔。如：<div class="cls1 cls2"></div>
④ id选择器：只能调用一次
// 语法
#id名{
属性:属性值；
}
⑤ 属性选择器：[attr=value]；如[type='radio']
1.2 复合选择器
① 后代选择器：只对最后一个元素有效
// 语法
元素1 元素2 ...｛｝
// 注意：元素2是元素1的后代，元素之间以空格分隔
② 子选择器：亲儿子
// 语法
元素1 > 元素2 {}
// 注意：元素2 是 元素1的直接后代(亲儿子)
③ 并集（群组）选择器：对元素1、元素2...同时生效
// 语法
元素1,元素2 ｛｝
// 注意：元素1与元素2之间以逗号分隔
1.3 伪类选择器：元素名 伪类，伪类如 :hover，:first-child
① 链接伪类选择器
a:link 未被访问
a:visited 已被访问
a:hover 鼠标指针位于其上时
a:active 鼠标按下未弹起
② :focus 伪类选择器
主要针对<input>标签，用于选取获得焦点的表单元素
input:focus
二、字体
2.1 字体系列：font-family
设置多个字体时，以 逗号 分隔
执行规则：若浏览器有第一个字体，则使用，反之，则使用后一个，若设置的字体都没有，则使用浏览器自带的默认字体。
2.2 字体大小：font-size
单位一般使用 px，如 P { font-size: 16px; }
2.3 字体粗细：font-weight
加粗：blod；正常：normal
还有一种表示方式是数值（100~900）表示，如 700等价于blod；400等价于normal
如：font-weight:700;
2.4 字体样式：font-style
normal正常；italic斜体等（查手册）
2.5 字体复合属性
font：font-style font-weight font-size/line-height font-family （顺序不能乱）
如：font：normal 700 16px 宋体;
注：不需要的属性可以省略，但必须保留font-size和font-family
三、文本
3.1 文本颜色：color
表示：
英文：red、green；
十六进制：#fff、#ff6600 （不区分大小写）;
RGB：rgb(255,0,0)、rgb(100%,0%,0%);
3.2 水平对齐：text-align
常用属性值：left、center、right
3.3 文本修饰：text-decoration
none：无装饰线
underline：下划线
overline：上划线
line-through：中划线（删除线）
3.4 文本缩进：text-indeed
单位em，常用于段落首行缩进
em是一个相对单位，是当前元素（font-size）1个文字的大小
3.5 行间距：line-height
行间距 = 上间距 + 文本高度 + 下间距
小技巧：文字垂直居中 → 行间距 = 盒子高度
四、背景
4.1 背景颜色：background-color
4.2 背景图片：background-image: URL(图片地址)
4.3 背景平铺：background-repeat：repeat（默认） / no-repeat / repeat-x / repeat-y
4.4 背景位置：background-position：x y; x和y可使用方位名词或精确单位（px）
注：① 方位名词与精确数值可混合写，但严格x y
② 若只写一个方位名词，则第二个参数默认居中
③ 若只写x ，则 y 默认垂直居中
4.5 背景图像固定：background-attachment:scroll（滚动） / fixed（固定） 多用于制作视差滚动效果
4.6 背景色半透明：background：rgba(0,0,0,0.3)
注：最后一个参数是alpha透明度，取0~1，0表示全透明，1表示不透明，中间的数值表示半透明
4.7 渐变色:线性渐变 background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
如：background:linear-gradient(35deg,#CCFFFF,#FFCCCC);
五、CSS的引入方式
5.1 行内样式表（行内式）
行内样式表是在元素标签内部的style属性中设置CSS样式。
5.2 内部样式表（嵌入式）
内部样式表是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。
5.3 外部样式表（链接式）
将样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中
关于样式中的优先级：行内样式 > ID选择器 > 类选择器
