CSS 2

CSS 2

袁磊2005 年 5 月

定义方法重新定义标签调用方法：引用标签 # 调用方法： id * 调用方法： class

Class 方法的应用：定义： p.s1{color:green} p.s2{color:gray}

使用： <h1 class=s1> 内容 </h1>

Class Selector

利用 Class Selector ，你可以用同样的 HTML Tag 构成不同的样式。比如说，你希望段落<p> 有两种样式，一种是居中对齐，一种是居右对齐。你就可以写如下样式：

p.right {text-align:right}p.center {text-align:center}

更通用的写法你也可以不用 HTML Tag ，直接用 . 加上 Clas

s 名称作为一个 Selector 。示例代码如下：.center {text-align: center} 这种通用的 Class

Selector 就没有 Tag 的局限性，可以用于不同的 Tag 。比如：

<h1 class = "center"> 这个标题居中显示。 </h1><p class = "center"> 这个段落居中显示。</p>

文本对齐属性 (text-align)

这个属性用来设定文本的对齐方式。有以下值：left ( 居左，缺省值 ) right ( 居右 ) center ( 居中 ) justify ( 两端对齐 ) 示例代码如下：.p2 {text-align:right}

文本修饰属性 (text-decoration)

这个属性主要设定文本划线的属性。有以下值：none ( 无，缺省值 ) underline ( 下划线 ) overline ( 上划线 ) line-through ( 当中划线 )示例代码如下：.p2 {text-decoration: underline}

文本缩进属性 (text-indent)

这个属性设定文本首行缩进。其值有以下设定方法：

length ( 长度，可以用绝对单位 (cm, mm, in, pt, pc) 或者相对单位 (em, ex, px))

percentage ( 百分比，相当于父对象宽度的百分比 )

示例代码如下：.p1 {text-indent: 8mm}

行高属性 (line-height)

这个属性设定每行之间的距离。其值有以下设定方法：normal ( 缺省值 )

length ( 长度，可以用绝对单位 (cm, mm, in, pt,pc) 或者相对单位 (em, ex, px))

percentage ( 百分比，相当于父对象高度的百分比 )

示例代码如下：.p1 {line-height:1cm}

颜色属性 (color)

用颜色属性 (color) 可以改变文本的字体颜色。示例代码如下：

.p1{color:gray}

字间距属性 (letter-spacing)

这个属性用来设定字符之间的距离。normal ( 缺省值 )

length ( 长度，可以用绝对单位 (cm, mm, in, pt, pc) 或者相对单位 (em, ex, px))

示例代码如下：.p1 {letter-spacing: 3mm}

调用方法 1 ：直接调用<h1 style="font-family: 楷体 ; color:red">

内部 css<html><head><title> 对 HTML 标记直接定义 </title><style type="text/css"> h1 {font-family: 楷体 ; color:yellow} h2 {font-family: 黑体 ; color:blue}</style></head><body><font><p><h1> 此行文字为黄色楷体的字体 </h1><p><h2> 此行文字为蓝色黑体的字体 </h2></font></body></html>

link

＜ head ＞

　　＜ link type=”text/css” rel=”stylesheet” href=”*.css” media=”screen” ＞

　　＜ /head ＞

　　在一个页面中引入一个外部的 css使用

＠ Import （倒入）

<style type="text/css">

@import url(“1.css”); 　</style>

　　　　　　在一个页面中引入一个外部的 css使用

作业自己建一个 css 文件，并在 html 中调用这个

css 文件中的样式。

Documents

CSS 2