CSS第一天
一、基础认知
1.1 CSS的介绍
CSS：层叠样式表（Cascading style sheets） CSS的作用：给页面中的HTML标签设置样式
例：
二、基础选择器
1.1 选择器的作用：
选择页面中对应的标签（找它），方便后续设置样式（改它）
1.2 标签选择器
结构：标签名 { CSS属性名:属性值; }
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
1. 标签选择器选择的是一类标签，而不是单独某一个
2. 标签选择器无论嵌套关系有多深，都能找到对应的标签
CSS：层叠样式表（Cascading style sheets） CSS的作用：给页面中的HTML标签设置样式
1.2 CSS语法规则
CSS写在style标签中，style标签一般写在head标签里面，title标签下面
例：
1.3 CSS初体验
常见的属性：
| CSS常见属性 | 作用 |
|---|---|
| color | 文字颜色 |
| font-size | 字体大小 |
| background-color | 背景颜色 |
| width | 宽度 |
| height | 高度 |
1 DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Documenttitle> 9 <style> 10 p { 11 color: blue; 12 font-size: 30px; 13 background-color: black; 14 width: 200px; 15 height: 200px; 16 } 17 style> 18 head> 19 20 <body> 21 <p>hello,world!p> 22 body> 23
注意：
1. CSS的标点都是英文状态下的
2. 每一个键值对写完之后，最后需要写分号
2.1 CSS引入方式
内嵌式： CSS写在style标签中
提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中
外联式：CSS写在一个单独的.CSS文件中
提示： 需要通过link标签在网页中引入
行内式：CSS写在标签的style属性中
hello,world!
小结：CSS常见三种引入方式的特点区别有哪些（书写位置，作用范围，使用场景）？
| 引入方式 | 书写位置 | 作用范围 | 使用场景 |
|---|---|---|---|
| 内嵌式 | CSS写在style标签中 | 当前页面 | 小案例 |
| 外联式 | CSS写在单独的CSS文件中.通过link标签引入 | 多个页面 | 项目中 |
| 行内式 | CSS写在标签的style属性中 | 当前标签 | 配合js使用 |
1.2类选择器
结构：.类名 { css属性名：属性值； } 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式 注意点： 1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字） 2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头 3. 一个标签可以同时有多个类名，类名之间以空格隔开 4. 类名可以重复，一个类选择器可以同时选中多个标签 3. id选择器 结构：#id属性值 { css属性名：属性值； } 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式 注意点： 1. 所有标签上都有id属性 2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！ 3. 一个标签上只能有一个id属性值 4. 一个id选择器只能选中一个标签 4. 通配符选择器 结构：* { css属性名：属性值； } 作用：找到页面中所有的标签，设置样式 注意点： 1. 开发中使用极少，只会在极特殊情况下才会用到 2. 在小页面中可能会用于去除标签默认的margin和padding 三、字体和文本样式 1.1 字体大小 属性名：font-size 取值：数字 + px 注意点： 谷歌浏览器默认文字大小是16px 单位需要设置，否则无效 1.2 字体粗细 属性名：font-weight 取值： 关键字： 正常：normal 加粗：bold 纯数字：100~900的整百数： 正常：400 加粗：700 注意点： 不是所有字体都提供了九种粗细，因此部分取值页面中无变化 实际开发中以：正常、加粗两种取值使用最多。 1.3 字体样式（是否倾斜） 属性名：font-style 取值： 正常（默认值）：normal 倾斜：italic 1.5 字体系列 font-family 属性名：font-family 常见取值：具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列 具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等…… 字体系列：sans-serif、serif、monospace等…… 渲染规则： 1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体 2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体 注意点： 1. 如果字体名称中存在多个单词，推荐使用引号包裹 2. 最后一项字体系列不需要引号包裹 3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示 1.6 字体font相关属性的连写 属性名：font (复合属性) 取值： font : style weight size family; 省略要求：只能省略前两个，如果省略了相当于设置了默认值 注意点：如果需要同时设置单独和连写形式 要么把单独的样式写在连写的下面 要么把单独的样式写在连写的里面 1.7 字体相关属性总结 字体大小： font-size 数字+px 字体粗细：font-weight 正常：normal 或 400 加粗：bold 或 700 字体样式：font-style 正常：normal 倾斜：italic 字体系列：font-family 具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列 字体连写：font font : style weight size family; 2.1 文本缩进 属性名：text-indent 取值： 数字+px 数字+em（推荐：1em=当前标签的font-size的大小） 2.2 文本水平对齐方式 属性名：text-align 取值：left左对齐 ；center居中对齐；right右对齐 注意点：如果需要让文本水平居中，text-align属性给文本所在的标签设置 2.3 水平居中方法总结 text-align：center text-align：center 能让那些元素居中？ 1. 文本 2. span，a标签 3. input，img标签 如果需要让以上元素水平居中，text-align；center 需要给以上元素的父元素设置 2.4 文本修饰 属性名：text-decoration 取值： underline 下划线；line-through 删除线；overline 上划线；none 无装饰线； 注意点： 开发中会使用text-decoration：none；清除a标签默认的下划线 3.1 行高 作用：控制一行的上下行间距 属性名：line-height 取值：px+数字 /倍数（当前标签font-size的倍数） 应用： 1. 让单行文本垂直居中可以设置line-height：文字父元素高度 2. 网页精准布局时，会设置line-height：1 可以取消上下间距 行高与font，注意覆盖问题 font：style weight size/line-height family；