CSS学习笔记1-CSS初识

最新推荐文章于 2026-06-23 23:18:49 发布

原创最新推荐文章于 2026-06-23 23:18:49 发布 · 243 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html5 #css3

CSS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了CSS的基础知识，包括层叠样式表的定义和作用，以及从1996年至今的发展历程。重点讲解了CSS的三种书写方式：内联样式、内部样式表和外部样式表，并通过实例展示了每种方式的使用方法和效果。强调了外部样式表在大量样式设置时的优势，以及如何通过link标签引入外部CSS文件。

CSS学习笔记1——CSS初识

CSS简介

CSS ：层叠样式表 (Cascading Style Sheets)

CSS用来设定html标签的样式（字体、颜色、边距、高度、宽度、背景图片、网页定位等）

如果严格划分的话，CSS也属于一门编程语言，只不过这门编程语言是用来辅助html的

CSS发展历程

1996年CSS1.0发布
1998年CSS2.0发布
2004年CSS2.1发布
2010年CSS3.0发布

CSS的三种书写方式

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：

内联样式(行内样式)

使用样式（style）属性。每个标签都有一个style属性，可以在style属性中书写css样式。

此种样式不建议使用。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 < style> 标签在文档头部定义内部样式表。

外部样式表

当需要书写大量的CSS样式时，为了防止html文件的臃肿，可以将css样式单独放到一个文件中去。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

案例演示

内联样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css内联样式</title>
</head>
<body>
	<center>
	<!-- 
		font-size设置字体大小
		color设置颜色
		font-weight设置字体粗细，100~900,也可以是normal，bold，bolder，lighter等属性
	-->
	<p style="font-size: 24px;color: black;font-weight: bolder">静夜思</p>
	<p>唐&nbsp;李白</p>
	<!-- 
		font-style设置字体，italic代表斜体 
	-->
	<p style="font-size: 16px;color: green;font-style: italic">床前明月光，疑是地上霜。</p>
	<p style="font-size: 16px;color: green;font-style: italic">举头望明月，低头思故乡。</p>
	<!-- hr 水平分割线 -->
	<hr>
	</center>
</body>
</html>

显示效果为：

内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css行内样式表</title>
	<style type="text/css">

		/*这是css的注释写法，和html不一样*/
			/*在html文件中，id的属性值必须唯一，id值不能够重复*/
			/*在html文件中，class属性值可以重复*/

		#title{
			font-size: 24px;
			color: black;
			font-weight: bolder;/*加粗*/
		}
		/*如果是title，则是#，如果是class则是.*/
		.c1{
			font-size: 16px;
			color: green;
			font-style: bolder;
		}

	</style>
</head>
<body>
	<center>
	<!-- 
		font-size设置字体大小
		color设置颜色
		font-weight设置字体粗细，100~900,也可以是normal，bold，bolder，lighter等属性
		font-style设置字体，italic代表斜体
	-->
	<p id="title">静夜思</p>
	<p>唐&nbsp;李白</p>
	<p class="c1">床前明月光，疑是地上霜。</p>
	<p class="c1">举头望明月，低头思故乡。</p>
	<!-- hr 水平分割线 -->
	<hr>
	</center>
</body>
</html>

显示效果为：
在这里插入图片描述

外部样式表

如图：在css目录下创建1.css文件
在这里插入图片描述

放入如下代码：

#title{
			font-size: 24px;
			color: black;
			font-weight: bolder;/*加粗*/
		}
		
		/*如果是title，则是#，如果是class则是.*/
.c1{
		font-size: 16px;
		color: green;
		font-style: bolder;
	}

创建css-demo03.html文件，文件中的内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css外部样式表</title>
	<!-- 
		使用link标签，href属性引入.css文件
	 -->
	 <link rel="stylesheet" type="text/css" href="./css/1.css">
</head>
<body>
	<center>
		<p id="title">静夜思</p>
		<p>唐&nbsp;李白</p>
		<p class="c1">床前明月光，疑是地上霜。</p>
		<p class="c1">举头望明月，低头思故乡。</p>
	</center>
</body>
</html>