一、CSS初体验
1.CSS定义
层叠样式表：用来描述HTML文档的呈现
2.CSS引入方式
- 内部样式表：CSS代码现在head里面的style标签里面
- 外部样式表：CSS代码写在单独的CSS文件中，在HTML的head中，使用link标签引入
- 行类样式：配合JavaScript使用，写在标签的style属性值里
3.布局标签div和span
- div：换行显示（盒子）；span：一行显示
4.认识几个通用css样式设置
- 宽：width；高：height；背景颜色：background-color;文字大小：font-size；文字颜色：color
二、选择器
1.选择器认知
- 作用：查找标签，设置样式
- 标签选择器：使用标签名作为选择器（选中同名标签设置相同的样式）例：p,h1,div,a,img
- 类选择器：①定义类选择器→
.类名，②使用类选择器→标签添加class="类名"
- 类名自定义，不要用纯数字或中文，尽量用英文命名
- 一个类选择器可以供多个标签使用
- 一个标签可以使用多个类名，类名之间用空格隔开
- id选择器：①定义id选择器→
#id名，②使用id选择器→标签添加id="id名"
- 同一个 id 选择器在一个页面只能使用一次
- 通配符选择器：查找页面所有标签，设置相同样式。*{}
三、文字属性相关
- 文字大小 font-size pc端3常用单位px，默认字号16px
- 字体粗细 font-weight 数字（100-900）或关键字，默认400
- 字体样式 font-style 正常：normal 倾斜：italic
- 行高 line-height 设置多行文本的间距，
数字+px或者数字（当前标签font-size属性值的倍数）- 行高居中技巧：行高的值设置为盒子高度的值
- 文本缩进 text-indent
数字+px或数字+em（推荐：1em=当前标签的字号大小）- 水平对齐方式
text-align ：center居中对齐left左对齐right右对齐- 文本修饰线
text-decoration : none无underline下划线line-through删除线overline上划线- 文字颜色：
color：red红色rgba（0，0，0，0.5）黑色，透明度50%
四、元素显示
1.基本认识
- 块级元素div h系列 ul li 独占一行，宽默认是父级的100%，添加宽高生效
- 行内元素 span strong a 一行可显示多个，设置宽高不生效，宽高由内容撑开
- 行内块元素 img input 一行可显示多个 设置宽高生效，宽高也可以由内容撑开
- 转换显示模式
display ：inline-block转成行内块
五、调试
- 作用：检查、调试代码；帮助程序员发现代码问题、解决问题
- 浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查 （F12）
- 重点学习
