CSS之使用CSS控制页面的四种方式

最新推荐文章于 2023-08-28 11:01:31 发布

冯浩月

最新推荐文章于 2023-08-28 11:01:31 发布

阅读量1.2w

点赞数 3

分类专栏： B/S学习 ---CSS学习之旅

本文链接：https://blog.csdn.net/m18633778874/article/details/79343241

版权

B/S学习同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

---CSS学习之旅

2 篇文章 0 订阅

订阅专栏

前言

CSS在制作网页中，是大量使用的一种语言，多参考一些网站的源代码可以帮助我们快速掌握各种技巧并运用到实际制作中，下面小编就如何在网页中引入CSS样式表做一下简单的介绍。

CSS控制页面

使用CSS制作网页时，一个基础的要求是主流的浏览器之间的显示效果要基本一致，通常的做法是一边编写HTML和CSS代码，一边在两个不同的浏览器上进行预览，及时地进行调整，这有利于深入掌握CSS。

通过大致地了解CSS，我们可以使用CSS对页面进行全方位的控制，主要的方法有四种：行内样式、内嵌式、链接式和导入式等，最后探讨一下这四种方式的优先级的内容。

四种方式

一、行内样式

1.特点：最为直接的一种。

2.使用方式

直接在HTML的标记中，使用style属性，将CSS代码写在其中。

3.举例说明

<html>
<head>
<title>页面标题</title>
   </head>
<body>
	<p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p>
	<p style="color:#000000; font-style:italic;">正文内容2</p>
	<p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p>
</body>
</html>

4.评价

行内样式是最为简单的CSS使用方法，但由于需要为每一个标记设置style属性，后期维护成本依然很高，而且网页容易过胖，因此不推荐使用。

二、内嵌式

1.介绍

内嵌样式表就是将CSS写在<head>与</head>之间，并用<style>和</style>标记进行声明。

2.实例说明

<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
p{
	color:#6600CC;
	text-decoration:underline;
	font-weight:bold;
	font-size:25px;
}
-->
</style>
   </head>
<body>
	<p>紫色、粗体、下划线、25px的效果1</p>
	<p>紫色、粗体、下划线、25px的效果2</p>
	<p>紫色、粗体、下划线、25px的效果3</p>
</body>
</html>

3.分析

（1）从例子中可以看出，所有的CSS代码部分被集中在了同一个区域，方便了后期的维护，页面也大大瘦身。

（2）但是，如果有多个页面，对于不同页面上的<p>标记都希望采用同样的风格时，内嵌式就显得略微麻烦，维护成本也不低。

（3）因此，内嵌式仅适用于对特殊页面设置单独的样式风格。

三、链接式

1.地位

链接式CSS样式是使用频率最高，也是最为实用的方法。

2.方式

在HTML的<head>和</head>标记之间加上语句：<link href="css文件" type="text/css" rel="stylesheet">。

3.实例

（1）CSS文件：1.css

h2{
	color:#0000FF;
}
p{
	color:#FF00FF;
	text-decoration:underline;
	font-weight:bold;
	font-size:20px;
}

（2）HTML框架

<html>
<head>
<title>页面标题</title>
<link href="1.css" type="text/css" rel="stylesheet">
   </head>
<body>
	<h2>CSS标题1</h2>
	<p>紫色、粗体、下划线、25px的效果1</p>
	<h2>CSS标题2</h2>
	<p>紫色、粗体、下划线、25px的效果2</p>
</body>
</html>

4.优势

将页面框架HTML代码与美工CSS代码完全分离，使得前期制作和后期维护都十分方便，一个CSS文件可以链接到多个HTML文件中。

四、导入式

1.功能类似于链接式，只是语法和运作方式上略有区别。

2.与链接式比较

（1）采用import方式导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果；

（2）链接式的CSS文件则是在HTML的标记需要格式时才以链接的方式引入。

3.常用的几种@import语句

可以选择任意一种放在<style>与</style>标记之间。

@import url(1.css);

@import url('1.css');

@import url("1.css");

@import 1.css;

@import '1.css';

@import "1.css";

4.长处

（1）导入样式表的最大用处在于可以让一个HTML文件导入很多的样式表；

（2）不单是在HTML文件的<style>与</style>标记中可以导入多个样式表，在CSS文件中也可以导入其他的样式表。

优先级比较

1.上面介绍了 CSS控制页面的4中不同方法，都有各自的特点。当4种方法同时用到一个HTML文件的同一个标记上时，会出现优先级的问题。

（1）如果各种方法设置的属性不同，如内嵌式设置字体为“宋体”，链接式设置颜色为“红色”，那么显示结果二者同时生效，为“宋体、红色字”；

（2）但当各种方法同时设置一个属性时，例如都设置字体的颜色，情况会比较复杂。

2.优先级划分

从高到低依次是：行内样式、（<link>标记）链接式、内嵌式、（@import）导入式。

3.总结经验

虽然各种CSS样式加入页面的方式有先后的优先级，但在制作网页时，最好只使用其中的1~2种，这样既有利于后期的维护和管理，也不会出现各式各样“撞车”的情况，便于设计者理顺设计的整体思路。

小结

一个小小的知识点，里面确实有很多值得注意的地方，不仅仅是样式表的引入方式的知识，后面还有更多值得理解和掌握的东西，如选择器等。

感谢您的访问！

冯浩月

关注

3
点赞
踩
27

收藏

觉得还不错? 一键收藏
33
评论
CSS之使用CSS控制页面的四种方式

前言 CSS在制作网页中，是大量使用的一种语言，多参考一些网站的源代码可以帮助我们快速掌握各种技巧并运用到实际制作中，下面小编就如何在网页中引入CSS样式表做一下简单的介绍。CSS控制页面使用CSS制作网页时，一个基础的要求是主流的浏览器之间的显示效果要基本一致，通常的做法是一边编写HTML和CSS代码，一边在两个不同的浏览器上进行预览，及时地进行调整，这有利于深入掌握CSS。通过大致地...
复制链接

扫一扫