如何使用css来控制页面

如何使用css来控制页面

使用css页面进行全方位的控制,主要的方法有四种:行内样式、内嵌式、链接式和导入式,下面我们来分别看一下这四种方式:

一、行内样式

1、特点:最为直接的一种。

2、使用方式

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

立即学习“前端免费学习笔记(深入)”;

3、举例说明

页面标题   

正文内容1

正文内容2

正文内容3

e08abc3686f267258c8741de274d397.png

4、评价

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

二、内嵌式

1、介绍

内嵌样式表就是将CSS写在

与之间,并用和标记进行声明。

2、实例说明

页面标题   

紫色、粗体、下划线、25px的效果1

紫色、粗体、下划线、25px的效果2

紫色、粗体、下划线、25px的效果3

28973645785d911aa83459370544341.png

3、分析

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

(2)但是,如果有多个页面,对于不同页面上的

标记都希望采用同样的风格时,内嵌式就显得略微麻烦,维护成本也不低。

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

三、链接式

1、地位

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

2、方式

在HTML的

和标记之间加上语句:。

3、实例

(1)CSS文件:1.css

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

(2)HTML框架

页面标题   

CSS标题1

紫色、粗体、下划线、25px的效果1

CSS标题2

紫色、粗体、下划线、25px的效果2

e8e382225448e3ca2d04dc74f880aec.png

4、优势

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

四、导入式

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

2、与链接式比较

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

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

3、常用的几种@import语句

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

 @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文件的与标记中可以导入多个样式表,在CSS文件中也可以导入其他的样式表。  

推荐教程:css快速入门

以上就是如何使用css来控制页面的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1615310.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
CSS3线性渐变实现4圆环相连(代码实例)
上一篇 2025年12月24日 04:50:55
CSS3边框阴影实现2种图片列表展示效果-案例解析(代码实例 )
下一篇 2025年12月24日 04:51:03

相关推荐

发表回复

登录后才能评论
关注微信