CSS控制页面
使用CSS控制页面,可以有多种方法,包括行内样式,内嵌式,链接式和导入式等。
行内样式
最为直接的一种,直接对HTML的标记使用style属性,然后,将CSS代码直接写在其中。
<span style="font-size:24px;"><html>
<head>
<title>页面标题</title>
<style>
<!--
h2{
font_family:幼圆;
color:red;
}
-->
</style>
</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>
</span>
行内样式,是最为简单的CSS使用方法,但是,需要为每一个标记设置style属性,后期维护成本依然很高,而且,网页容易过胖,不推荐使用。
内嵌式
就是将CSS写在<head>与</head>之间,并且,使用<style>和</style>标记进行声明。
<span style="font-size:24px;"><html>
<head>
<title>页面标题</title>
<style>
<!--
p{
color:#FF00FF;
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>
</span>
所有的CSS代码部分,都被集中在了同一个区域,方便了后期的维护,页面本身也大大瘦身。
但是,如果是一个网站,拥有很多的页面,对于不同页面上的<p>标记都希望采用相同的风格时,内嵌式就显得非常麻烦,维护成本也不低,因此,仅适用于对特殊的页面设置单独的风格样式。
链接式
使用频率最高,也是最实用的方法,就是将HTML页面本身和CSS样式风格分离为两个,或者多个文件,实现了页面框架HTML代码与美工CSS代码的完全分离,使得前期制作,后期维护都非常的方便,网站后台的技术人员和美工设计中可以很好地分工合作。
<span style="font-size:24px;"><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>
CSS样式表1
h2{
color:#0000FF;
}
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}
</span>
对于同一个CSS文件,可以链接到多个HTML文件中,甚至可以链接到整个网站的所有页面中,使得网站整体风格统一协调,并且,后期维护的工作量大大减小。
导入样式
导入样式和链接样式功能基本相同,采用import方式导入的样式表,在HTML文件初始化时,会被导入到HTML文件内,作为文件的一部分,类似内嵌式的效果。
而链接式,则是在HTML的标记需要格式时才以链接的方式引入。
常用的导入样式@import语句:
@importurl(sheet1.css);
@importurl("sheet1.css");
@importurl('sheet1.css');
@importsheet1.css;
@import"sheet1.css";
@import'sheet1.css';
不仅可以在HTML文件的<style>与</style>标记中可以导入多各样式表,在CSS文件内也可以导入其他的样式表。
<span style="font-size:24px;"><html>
<head>
<title>
页面标题
</title>
<style type="text/css">
<!--
@import url(1.css);
@import url(2.css);
-->
</style>
</head>
<body>
<h2>
CSS标题1
</h2>
<p>
紫色,粗体,下划线,25px的效果1
</p>
<h2>
CSS标题2
</h2>
<p>
紫色,粗体,下划线,25px的效果2
</p>
<h3>
CSS标题3
</h3>
<p>
紫色,粗体,下划线,25px的效果3
</p>
</body>
</html>
CSS样式表1
h2{
color:#0000FF;
}
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}
CSS样式表2
h3{
color:#00FFFF;
font-style:italic;
font-size:40px;
}
</span>
各种方式的优先级
行内样式的优先级最高,其次是采用<link>标记的链接式,再次是位于<style>和<style>之间的内嵌式,最后,才是导入式@import。
虽然,各种CSS样式有先后的优先级,但是,在建设网站时,最好只使用其中的1~2种,这样,既有利于后期的维护和管理,也不会出现各种样式碰撞的情况,有利于设计者理清设计的整体思路。