一. css基础
1. 什么是css
层叠样式表：层叠
2. css的三种使用方式
style 属性 –》
<div style="css属性值"></div>
style 属性 –》写在head标签里
<head>
<style>
...
</style>
</head>
link 外都引入单独的css文件 –》
<link rel="stylesheet" href="style.css">
3. css 三种基础选择器
-
html标签选择器
- 通过标签名当选择器来使用。
- 无论藏的多深都可以被选中。
- 选择的是所有的标签，通常通过标签选择器设置共性问题。
-
id选择器 #id名
- id的名字是唯一的。
- 任何的标签都可以具有id属性（id是全局属性）。大小写敏感，给元素设置id时（设置class时也一样），可以使用驼峰命名法。
-
class选择器 .class名
- class属性名可以重复使用。
- 任何标签都可以有class属性（全局属性）
- class的值可以有多个。
<h1 class="t1 t2"></h1>
-
通配符 *
- 选择所有的标签，能少用就少用。
二. 综合选择器
-
- 后代选择器 div p
div p 选中的是div 里面的p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<div>
<p>p1</p>
</div>
<p>p2</p>
</body>
</html>
-
- 交集选择器 div.d1
div.d1 选择div与class="d1"的交集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.d1 {
color: red;
}
</style>
</head>
<body>
<div class="d1">
div1
</div>
<div class="d2">
div2
</div>
</body>
</html>
-
- 并集选择器 div,p
div，p 选择所有的div和p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.d1,p.p1 {
color: red;
}
</style>
</head>
<body>
<div class="d1">div1</div>
<div class="d2">div2</div>
<p class="p1">p1</p>
<p class="p2">p2</p>
</body>
</html>
-
- 子元素选择器 div>p –css3出现的
div>p 选择div标签的子元素里面的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.d1>p {
font-size: 50px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
<p class="p1">div-div-p</p>
</div>
<p class="p2">div-p</p>
</div>
</body>
</html>
-
- 序列选择器：first-child ：last-child
：first-child ：last-child 用来选择列表中的第一个和最后一个，不能选择其它的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul li:first-child {
color: red;
}
ul li:last-child {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
</body>
</html>
-
- 相邻兄弟选择器 div + p
div + p 选择与div相邻的一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1 + p {
color: red;
}
</style>
</head>
<body>
<div class="d1">div1</div>
<p class="p1">p1</p>
<p class="p2">p2</p>
</body>
</html>
-
- 普通兄弟选择器 div ~ p
div ~ p 选择与div同一级的其它子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1 ~ p {
color: red;
}
</style>
</head>
<body>
<div class="d1">div1</div>
<p class="p1">p1</p>
<p class="p2">p2</p>
</body>
</html>
