CSS快速入门

最新推荐文章于 2025-01-30 00:09:58 发布

原创最新推荐文章于 2025-01-30 00:09:58 发布 · 886 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #CSS快速入门

Web 专栏收录该内容

18 篇文章

订阅专栏

本文深入解析CSS的基本概念，包括CSS简介、CSS与HTML的结合方式、CSS优先级与选择器、CSS布局等内容。通过实例演示，详细讲解了如何使用CSS为网页内容添加样式，实现图文混排和图像签名等功能。

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

1. CSS简介

1.1 什么是CSS呢？

CSS（Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页显示效果的功能。简单一句话：CSS将网页内容和样式进行分离，提高了显示功能。

1.2 css和html的结合方式

共有4种结合方式：

1）在每个html标签上面都有一个属性style，把css和html结合起来。

演示：

<html>
	<head>
		<title></title>
	</head>
	<body>
		<!-- 背景颜色设为红色，字体颜色设为绿色  -->
		<div style="background-color:red;color:green">
			年轻宦官叹息一声，“希望只是分胜负而不是分生死吧。”
		</div>
	</body>
</html>

2）使用html的一个标签<style>实现，必须要写在头标签里

css代码;

</style>

演示：

<html>
	<head>
		<title></title>
		<!-- 设置div标签里背景颜色设为蓝色，字体颜色设为红色  -->
		<style type="text/css">
			div{
				background-color:blue;
				color:red;
			}
		</style>
	</head>
	<body>
		<div>
		　　徐凤年感慨道：“其实很羡慕那些既愿讲理又能顺意的人。”			
		</div>
	</body>
</html>

3）在style标签里面使用语句

@import url（css的文件路径）

演示：

html：

<html>
	<head>
		<title></title>
		<style type="text/css">
			@import url(div.css);
		</style>
	</head>
	<body>
		<div>
		　　徐凤年感慨道：“其实很羡慕那些既愿讲理又能顺意的人。”			
		</div>
	</body>
</html>

在当前目录下建一个div.css文件

div {
	background-color:yellow;
	color:black;
}

4）使用头标签link，引入外部css文件

格式：<link rel="stylesheet" type="text/css" href="css的文件路径"/>

演示：

<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="div.css"/>
	</head>
	<body>
		<div>
		　　徐凤年感慨道：“其实很羡慕那些既愿讲理又能顺意的人。”			
		</div>
	</body>
</html>

第三种方式在有的浏览器不起作用，所以一般使用第四种方式。

2. css的优先级和选择器

2.1 css的优先级

从上到下，从外到内，优先级由低到高。也就是说后加载的优先级高。

演示：

<html>
	<head>
		<style type="text/css">
			div{
				background-color:gray;
				color:white;
			}
		</style>
	</head>
	<body>
		<div style="background-color:red;color:green">
		　　徐凤年感慨道：“其实很羡慕那些既愿讲理又能顺意的人。”			
		</div>
		<div>
			年轻宦官笑道：“当真有这样的人物？”
		</div>
	</body>
</html>

2.2 css的选择器

上面代码中的div{... }就是一个选择器，其作用是对一些标签里的数据进行操作。其格式为：

选择器名称 { 属性名:属性值; 属性名:属性值; ...}

2.2.1 基本选择器

1. 标签选择器

使用标签名作为选择器的名称，例如上面的div选择器。

演示：

<html>
	<head>
		<style type="text/css">
			div{
				background-color:red;
			}
			p{
				background-color:green;
			}
		</style>
	</head>
	<body>
		<div>徐凤年感慨道：“其实很羡慕那些既愿讲理又能顺意的人。”	</div>
		<p>年轻宦官笑道：“当真有这样的人物？”</p>
	</body>
</html>

2. class选择器

每个html标签都有一个属性class，例如：<div class="one">徐</div>

演示：

<html>
	<head>
		<style type="text/css">
			/*div.one{
				background-color:orange;
			}
			p.one{
				background-color:orange;
			}*/
			/*由于div标签和p标签的class属性都为one，且要定义的背景色也相同
			所以可以简写为.one选择器*/
			.one{
				background-color:orange;
			}
		</style>
	</head>
	<body>
		<div class="one">徐凤年感慨道：“其实很羡慕那些既愿讲理又能顺意的人。”	</div>
		<p class="one">年轻宦官笑道：“当真有这样的人物？”</p>
	</body>
</html>

3. id选择器

每个html标签都有一个属性id，例如：<div id="one">徐</div>

演示：

<html>
	<head>
		<style type="text/css">
			/*div#one{
				background-color:gray;
			}
			p#one{
				background-color:gray;
			}*/
			#one{
				background-color:gray;
			}
		</style>
	</head>
	<body>
		<div id="one">徐凤年感慨道：“其实很羡慕那些既愿讲理又能顺意的人。”	</div>
		<p id="one">年轻宦官笑道：“当真有这样的人物？”</p>
	</body>
</html>

4. 基本选择器的优先级

style>id选择器>class选择器>标签选择器

证明：

