目录
一、基础认识
CSS：Cascading style sheets 层叠样式表（cascade v&n 倾泻，流柱；大量落下，大量垂悬 （瀑布，有一连串的意思））。用于给HTML标签设置样式。
CSS引入方式：
三种方式：
二、基本选择器
通过选择器对HTML样式进行设置，基本选择器有四种：
1. 标签选择器
2. 类选择器
3. id选择器
4. 通配符选择器
1. 标签选择器
➢ 注意点：
1. 标签选择器选择的是一类标签，而不是单独某一个
2. 标签选择器无论嵌套关系有多深，都能找到对应的标签
2.类选择器
➢ 注意点：
1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名，类名之间以空格隔开
4. 类名可以重复，一个类选择器可以同时选中多个标签
3.id选择器
➢ 注意点：
1. 所有标签上都有id属性
2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3. 一个标签上只能有一个id属性值
4. 一个id选择器只能选中一个标签
补充：类与id的区别：
➢ class类名与id属性值的区别
• class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
• id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
➢ 实际开发的情况
• 类选择器用的最多
• id一般配合js使用，除非特殊情况，否则不要使用id设置样式
• 实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）
4. 通配符选择器
➢ 注意点：
1. 开发中使用极少，只会在极特殊情况下才会用到
2. 在页面中可能会用于去除标签默认的margin和padding
三、字体和文字样式
1. 字体样式
1. 字体大小：font-size
➢ 取值：数字 + px
➢ 注意点：
• 谷歌浏览器默认文字大小是16px
• 单位需要设置，否则无效
2. 字体粗细：font-weight
取值：有两种方式
• 关键字：
| 正常 | normal |
| 加粗 | bold |
• 纯数字：100~900的整百数：
| 正常 | 400 |
| 加粗 | 700 |
➢ 注意点：
• 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
• 实际开发中以：正常、加粗两种取值使用最多。
3. 字体样式：font-style（是否倾斜）
取值：
• 正常（默认值）：normal
• 倾斜：italic
4. 字体类型：font-family
常见取值：具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
• 具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……
• 字体系列：sans-serif、serif、monospace等……
| 系统 | 默认字体 |
|---|---|
| Windows | 微软雅黑 |
| macos | 苹方 |
➢ 渲染规则：
1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
5. 字体类型：font属性连写
➢ 取值： • font : style weight size family;
➢ 省略要求： • 只能省略前两个，如果省略了相当于设置了默认值
➢ 注意点：如果需要同时设置单独和连写形式
• 要么把单独的样式写在连写的下面
• 要么把单独的样式写在连写的里面
2. 文本样式
1. 文本缩进：text-indent
取值：
• 数字+px
• 数字+em（更推荐这种方式：1em = 当前标签的font-size的大小）
一般采用数字+em的写法，这样当字体大小发生改变时候，不用去相应的调节文本缩进（text-indent）
2. 文本水平对齐方式：text-align
注意点：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
例如：图片是在body里面，所以标签选择器应该选body而不是img
3. 文本修饰：text-decoration
注意点： • 开发中会使用 text-decoration : none ; 清除a标签默认的下划线
3. line-height行高
取值：
• 数字+px
• 倍数（当前标签font-size的倍数）
➢ 应用：
1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度（标签水平居中方法总结 margin : 0 auto）
2. 网页精准布局时，会设置 line-height : 可以取消上下间距，也可以消除文字之间的间距（也就是说文字是竖着写的，一般默认行高是1.5倍，有时候间距会显得不太好看）
➢ 行高与font连写的注意点：
• 如果同时设置了行高和font连写，注意覆盖问题
• font : style weight size/line-height family ;
4.颜色
文字颜色：color
背景颜色：background-color
rgb：表示光学三原色（红 绿 蓝）
常见颜色取值：
• rgb ( 255 , 0 , 0 ) ：红色
• rgb ( 0 , 255 , 0 ) ：绿色
• rgb ( 0 , 0 , 255 ) ：蓝色
• rgb ( 0 , 0 , 0 ) ：黑色
• rgb ( 255 , 255 , 255 ) ：白色
rgba：a表示透明度，取值0-1，值越小表示越透明。
1368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
