[CSS]-1-css样式的四种导入方式

引言

CSS是"Cascading Style Sheets"的缩写,中文译为"层叠样式表";我们可以通过CSS来控制HTML文档标签的显示样式,从而起到美化页面外观的效果;这篇文件介绍CSS样式在HTML文档中的四种导入方式。

文章目录

0×1.CSS样式的四种导入方式

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>css四种导入方式实例</title>

						<!--第1种,直接写在head标签中,将css语句包含在style标签对中,本例控制p标签内容的样式,设置其文字颜色为红色,字体大小为15像素-->
						<style type="text/css">
							p{
								color: red;
								font-size: 15px;
							}
						</style>

						<!--第2种,调用外部css文件,href属性值指定要包含的css文件的相对或绝对路径,本例使用相对路径,即style.css文件和当前html文档文件在同一个目录中-->
						<link rel="stylesheet" type="text/css" href="style.css">
					</head>
					<body>
						<p>HTML5 Red</p>

						<!--第3种,直接写在标签内部,使用style属性来配置css样式,每条css语句用分号隔开-->
						<span style="color:blue; font-size:20px;">HTML5 Blue</span>
						<br>
						<div>
							Hello <b>HTML5 Yellow</b>	
						</div>
					</body>
					</html>
					

style.css文件内容:

					@charset "utf-8";
					/*第4种,在css文件中调用其他的css文件,import后面写要调用的其他css文件路径,本例中test.css文件与style.css在同一个目录下*/
					@import "test.css";
					div{
						font-size: 25px;
						color: green;
					}
					

test.css文件内容:

					@charset "utf-8";
					b{
						/*font-style属性能够配置文字样式,italic为斜体*/
						font-style: italic;
						color: yellow;
						font-size: 40px;
					}
					

显示效果:

HTML5 Red

HTML5 Blue
Hello HTML5 Yellow

0×2.浏览器默认属性与替换

HTML文档的标签都存在其默认的样式,而我们给标签配置css样式的时候,实际上是替换了这些标签原本的默认样式:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>HTML标签默认样式与覆盖实例</title>
					</head>
					<body>
						<!--b标签中的文字默认是加粗显示的-->
						<b>b标签默认样式</b>
						<br>
						<!--配置b标签的css样式,让其文字不加粗;font-weight属性能够配置文字是否加粗显示,normal为不加粗,bold为加粗显示-->
						<b style="font-weight:normal;">配置css后b标签的样式</b>
						<br>
						<!--默认span标签文字是不加粗的-->
						<span>默认的span标签的样式</span>
						<br>
						<!--配置css,让span中的文字加粗显示-->
						<span style="font-weight:bold;">配置css后span标签的样式</span>
					</body>
					</html>
					

显示效果:

b标签默认样式
配置css后b标签的样式
默认的span标签的样式
配置css后span标签的样式

0×3.样式优先级

在我们写css样式的时候,难免会有同一个标签配置了相同属性,但这些属性却具有不同值的情况出现,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>CSS样式优先级实例</title>

						<!--当link和style同时出现在头部时,如果发生css冲突,浏览器解释器选择写在最下面的css作为最终样式,本例,style.css文件中对p标签设置的css颜色属性是green,和style中的deeppink冲突,解释器选择deeppink作为最终样式,但如果link标签写在style下面,则会选择green作为最终样式-->
						<link rel="stylesheet" type="text/css" href="style.css">

						<style type="text/css">
							p{
								color:deeppink;
							}
						</style>

					</head>
					<body>
						<p>www.qingsword.com</p>

						<!--写在标签中的style属性具有最高优先级,这种样式也叫"内联样式",虽然head里面配置了所有p标签的文字颜色为粉红色,但可以单独对某一个p标签使用内联样式,它将覆盖head中p标签的color属性的值-->
						<p style="color:lime;">www.qingsword.com</p>
					</body>
					</html>
					

style.css文件内容:

					@charset "utf-8";
					p{
						color: green;
					}
					

显示效果:

www.qingsword.com

www.qingsword.com

如果head中对p标签配置了文字大小的属性,在单独设置某个p标签内联样式的时候没有配置文字大小属性,那么这个p将使用head中对p标签文字大小的定义,而不会清除这些属性,只有出现冲突时,才会根据优先级替换这些冲突的属性值。

如果某个属性存在冲突,想让低优先级的样式覆盖高优先级,可以使用"!important"属性,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>CSS样式优先级实例</title>
						<!--对p标签的color属性配置了最高优先级命令"!important"-->
						<style type="text/css">
							p{
								color:deeppink !important;
							}
						</style>
					</head>
					<body>
						<!--对单独的p标签配置内联样式,也设置了color属性,和head中的color属性冲突了,但由于head中的color配置了最高优先级命令"!important",所以最终显示时,文字将显示成deeppink深粉红色,而不是lime绿黄色-->
						<p style="color:lime;">www.qingsword.com</p>
					</body>
					</html>
					

显示效果:

www.qingsword.com

Ps:如果在上面的CSS四种导入方式中,都对某个标签配置了不同的样式,出现冲突的属性将根据优先级选择优先级最高的样式,没有冲突的部分将会合并,最后显示的样式就是这四个位置所有样式的并集。

0×4.样式继承

当对一个元素的某个属性使用inherit值时,它将继承父级(包含它的元素)的对应属性,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>样式继承实例</title>
						<style type="text/css">
							p{
								font-weight: normal;
							}
							b{
								<!--b标签本来应该是加粗显示的,但因为包含它的元素p配置了文字不加粗的属性,所以b标签中的文字并没有加粗显示,b标签中的font-weight属性继承了其父级p标签的font-weight属性值normal-->
								font-weight: inherit;
							}
						</style>
					</head>
					<body>
						<p><b>晴刃:</b>www.qingsword.com</p>
					</body>
					</html>
					

显示效果:

晴刃:www.qingsword.com