初识CSS
CSS概述
层叠样式表（ Cascading Style Sheet ，简称CSS ）， 其基本作用是给页面中的HTML标签设置样式，比如颜色，定位，装饰。
CSS语法格式如下：
选择器{
属性名:属性值;
}选择器：CSS样式作用的对象
属性名：样式的种类
属性值：样式的取值
CSS 引入方式
①内嵌式:将CSS页面样式写在html的 <head> 里，作用于整个html，适用于小案例
②外联式: 先写好.css文件，使用 <link> 链接到外部.css文件或者 @import 导入外部.css文件，适用于大项目
注：使用 @import 时，直接写 ".css文件路径" 也可以
③行内式: 直接将css样式写在html标签里 ，主要配合js使用
CSS基础选择器（后续还有进阶选择器）
①标签选择器: 顾名思义，直接以HTML标签命名，对该类标签进行统一设置样式
运行效果如下：
②类选择器: 以 . 开头，class值不能以数字开头，其相当于姓名，可以重复，并且一个标签可以同时有多个class类名（实际开发中用的最多）
运行效果如下：
③ID选择器: 以 # 开头，id值不能以数字开头，其相当于身份证号码，不可重复，一个标签只能有一个id属性值（id一般配合js使用，除非特殊情况，否则最好不要用id设置样式）
运行效果如下：
④通配符选择器: 即 * ，对页面中所有标签设置样式
运行效果如下：
诶，为什么div标签没有听通配符的话改变颜色呢？上面的id为"div-1"的div颜色为什么和其他的div不一样？ 其实，选择器之间也是存在优先级的，这也是CSS的三大特性之一，在基础选择器里，优先级从低到高为：
通配符选择器<标签选择器<类选择器<id选择器
CSS的常见属性样式
字体样式
- 字体大小：font-size: 数字 + px (谷歌浏览器默认16px)
- 字体粗细：font-weight: (①关键字(多使用)：normal正常 bold加粗 ②纯数字：100~900整百数， 400正常 700加粗)
注意: ①不是所有字体都提供了九种粗细，部分取值在页面中是没有变化的
②实际开发中，要么使用关键字，要么使用400和700来设置字体粗细
- 字体样式：font-style: (normal正常 italic倾斜)
- 字体系列：font-family: (可写多种字体，字体由多个单词组成时，用'' "包裹，中间以，隔开，最后以字体系列结束，不需要" "包裹)
注意: ①windows默认微软雅黑，macOS默认苹方
②从前往后识别字体，如果电脑中未安装该字体，则会显示下一个字体，假如都不支持，则会显示系统默认字体
③实际开发中，尽量使用系统常见自带字体，懂得都懂
④常见字体系列：sans-serif: 无衬线字体 (粗细均匀无装饰可用于大部分网页)
serif: 衬线字体(粗细不均有笔锋可用于报刊书籍)
monospace: 等宽字体(宽度相等可用于程序代码的编写)
- 字体font相关属性连写形式
font:style weight size family;
小Tip：swsf（稍微舒服）
注意：①只能省略前两个属性，后两个不能省略（如果省略了取值，相当于设置了默认值）
②单独样式必须要写在连写的后面，否则单独样式不生效，这其实是一个样式的层叠问题，很简单，如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效
文本样式
- 文本缩进：text-indent: 数字 + px 或者 数字 + em（推荐：1em=当前标签中font-size的大小）
- 文本水平对齐方式：text-align:（left左对齐 right右对齐 center居中）
注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
- 文本修饰：text-decoration:（none无装饰线（常用） underline下划线（常用） line-through删除线（不常用） overline上划线（几乎不用））
注意：开发中会使用text-decoration: none; 去清除a标签默认的下划线
- 行高：line-height: 数字 + px 或者 倍数（当前标签font-size的倍数）
注意：①行高 = 文本高度 + 上下边距
②网页精准布局时，会设置line-height:1,可以取消上下间距
③让单行文本垂直居中可以设置line-height：文字父元素的高度
④行高和font连写属性存在覆盖问题，line-height和size是等价的，故需要防止发生覆盖
背景样式
- 背景颜色（bgc）：background-color: 颜色取值
注意：①背景颜色默认透明，即rgba(0,0,0,0)或者transparent
- 背景图片（bgi）：background-image: url('图片的路径')
注意：①url里可以省略引号
②背景图片类似于背景颜色（只是装饰效果），不能撑开盒子
③背景图片默认是在水平和垂直方向平铺的（类似于铺地板，将盒子铺满）
- 背景平铺（bgr）：background-repeat:（repeat 水平和垂直方向都平铺（默认） no-repeat 不平铺 repeat-x 沿水平方向(x轴)平铺 repeat-y 沿垂直方向(y轴)平铺）
- 背景位置（bgp）：background-position: 水平方向的位置 垂直方向的位置
注意：①位置属性取值如下：
②方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直
- 背景background相关属性连写形式:
background: color image repeat position;
注意：①书写顺序没要求，建议按照以上推荐来写
②可以按照需求随意省略属性，在PC端，假如盒子大小和背景图片大小一样，可以直接写background: url();
262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
