学编程 ❀(๑╯◡╰๑)❀ 就上soxunxi.cn!这里有CMS,CSS,NET,PHP,Linux,HTML,JAVA,MySQL,Python等教程.
当前位置: HTML > 如何使用css来控制页面_html5教程,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文件中也可以导入其他的样式表。

推荐教程:css快速入门

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

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"如何使用css来控制页面_html5教程,css,页面"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线