CSS的特性以及在HTML中的三种用法_主题css blue.min.css-CSDN博客

本文链接：https://blog.csdn.net/wang379275614/article/details/9671751

简介

CSS和HTML一样，也是一种标记语言，代码简单，通过浏览器解释执行，是一种用于为HTML文档定义布局的样式表语言。

作用：

HTML用于结构化内容；CSS用于格式化结构化的内容

Ø CSS的出现弥补了HTML对标记属性控制的不足，如“背景图像重复”只能用CSS的“background-repeat”才能实现

Ø CSS将网页内容与样式进行了分离，实现了对两者的“解耦和”，因此使得样式内容可以被很好的复用，大大提高了网站开发者的工作效率和后期的维护工作

特性：

继承性：

指被包在内部的标签将拥有外部标签的的样式性质。

例：

层叠性：

指当有多个选择器都作用于同一元素时，即多个选择器的范围发生了重叠，CSS该怎样处理？

（1）若多个选择器定义的样式不发生冲突，则元素应用所有选择器定义的样式

例：

（2）若多个选择器定义的样式发生冲突（比如：同时定义了字体颜色属性），则CSS按选择器的优先级，让元素应用优先级高的选择器样式。

CSS定义的选择优先级从高到低为：行内样式 > ID样式 >类别样式>标记样式

测试：

<html>
	<head>
		<title>css层叠测试21</title>
	<style type="text/css">
		/*标记样式*/
		p{color:yellow}
		/*类别样式*/
		.classStyle{color:blue}
		/*ID样式*/
		#idStyle{color:green}
	</style>
	</head>
	<body>
		<!--行内样式-->
		 <p class="classStyle" id="idStyle" style="color:red">Hello World</p>
	</body>
</html>

分别用四种样式设置“Hello World”的颜色属性，最终显示样式是“行内样式”的red。如下：

注：我们可以通过“!important“属性强制改变选择器优先级，加！important的选择器优先级最高。

例：将上例中的标签样式语句改为“p{color:yellow !important}”，这样运行结果会变为黄色，通过加！important，将本来优先级最低的“标签样式”变为了优先级最高。

CSS在HTML中的三种用法：

（1）内联样式表：

直接将使用HTML元素的style属性来改变元素的样式，style属性可以应用于任意body元素（包括body本身）

例：

<html>
	<head>
		<title>css内联样式表测试</title>
 	</head>	
 	<body>
 		<p style="color:red">这里应用css内联样式表，为红色字体</p>
 	</body>
</html>

运行结果：

（2）内部样式表：

采用HTML元素的style属性，将样式表的内容定义在HTML文件的<head>标记内，例：

<html>
	<head>
		<title>css内部样式表测试</title>
	<style type="text/css">
		.csstest{color:blue}
	</style>
 	</head>	
 	<body>
 		<p class="csstest">这里应用css内部样式表，为蓝色字体</p>
 	</body>
</html>

运行结果：

（3）外部样式表：

指引用一个样式表文件（是一个扩展名为.css的文本文件），可以将一个文件应用于多个html页，使得样式可复用，大大提高了网站开发效率。

引用一个样式表有两种方法：（1）链入外部样式表（2）导入外部样式表

（3.1）链入外部样式表：

在HTML文件的<head>区域内使用<link>标记进行链接，语法：

其中url为样式表文件的地址，可以是相对地址和绝对地址

<html>
	<head>
		<title>css外部样式表-链入外部样式表测试</title>
		<link rel=”stylesheet” type=”text/css” href=”style/style.css”/>
 	</head>	
 	<body>
 		<p class="csstest">这里应用css外部样式表，为红色字体</p>
 	</body>
</html>

原理：<link rel=”stylesheet”type=”text/css” href=”url”/>告诉浏览器，在执行html文件时，应使用相应url下的css文件进行布局和格式化。（文件style.css放在style目录下，代码为 .csstest{color:red}）

（3.2）导入外部样式表：

在HTML文件的<style> 区域内引用一个外部样式表文件，语法如下：

<style type="text/css">
	@import url(样式表目录地址)	
	…
</style>

@import声明可以放到<head>标记之外，也可以放到<head>标记之内，但根据语法规则，一般放到<head>内使用，举例如下：

<html>
	<head>
		<title>css外部样式表-导入外部样式表测试</title>
		<style type="text/css">
			@import url(style/style.css)；
		</style>
 	</head>	
 	<body>
 		<p class="csstest">这里应用css外部样式表的导入外部样式表形式，为红色字体</p>
 	</body>
</html>

原理同上面的“链入外部样式表”;

注：@import声明后的“； ”不能省略，此外，某些浏览器可能不支持导入外部样式表的@import声明，所有最好别用这种方法，见到了认识即可。