css的三种样式表

最新推荐文章于 2024-07-15 12:00:00 发布

潜龙卧湖

最新推荐文章于 2024-07-15 12:00:00 发布

阅读量533

点赞数

文章标签： css css样式表前端基础

本文链接：https://blog.csdn.net/weixin_44046450/article/details/93322781

版权

css的三种样式表

在css中有三种样式表，分别是内部样式表、外部样式表和行内样式表。之前我们经常用到是内部样式。现在再来回顾一下这个内部样式表。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div {
		color: pink;
	}
	</style>
</head>
<body>
	<div>道可道，非常道。名可名，非常名。</div>
	<div>无名天地之始；有名万物之母。</div>
	<div>故常无，欲以观其妙；常有，欲以观其徼。</div>
	<div>此两者，同出而异名，同谓之玄。玄之又玄，众妙之门。</div>
</body>
</html>

效果如下：
在这里插入图片描述
上面所示的就是内部样式表。
外部样式表：就是在外部创建一个css文档，然后和html文件链接在一起。这样的css样式表就是我们所说的外部样式表。
现在我们先创建一个html文件，代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
    <div>道德经第二章</div>
    <div>天下皆知美之为美，斯恶已，皆知善之为善，斯不善已。</div>
    <div>故有无相生，难易相成，长短相形，高下相倾，音声相和，前后相随。</div>
    <div>是以圣人处无为之事，行不言之教，万物作焉而不辞，生而不有，为而不恃，功成而弗居。</div>
    <div>夫惟弗居，是以不去。 </div>
    <div>翻译</div>
    <p>
    	天下人都知道美之所以为美，那是由于有丑陋的存在。都知道善之所以为善，那是因为有恶的存在。
    	所以有和无互相转化，难和易互相形成，长和短互相显现，高和下互相充实，音与声互相谐和，前和后
    	互相接随——这是永恒的。因此圣人用无为的观点对待世事，用不言的方式施行教化：听任万物自然兴起
    	而不为其创始，有所施为，但不加自己的倾向，功成业就而不自居。正由于不居功，就无所谓失去。
    </p>
    </body>
</html>

在上面的html文件中，已经通过link标签链接了一个css文件。
现在我们来在外部来创建这个css文件。
style.css的代码，书写方式跟内部样式表一样。

div {
	color: pink;
}
p{
	color: #00FFFF;
}

然后我们在浏览器打开html文件。效果如下：
在这里插入图片描述
最后我们来讲行内样式表，就是指直接在标签里书写css样式表，这个就叫做行内样式表，代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    	<div style="color: #FF0000; ">道德经第三章</div>
    	<div style="color: #FF7F00; ">不尚贤，使民不争；不贵难得之货，使民不为盗；不见可欲，使民心不乱。</div>
    	<div style="color: #FFFF00; ">是以圣人之治，虚其心，实其腹，弱其志，强其骨，常使民无知无欲。</div>
    	<div style="color: #00FF00; ">使夫知者不敢为也。</div>
    	<div style="color: #00FFFF; ">翻译</div>
    	<div style="color: #0000FF; ">不推崇有才德的人，导使老百姓不互相争夺；不珍爱难得的财物，导使老百姓不去偷窃；不显耀足以
            引起贪心的事物，导使民心不被迷乱。因此，圣人的治理原则是：排空百姓的心机，填饱百姓的肚腹，</div>
    	<div style="color: #8B00FF; ">减弱百姓的竞争意图，增强百姓的筋骨体魄，经常使老百姓没有智巧，没有欲望。致使那些有才智的
            人也不敢妄为造事。圣人按照“无为”的原则去做，办事顺应自然，那么，天下就不会不太平了。</div>
    </body>
</html>