CSS基础教程：从入门到精通-优快云博客

本文链接：https://blog.youkuaiyun.com/fire_zero/article/details/103235205

这篇博客详细介绍了CSS的基础知识，包括CSS的作用、三种书写位置（内嵌式、行内式、外链式）、盒子模型、显示模式、选择器（标签、类、ID、后代、并集、交集）、层叠性和继承、浮动、定位、以及页面常用属性。重点讨论了浮动的布局应用、定位的层级控制和CSS精灵图的使用，帮助读者全面理解CSS在网页设计中的核心概念。

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

一.css介绍

CSS (Cascading Style Sheet)
css通常称之为css样式表或层叠样式表（级联样式表），主要作用是设置HTML页面中布局，文本，图片等外观的显示样式。
简单的css_case

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css_case</title>
		<style type="text/css">
			p{
				font-family:"楷体";
				color:red;
				font-size:24px;
			}
		</style>
	</head>
	<body>
				<p>演示段落</P>
	</body>
</html>

运行结果如下：
css_case.html的运行结果

二.css的三种书写位置

1.第一种：内嵌式
将css代码写在HTML网页中，css代码和HTML代码相对分离。代码耦合度相对较低，在项目中偶尔使用，在讲解知识点时经常使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				color: black;
				background:red;
			}
		</style> 
	</head>
	<body>
		<div>
			一个盒子
		</div>
	</body>
</html>

2.第二种：行内式
将css代码掺杂在html网页文件中,代码耦合度高,会造成代码冗余,代码维护性差,偶尔会使用

		<div style="color: yellow;width: 6.25rem;height: 12.5rem; background: #009A57;">
			一个盒子
		</div>

3.第三种：外链式
将css代码单独写在css文件中，css代码和HTML代码绝对分离，代码耦合度极低，维护性高，在工作中经常使用

 <head>
		<meta charset="utf-8">
		<title></title>
 		<link rel="stylesheet" type="text/css" href="01.css"/>
 </head>

01.css 文档

div{
	background:#FFD669;
	width: 200px;
	height: 400px;
	text-align: center;
}

三.css盒子

1.盒子的基本属性

<style type="text/css">
			div{
				/* 宽度 */
				width: 300px;
				/* 高度 */
				height: 300px;
				/* 背景色 */
				background: red;
			}
		</style>

四.显示模式

1.显示模式：

1.块级显示模式：设置宽高起作用，独占一行。在不设置宽度时，宽度和父元素一致。

块元素：div h1-h6 hr ul ol li dl dt dd form p

2.行内显示模式：设置宽高不起作用，不独占一行。宽高是被内容撑开的

行内元素： span b strong i em u ins s del a

3.行内块显示模式：设置宽高起作用，不独占一行。

行内块元素：img 表单标签

行内元素和行内块元素，代码之间有空格或换行时显示效果会有空格

2.显示模式转换

转换成行内块元素display;inline-block:
转换成块元素display;block:
隐藏元素 display:none;
若想把隐藏的元素重新显示，设置显示模式为正常的块或者行内块即可

<style type="text/css">
			i {
				/* 宽度 */
				width: 300px;
				/* 高度 */
				height: 300px;
				/* 背景色 */
				background: red;
				/* 转换成行内块元素 */
				display: inline-block;
			}
			
			b {
				/* 宽度 */
				width: 300px;
				/* 高度 */
				height: 300px;
				/* 背景色 */
				background: red;
				/* 转换成块元素 */
				display: block;
			}
		</style>

五.选择器

1.标签选择器：
标签名{
属性名：属性值；
属性名：属性值；
···
}

			h1{
			   color: #FF0000;
		   }

2.类选择器：
.类名{
属性名：属性值；
属性名：属性值；
···
}

		.blue1{
		   	color: #0000FF;
		   }

类的调用：
在标签的属性里用class属性调用相关类

<h2 class="blue1">二级标题</h2>

多类名调用: 标签的class属性可以调用多个类名,用空格隔开

<h4 class="blue1 family1">四级标题</h4>

类的命名规范：不能使用数字开头，可以是字母+数字+下划线+中划线
建议使用驼峰命名法：
当类名由多个单词组成时，第一个单词首字母小写，之后的单词首字母大写。例如：steamGame
3.id选择器：
#id{
属性名：属性值；
属性名：属性值；
···
}

			#san1{
			color: yellow;
			}

注意：类选择器可以重复调用，但id选择器不能，id为唯一值。

4.后代选择器
基础选择器: 标签选择器类选择器 id选择器
复合选择器: 后代选择器
后代选择器:将基础选择器结合使用,利用元素+空格的方式,获取具体标签
样式为：
基础选择器+空格+基础选择器···{
属性名：属性值；
属性名：属性值；
···
}
例如：

			#one .zz{
				color:plum;
			}
			.cd .cd2{
				color:red;
			}
			div #one  .zz{
				color:blue;
			}

