CSS三种样式表

最新推荐文章于 2024-05-23 09:01:29 发布

没加工的方便面

最新推荐文章于 2024-05-23 09:01:29 发布

阅读量6.7k

点赞数 3

分类专栏： Css 文章标签：初学Css

本文链接：https://blog.csdn.net/you4561512/article/details/91361465

版权

Css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS三种样式表

外部样式表

外部样式表的作用：设置一个外部样式表，在Html页面的head中添加，通过link标签标记，rel：指定其样式为stylesheet，type：指定其格式为text/css，herf：指定到欲应用的css样式文件。表此样式表应用于当前整个页面效果，

内部样式表

内部样式表的作用：设置一个内部样式表，在Html页面的head中添加，通过在head中添加style标签标记，type：指定其格式为text/css，此样式表只应用于当前文档，

内联样式

内联样式表的作用：设置一个内联样式表，在Html页面的body中添加，在添加元素的标签中声明样式，都包含在style属性中。在三个样式表中，内联样式表的优先级最高，若页面中同时存在三种样式表，内联样式会覆盖其他两种样式

CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}

1、外部样式表

<!DOCTYPE html>
<html>
<head>
	<title>层叠样式表之外部样式表</title>
	<link rel="stylesheet" type="text/css" herf="direction:\example.css">---通过herf连接到example.css文件
</head>
<body>
	<h1>层叠样式表学习</h1>
</body>
</html>

1.1、外部样式表的css文件

h1{color: red;}
h1{text-align: center;}
样式以分号隔开，可以写在同一行,但是一行写一个样式是最推荐的
h1{color:red; text-align: center;}

2、内部样式表

<!DOCTYPE html>
<html>
<head>
	<title>层叠样式表之内部样式表</title>
	<style type="text/css">---内部样式表开始标记
		h1{color: pink; text-align: center;}---针对哪一个元素进行样式制定
	</style>----内部样式表结束标记
</head>
<body>
	<h1>层叠样式表之内部样式表</h1>
</body>
</html>

3、内联样式表

<!DOCTYPE html>
<html>
<head>
	<title>层叠样式表之内联样式表</title>
</head>
<body>
	<h1 style="color: red; text-align: right;"></h1>---针对h1标签设置内联样式，其优先级最高
</body>
</html>

没加工的方便面

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
CSS三种样式表

CSS三种样式表外部样式表内部样式表内联样式样式表的格式：外部样式表外部样式表的作用：设置一个外部样式表，在Html页面的head中引用，此样式表应用于当前整个页面效果，其用法如下：略。。。内部样式表内部样式表的作用：设置一个内部样式表，在Html页面的head中引用，此样式表只应用于当前文档，其用法如下：Need to fullfil内联样式内联样式表的作用：设置一个内联样式表，在H...
复制链接

扫一扫