1. 什么是CSS
CSS:层叠样式表,也就是给HTML增加样式进行修饰美化的。它可以通过对网页中元素的排版,做到页面的样式和结构分离。
2. CSS 基本语法:
选择器 + {一条或者多条声明}
举例:
p 就是选择器,{ } 中的就是声明,也就是对 p 标签样式的描述。
注意:CSS要写到 style 中,style 标签可以放到页面的任意位置,为了方便修改,一般放到 head 标签中。
4. CSS 类型
CSS 类型分为三种:行内样式,内部样式,外部样式
4.1 行内样式
针对某一个标签写在行内的样式叫做行内样式。
用法:
缺点:只适合简单样式,对单个标签起作用。这种写法优先级较高,会覆盖其他样式。
4.2 内部样式
写在 html 内部(比如 html 的 head 或者 body)的样式叫做内部样式。
用法:
优点:内部样式可以做到样式与页面结构分离,方便再次修改。
缺点:分离的不够彻底,CSS 内容多的时候放在 html 中显得繁琐。
4.3 外部样式
实际工作中最常用的就是外部样式,创建一个 CSS 文件,使用 link 标签引入。
<head>
...
<link rel = "stylesheet" href = "CSS路径">
</head>
三种样式优先级:行内样式 > 内部样式 > 外部样式
5. 选择器种类
选择器是针对修改谁就用谁。
选择器功能是选中页面中指定的标签元素,选中元素后才可以设置元素属性。
常见选择器:标签选择器、类选择器、id选择器、通配符选择器
5.1 标签选择器
标签选择器就是选择一个标签对他进行声明也就是给他设置样式。
举例:
特点:能快速为同一类型的标签都选择出来,但是不能差异化选择。
5.2 类选择器
类选择器就是使用类名,给某一类设置样式。
注意:
- 类名用.开头。
- 下方的标签使用class属性来调用。
- 一个类可以被多个标签使用,一个标签也能使用多个来。
- 不要使用纯数字,或者中文,以及标签名来命名。
举例:
特点:差异化表示不同的标签,可以让多个标签的都使用同一个标签。
5.3 id 选择器
id 选择器就是使用某一个元素的id,给这个元素设置样式。
注意:
- id 选择器中使用 # 开头后面加某个元素的 id 值。
- id 选择器中的 id 值和html 中元素的 id 值相同,但是是先有 html 中的 id 值才会有 CSS 中的 id 值。而类选择器是先在 CSS 中使用类名创建类选择器,html 中的标签才可以使用这个类名调用类选择器。(类选择器和 id 选择器的一个区别)
- id 是唯一的。
举例:
特点:同一个 id 值一个页面只设置使用一次。
5.4 通配符选择器
使用 * 选取所有的标签,改变样式,但是不能改变有行内样式的标签。
举例:
改变后: