百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> 怎样运用css来控制页面
分享文章到:

怎样运用css来控制页面

发布时间:09/01 来源:未知 浏览: 关键词:
运用css对页面进行控制主要有四种办法,离别是:1、行内样式;2、内嵌样式;3、链接式;4、导入式。其中行内样式是最为直接的一种,它是直接写在HTML的标志中的。

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

一、行内样式

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

2、运用方式

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

3、举例注明



页面标题
   

	

正文内容1

正文内容2

正文内容3

4、评论

行内样式是最为简略的CSS运用办法,但因为需要为每一个标志设定style属性,后期保护老本仍然很高,并且网页容易过肥,因而不举荐运用。

二、内嵌式

1、介绍

内嵌样式表就是将CSS写在与之间,并用标志进行声明。

2、实例注明



页面标题

   

	

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

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

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

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

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来控制页面的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有153人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板