5.并集选择器
***，***，***{
属性名：属性值；
属性名：属性值；
···
}
各个名称之间以","隔开

b,i,img，h1{
				height: 100px;
				width: 100px;
				font:32px "楷体";
				background: red;
			}

6.交集选择器
*** ***.***.***{
属性名：属性值；
属性名：属性值；
···
}
交集选择器: 同时具备多个选择器的条件
例如：

<style type="text/css">
.box span.one.current{ 
	color: yellow;
}
.box b.one.current{ 
	color: red;
}
</style>
<div class="box">
<b class="one current">加粗</b>
</div>

此时，只有同时具备在div中，是b标签且调用了one和current的选择器会生效
即：此时“加粗”为红色

权重值：
权重值:
标签选择器 < 类选择器 < id选择器 < 行内式 < !important
行内式为：
<标签名 style=“属性名：属性值;”></标签名>
例如：

<h1 style="font-family: "楷体";">一级标题</h1>

大致可看作为：
标签选择器：1
类选择器 :10
id选择器：100
行内式：1000
!important：无穷大
!important的使用

!important只改变所在属性值的权重，同选择器其他属性值的权重不变

			a{
				color: red ;/* 权重不变 */
				font-size: 24px !important;	/* 权重变为无穷大 */
			}

六.css的层叠性

css层叠性：不同属性都可以实现，相同属性，相同权重时，后定义的会层叠先定义的（即后定义的被实现），权重不同时，谁权重高实现谁的属性
重复声明
权重值:
标签选择器 < 类选择器 < id选择器 < 行内式 < !important
注：
继承的权重为0，即：继承来的属性<标签选择器
继承与继承相比较时符合权重值的规则
且，权重是可叠加的：
另：若同一属性定义了不同的属性值且都设置权重为无穷大，则谁最后定义的谁实现谁的属性值。

			#one .zz{ /* 权重为110 :100+10*/
				color:plum;
			}
			div #one  .zz{ /* 权重为111 :1+100+10*/
				color:blue;
			}

七：css的继承

元素可以继承父辈元素（优先继承最近的父辈元素）的属性
即：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- css继承性： 元素可以继承父辈元素（优先继承最近的父辈元素）关于设置文本的属性
			继承的权重是0-->
		<style>
			div {
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p>
				段落
				<b>加粗</b>
			</p>
		</div>
	</body>
</html>

运行结果：

a标签的继承问题：
a标签默认设置了一些css属性，所以继承时会层叠继承的属性，继承的属性不会被实现。需要对a标签自身属性进行设置，才能改变样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				color: red;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<div>
			<a href="##" id="de">链接</a>/*继承的color: red;属性对a标签不起作用*/
		</div>
		
	</body>
</html>

执行结果：
链接的颜色没有变化

居中属性和块元素的默认宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#one{
				height: 400px;
				width: 600px;
				background: #1B6FEF;
				/* text-align: center;能让元素中的文本、行内元素和行内块元素居中，但是不能让块元素居中 */
				/* 注：块元素虽然没有居中，但块元素中的内容会相对块元素居中，即父元素的属性会被子元素继承 */
				text-align: center;
			}
			#two{
				height: 200px;
				/* 块元素在不设置宽度时，默认宽度和父元素一致 */
				/* width: 150px; */
				background: #FF0000;
				text-align: center;
			}
			h1{
			background: #22FFAA;
				width: 400px;
			}
		</style>
	</head>
	<body>
		<div id="one">
			<div id="two">
				<h1>一个盒子</h1>
			</div>
		</div>
	</body>
</html>

运行结果：
居中属性和块元素的默认宽度

八：盒子属性

1.盒子

每个元素都可以看作一个盒子
盒子除了宽高和背景外有3个主要的属性：
内边距：padding
边框：border
外边距：margin

内边距：padding: 10px; 设置4个方向内边距都为10px
边框：border:3px solid red; 设置4个方向的边框都为3px 且为红色实线
外边距：margin: 20px; 设置4个方向外边距都为10px

其中，内边距和边框会增加元素在页面中的大小。
外边距会增加元素距四周元素的距离，但不计入元素的大小。
另：
块元素的宽度未设置时，宽度等于继承的父元素宽度
盒子的高度未设置时，高度等于子元素撑开的高度

2.浮动

浮动属性格式：

/* 左浮动 */
float: left;
/* 右浮动 */
float: right;

一般的块和行内元素称之为标准流
浮动是一个半脱离标准流的状态
元素设置浮动后不具备之前的显示模式，称之为浮动流
设置浮动后，都可以设置宽高并显示

浮动的内外边距:
只对自己起作用,对周围的元素没有影响

浮动的横向布局：
由于浮动元素会对后面的块元素造成影响，所以需要给浮动元素套一个父元素占位，使后面的元素不会重叠到浮动元素下

