【CSS+DIV】CSS基本概念和4种控制页面方法

来源：互联网发布：qq api 发送消息 java 编辑：程序博客网时间：2024/06/16 13:09

前言

步入BS的大门以来，我们前面进行了牛腩新闻发布系统的实践，也了解过了网页制作的基础——HTML语言（可参考【HTML】快速掌握 html 常用标签）。

但是想要页面有更好的呈现效果，仅仅有HTML是不够的，所以CSS扮演着十分重要的“形象设计师”角色。本篇博客简介css的基本概念和4种控制页面的方法，希望可以给读者带来一些收获。

基本概念

CSS（Cascading Style Sheet），中文含义为层叠样式表，它用于控制网页样式并允许将样式信息和网页内容分离的一种标记性语言。

CSS的引入就是为了使得HTML语言能够更好地适应页面的美工设计。它以HTML语言为基础，提供了丰富的格式化功能，如字体，颜色，背景，整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器，打印机等。

标记

经过前面HTML的学习，我们对于“标记”（tag）肯定不再陌生，在页面中各种标记以及位于标记中间的所有内容，组成了整个页面。

看下面一个例子：

   <h2>标题内容</h2>

其中<h2>称为起始标记，对应的</h2>称为结束标记，而在两个标记之间的就是标题内容。

在没有引入css之前，对于页面样式的设置，就是直接写在了html标记之间。就像下面这样：

<h2><font color="#0000FF" face="微软雅黑">CSS标记1</font></h2>

想要对字体的颜色，类型进行修改就在html标记之间进行修改，但是一两句还可以接受，要是一整篇文章都要进行修改，那就费劲不讨好了。

所以，在引入css之前，HTML还是存在着缺陷。比如维护困难，标记不足，定位困难等等。

So，我们的css在此时就显得很重要了。来看看使用css对字体进行设置的代码吧！

栗子1：

<html>    <head>  <title>页面标题</title>  <style>  h2{             font-family:微软雅黑;         color:red ;             }   </style>   </head>   <body>   <h2>CSS标记1</h2>   <p>CSS正文内容1</p>   <h2>CSS标记2</h2>   <p>CSS正文内容2</p>   <h2>CSS标记3</h2>   <p>CSS正文内容3</p>   <h2>CSS 标记4</h2>   <p>CSS正文内容4</p>    </body ></html>

上述代码中，h2标记之间都是标题的内容，所以在style标记之间加入了css代码，抽出来h2来代表下面的标题内容。这样只在style中对h2进行样式设置，下面所有h2标记的标题内容就都有了css的样式设置。想给字体什么颜色，什么字体，就在css代码这一块设置就好了，这样对标题内容进行统一的设置是不是更加的简洁方便高效了呢？

学习工具软件

在学习css这一块的时候，尝试了不少的文字处理软件，比如UltraEdit和Notepad++。书里推荐的Dreamweaver还没有尝试使用。读者有兴趣可以试试。

控制页面

在对css有了大致的了解之后，可以使用css对页面进行全方位的控制。下面简单介绍四种方法，分别是行内样式，内嵌式，链接式，导入式等。

1.行内样式

行内样式，是所有样式方法中最为直接的一种，它直接对HTML的标记使用style属性，就直接把css代码写到style属性中。

看下面的例子：

栗子2：

<html>     <head>    <title>页面标题</title>     </head>     <body>    <p style="color:#20DECB; font-size:36;text-decoration:underline;">璐璐璐</p>    <p style="color :#A94CAF;font-size:36;font-style:italic;">崔崔崔</p >    <p style="color:#FD5959;font-size:36;font-weight:bold ;">苏苏苏</p>     </body ></html>

上面的3条内容，显示出来都是不同的颜色，不同的字体效果。

行内样式是最为简单的css使用方法，但由于需要为每一个标记设置style属性，后期维护的成本相当高，而且网页容易过胖，所以不推荐使用。

2.内嵌式

内嵌样式表就是将CSS写在<head></head>之间，并且用<style></style>标记进行声明。

具体代码参照上面的栗子1。

出来的效果是这样的：

优缺点分析

使用嵌入式之后，所有的css代码都集中在了同一个区域，方便了后期的维护，页面本身大大的瘦身了。

但是，如果一个拥有很多页面的网站，对于不同页面上的<p>标记都希望采用同样的风格的时候，内嵌式的方法就又略显麻烦和累赘了，而且维护成本也不低。所以嵌入式适用于对特殊的页面设置单独的样式风格。

3.链接式

链接式css样式表是适用频率最高，也是最为实用的方法。它将HTML页面本身与css样式风格分离开来，成为了两个或者多个文件，实现了页面框架HTML代码与美工css代码的完全分离，使得前期制作和后期维护都十分方便，网站后天的技术人员与美工设计者也可以很好的分工合作。

下面来看看链接式的例子：

栗子3：

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>    <h2>CSS标题3</h2>    <p>紫色、粗体、下划线、25px的效果3</p>     </body ></html>

1.css文件的代码：

h2{       color:#1C7293;   }p{       color:#ED5485;       font-weight:bold;       font-size:20px;       text-decoration:underline;   }

上面代码，文件1.css将所有的CSS代码从HTML文件中抽离出来，然后再html文件的head标签之间加上<link href="1.css " type="text/css " rel="stylesheet">语句，将css文件链接到页面中，对html中的标记进行样式控制。

优点分析

链接样式表最大优势在于css代码和html代码的完全分离，并且同一个css文件可以被不同的html所链接使用。因此，在设计整个网站时，可以将所有页面都链接到同一个css文件，使用相同的样式风格。如果整个网站需要进行样式上的修改，就仅仅只需修改一个css文件就OK。

4.导入样式

导入样式表和上面的链接样式表的功能基本相同，只是语法和运作方式上略有区别。采用import方式导入的样式表，在HTML文件初始化的时候，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果。而链接样式表则是在HTML的标记需要格式时，才以链接的方式引入。前者是初始化的时候就已经导入，后者则是用到格式才会链接到css文件。

在HTML文件中导入样式表，常用的有如下几种@import语句，可以任选一种放在style之间。

@import url(sheet1.css);

@import url("sheet1.css");

@import url('sheet1.css');

@import sheet1.css);

@import "sheet1.css";

@import 'sheet1.css';

其实导入样式表最大的用处在于可以让一个HTML文件导入很多的样式表，也就是不止一个样式表，下面来一个导入两个css文件的例子。

栗子4：

<html>     <head>           <title>页面标题</title>           <style>           @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>

新加入的2.css文件的代码如下：

h3{      color:#00FFFF;      font-style:italic;      font-size:40px;   }

效果见下图，我们可以看到新导入的2.css中设置的<h3>风格样式也被成功运用到页面效果中了，原本1.css对前两个标题的效果是保持不变的。

其实不单单是可以再HTML文件的style标记中导入多个样式表，在css文件内也可以导入其它的样式表。比如上面的栗子5，你可以把对2.css的文件引用去掉，把“@import url(2.css);”这句代码加入到1.css中，同样可以达到相同的效果。

5.优先级

当我们在同一个html文件使用了上面几种不同的css样式方法，如果分别设置的不同属性，那么最终的结果不会有太大差错。

但是你对同一个属性用了不同的css样式方法，那么就会存在优先级的问题。

在这里就不再拿例子来论证了，只简单说一下它们之间的优先级关系。

1.最高：行内样式

2.<link>标记为链接式

3.<style></style>之间的内嵌式

4.@import导入式

小结

本篇博客简单介绍了css的基本概念，以及4种控制页面的方法。希望可以给读者来了一些收获~下次见~

1 0