文章目录
什么是CSS?
就像我们前面说的:CSS是用来描述页面样式的。它本身是一个"层叠样式表",能够对网页中特定元素的排版进行像素级精确控制,实现美化页面的效果。
CSS在HTML中的位置
内联样式
html
<div style="color:green">使用内联样式直接改变元素的颜色</div>
注:使用style属性设置样式,只针对当前元素生效。
内部样式
html
<style>
div {
color: red;
}
</style>
<div>使用内部样式改变元素颜色</div>
注:将style标签和要修饰的元素拆分出来,并且都放在body里
外部样式
html
//创建外部的一个.css文件
div {
color: red;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>使用外部样式改变元素的颜色</div>
</body>
注:
- 在外部创建一个.css文件
- 使用link标签在head里引入css
CSS的选择器
只有在选中了元素之后才能为其设置样式,CSS的选择器就是让你来选中页面中的哪个/哪些元素,{}里面的样式就是针对这些元素生效的。
普通选择器
标签选择器
html
div {
color: red;
font-size: 100px;
}
注:通过标签名进行选择,就是表示当前页面中所有相同的标签都要被选中。
类选择器
html
.one {
color: red;
font-size: 100px;
}
注:
- 此处写的one是类名,所有的HTML元素都可以指定类名
- 不同元素可以指定相同的类名
- 通过"."加类名来选中元素,表示类名相同的元素都要被选中
id选择器
html
#two {
color: green;
font-size: 100px;
}
注:
- 此处写的two是id,所有的HTML都可以指定id
- 在同一个页面内id是唯一的,不同的元素不能使用相同的id
- 通过"#"加id来选中元素,表示要选中指定id的元素,只能选中一个。
通配符选择器
html
* {
color: blue;
font-size: 100px;
}
注:通过"*"来选中元素,表示页面内的所有元素都被选中
复合选择器
复合选择器:就是把多个基础选择器给组合起来了
后代选择器
html
后代选择器:元素1 元素2 {样式声明}
ul li {
color: red;
font-size: 100px;
}
注:
- 后代选择器:就是在指定的元素中去筛选后代元素
- 元素1和元素2可以是标签选择器、类选择器、id选择器,元素1和元素2之间有一个空格
- 可以把元素1后代里所有的元素2筛选出来,不管隔了几代都可以筛选出来
子选择器
html
子选择器: 元素1>元素2 { 样式声明 }
ol>li {
color: red;
font-size: 100px;
}
注:
- 子选择器:就是在指定的元素中去筛选子代元素,不能筛选孙子代,更不能筛选更后代的
- 元素1和元素2可以是标签选择器、类选择器、id选择器,元素1和元素2之间用 > 连接
并集选择器
html
并集选择器:元素1, 元素2 { 样式声明 }
h1,h2 {
color: white;
font-size: 100px;
}
注:
- 并集选择器:就是用于选择多组标签
- 元素1和元素2可以是标签选择器、类选择器、id选择器,元素1和元素2之间用 , 连接
伪类选择器
html
伪类选择器:是选中元素的不同状态
选择未被访问过的链接
a:link {
color: orange;
font-size: 100px;
}
选择已经被访问过的链接
a:visited {
color: purple;
}
选择鼠标悬停的链接
a:hover {
color: blue;
}
选择鼠标按下的链接
a:active {
color: red;
}
注:使用 : 连接左右俩边
CSS的样式
CSS的样式纷繁多样,为了让大家思路更加清晰,特地单独总结了一篇文章来介绍。