1. CSS介绍
（1）作用：通过CSS达到美化网页的效果
（2）与HTML之间的关系：通过css控制HTML标签，达到美化网页的效果
（3）CSS的基本语法：选择器 {属性:值；属性:值;...........}
（4）选择器：在网页中选中标签的过程。
✔ 基础选择器（重点）：
◆标签选择器（重点）
◆类选择器（重点）
◆ID选择器
◆通配符选择器
✔ 复合选择器（重点）：
◆后代选择器（重点）
◆子代选择器
◆伪类选择器（重点）
◆并集选择器（重点）
◆标签指定选择器（重点）
2 .CSS基本语法介绍
总结基础的属性：
width：设置宽度 注意：设置值时，需要设置单位px
height: 设置高度 注意：设置值时，需要设置单位px
font-size：控制文字大小 注意：设置值时，需要设置单位px
color：控制文字颜色【前景色】
background-color：设置背景色
3.CSS书写位置
（1）内嵌式写法
◆在HTML页面中设置一个style标签
◆style标签必须放到head中
（2）行内式写法
注意：行内样式指的是在标签内部通过style属性去控制样式
（3）外联式写法
◆将css代码和html代码分开去写：
✓先新建一个css文件（文件后缀名为.css）
✓将css代码写入css文件中
✓用link标签将css文件引入到html页面中即可。
注意：一个html页面中可以同时引用多个css文件。
4.标签选择器
标签选择器 {属性：值；......}
注意：所谓的标签选择器，其实就是以html标签名作为选择器，实现选中标签的过程。
5.类选择器
◆.自定义名称{属性：值；....} ---类样式的定义
◆要让定义好的类样式起作用，还得让标签去调用，标签通过class属性调用即可。
类的命名规范注意事项：
◆不能使用数字定义类名
◆不能使用特殊字符定义类名（%，/.....）
◆不推荐使用单个字母定义类名（不严谨）
◆不推荐使用汉字定义类名（不严谨）
◆推荐使用与定义好的类名
◆使用有具体语义的单词或拼音
类选择器的特点：
◆一个类样式可以被多个标签同时调用
◆一个标签可以同时调用多个类选择器
6. ID选择器
◆#自定义的ID名称 {属性：值；..........} ——ID样式的定义
◆ID选择器的调用：标签通过ID属性调用即可
ID选择器与类选择器之间的区别：
◆一般情况下，我们在使用ID选择器在设置样式的时候，最好保持每个标签的ID值不一样。
◆一个标签只能调用一个ID样式（即一个标签只能有一个ID值）
1.6 通配符选择器
◆语法：*{ 属性：值；.......}
◆特点：通过该选择器会将页面中所有的标签都选中。
7.颜色的表示方式
◇使用预定义颜色
◇使用三原色表示
r---red 0-255
g---green 0-255
b---blue 0-255
◇使用十六进制表示颜色
特点：以#开始 0-f 0-F
8.与文本相关的属性
font-size:设置文字大小
font-family:设置文字字体
font-weight:设置文字是否加粗
◇normal 或者设置 400 (默认值)
◇ bold 或者设置 700 (文字加粗)
font-style:设置文字是否斜体
◇normal(默认值)
◇italic（斜体）
line-height:设置文字的行高
行高的本质是改变文字上下之间的距离
9. font属性联写
注意：◇在font属性联写中，必须设置font-size和font-family。
◇ 在font属性联写中，font-size必须放到font-family之前。
10.文本修饰
文字阴影
注意：设置多个文字阴影，用逗号隔开即可。
设置内容居中显示：
text-align:left |center | right
注意：该属性只能在块级元素中使用。
11.后代选择器
◇后代选择器必须在嵌套结构中使用
◇后代选择器只能选中所有后代元素（子元素）
◇语法：
选择器 选择器{ 属性：值；........}
注意：后代选择器 选择器与选择器中间一定要有空格
12.子代选择器
语法：选择器>选择器{属性：值；...........}
特点：只能在嵌套结构中使用自带选择器
子代选择器只能选中直接子元素（只能选中儿子）
13.标签指定式选择器
又名交集选择器
语法
选择器选择器{属性：值；.........}
标签指定式选择器的关系：
既.........又............
14.并集选择器
◇语法
选择器，选择器{属性：值；.......}
◇通过并集选择器设置公共样式。
扫一扫
975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
