引入方式
引入方式有以下三种：
1.内嵌式
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!-- 内嵌式 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
colour{
colour:pink;
}
</style>
</head>
|
2.外联式
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./111.css">
</head>
|
3.行内式
1
2
3
4
5
6
7
|
<body>
<div class="colour">
abcd
</div>
<div style="color: aqua;font-size: large;">abab</div>
</body>
|
选择器
一共有4种：标签选择器、类选择器、id选择器、通符选择器
注：一下选择器均是在style标签下的
1.标签
所选类型与body中html的文本类型相符(如上文中，其下文body中应该是div)
2.类选择器
1
2
3
| .color-choose{
color:blue;
}
|
其html调用方式为：
1
| <div class="color-choose"> abab </div>
|
3.id选择器
其html调用方式为：
1
| <div id="color"> abab </div>
|
注意：id只得调用一次
4.通符选择器
1
2
3
4
5
| *{
margin:0;
padding:0;
}
<!-- 清除内外边距 -->
|
对全局内容生效
选择器的选择
1.后代 （后面所有代）
问题如下
1
2
3
4
| <p> abab </p>
<div>
<p> 哈哈哈 </p>
</div>
|
欲选择div中的p标签，而不是外部的p
以如下方法实现：
1
2
3
4
5
| <style>
div p {
color:blue;
}
</style>
|
2.子代 （后面一代）
问题是要选中div后面的一代
1
2
3
4
5
6
| <div>
<p> dd </p>
<p>
<a href="#"> ddd </a>
</p>
</div>
|
以如下方法实现：
3.并集
问题：想要让以下这些标签被选到
1
2
3
4
| <p> p </p>
<div> div </div>
<span> span </span>
<h1> haha </h1>
|
以下面方法实现：
1
2
3
| p,div,span,h1{
color:blue;
}
|
4.交集
问题：只想要选中下面p中带class=”c”的
1
2
3
4
| <div class="c">abcd</div>
<p class="c">a</p>
<div class="c">d</div>
<p class="c">b</p>
|
以下面方法实现：
p是标签，c是类名（前面带个.的）
5.伪类
问题：想要让鼠标悬停在如下超链接上能够变色
一下方法实现：
1
2
3
4
| a:hover{
color:red;
background-color:yellow;
}
|