精简高效CSS系列之一——CSS样式用法

来源：互联网发布：软件测试的原则是什么编辑：程序博客网时间：2024/06/05 07:24

学过网页设计的都知道CSS灵活性很好，网页的样式完全与代码分离。仅仅需要简单的CSS代码知识就可以将一个本来不太漂亮的网页立刻变得漂亮起来，很轻易的改变网页的外观。上一篇文章总结了CSS样式的基础以及优缺点。这篇文章接着说CSS样式的用法。

一、CSS在网页设计中有三种方式的用法，那么具体使用中采用哪种方法呢？

当有多个网页用到CSS采用外联CSS文件的方式，这样不仅网页的代码大大减少，修改起来方便，而且还能提高复用性，这样一个CSS文件就可以控制多个HTML页面了；只在单个网页中使用的CSS，采用文档头部方式；只有在一个网页一两个地方才用到的CSS样式，采用行内样式，很方便，应用样式时做相应修改即可。

二、下面简单介绍一下CSS的三种方式

1、行内样式

<html><head><title>例子</title></head><body style="background-color: #FF0000;"><p>这个页面是红色的</p></body></html>

2、内嵌样式

<html><head><title>例子</title><style type="text/css"><!--body {background-color: #FF0000;}--></style></head><body><p>这个页面是红色的</p></body></html>

3、链接样式

链接样式就是要引入一个CSS文件。CSS文件可以放在服务器或者本地硬盘上。那么css文件里的样式内容：

body {background-color: #FF0000;}

在HTML文档里面插入链接语句：

<link rel="stylesheet" type="text/css" href="style.css" />

这行链接语句要放在<head></head>之间：

<html><head><title>例子</title><link rel="stylesheet" type="text/css" href="style.css" /></head><body><p>这个页面是红色的</p></body></html>

以上三种方式说明了在显示HTML页面的时候要按照给定的CSS样式进行显示。

总结：网页设计的过程中将以上三种方式结合起来应用，不仅不会造成混乱，而且特别灵活，效率高。如果一个网页中有这三种方式，那么首先检查的是行内样式，针对其样式去执行；然后检查的是内嵌样式也就是头部插入css样式的；最后检查的是连接样式。也就是三种方式的优先级由高到低分别是：行内样式、内嵌样式、导入样式。

PS：还有一种样式使用@import引入：跟LINK用法很像，但必须放在<STYLE>...</STYLE> 中。

<STYLE TYPE="text/css"><!--@import url(http://yourweb/ example.css);--></STYLE>