浮动造成的影响：
当元素设置浮动后，如果没有给父盒子设置高度，父盒子会认为盒子内没有内容。父盒子的高度不会被撑开

解决方案：
1.给父盒子设置固定高度
2.给父盒子设置overflow:hidden;属性
3.额外标签法：在浮动元素后面添加块元素，并设置clear:both;属性。表示结束之前浮动所造成的影响。
4.给父元素调用clearfix类名称

浮动的文本环绕
浮动最初是用来实现文本环绕的
即：使文本环绕着浮动的元素，且文本不会被浮动元素所覆盖

3.定位：

也是一个属性 position: ;

position:relative;   相对定位
position:absolute;   绝对定位
position:fixed;      固定定位

相对定位：

也叫占位定位，当元素用偏移量进行移动时，参照自身在标准流的位置进行移动，不会影响其他元素，但在标准流中的位置是始终存在的

position:relative;
left:110px;
top:110px;

/*一般情况下，水平和垂直的偏移量各设置一个 */
/*也可设置为：*/
position:relative;
left:110px;
right:30px;
top:110px;
buttom:30px;
/*但是和只有left和top的值起了作用*/

偏移量：
left:0; 正值向左，负值向右。
right:0;正值向右，负值向左。
top:0;正值向下，负值向上。
buttom:0;正值向上，负值向下。

当水平或垂直的两个偏移量同时存在时，left和top值优先
有时为了让两个值同时存在时left和top不优先，把left和top设置为auto即可，即：

left:auto;
top:auto;
auto为自动，所以此时水平或垂直的偏移量由right和buttom控制

绝对定位：

是一个完全脱离标准流的状态，设置宽高起作用

position:absolute;
left:110px;
top:110px;
/*也可设置为：*/
position:absolute;
left:110px;
right:30px;
top:110px;
buttom:30px;
/*但是和只有left和top的值起了作用*/

默认参考点：
left,top,是在body的左上
right,bottom是在窗口的第一屏的右下
（四个属性的参考点都是初始包含块（窗口第一屏）的四个角）

由于绝对定位的参考点是初始包含块，此时把绝对定位的父元素设置为定位，则绝对定位的参考点会转移到父元素上（定位上）

绝对定位的参考点会去找离他最近的有定位的祖辈元素，即：
若父元素未设置定位，但父元素的父元素设置了定位，则绝对定位以父元素的父元素的为参考点

固定定位：

position: fixed;

固定定位是将元素设置到浏览器的某个坐标位置，固定定位的参考点永远是浏览器的窗口
怎么让固定定位与版心保持一致：
由于固定定位的参考点永远是浏览器,利用百分比,走浏览器的一半,再向回走固定的宽度(版心的一半和自身的宽度)

position:relative;

层级：

是一个属性z-index，层级默认值为0。层级相同时，后写的会压在先写的上面
当层级不同时，谁的值大，谁在上面。
当层级小于0时，会低于标准流，
会层级没有单位，取值只能是整数
层级设置只对定位起作用。

定位的水平垂直居中

第一种：
水平居中
left:50%;
margin-left:负的自身宽度的一半:

垂直居中
top:50%;
margin-top:负的自身高度的一半:

css精灵:

css sprite,css 雪碧图,css精灵图,是背景图的技术,如今网速非常快,下载一张图和一张小图
所需要的时间差不多,但是服务器的连接数是有限的,所以将网页中出现的一张一张的小图,拼在一张大图中,
访问一次服务器进行下载,此时减少对服务器的访问的压力,提升页面的加载速度.

九.页面常用属性

1.精灵图：

css精灵:css sprite,css 雪碧图,css精灵图,是背景图的技术,如今网速非常快,下载一张图和一张小图
所需要的时间差不多,但是服务器的连接数是有限的,所以将网页中出现的一张一张的小图,拼在一张大图中,
访问一次服务器进行下载,此时减少对服务器的访问的压力,提升页面的加载速度.
精灵图的制作：
一般使用：http://alloyteam.github.io/gopng/ 腾讯全端开发团队
简单易懂，按照提示信息操作即可

精灵图的使用：
正常情况下，精灵图中会有很多个图片，而我们需要的只是其中之一。
这时，我们会给盒子设置一个只能容下一个图片的宽高。
然后在精灵图中定位到该图标的位置，计算需要拖动多少坐标才能把我们需要的图标显示出来。
格式如下：
background：url() no-repeat 0px 0px; （x坐标 y坐标）
例：
background: url(…/img/topbar.png) no-repeat 0 -100px;

使用后方的两个坐标值来确认图片
也可以使用background-position:;控制背景图的坐标
background-position:; （x坐标 y坐标）
background-position-x: ; x轴坐标
background-position-y: ; y轴坐标

图标文字：

一般使用：阿里巴巴矢量图标库
下载想用的图标文字即可，下载后打开文件中的demo.html文件，文件中包含了使用方法和图标代码