《CSS教程》01章 CSS入门

从现在开始，小雅和您一起来学习怎样利用CSS来编写HTML网页。

CSS的全称为CascadingStyleSheet(层叠式样表)，HTML的标准语句使页面的文字、图象、表格等不能精确表示，式样表使其得到充分的完善。为什么要称为层叠式样表呢？层叠指css将显示在页面的内容分成不同的层次，这样可以使页面由二维变成了三维。如用JavaScript来控制不同层面显示的内容，这就是 DHTML即动态页面。

基本的写法

元素名 {
    属性名1: 值;
    属性名2: 值;
    .....
    属性名n: 值;
}

p {
    MARGIN-BOTTOM: 3px;
    MARGIN-RIGHT: 0px;
    MARGIN-TOP: 3px;
    text-indent: 2em;
}

单位的表示

[绝对值]
in  英寸
cm  厘米
mm  毫米
pt  Point(1pt=1/72in)
pc  Pic(1pc=12pt)
}

[相对值]
em  以当前范围内的字体高度为1个单位
ex  以当前范围内的字体的小文字高度为1个单位
px  像素
%   百分数
}

BOX的理解

将下面这四个单词的实际意义弄明白就解决了大部分问题了。

CSS如何保存

1. 直接保存在HTML文的<HEAD>和</HEAD>之间。

2. 保存后缀名为.css的文件里，并在HTML文的<HEAD>和</HEAD>之间，用如下语句：

<link rel="stylesheet" href="文件名.css" type="text/css">。

CSS方法之一(CSS文件中设置)

<!--s01_01.htm-->
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CSS的组合</title>
    <link rel="stylesheet" href="s01_01.css" type="text/css">
</head>

<body>
    <h1>CSS的组合</h1>
    <p>
    HTML文档中加入CSS有三中方法。一种是将.css文件读进来，另外两种是直接在HTML文件中设置。
    </p>
</body>
</html>

<!--s01_01.css-->
body {
  margin: 0;
  color: #000000;
  background: #00cc99 url(back.jpg)
}
h1 {
  font-size: medium;
  margin: 0;
  padding: 0.3em;
  color: #ffffff;
  background-color: #000000
}
p {
  line-height: 1.8;
  margin: 1.6em 1.6em 1em 36%;
  padding: 1em;
  border: dotted 3px #ffffff
}

CSS方法之二(HTML文件的Head部分设置)

<!--s01_02.htm-->
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CSS的组合</title>
    <style type="text/css">
    <!--
    body {
      margin: 0;
      color: #000000;
      background: #00cc99 url(back.jpg)
    }
    h1 {
      font-size: medium;
      margin: 0;
      padding: 0.3em;
      color: #ffffff;
      background-color: #000000
    }
    p {
      line-height: 1.8;
      margin: 1.6em 1.6em 1em 36%;
      padding: 1em;
      border: dotted 3px #ffffff
    }
    -->
    </style>
</head>
<body>
    <h1>CSS的组合</h1>
    <p>
    HTML文档中加入CSS有三中方法。一种是将.css文件读进来，
    另外两种是直接在HTML文件中设置。
    </p>
</body>
</html>

CSS方法之三(HTML文件的Body部分设置)

<!--s01_03.htm-->
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>CSS的组合</title>
</head>
<body style="margin: 0; color: #000000; background: #00cc99 url(back.jpg)">
    <h1 style="font-size: medium; margin: 0; padding: 0.3em; color: #ffffff; 
               background-color: #000000">CSS的组合</h1>
    <p style="line-height: 1.8; margin: 1.6em 1.6em 1em 36%; padding: 1em; 
              border: dotted 3px #ffffff">
    HTML文档中加入CSS有三中方法。一种是将.css文件读进来，
    另外两种是直接在HTML文件中设置。
    </p>
</body>
</html>

补充说明

一个HTML文件可以包含有多个CSS文件，多个HTML文件也可以公用一个CSS文件。