CSS简介

CSS介绍及特点：

1.CSS 介绍

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
将样式信息与网页内容分离
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

2.CSS 样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

3.在网页中插入CSS的方法

插入样式表的方法有三种：

链接式
嵌入式
行内样式

1)链接式

对于一个包含很多页面的网站，为了方便页面风格统一，建议使用链接式引入CSS，可以通过改变一个文件改变整个站点的外观。浏览器从样式表文件 hyit.css 中读取样式声明，并格式文档。外部样式表可以在任何文本编辑器中进行编辑，文件不能包含任何的 html 标签，样式表以 .css 扩展名保存。每个页面使用 <link> 标签链接到样式表。<link> 标签写在文档的头部：

<html>
  <head>
    <title>链接式引入CSS</title>
    <link rel="stylesheet" type="text/css" href="hyit.css" />
  </head>
  <body>
    <p>淮阴工学院</p>
  </body>
</html>

hyit.css代码如下：

  p{
    color:blue;
    font-size:20px;
    }
body{
    background-image: url("images/hyit.gif");
    }

注意：不要在属性值与单位之间留有空格，如不要写成 “font-size:20 px” 而要写成 “font-size:20px”

2)嵌入式

当单个文档需要特殊的样式时，建议使用嵌入式样式，使用 <style> 标签在文档头部定义样式表，例如:

<html>
  <head>
    <title>嵌入式引入CSS</title>
    <style type="text/css">
       hr {color:blue;}
       p {font-size:20px;}
       body {background-image: url("images/background.img");}
    </style>
  </head>
  <body>
    <p>淮阴工学院</p>
    <hr />
  </body>
</html>

3)行内样式

当样式仅需要在一个元素上应用一次时，可以使用行内样式，但是行内样式会失去样式表“表现与内容分离”的优势，因此尽量避免使用这种方法

使用行内样式的方法是：在要应用样式的标签内使用样式（style）属性。下面的例子使用行内样式改变段落的颜色和文字字号：

<html>
  <head>
    <title>行内式引入CSS</title>
  </head>
  <body>
    <p style="color:blue; font-size:20px">
      淮阴工学院
    </p>
  </body>
</html>