第二章 使用CSS控制页面
本章主要介绍:如何使用CSS控制页面,以及其控制页面的各种方法,包括行内样式、内嵌式、链接式和导入式等,最后讨论各种方式的优先级问题
1、行内样式
行内样式是所有样式方法中最为直接的一种,直接对HTML的标记使用Style属性,然后将CSS代码直接写在其中。
<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>
行内样式是最为简单的CSS使用方法,但由于需要为每一个标记设置style属性,后期维护成本依然很高,而且网页容易过胖,因此不推荐使用。
2、内嵌式
内嵌样式表就是将CSS写在<head>与</head>之间,并且用<style>和</style>标记进行声明。
<html> <head> <title>页面标题</title> <style type="text/css"> <!-- 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>
所有CSS的代码部分被击中在了同一个区域,方便了后期的维护,页面本身也大大瘦身。但如果是一个网站,拥有很多的页面,对于不同页面上的<p>标记都希望采用同样的风格时,内嵌式的方法就显得稍微麻烦,维护成本也不低,因此仅适用于对特殊的页面设置单独的样式风格。
3、链接式
链接式CSS样式表是使用频率最高,也是最为使用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个文件,实现了页面框架HTML代码与美工CSS代码的完全分离,使得前期制作和后期维护都十分的方便,网站后台的技术人员与美工设计者也可以很好的分工合作。
对于同一个CSS文件可以链接到多个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>
h2{ color:#0000ff; } p{ color:#ff00ff; text-decoration:underline; font-weight:bold; font-size:20px; }
h3{ color:#00ffff; font-style:italic; font-size:40px; }
链接式样式表的最大优势在与CSS代码与HTML代码完全分离,并且同一个CSS文件可以别不同的HTML所链接使用。因此在设计整个网站时,可以将所有页面都链接到同一个CSS文件,使用相同的样式风格。如果整个网站需要进行样式上的修改,就仅仅只需要修改这一个CSS文件即可。
4、导入样式
采用import方式导入的样式表,在HTML文件初始化时,会被导入到HTML文件内,作为文件的一部分,类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才以链接的方式引入。
常用的有如下几种@import语句,可以选择任意一种放在<style> 与</style>标记之间:
@import url(sheet.css);
@import url("sheet.css");
@import url(‘sheet.css‘);
@import sheet.css;
@import "sheet.css";
@import ‘sheet.css‘;
<html>
<head>
<title> 页面标题</title>
<style type="text/css">
<!--
@import url("1.css");
@import url("2css");
-->
</style>
</head>
<body>
<h2> CSS标题1 </h2>
<p>紫色、粗体、下划线、25px的效果1</p>
<h2> CSS标题2 </h2>
<p>紫色、粗体、下划线、25px的效果3<p>
<h3> CSS标题3 </h3>
<p>紫色、粗体、下划线、25px的效果3<p>
</body>
</html>
导入样式表的最大用处在与可以让一个HTML文件导入很多的样式表
不单是HTML文件的<style>与</style>标记中可以导入多个样式表,在CSS文件内也可以导入其他的样式表,如将@import url(2.css);去掉,然后再1.css文件中加入@import url(2.css);也可以达到相同的效果。
5、各种方式的优先级问题
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。