应用CSS样式表的三种方法

最新推荐文章于 2021-08-04 00:13:57 发布

cc_bk

最新推荐文章于 2021-08-04 00:13:57 发布

阅读量3.2k

点赞数

分类专栏： html5+css3 文章标签： html css

本文链接：https://blog.csdn.net/cc_bk/article/details/84038023

版权

html5+css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

要求实现效果：

字体大小：30px
字体颜色：red
首行缩进：2em

一.给标签指定style属性，即行内式

格式：style="属性1: 属性值1; 属性2: 属性值2"

源码：

<p style="font-size: 30px;color: red;text-indent: 2em">燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢：现在又到了哪里呢？</p>

二.使用内嵌样式标记<style>

格式：
<head>
<style>
选择器{属性1: 属性值1; 属性2: 属性值2}
</style>
</head>

源码：

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		p{
			font-size: 30px;
			color: red;
			text-indent: 2em;
		}
	</style>
</head>
<body>
	<p >燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢：现在又到了哪里呢？</p>
</body>

三.使用link标签引入以.css为扩展名的外部样式表，即链入式

格式：

源码： a.css

p{
	font-size: 30px;
	color: red;
	text-indent: 2em;
}

b.html

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="a.css" type="text/css">
</head>
<body>
	<p >燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢：现在又到了哪里呢？</p>
</body>

href中的css文件路径：
本例中的css文件和html文件在同一路径下，所以才是a.css。