2.2.2 css的扩展选择器

1. 关联选择器

假如有这么一个语句：<div><p>aaa</p></div>，想要设置div标签里的p标签的样式。

演示：

<html>
	<head>
		<!-- 只设置div标签里面的p标签的样式  -->
		<style type="text/css">
			div p{
				background-color:green;
			}
		</style>
	</head>
	<body>
		<div><p>CSS扩展选择器</p></div>
		<p>CSS和HTML的结合</p>
	</body>
</html>

2. 组合选择器

假如想把<div>标签和<p>标签里的内容设置成相同的样式，可以考虑使用组合选择器。

演示：

<html>
	<head>
		<!-- 同时设置div和p标签里内容的样式  -->
		<style type="text/css">
			div,p{
				background-color:orange;
			}
		</style>
	</head>
	<body>
		<div>CSS扩展选择器</div>
		<p>CSS和HTML的结合</p>
	</body>
</html>

3. 伪(类)元素选择器

css提供了一些定义好的样式，可以拿来使用。比如超链接，超链接有四种状态：原始状态（:link），鼠标放上去的状态（:hover）、点击的时候（:active）、点击之后（:visited）

演示：

<html>
	<head>
		<!-- 同时设置div和p标签里内容的样式  -->
		<style type="text/css">
			/*原始状态*/
			a:link{
				background-color:green;
			}
			/*悬停状态*/
			a:hover{
				background-color:blue;
			}
			/*点击状态*/
			a:active{
				background-color:gray;
			}
			/*点击之后的状态*/
			a:visited{
				background-color:orange;
			}
		</style>
	</head>
	<body>
		<a href="http://localhost" target="_blank">本地主机</a>
	</body>
</html>

原始状态：

悬停状态：

点击状态：

点击之后的状态：

3. css的布局

3.1 css的布局的漂浮

属性float

left：文本流向对象的左边

right：文本流向对象的右边

3.2 css的布局的定位

position

absolute：将对象从文档中脱出，使得该对象在空中漂浮着，可以使用left、right、top、bottom等属性对其进行决定定位。

relative：不会把对象从文档中脱出，但将依据left、right、top、bottom等属性在正常文档中偏移位置。
演示absolute：

<html>
	<head>
		<style type="text/css">
			div{
				width:200px;
				height:150px;
				border:2px solid blue;
			}
			#div51{
				background-color:red;
				position:absolute;
				top:50px;
				left:80px;
			}
			#div52{
				width:250px;
				height:150px;
				background-color:green;
			}
			#div53{
				background-color:orange;
			}
		</style>
	</head>
	<body>
		<div id=div51>AAAAAAAAAAAAA</div>
		<div id=div52>BBBBBBBBBBBBB</div>
		<div id=div53>CCCCCCCCCCCCC</div>
	</body>
</html>

演示relative：

<html>
	<head>
		<style type="text/css">
			div{
				width:200px;
				height:150px;
				border:2px solid blue;
			}
			#div51{
				background-color:red;
				position:relative;
				top:50px;
				left:80px;
			}
			#div52{
				background-color:green;
			}
			#div53{
				background-color:orange;
			}
		</style>
	</head>
	<body>
		<div id=div51>AAAAAAAAAAAAA</div>
		<div id=div52>BBBBBBBBBBBBB</div>
		<div id=div53>CCCCCCCCCCCCC</div>
	</body>
</html>

4. 练习

4.1 图文混排

图片和文字在一起显示

<html>
	<head>
		<style type="text/css">
			#imgtext11{
				width:400px;
				height:320x;
				border:2px dashed orange;
			}
			#img11{
				float:left;
			}
			#text11{
				color:green;
			}
		</style>
	</head>
	<body>
		<div id="imgtext11">
			<div id="img11"><img src="sq1.jpg" width="250" height="200" /></div>
			<div id="text11">相信自己是一种信念，它不是繁花如梦似锦，却如青松雪压不倒。正因为有了这样的信念，我们才会坚持到底，自信永远。
	　　	听取意见是一种气度，它不是高天辽阔无际，却如大海容纳百川。正因为有了这样的气度，我们才会集思广益，从善如流。
　　		不是吗？相信自己不意味固执己见；听取意见也不代表亦步亦趋。
　　		唐太宗自由治理国家的雄才大略，他不怀疑自己的才能，但同时也接纳了魏征的“十思”，而不必“劳神苦思，代百司之职役”。
	　　	齐王也有管四方，理朝政的能耐，他也不会怀疑自己的才能，但他同时也接受了邹忌的“纳谏”，而使“燕、赵、韩、魏皆朝于齐”。
			</div>
		</div>
	</body>
</html>

4.2 图像签名

在图片上显示文字

<html>
	<head>
		<style type="text/css">
			#text{
				position:absolute;
				top:15px;
				left:15px;
				color:orange;
			}
		</style>
	</head>
	<body>
		<div id=img><img src="sq2.jpg" width="300" height="280"/></div>
		<div id=text>人需要相信自己！</div>
	</body>
</html>