CSS简介（一）

来源：互联网发布：电脑打电话软件管理编辑：程序博客网时间：2024/06/02 10:12

从这一节开始我们将要讨论 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 以及其他一些基础.

上一节开始我们讨论 CSS (Cascading Style Sheet) 的基础.
告诉你有三种 Selector. 但只介绍了其中的 HTML selector.
这一节我们把三种都详细介绍给你

HTML selector
class selector:
ID selector:
HTML selector
HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如
你用 CSS 定义了它们, 在整页中, 这个 Tag 的性质就按照你
的定义来显示了. HTML selector 的语法如下

tag {property:value}
比如我们想叫 H1 的颜色是红的

H1 {color: red}
这里还要告诉你 CSS 的一个特点, 它可定义好几个 selector
在一个 rule 里. 比如

H1, H2, TD {color: red}
这个定义就能让所有的 H1, H2, 和 TD 的颜色都为红色.

Class selector
Class selector 有两种, 一种叫相关 class selector, 它跟一
个 HTML 的 tag 有关系. 它的语法是

tag.Classname {property:value}
比如我们想叫一些而不是全部 H2 的颜色是红的

<style>
H2.redone {color: red}
</style>

<H2>This is H2</H2>
<H2 class=redone>This is red H2</H2>
This is H2
This is red H2

第二种是独立 class selector . 它可被任何 HTML tag 所应用.
它的语法如下

.Classname {property:value}
假如我们有下面这个定义

.blueone {color: blue}
那么我们可以把他应用到不同的 Tag 当中去. 比如

<style>
.blueone {color:blue}
</style>
<H2 class="blueone">Blue H2</H2>
<P class="blueone">Blue paragraph</P>
Blue H2
Blue paragraph

显然 class selector 给了我们更多的自由.

ID selector
ID selector 其实跟独立 class selector 的功能一样. 而区别
在于它们的语法和用法不同, 以及对于 javascript 操纵 HTML
元素有帮助. 它的语法如下

#IDname {property:value}
假如我们有下面的定义

#yelowone {color: yellow}
我们可以运用这个定义到任何的有同样 ID 名字的 tag, 比如

<style>
#redone {color: red}
</style>
<P ID="redone">text here</P>
text here

你可能觉得既然 ID selector 和独立 class selector 功能一
样, 为什么两者都存在呢. 如果你知道用 CSS-P 来定位的话,
你就明白它们的区别了. 有 ID 的 HTML 元素可以被 CSS-P
和 javascript 来操纵

到现在为止, 你已经大概知道如何来写 CSS 的定义了, 下面
七节我们将会告诉你如何用 CSS 来操纵或修改

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

这一节我们将讨论如何用 CSS 来控制元素中字体的形状, 大
小, 风格.

字形
CSS 用来控制字形的性质是 font-family. 你可以用它来决定任何一个元素中文字的字形. 比如

P.v {font-family: Verdana}
H2.a {font-family: arial}
This H2''s font is "Times New Roman"
This paragraph is using "Verdana" font

有的时候，你所给的字体浏览器不见得有，你可以多给几种比如

P {font-family: Verdana, Forte, "Times New Roman"}
上面这个定义可以使得浏览器先用Verdana, 如果没有就用Forte...
记住每个字形之间要用逗号隔开.

大小
用来控制字体大小的性质是 font-size 比如

P.f12 {font-size: 12pt}
P.f18 {font-size: 18pt}
This paragraph''s font is 12pt

This paragraph''s font is 18pt

你可以自己慢慢调整字体的大小直到满意为止. 一般来说, 字
体的大小没什么限制, 但 500 以下比较安全.

斜体
如果想让字体成为斜体, ?nbsp; font-style 性质, 比如

P {font-style: italic}
This paragraph''s font is italic

加重
用 font-weight 来调节文字的粗细, 比如

P.bold {font-weight: bold}
This paragraph''s font is normal

This paragraph''s font is bold

font-style 的可能的值是 lighter, normal, bold, bolder

我们只介绍在 Netscape 和 IE 上都通用的性质. 下一节我们讨
论文字的定位

这一节我们将讨论如何用 CSS 来控制网页中文字定位, 这些性质是

line-height: 行距
text-align: 向那个方向看齐
vertical-align: 向上还是向下看齐
text-indent: 段落第一行空格
text-transform: 字母的大小写
text-decoration: 给文字加装饰, 比如下滑线
行距
我们有时候可能会想把行距加大点使得文字看的清楚一些. CSS
中的 line-height 可以取得这种调节

P.double {line-height: 2}
请看下面的比较. 这一段的行距是正常的. 这一段的行距是正常的. 这一段的行距是正常的. 这一段的行距是正常的.

这一段的行距是双倍的. 这一段的行距是双倍的. 这一段的行距是双倍的. 这一段的行距是双倍的.

你要让 line-height 等于 3 的话, 那行距就更大了.

看齐
一般来说我们都是向左边看齐. 但有的时候也有其他的选择,
比如说向右边看齐.

P.right {text-align: right}
P.center {text-align: center}
P.justify {text-align: justify}
请看下面的比较. 这一行左边看齐

这一行右边看齐

这一行在中间

text-align 可以有 left, right, center, 和 justify

段落的首行空格
如果我们想让第一行的开头空几格, 可以用 text-indent, 比如

P {text-indent: 1cm}
请看下面的例子. 这一段开头空了 1 厘米. 这一段开头空了 1 厘米. 这一段开头空了 1 厘米. 这一段开头空了 1 厘米.

字母的大小写
这个性质显然跟中文没关系, 但如果我们要处理英文, 你可以
用 text-transform 来改变英文的大小写. 比如, 让每个字的
第一个字母大写

P.capitalize {text-transform: capitalize}
P.up {text-transform: uppercase}
P.low {text-transform: lowercase}
请看下面的比较. All the words'' first letter have been capitalized in this line

All the letters are uppercase in this line

All the letters are lowercase in this line

文字的装饰
就是在文字上加下滑线, 或中间加条线的. 比如

P.underline {text-decoration: underline}
P.line-through {text-decoration: line-through}
请看下面的比较. Underline line

line-through line

其实最常用的是我们想去掉联接下面的下滑线.

A {text-decoration: none}