CSS
层叠样式表 (Cascading Style Sheets).
CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结
构分离.
CSS 基本语法规范:
选择器 + 若干属性声明
-
选择器决定针对谁修改 (找谁)
-
声明决定修改啥 (干啥)
-
声明的属性是键值对. 使用: 区分键值对和键和值.
示例代码
运行效果
三种写 CSS 的方式
1.内部样式: 使用 style 标签,直接把CSS写到 html文件中的.
此时的 style 标签可以放到任何位置,一般建议放到 head标签里.
注: 上面写的代码就是这种方式.
2.内联样式: 使用 style 属性,针对指定的元素设置样式.
(此时不需要写选择器,直接写属性键值对),这个时候样式只是针对当前元素生效.
示例代码
运行效果
3.外部样式: 把 css 代码单独作为一个.css文件,再通过 link 属性,让 html 引入该 css文件.
css 文件
html 代码
运行效果
CSS 选择器
1.标签选择器
示例代码
运行效果
2.类选择器
示例代码
运行效果
示例代码2
运行效果
通过该例子来理解层叠
3.ID选择器
注: 类选择器,是可以让多个元素应用同一个类的.id选择器,则只能针对唯一的元素生效,因为一个页面里,只能有唯一的id.
示例代码
运行效果
4.后代选择器
后代选择器,把多个简单的基础选择器,组合一下(可以是标签,类, id选择器的任意组合).
标签选择器间的任意组合
示例代码
运行效果
类和标签选择器的任意组合
示例代码
运行效果
5.子选择器
示例代码
运行效果
6.并集选择器
- 通过 逗号 分割等多个元素.
- 表示同时选中元素 1 和 元素 2
- 任何基础选择器都可以使用并集选择器.
- 并集选择器建议竖着写. 每个选择器占一行(最后一个选择器不能加逗号).
示例代码
运行效果
7.伪类选择器
~~ 复合选择器的特殊用法
前面的选择器都是选中某个元素,而伪类选择器选中某个元素的某个特定状态.
1)使用:hover的示例代码
鼠标指针没悬停在上面的运行效果
鼠标指针悬停在上面的运行效果
2)使用 :hover和:active的示例代码
运行效果
CSS 常用属性值
1.设置字体家族
示例代码
运行效果
2.设置字体大小
3.字体粗细
相关的语法介绍
示例代码
运行效果
4.文字倾斜
设置倾斜: font-style: italic;
取消倾斜: font-style: normal;
示例代码
运行效果
5.文字颜色
计算机是如何表示颜色的
