您的位置：寻梦网首页＞编程乐园＞CSS 初步＞动态HTML初步
动态HTML初步

CSS 第一节: CSS Basic

从这一节开始我们将要讨论 CSS (Cascading Style Sheet). 中文大概叫试样纸吧. 在我们这个教程中还是把它叫做 CSS 方便点儿.

什么是 CSS 以及它的功能

虽然 CSS 在网页里是和 HTML 在一起的. 但它不算 HTML. 它的使用可以扩展 HTML 的功能. 使得我们可以重新定义 HTML 元素的显示方式. CSS 所能改变的性质如下

  • 字体
  • 文字间的空间
  • 列表
  • 颜色
  • 背景
  • Margin
  • 位置

我们将会在后面的七节里讨论上面的每一个性质的改变. 在这一节我们给你提供 CSS 的基础.

CSS 的定义 (rules)

CSS 的每一条定义都有如下的形式 

    selector {property:value; property:value; ...}
  • selector: 第一种是 HTML 的 tag, 比如 P, BODY, A 等等。第二种叫 class。 第三种叫 ID。 你这里先知道有这么三种，具体的咱们以后在谈.
  • property: 就是那些将要被修改的性质, 比如 color
  • value: 给 property 的值, 比如给 color 的可以是 red

请看下面的一个典型定义 

    A {color: red}

用这条定义所有的联接都变成红色的了. 一般来说我们把所有的定义全包括在 STYLE 元素里面放到 HEAD 里面. 请试验下面的网页 

<HTML>
<HEAD>
  <STYLE>
    A {color: red}
    P {background-color:blue; color:white}
  </STYLE>
</HEAD>
<BODY>
  <A href="http://www.nease.net/~haidian">动态网页制作</A>
  <P>你注意到这一段文字的颜色和背景颜色了吗?</P> 怎么样?
</BODY>
</HTML>

怎么样? 很简单把. 你只要知道所有可以改动的元素和 它们的性质灵活的运用 CSS 的定义, 你就可以使得你的网页制作更上一层楼. 下面一节我们将要告诉你其他两种 selector 以及其他一些基础.