目录
CSS是层叠样式表,是一种标记语言
主要构成:选择器及一条或多条声明
h1{属性:值}
选择器是选取需设置样式的元素的模式,分为基础选择器和复合选择器两大类
1. 基础选择器
是由单个选择器组成
1.1 标签选择器
可以把某一类标签全部选择出来
标签{
属性:值;
属性:值;
}
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>标签选择器1</p>
<p>标签选择器2</p>
<span>标签选择器3</span>
</body>
</html>
1.2 类选择器
差异化选择不同的标签,单独选一个或某几个标签
html中以class属性表示,类选择器以"."显示
口诀:样式点定义,结构类调用
(再此说一下,想从基础学前端的可以去小破站找黑马程序员pink老师的课,讲的很好,对0基础的很友好,不是托,我是在学校学的前端,但大学嘛,主要看自己自主学习,在学校学的不深,所以有的不会的都是在他那学的,他讲课很有趣,口诀也是他给的,所以想学基础的可以去尝试一下)
多类名:class="名1 名2"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器-类选择器</title>
<style>
.green {
color: green;
}
</style>
</head>
<body>
<ul>
<li>标签选择器</li>
<li class="green">类选择器</li>
</ul>
<div >id选择器</div>
<div class="green">都是基础选择器</div>
</body>
</html>
1.3 id选择器
id属性只能在每个HTML文档中出现一次,通常和javascript合用
HTML中以id属性表示,id选择器以"#"定义
口诀:样式#定义,结构id调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器-id选择器</title>
<style>
#red {
color: red;
}
</style>
</head>
<body>
<div id="red">基础选择器-id选择器</div>
</body>
</html>
id选择器和类选择器最大的不同在于使用次数
1.4 通配符选择器
选取页面中的所有元素
使用*定义,通配符选择器不需要调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器-通配符选择器</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>基础选择器</div>
<span>通配符选择器</span>
<ol>
<li>所有元素都会改变</li>
<li>在特殊情况中使用</li>
</ol>
</body>
</html>
2. 复合选择器
由多个基础选择器通过不同方式组合而成
2.1 后代选择器
可选择父元素里面的子元素
当标签发生嵌套时,内层标签就成为外层标签的后代
外层标签写前,内层标签写后。
元素1 元素2 {
样式声明
}
元素2是元素1的后代就可
最终选择的是元素2(元素2改变)
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器-后代选择器</title>
<style>
ul li {
color: red;
}
ul li a {
color: green;
}
ol li {
color:pink;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">悯农</a>
</li>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>
<a href="#">JavaScript</a>
</li>
</ol>
</body>
</html>
2.2 子选择器
只能选择作为某元素的最近一级的子元素(相当于亲儿子)
元素1>元素2 {
样式声明
}
元素2必须是亲儿子
最终选择的是元素2(元素2改变)
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器-子选择器</title>
<style>
.nav>a {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">CSS</a>
<P><a href="#">HTML</a></P>
</div>
</body>
</html>
2.3 并集选择器
可选择多组标签,同时为他们定义相同的样式,通常用于集体声明
元素1,元素2 {
样式声明
}
元素1,元素2改变
任何形式的选择器都可以作为并集选择器的一部分
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器-并集选择器</title>
<style>
span,
div,
p,
ol li {
color: blue;
}
</style>
</head>
<body>
<span>复合选择器</span>
<div>后代选择器</div>
<p>子选择器</p>
<ol>
<li>并集选择器</li>
</ol>
</body>
</html>
2.4 伪类选择器
向某些选择器添加特殊的效果
伪类选择器最大的特点是用":"表示
2.4.1 链接伪类选择器
a:link | 选择所有未被访问的链接 |
a:visited | 选择所有已被访问的链接 |
a:hover | 选择鼠标指针位于其上的链接 |
a:active | 选择活动链接(鼠标按下未弹起) |
为了确保生效,按LVHA顺序声明
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器-伪类选择器</title>
<style>
a {
color: green;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="#">链接伪类选择器</a>
</body>
</html>
2.4.2 focus伪类选择器
用于选取获得焦点(光标)的表单元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器-focus选择器</title>
<style>
input:focus {
background-color: rgb(170, 234, 170);
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>