CSS基础
基础认知
CSS初识
CSS：层叠式样式表
作用：为页面的html标签设置样式
注意：
-
CSS标点符号都时英文状态下的
-
每一个样式键值对写完后，都需要写分号
CSS引入方式
-
内嵌式：CSS卸载style标签中，style标签通常约定写在head标签中
-
外联式：CSS写在一个单独的.CSS文件中，通过link标签在网页中引用
-
行内式：CSS写在标签的style属性中，一般和js配合使用
选择器
作用：选择页面中对应的标签，方便后续设置样式
标签选择器
结构：标签名{CSS属性名:属性值;}。例如：
p {
color:red;
}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意：
-
标签选择器选择的是一类标签，而不是某一个标签
-
标签选择器无论嵌套关系多深，都能找到对应的标签
类选择器
结构：.类名{CSS属性名:属性值;}。例如：
.one {
color:red;
}
作用：通过类名，找到页面中所有带有这个标签的类名，设置样式
注意：
-
所有标签都有class属性，属性值被称为类名
-
类名可以由数字，字母，下划线，中划线组成，但不能一数字或者中划线作为开头
-
一个标签可以同时拥有多个类名，类名之间以空格隔开
-
类名可以重复，一个类选择器可以同时选中多个标签
id选择器
结构：#id属性值{CSS属性名:属性值;}。例如：
#two {
color:red;
}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意：
-
所有标签上都有id属性
-
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
-
一个标签上只能有一个id属性值
-
一个id选择器只能选中一个标签
类与id的区别
-
属性值的区别
-
class类名相当于姓名，可以重复，一个标签可以同时拥有多个class类名
-
id属性值相当于身份证号，不可以重复，一个标签只能拥有一个id属性值
-
-
选择器的区别
-
类选择器以
.开头 -
id选择器以
#开头
-
-
实际开发情况的区别
-
类选择器用的最多
-
id选择器一般配合js使用
-
通配符选择器
结构：* {CSS属性名:属性值;}。例如：
* {
color:yellow;
}
作用：为页面中所有的标签设置样式
注意：开发使用极少，只有在及其特殊的情况下使用
字体文本样式
字体样式
字体大小
属性名：font-size
取值：数字+px
注意：
-
谷歌浏览器默认文字大小是16px
-
单位需要设置，否则无效
字体粗细
属性名：font-weight
取值：
-
关键字：normal（正常），bold（加粗）
-
数字值：400（正常），900（加粗）
字体样式（是否倾斜）
属性名：font-style
取值：
-
正常（默认值）：normal
-
倾斜：italic
字体系列
属性名：font-family
常见取值：具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
-
具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……
-
字体系列：sans-serif（无衬线字体）、serif（衬线字体）、monospace（等宽字体）等……
渲染规则：
-
从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
-
如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意：
-
如果字体名称中存在多个单词，推荐使用引号包裹
-
最后一项字体系列不需要引号包裹
-
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
常见字体系列
- 无衬线字体（sans-serif）
特点：文字笔画粗细均匀，并且首尾无装饰
场景：网页中大多采用无衬线字体
常见该系列字体：黑体、Arial
- 衬线字体（serif）
特点：文字笔画粗细不均，并且首尾有笔锋装饰
场景：报刊书籍中应用广泛
常见该系列字体：宋体、Times New Roman
- 等宽字体（monospace）
特点：每个字母或文字的宽度相等
场景：一般用于程序代码编写，有利于代码的阅读和编写
常见该系列字体：Consolas、fira code
样式层叠问题
如果给同一个标签设置了相同的属性，此时样式会层叠，写在最下面的生效
字体font相关属性属性的连写
属性名：font（复合属性）
取值：font:style weight size family;
省略要求：只能省略前两个，若省略相当于设置了默认值
注意：要么把单独的样式写在连写的下面，要么把单独的样式写在连携的里面
文本样式
文本缩进
属性名：text-indent
取值：
-
数字+px
-
数字+em（1em=当前标签font-size的大小）
文本水平对齐方式
属性名：text-align
取值：
-
lift，左对齐 -
center，居中对齐 -
right，右对齐
注意：若需文本水泵居中，text-align属性给文本所在标签（文本的父级元素）设置
文本装饰
属性名：text-decoration
取值：
-
underline：下划线 -
line-through：删除线 -
overline：上划线 -
none：无装饰线
注意：开发中会使用text-decoration:none去除a标签默认的下划线
line-height
作用：控制一行的上下行间距
属性名：line-height
取值：
-
数字+px
-
数字（表示font-size的倍数）
应用：
-
让单行文本垂直居中可以设置
line-height:文字父级元素高度 -
网页精准布局时，会设置
line-height:1取消上下间距
行高与font连写的注意点：
-
如果同时设置了行高和font连写，注意覆盖问题
-
font : style weight size/line-height family ;
chrome调试工具
-
打开方式：右击，检查，看哪里：
-
elements：显示当前页面的html结构
-
styles：显示当前标签的样式
-
-
选择元素：两种常见方法
-
在左侧elements中点击需要调试的元素
-
点击左上角按钮后，直接在网页中点击需要调试的元素
-
-
控制样式：修改属性值，添加属性，控制样式生效
-
修改属性值：直接点击属性修改
-
添加属性：在上一个属性的分号以后点击一下，直接添加
-
控制样式生效：点击属性前的小框即可
-
-
特殊情况：出现删除线，出现小三角形
-
样式上有删除线：样式失效，说明样式被注释或者覆盖
-
样式前有小三角形：样式报错，说明属性值后面未写分号，或者出现中文标点和单词拼写错误
-
