1. CSS 简介
CSS 的全称为:层叠样式表(Cascading Style Sheets)。
CSS 也是一种标记语言。用于给 HTML 结构设置样式,例如:文字大小,颜色,元素宽高等等。
简单理解:CSS可以美化HTML,让HTML更漂亮。
核心思想:HTML搭建结构,CSS添加样式,实现了:结构与样式的分离。
2. CSS 的编写位置
2.1 行内样式
写在标签的 style 属性中(又称:内联样式)。
语法:
<h1 style="color:brown;font-size: 30px;">欢迎学习前端CSS</h1>
注意点:
style
属性的值不能随便写。写要符合CSS
语法规范,是名:值;
的形式。- 行内样式表,只能控制当前标签的样式,对其他标签无效。
存在的问题:
书写繁琐,样式不能复用、并且没有体现出结构与样式分离的思想,不推荐大量使用,只有对当前元素添加简单样式时,才偶尔使用。
2.2 内部样式
写在 html
页面内部,将所有的 CSS
代码提取出来,单独放在 <style>
标签中。
语法:
<style>
h1{
color: brown;
font-size: 30px;
}
</style>
注意点:
<stype>
标签理论上可以放在HTML
文档的任何地方,但一般都放在<head>
标签中。- 此种写法:样式可以复用,代码结构清晰。
存在的问题:
- 并没有实现:结构与样式完全分离。
- 多个
HTML
页面无法复用样式。
2.3 外部样式
写在单独的 .css
文件中,随后在 HTML
文件中引入使用。
语法:
1、新建一个扩展名为 .css
的样式文件,把所有 CSS
代码都放入此文件中。
h1 {
color: brown;
font-size: 30px;
}
2、在 HTML
文件中引入 .css
文件。
<link rel="stylesheet" href="./position.css">
注意点:
-
<link>
标签要写在<head>
标签中。 -
<link>
标签属性说明:-
href:引入的文档来自于哪里。
-
rel:(relation: 关系)说明引入的文档与当前文档之间的关系。
-
-
外部样式的优势:样式可以服用、结构清晰、可触发浏览器的缓存机制,提供访问速度,实现了结构与样式的完全分离。
-
实际开发中,几乎都使用外部样式,这是最推荐的使用方式。
3. 样式表的优先级
优先级规则:行内样式 > 内部样式 = 外部样式
内部样式、外部样式,这二者的优先级相同,且: 后面的会覆盖前面的(简记:“后来者居上“)。
同一个样式表中,优先级也和编写顺序有关,且: 后面的会覆盖前面的(简记:“后来者居上”)。
分类 | 优点 | 缺点 | 使用频率 | 作用范围 |
---|---|---|---|---|
行内样式 | 优先级最高 | 1. 结构与样式未分离 2. 代码结构混乱 3. 样式不能复用 |
很低 | 当前标签 |
内部样式 | 1. 样式可服用 2. 代码结构清晰 |
1. 结构与样式未彻底分离 2.样式不能多页复用 |
一般 | 当前页面 |
外部样式 | 1. 样式可多页面服用 2. 代码结构清晰 3. 可触发浏览器的缓存机制 4. 结构与样式彻底分离 |
需要引入才能使用 | 最高 | 多个页面 |
4. CSS语法规范
CSS语法有两部分构成。
-
选择器:找到要添加样式的元素。
-
声明块:设置具体的样式(声明块是有一个或多个声明组成的),声明的格式为:
属性名: 属性值;
- 最后一个声明后的分号理论上能省略,但最好还是加上。
- 选择器与声明块之间,属性名与属性值之间,均有一个空格,理论上能省略,但最好还是写上。
注释的写法:
/* 给h1元素添加样式 */
h1 {
/* 设置文字颜色为酒红色 */
color: brown;
/* 设置字体大小为40px */
font-size: 30px;
}
5. CSS代码风格
- 展开风格 ——开发时推荐,便于维护和调试
h1 {
color: green;
font-size: 20px;
}
- 紧凑风格 ——项目上线时推荐,可减小文件体积
h1{color: green;font-size: 20px;}
项目上线时,我们会通过工具将【展开风格】的代码,变成【紧凑风格】,这样可以减小文件体积,节约网络流量,同时也能让用户打开网页时速度更快。
6.CSS基本选择器
CSS 基本选择器包含以下四种:
-
通配选择器
-
元素选择器
-
类选择器
-
id选择器
6.1 通配选择器
作用:可以选中所有的 HTML
元素。
语法:
* {
属性名:属性值;
}
举例:
/* 选中所有元素 */
* {
color: red;
}
目前来看通配选择器貌似有点鸡肋,但后面清除样式时,会对我们有很大的帮助。
6.2 元素选择器
作用:为页面中某种元素统一设置样式。
语法:
标签名 {
属性名: 属性值
}
举例:
/* 选中所有h1元素 */
h1 {
color: red;
font-size: 40px;
}
/* 选中所有h2元素 */
h2 {
color: green;
}
/* 选中所有p元素 */
p {
color: brown;
}
元素选择器无法实现差异化设置。例如上面的代码中,所有p元素效果都一样。
6.3 类选择器
作用:根据元素的 class
值,来选中某些元素。
class
翻译过来有:种类,类别的含义,所以class
值,又称:类名。
语法:
.类名 {
属性名: 属性值;
}
举例:
/* 选中页面中所有类名为shuo的元素 */
.text {
color: brown;
}
/* 选中页面中所有类名为shi的元素 */
.shi {
color: rgb(69, 144, 88);
}
注意点:
-
元素的
class
属性值不带,但CSS
的类选择器要带。 -
class
值,是我们自定义的,按照标准:不要使用纯数字、中文。尽量使用英文与数字的组合,若由多个单词组成,使用-
做连接,例如:left-menu
,且命名要有意义,做到“见名知意”。 -
一个元素不能写多个
class
属性,下面是错误示例:
<!-- 该写法错误,元素的属性不能重复,后写的会失效 -->
<h1 class="speak" class="big">你好</h1>
- 一个元素的
class
属性,能写多个值,要用空格隔开,例如:
<!-- 该写法正确,class属性,能写多个值 -->
<p class="text shi">诗词鉴赏</p>
6.4 ID选择器
作用:根据元素的 id
属性值,来精准的选中某个元素。
语法:
#id值 {
属性名:属性值;
}
举例:
#myid {
color: blueviolet;
}
注意:
id
属性值:尽量由字母、数字、下划线(_
)、短杠(-
) 组成,最好以字母开头,不要包含空格, 区分大小写。- 一个元素只能拥有一个
id
属性。 多个元素的id
属性值不能相同。 - 一个元素可以同时拥有
id
和class
属性。
6.5 基本选择器总结
基本选择器 | 特点 | 用法 |
---|---|---|
通配选择器 | 选中所有标签,一般用于清除样式。 | * {color: red;} |
元素选择器 | 选中所有同种标签,但是不能差异化选择。 | h1 {color:red;} |
类选择器 | 选中所有特定类名(class 值)的元素——使用频率很高 |
.say {color:red;} |
ID选择器 | 选中特定id 值的那个元素(唯一的)。 |
#earthy {color:red;} |
7. CSS复合选择器
7.1 交集选择器
作用:选中同时符合多个条件的元素。
交集有并且的含义(通俗理解: 即......又......的意思),例如:年轻且帅气。
语法:选择器1选择器2选择器3......选择器n { }
举例:
/* 选中类名为a的p标签,此种写法用的非常多 */
p.beauty {
color: black;
}
/* 选中类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}
注意:
- 有标签名,标签名必须写在前面。
- id选择器,理论上可以作为交集的条件,但实际应用中几乎不用,————因为没有意义。
- 交集选择起中不可能出现两个元素选择器,应为一个元素,不可能既是
p
元素,又是span
元素。 - 用的最多的交集选择器是:元素选择器配合类名选择器,例如:
p.beauty
.
7.2 并集选择器
作用:选中多个选择起对应的元素,又称:分组选择器。
所谓并集就是或者的含义。
语法:选择器 1, 选择器 2, 选择器 3, ......选择器 n { }
多个选择器通过英文逗号连接,此处的英文逗号就代表:或。
举例:
/* 选中 id 为ad、或者类名为 rich、或者类名为 beauty 的元素 */
#ad,
.beauty,
.rich {
font-size: 40px;
background-color:cadetblue;
width: 320px;
}
注意:
- 并集选择器,我们一般竖着写。
- 任何形式的选择器,都可以作为并集选择器的一部分。
- 并集选择器,通常用于集体声明,可以缩小样式表体积。
7.3 后代选择器
作用:选中指定元素中,符合要求的后代元素。
语法:选择器1 选择器2 选择器3 ...... 选择器n { } (注意先写祖先,再写后代)
选择器之间,用空格隔开,空格可以理解为:“xxx中的”,其实就是后代的意思 。
选择器 1234......n,可以是我们学习的任何一种选择器。
举例:
/* 选中ul标签中的所有li标签 */
ul li{
color: blueviolet;
}
/* 选中ol中的所有li */
ol li{
color: aquamarine;
}
/* 选中li中的所有a标签 */
li a{
color:cadetblue;
}
/* 选中类名为subject的元素中的所有类名为sing的元素 */
.subject .sing{
color: brown;
}
/* 选中类名为subject的元素中的所有类名为frontend的li标签 */
.subject li.frontend{
color: blue;
}
7.4 子代选择器
作用:选中指定元素中,符合要求的子元素(儿子元素)。
子代选择器又称:子元素选择器,子选择器。
语法: 选择器1>选择器2>选择器3>...... 选择器n {}
选择器之间,用
>
隔开,>
可以理解为:“xxx 的子代”。选择器 1234......n, 可以是我们之前学习的任何一种选择器。
举例:
/* div中的子代a元素 */
div>a{
color: brown;
}
/* div中的子代p标签的子代a元素 */
div>p>a{
color:aquamarine;
}
/* 类名为 person的元素中的子代a元素 */
.person>a{
color:red;
}
注意:
- 子代选择器,最终选择的是子代,不是父级。
- 子、孙子、重孙子、重重孙子...... 统称后代,子就是指儿子。
7.5 兄弟选择器
相邻兄弟选择器
作用:选中指定元素后,符合条件的相邻兄弟元素。
所谓相邻,就是紧挨着自己的下一个。
语法:选择器 1+选择器 2 { }
示例:
/* 选中div后面紧紧相邻的p元素(睡在我下铺的兄弟) */
div+p{
color: brown;
}
通用兄弟选择器
作用:选中指定元素后,符合条件的所有兄弟元素。
语法:选择器1~选择器2 { }
示例:
/* 选中div后面所有的兄弟p元素(睡在我下铺的所有兄弟) ——通用兄弟选择器*/
div~p{
color: brown;
}
注意:两种兄弟选择器,选择的是下面的兄弟
7.6 属性选择器
作用:选中属性值符合要求的元素。
语法:
- [属性名] 选中具有某个属性的元素。
- [属性名="值"] 选中包含某个属性,且属性值等于指定值的元素。
- [属性名^="值"] 选中包含某个属性,且属性值以指定的值开头的元素。
- [属性名$="值"] 选中包含某个属性,且属性值以指定的值结尾的元素。
- [属性名*="值"] 选中包含某个属性,且属性值包含指定值的元素。
示例:
/* 第一种写法 :选中具有 title 属性的元素 */
[title]{
color: brown;
}
/* 第二种写法: 选中具有title属性,且属性值为vue2的元素*/
[title="vue2"]{
color: brown;
}
/* 第三种写法: 选中具有title属性,且属性值以字母a开头的元素*/
[title^="J"]{
color: blue;
}
/* 第四种写法: 选中具有title属性,且属性值以字母a结尾的元素*/
[title$="a"]{
color:blueviolet;
}
/* 第五种写法: 选中具有title属性,且属性值包含字母J的元素*/
[title*="J"]{
color:rgb(185, 128, 149);
}
7.7 伪类选择器
作用:选中特殊状态的元素。
如何理解“伪” ?—— 虚假的,不是真的。
如何理解“伪类” ?—— 像类(class),但不是类,是元素的一种特殊状态。
常用的伪类选择器:
1、动态伪类:
:link
超链接未被访问的状态。
:visited
超链接访问过的状态。
:hover
鼠标划过 (悬停)元素上的状态。
:active
元素激活的状态。
什么是激活? —— 按下鼠标不松手。
注意点:遵循
LVHA
的顺序,即:link
、visited
、hovr
、active
。
:focus
获取焦点的元素。
表单类元素才能使用
:focus
伪类。当用户:点击元素、触摸元素、或者通过键盘的
tab
键等方式选择元素时,就是获得焦点。