CSS的中文名称: 层叠样式表
CSS的作用: 给页面中的HTML标签设置样式
CSS的语法规则:
<style>
p {
color: red;
}
</style>
p 是选择器, color是属性名, red是属性值
CSS常见属性:
css常见属性 | 作业 |
---|---|
color | 文字颜色 |
font-size | 字体大小 |
background-color | 背景颜色 |
width | 宽度 |
height | 高度 |
注意点:
- CSS标点符号都是英文状态下的
- 每一个样式键值对写完之后, 最后需要写分号
内嵌式:CSS 写在style标签中
- 提示:style标签虽然可以写在页面任意位置,但是通常约定写在 head 标签中
外联式:CSS 写在一个单独的.css文件中
- 提示:需要通过link标签在网页中引入
行内式:CSS 写在标签的style属性中
- 提示:不推荐使用,之后会配合js使用
CSS常见三种引入方式的特点区别(书写位置, 作用范围, 使用场景)
引入方式 | 书写位置 | 作用范围 | 使用场景 |
---|---|---|---|
内嵌式 | CSS写在style标签中 | 当前页面 | 小案例 |
外联式 | CSS写在单独的CSS文件中, 通过link标签引入 | 多个页面 | 项目 |
行内式 | CSS写在标签的style属性中 | 当前标签 | 配合js使用 |
作用: 通过页面中对应的标签(找它), 方便后续设置样式(改它)
-
标签选择器
结构: 标签名{css属性名: 属性值;}
作用: 通过标签名, 找到页面中所有这类标签, 设置样式
注意点:
- 标签选择器选择的是一类标签,而不是单独某一个
- 标签选择器无论嵌套关系有多深,都能找到对应的标签
-
类选择器
结构:.类名 { css属性名:属性值; }
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式注意点:
- 所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
- 类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
- 一个标签可以同时有多个类名,类名之间以空格隔开
- 类名可以重复,一个类选择器可以同时选中多个标签
-
ID选择器
结构:#id属性值 { css属性名:属性值; }
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
注意点:- 所有标签上都有id属性
- id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的!
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
-
补充: 类与id的区别
-
class类名与id属性值的区别
- class类名相当于姓名,可以重复,一个标签可以同时有多个class类名
- id属性值相当于身份证号码,不可重复,一个标签只能有一个id属性值
-
类选择器与id选择器的区别
- 类选择器以 . 开头
- id选择器以 # 开头
-
实际开发的情况
- 类选择器用的最多
- id一般配合js使用,除非特殊情况,否则不要使用id设置样式
- 实际开发中会遇到冗余代码的抽取 (可以将一些公共的代码抽取到一个公共的类中去)
-
-
通配符选择器
结构:* { css属性名:属性值; }
作用:找到页面中所有的标签,设置样式
注意点: 开发中使用极少,只会在极特殊情况下才会用到
可能会用于去除标签默认的margin和padding