凡人多烦事01

这个屌丝很懒，什么也没留下！

热门标签

css基础教程_div top

作者：凡人多烦事01 | 2024-02-25 13:34:09

踩

div top

css基础教程

文章目录

css基础教程

一、css简介

css指层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML的一个应用）文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。简单而言，css是用来控制网页的外观的一种代码语言，定义了如何显示HTML元素

二、css语法

选择器 {属性：属性值；属性：属性值}

在这里插入图片描述

1、语法分为两部分：选择器和一条或多条声明

2、声明包含属性和属性值，属性和属性值之间用冒号链接，属性和属性之间用分号隔开

3、当一个属性有多个属性值时，属性值之间部分先后顺序，用空格隔开

三、css的引入方式

1、内部样式表（内联式）

写在标签内部，添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>css基础</title>
		<style>
			h3 {
     
				color: lightgreen ;
			}
		</style>
    </head>
    <body>
    	<h3>花开花落</h3>
    </body>
</html>
	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果图：

在这里插入图片描述

2、外部样式表（外联式）

创建一个独立的css文档，利用标签进行链接，书写在标签内部

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>css基础</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<div>你站在桥上看风景，看风景的人在桥上看你</div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

CSS界面：

div {
   
	color : yellow;
	height : 30px;
	weight : 50px;
	background-color : #90EE90;
	border : 3px /* 宽度 */  solid  /* 实线 */  #333 /* 颜色 */;
}
1
2
3
4
5
6
7
8

效果图：

在这里插入图片描述

3、内联样式表（内嵌式）

直接书写在标签内部，通过标签的style属性来使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>css基础</title>
	</head>
	<body>
		<div style = "color: aqua; background-color: #333333; height : 30px; weight = 50px">我生平看过许多次的云，走过许多的桥</div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10

效果图：

在这里插入图片描述

四、css选择器

选择器表示要定义样式的对象，可以是元素本身，也可以是一类元素或者指定名称的元素

1、元素选择器

以标签名作为选择器的一种方式，p/div/ul/li…

元素选择器{ 属性：属性值；属性：属性值；}

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<p>人生若只如初见</p>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

CSS界面

p{
   
	color : #9ACD32;
}
1
2
3
4

效果图：

在这里插入图片描述

2、类选择器

在HTML中添加一个class属性，在css中利用 . 加class名的方式进行书写

.css{ 属性：属性值；属性：属性值；}

HTML界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<p class = "p1">今天下雪了</p>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

CSS界面

.p1{
   
	color : aqua;
}

1
2
3
4
5

效果图：

在这里插入图片描述

【注】：class = " " 引号中是class名，ciass名的命名要是字母开头，可以结合下划线和数字。p1相当于是外号，所以可以有多个外号，如下：

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<p class = "p1 p2">今天下雪了</p>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

CSS界面：

.p1{
   
	color : aqua;
}

.p2{
   
	height : 100px ;
	width : 200px ;
	background-color : blue ;
	border : aliceblue solid #00FFFF; 
}
1
2
3
4
5
6
7
8
9
10
11
12

效果图：

在这里插入图片描述

3、id选择器

在标签中为一个元素定义一个id属性，在css中通过#加id名的方式来进行表示

#id名{属性：属性值；属性：属性值；} id具有唯一性（一个页面中同一个id名不能出现两次）

HTML界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<h2 id = "box">我是一个栗子</h2>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

CSS界面

#box{
   
	color : yellow ;
}
1
2
3
4

效果图如下：

在这里插入图片描述

4、群组选择器

当多个选择器有同样的样式设置时，可以将选择器用逗号分开，合并为一组

选择器1 ，选择器2 ，选择器3{属性：属性值；属性：属性值；}

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<p class = "box_1">我是盒子</p>
		<p class = "box_2">我是盒子</p>
		<p id = "box_3">我是盒子</p>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

CSS界面：

.box_1 , .box_2 , #box_3{
   
	height :50px ;
	width : 100px ;
	background-color : yellowgreen;
	border : beige solid #00FFFF; 
	color : red ;
}
1
2
3
4
5
6
7
8

效果图：

在这里插入图片描述

5、包含选择器

利用父级元素对子集元素进行设置

选择器爷选择器父选择器子{属性：属性值；属性：属性值；}

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type="text/css" href = "css/one.css" />
	</head>
	<body>
		<div class = "box_a">
			<p>我是小白兔</p>
		</div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

CSS界面：

.box_a p{
   
	color : #FF0000;
}
1
2
3
4

效果图：

在这里插入图片描述

6、伪类选择器

:hover{属性：属性值；属性：属性值；}

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type="text/css" href = "css/one.css" />
	</head>
	<body>
		<a class = "act" href = "https://www.baidu.com">百度</a>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

CSS界面：

.act:hover{
   
	color : #FF0000 ;
}


1
2
3
4
5
6

效果图：

鼠标没划过：

在这里插入图片描述

鼠标划过：

在这里插入图片描述

7、通配符

对页面中所有的元素进行样式设置

*{属性：属性值；属性：属性值；}

CSS界面：

*{
   
	margin : 0;       /*外边距*/
	padding : 0;      /*内边距*/
}
1
2
3
4
5

五、浮动

设置了浮动的属性的元素会向左或向右移动，设置元素水平方向的排列方式

第一步，让元素竖向排列

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>浮动</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		
		<div class = "box1">1</div>
		<div class = "box2">2</div>
		<div class = "box3">3</div>
		
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

CSS界面：

*{
   
	margin : 0 ;
	padding :0 ;
}

.box1{
   
	width : 200px ;
	height :200px 1
2
3
4
5
6
7
8
9

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/141079