Day3 CSS 引入及基本选择器

小灰灰 2021-11-02 11:06 295阅读 0赞

一 、CSS

层叠样式表，为了使网页元素的样式更加丰富，内容与样式拆分开来。  
HTML负责结构与内容，表现形式交给CSS。

CSS注释  
/\*\*/ 来注释

二、CSS基本语法与引用

CSS的语法结构

选择器\{属性:值; 属性:值;\}  
选择器：将样式与页面元素关联起来的名称。

1 外链式

通过link标签，链接到相应的CSS文件，写在head标签中

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>CSS的使用</title>  
  
<link rel="stylesheet" href="Day3.css">  
</head>  
<body>  
<div></div>  
</body>  
</html>  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
Day3.css 内容如下：

div\{  
width:200px;  
height:200px;  
background-color:red;  
\}  
1  
2  
3  
4  
5  
2 嵌入式

嵌入式是通过 style标签来写CSS ，也要写在head标签中。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>CSS的使用</title>  
  
<style>  
div\{  
width:200px;  
height:200px;  
background-color:yellow;  
\}  
</style>  
</head>  
<body>  
<div></div>  
</body>  
</html>  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
3 内链式

内链式，同样使用Style属性来设置CSS样式

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>CSS的使用</title>  
</head>  
<body>  
  
<div style="width:200px; height:200px; background-color:black"></div>  
</body>  
</html>  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
在CSS的三种使用方式中存在优先级的问题,页面从上到下加载，离元素越近相应的优先级越高。

三、CSS选择器

1标签选择器

标签选择器，通过标签来设置元素样式 影响范围最大。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>CSS的三种基本选择器</title>  
<style>  
/\*标签选择器，通过标签来设置元素样式 影响范围最大\*/  
div\{  
width:100px;  
height:100px;  
background-color:green;  
\}  
</style>  
</head>  
<body>  
<div></div>  
<div></div>  
</body>  
</html>  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
2 类选择器

类选择器，通过class类名来设置元素的样式,class是可以重名的，影响范围可控制相对较小，  
一个类可应用于多个选择器，一个元素可以使用多个类。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>CSS的三种基本选择器</title>  
<style>  
/\*类选择器，通过class类名来设置元素的样式,class是可以重名的，影响范围可控制，相对较小\*/  
.item1\{  
width:200px;  
height:200px;  
background-color:red;  
\}  
.item2\{  
width:300px;  
height:300px;  
background-color:black;  
\}  
</style>  
</head>  
<body>  
<div class="item1"></div>  
<div class="item2"></div>  
</body>  
</html>  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
3 id选择器

通过id选择元素，元素的id的值不可以重复  
\#id选择器，通过id属性值来设定元素的样式,影响范围最小  
id在html中具有唯一性，不能重名，JS中获取会有问题

/\* .类选择器，通过class类名来设置元素的样式,class是可以重名的，影响范围可控制，相对较小\*/  
.item1\{  
width:200px;  
height:200px;  
background-color:red;  
\}  
.item2\{  
width:300px;  
height:300px;  
background-color:black;  
\}  
/\* \#id选择器，通过id属性值来设定元素的样式,影响范围最小\*/  
/\* id在html中具有唯一性，不能重名，JS中获取会有问题\*/  
\#box1\{  
width:400px;  
height:400px;  
background-color:blue;  
\}  
\#box2\{  
width:500px;  
height:500px;  
border:1px solid red;  
\}  
</style>  
</head>  
<body>  
<div class="item1"></div>  
<div class="item2"></div>  
<div id="box1"></div>  
<div id="box2"></div>  
</body>  
</html>  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
三种选择器的优先级

影响范围越大优先级越小，即：  
id>class>元素选择器  
推荐使用class选择器

4层级选择器

通过父级元素来设置子集元素，设置子元素的子集样式  
还可以设置子元素的自己的样式，可以与多个选择器混合使用

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>层级选择器</title>  
<style>  
/\*通过父级元素来设置子集元素，设置子元素的子集样式\*/  
/\*还可以设置子元素的自己的样式，可以与多个选择器混合使用\*/  
.wrap\{  
width:400px;  
height:400px;  
background-color:blue;  
\}  
.wrap div\{  
width:200px;  
height:200px;  
background-color:red;  
\}  
.wrap .in\{  
width:200px;  
height:200px;  
background-color:black;  
\}  
</style>  
</head>  
<body>  
<div class="wrap">  
<div class="in"></div>  
<div></div>  
</div>  
</body>  
</html>  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
5组选择器，并列选择器

要求以下元素的宽度与高度均为200px，box1的背景色为红，box2为绿色，box3为蓝色

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>并列选择器</title>  
<style>  
.box1,.box2,.box3\{  
width:200px;  
height:200px;  
\}  
.box1\{  
background-color:red;  
\}  
.box2\{  
background-color:green;  
\}  
.box3\{  
background-color:blue;  
\}  
</style>  
</head>  
<body>  
  
<div class="box1"></div>  
<p class="box2"></p>  
<div class="box3"></div>  
</body>  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
6伪类，伪元素选择器

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>伪类选择器</title>  
<style>  
/\*hover设置鼠标悬停在元素上时候的状态\*/  
.box\{  
width:400px;  
height:400px;  
background-color:blue;  
\}  
.box:hover\{  
/\*鼠标悬停之后的样式\*/  
width:500px;  
height:500px;  
background-color:red;  
\}  
/\*after 元素的尾部插入内容\*/  
.box:after\{  
content:" me";  
\}  
/\*before 元素的头部插入内容\*/  
.box:before\{  
content:"Do U ";  
\}  
</style>  
</head>  
<body>  
<div class="box">love</div>  
</body>  
</html>

转载于:https://www.cnblogs.com/hyhy904/p/10965768.html