CSS基础教程详解-优快云博客

本文链接：https://blog.youkuaiyun.com/content899/article/details/120344436

这篇教程详细介绍了CSS的基础知识，包括css简介、语法、引入方式、选择器、浮动、定位、元素属性、盒模型、文本声明、溢出处理、列表声明、过渡、动画、背景声明和媒体查询等内容。通过实例展示了各种CSS技术的用法，如内联样式、类选择器、浮动布局、相对定位等，还探讨了响应式设计和过渡动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

效果图：

在这里插入图片描述

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>

CSS界面：

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

效果图：

在这里插入图片描述

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>

效果图：

在这里插入图片描述

四、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>

CSS界面

p{
   
	color : #9ACD32;
}

效果图：

在这里插入图片描述

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>

CSS界面

.p1{
   
	color : aqua;
}

效果图：

在这里插入图片描述

【注】：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>

CSS界面：

.p1{
   
	color : aqua;
}

.p2{
   
	height : 100px ;
	width : 200px ;
	background-color : blue ;
	border : aliceblue solid #00FFFF; 
}

效果图：

在这里插入图片描述

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>

CSS界面

#box{
   
	color : yellow ;
}

效果图如下：

在这里插入图片描述

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>

CSS界面：

.box_1 , .box_2 , #box_3{
   
	height :50px ;
	width : 100px ;
	background-color : yellowgreen;
	border : beige solid #00FFFF; 
	color : red ;
}

效果图：

在这里插入图片描述

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>

CSS界面：

.box_a p{
   
	color : #FF0000;
}

效果图：

在这里插入图片描述

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>

CSS界面：

.act:hover{
   
	color : #FF0000 ;
}

效果图：

鼠标没划过：

在这里插入图片描述

鼠标划过：

在这里插入图片描述

7、通配符

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

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

CSS界面：

*{
   
	margin : 0;       /*外边距*/
	padding : 0;      /*内边距*/
}

五、浮动

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

第一步，让元素竖向排列

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>

CSS界面：

*{
   
	margin : 0 ;
	padding :0 ;
}

.box1{
   
	width : 200px ;
	height :200px ;
	background-color :greenyellow ;
}
.box2{
   
	width : 200px ;
	height :200px ;
	background-color : blue;
}

效果图：

在这里插入图片描述

第二部，让元素浮动起来

HTML代码不变

CSS界面：

*{
   
	margin : 0 ;
	padding :0 ;
}

.box1{
   
	width : 200px ;
	height :200px ;
	background-color :greenyellow ;
	/*设置元素水平方向的排列方式 */
	float : left ; /*向左浮动：就是从左边开始往右排
					向右浮动：就是从右边开始往左排*/
}
.box2{
   
	width : 200px ;
	height :200px ;
	background-color : blue;
	float : left ;
}

效果图：

在这里插入图片描述

高度塌陷：

是一种不正常的现象，是由于子元素的浮动导致的。高度塌陷只对其下方的元素产生影响。对其上方的元素不会收到影响。

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</