打印

CSS应用

CSS应用

CSS概念 在今天,不会CSS(Casading Style Sheets 层叠样式表)的网页制作员不可以称为专业的网页制作人员。会HTML语言再学CSS并不难,因为CSS跟HTML一样也是一种标记语言,甚至很多属性都是来源于HTML。   CSS的编辑方法同HTML一样,也可以是任何文本编辑器或网页编辑软件,还有专门用来编辑CSS的软件。 如果你写的CSS语句是当成外部样式表而在HTML文件中调用,那它的扩展名存成.css就可。假如你的网站每页使用的都是这个样式表,那么你修改这个文件就修改了整个网站的外观,所花的时间可能只要两三分钟! ■ 一点说明:   我们在这里讲述的是CSS的一些基本使用方法,起的一个入门的作用,更详细的技巧将不作更多介绍了,这就是为什么称作“CSS不完全手册”的原因。 ■ CSS使用方法:   CSS在HTML中应用有三种方法: 第一种是包含在...标记里,例如:

在这里使用了H1标记

第二种是行间定义,例如:

这是行间定义的H1标记

第三种是外部调用样式文件,跟第一种类似,例如: 第四种是也是导入样式文件,跟第三种类似,例如:
世界已经坠入黑暗的地狱,生,是这样脆薄的一张纸,放在眼前就轻轻的撕裂,只有绝望。

TOP

分类及技巧

CSS真是伟大,能化一为万。假如你有几段文字,每一段都要这样:将第一行设成黄色,第二行设成红色,第三行设成蓝色,第四行设成绿色……其实这很容易做到。你在CSS中如下为每一行定义一个类。   P.first {color:yellow} P.second {color:red} P.third {color:blue} P.fourth {color:green} 依次定义下去。在你的HTML代码中就是这样使用以上的定义类。

这里是第一行,使用的是class=first

这里是第二行,使用的是class=secont

这里是第三行,使用的是class=third

这里是第四行,使用的是class=fourth

■ 更灵活的分类:   在上面我们定义的类是前面都有一个 P,也就限定了这个类只限于

标记使用。如果我们在定义的时候去掉 P, 但 . 仍然要。比如:.first {color:yellow},这样定义的类更加灵活,可应用于任何HTML标签,例如:   

在H2标记中使用class=first

■ 选择符 ID:   其实CLASS只是一个类的选择符,另一个选择符 ID 具有同样的功能。不过使用ID选择符的类定义的时候要将 . 换成 # ,使用时要在类别名上加上引号。 H1 #001 {color:red} #002 {color:blue} 使用:

H1标记使用#001类

H3标记使用#002类

P标记使用#002类

世界已经坠入黑暗的地狱,生,是这样脆薄的一张纸,放在眼前就轻轻的撕裂,只有绝望。

TOP

字体系列

■ FONT-FAMILY属性:   每部机器上都装有多种字体,浏览器会使用默认的字体浏览网页,比如简体中文版WINDOWS汉字默认是宋体,英文默认是ARIAL。 使用FONT-FAMILY属性则可以规定浏览器用什么字体解读网页。 ■ FONT-FAMILY语法实例: h2 {font-family:times,impact,sans-serif} 说明如下:   helvetica是浏览器首先寻找的字体名称,如果有就使用它。在helvetica字体没有找到的情况下,则会寻找impact字体,如果找到就使用它。如果以上两种字体都没有找到,则指示浏览使用sans-serif(通用字体)。在你不能保证你列出的字体浏览者一定会安装时,将一种通用字体加在字体列表中是一种好的做法。因此我们提倡使用最基本的字体制作网页,比如中文用宋体,英文用ARIAL,这样使得你的网页不会因为浏览器没能使用合适的字体解读而变样。 ■ 其它相关内容: 通用字体有以下几类,其中cursive和fantasy不被NC支持: "serif"(比如Times); "sans-serif"(比如Helvetica); "cursive"(比如Comic Sans); "fantasy"(比如Western); "monospace"(比如Courier) 其他使用事项: 如果一种字体的名称中有空格,如"Times New Roman",在CSS语句中要用引号包含该字体。 例:Body {font-family:"Times New Roman",serif} 如果该语句已在双引号里,则字体名降级为单引号。 例:

如果该语句包括其它CSS规则,字体说明应放在最后。 例:H2 {color:red;margin:10px;font-family:"Times New Roman",serif} [ Last edited by 清晨虎 on 2004-6-20 at 08:30 ]

世界已经坠入黑暗的地狱,生,是这样脆薄的一张纸,放在眼前就轻轻的撕裂,只有绝望。

TOP

继承与关联

继承:就是在子元素没有定义样式的情况下,它将采用上一级元素的样式定义。   优先级:根据继承来理解优先级也就容易。最近的样式优先级最高。 比如:   CSS在声明 I{font-family:impact};   但在HTML语句中又如下定义:

要显示的文字在这里

在此例中样式表要求用IMPACT字体,而FONT标记要求用TIMES字体,最终浏览器使用的会是TIMES。作为CSS标准制定者,要求将CSS优先,他们认为像以上的例子中应该用IMPACT字体。可以浏览器产商照顾使用者的旧习惯,使用了FONT标记中的字体,尽管FONT已不被提倡。   ■ 更好的方法--关联:   我并讲不出抛弃FONT标记的理由,只知道这是潮流。显然CSS提供更好的方法避免你在像上面的例子一样使用FONT标记,那就是: 关联。 可以在HEAD部分的CSS定义中加入如下行: P I {font-family:times} /*P和I之间的空格不能少*/   在HTML中:

要显示的文字在这里

  虽然你没有使用FONT FACE,但根据HEAD部分的CSS定义,P标记里的I标记使用的字体一定是TIMES。要提起注意的是那行CSS样式只作用于P标记里的I标记。 [ Last edited by 清晨虎 on 2004-6-20 at 08:29 ]
世界已经坠入黑暗的地狱,生,是这样脆薄的一张纸,放在眼前就轻轻的撕裂,只有绝望。

TOP

字体大小和风格

■ 大小控制方法:   以下是控制文字大小的三种方法: 使用大小单位,pt(点),px(像素),em,及其他单位; 使用关键字(xx-small,x-small,small,medium,large,x-large,xx-large); 使用比例参数(150%等)。 例如: p {font-size:12pt}; p {font-size:large}; p {font-size:200%}; ■ 字体风格: 斜体 p {font-style:italic}; 粗体 p {font-weight:bold};   在字重的设定方面,还有lighter(更轻)和bolder(更重),还可以使用数字100,200到900最重。   字体风格和字重都有一个共同的参数normal,一旦设为normal也就取消了字重和风格设置。 其他字体效果 ■ FONT-VARIANT:   FONT-VARIANT 可以将正常文字尺寸缩小一半后转为大写: h2 {font-variant:small-caps} ■ TEXT-TRANSFORM:   完全控制字母大小写: 全部大写:h2 {text-transform:uppercase}; 全部小写:h2 {text-transform:lowercase}; 单词第一个字母大写:h2 {text-transform:capitalize}; 取消所有设定:h2 {text-transform:none}; ■ TEXT-DECORATION:   哪天你突发奇想,希望链接没有下划线,现在你可以做到: 文字下划线:A:link{text-decoration:underline}; 文字上划线:A:link{text-decorationverline}; 文字删除线:A:link{text-decoration:line-through}; 文字闪烁:A:link{text-decoration:blink}; 不要任何效果:A:link{text-decoration:none}
世界已经坠入黑暗的地狱,生,是这样脆薄的一张纸,放在眼前就轻轻的撕裂,只有绝望。

TOP

对齐与缩行

■ 水平对齐:   利用文字对齐属性text-align,可以控制段落的水平对齐: h2 {text-align:center} h2 {text-align:left} h2 {text-align:right}   这项属性可作用于

,

-

,
    标记。 ■ 垂直对齐:   利用垂直对齐属性vwrtical-align,可以控制对象(包括文字或图形)相对于母体的垂直位置: h2 {vertical-align:top} h2 {vertical-align:text-top} h2 {vertical-align:bottom} h2 {vertical-align:text-bottom} h2 {vertical-align:baseline} h2 {vertical-align:middle} h2 {vertical-align:sub}/*上标*/ h2 {vertical-align:super}/*下标*/   这些属性具体对齐效果如何,希望大家自已去试验。 ■ 首行缩进:   首行缩进text-indent,在文档排版中经常用到: h3 {text-indent:24pt};
世界已经坠入黑暗的地狱,生,是这样脆薄的一张纸,放在眼前就轻轻的撕裂,只有绝望。

TOP

不错,文章很好加4分!

TOP

容器属性

■ 容器的概念:   根据CSS对网页样式的定义,页面上的所有元素都放在一个容器里,这个容器叫BOX。BOX也就包括: 元素本身; 围绕元素的空格;(padding) 围绕元素空格外的边框;(border) 边框外的边距。(margin) ■ 四个边距:   margin用于设定上,右,下,左,边距: body {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px} body {margin:10px 20px 30px 40px}/*效果与上面方式相同*/   以上参数值同样可以是其他长度单位(如:pt,em等)或比例。 ■ 顶,底,左,右空格填充:   padding用于设置空格填充范围,用法与边距属性相同: h3 {margin-top:10px;margin-right:20px;margin-bottom:30px;margin- left:40px}; h3 {margin:10px 20px 30px 40px} ■ 边框:   border可设定的属性很多,包括颜色和宽度,关键是可以指定每个边的宽度和每个边的颜色 。 边框宽度border-width可以是thin,medium,thick或长度值: h3 {border-top-width:2px;border-right-width:4px;border-bottom-width:6px;border-left-width:8px}; h3 {border-width:2px 4px 6px 8px}/*与上面相同*/ p {border-top-width:thin;border-right-width:medium;border-bottom- width:thick;border-left-width:none}; p {border-width:thin medium thick none}/*与上面相同,左边框将不显示*/ 边框颜色border-color定义方法与宽度定义相似,颜色值也可以用RGB值(如#ff00ff): h3 {border-color:red blue yellow green}/*上:红;右:蓝;下:黄;左:绿*/ h3 {border-color:red blue }/*上,下:红;右,左:蓝;*/ h3 {border-color:#ff00ff }/*所有边框为#ff00ff色*/ 边框线的线条式样border-style,有九个关键字来描述: none /*不画边框,不论边框厚度是多少*/ dotted /*由点组成的虚线*/ dash /*由短线组成的虚线*/ solid /*实线 */ double /*双实线*/ groove /*3D沟状*/ ridge /*3D脊状*/ inset /*3D内嵌*/ outset /*3D外嵌*/ 其使用方法与厚度、颜色相似,不再多讲。 一条边框的颜色,厚度,线条式样可以在一条语句中定义。例: h1 {border-top:5px solid red}   这么多的参数,这么多的组合,要想得心应手,不下一番功夫去练习是不可能达到的。
世界已经坠入黑暗的地狱,生,是这样脆薄的一张纸,放在眼前就轻轻的撕裂,只有绝望。

TOP

背景设定

■ 背景颜色:   background-color,用它可以指定整个网页的背景颜色,也可以是某一个单词。在传统的HTML中要将背景颜色应用到一段文字上是一件麻烦事,要将文字放在表格中再设置表格的背景。CSS使之变得非常容易。   P.colorback {background-color:#ff0000}   颜色可以是颜色名(如red)、十六进制数(如#ff0000)、RGB值(如RGB(255,0,0))。 ■ 背景图片:   background-image,用它可以指定整个网页的背景图片(将它放在BODY标签内),也可以是某一个单词。 background-repeat 是否循环背景 p {background-repeat:no-repeat;background-image:url(background.gif)}/*不循环*/ p {background-repeat:repeat;background-image:url(background.gif)}/*循环*/ background-attachment 是否固定背景 body {background-attachment:scroll;background-image:url(background.gif)}/*随文字一起滚动*/ body {background-attachment:fixed;background-image:url(background.gif)}/*固定不动*/   P.colorback {background-color:#ff0000}   颜色可以是颜色名(如red)、十六进制数(如#ff0000)、RGB值(如RGB(255,0,0))。 ■ 背景定位:   background-position用于设置背景的位置: p {background-position:top;background-image:url(background.gif)};   background-position其参数可以是关键字、长度数、比例值。 关键字; top /*背景图像与前景对象的顶部对齐*/ bottom /*背景图像与前景对象的底部对齐*/ left /*背景图像与前景对象的左边对齐*/ right /*背景图像与前景对象的右边对齐*/ center /*与前面四个任一个组合,变成水平或垂直居中*/ 长度数; 可以是任何一种以前学过的长度单位(pt,px,ems...),例如: p{background-position:100px 50px; background-image:url(background.gif)}表示从左上角起水平100像素,垂直50像素的位置摆放。 比例值; 例如:p{background-position:85% 50%; background-image:url(background.gif)} 表示从距离段落的右边85%,垂直距离段落顶端50%的位置摆放。
世界已经坠入黑暗的地狱,生,是这样脆薄的一张纸,放在眼前就轻轻的撕裂,只有绝望。

TOP

字距与行距

■ 字间距:   利用字间距属性word-spacing,可以调整单词间的距离。 h2 {word-spacing:5pt} ■ 字母间距:   利用字母间距属性letter-spacing,可以调整单词中每个字母间的距离。 h2 {letter-spacing:10pt}; ■ 行高:   与字距不同的是行距line-height,它调整的是行与行间垂直方向的距离,有三种方法设置: 数值:h3 {font-size:12pt; line-height:2};/*此处line-height=2x12pt=24pt */ 长度单位:h3 {font-size:12pt; line-height:24pt}; 比例:h3 {font-size:12pt; line-height:200%};   无论是字距或字母间距或行距都有一个共同的参数:normal,一旦设为normal就是要浏览器使用默认值。
世界已经坠入黑暗的地狱,生,是这样脆薄的一张纸,放在眼前就轻轻的撕裂,只有绝望。

TOP

引用:
Originally posted by c-system at 2004-6-20 08:26: 不错,文章很好加4分!
谢谢鼓励与支持!呵呵。
世界已经坠入黑暗的地狱,生,是这样脆薄的一张纸,放在眼前就轻轻的撕裂,只有绝望。

TOP

厉害
niczhao

TOP

好东西,我收了.

TOP

谢谢!好东东!

TOP

好文章啊!长了不少知识!

TOP

good

TOP

好DD,终于对CSS有了一些了解,收了先,谢谢~~!

TOP

以前是啥也不懂啊

现在终于知道css是干吗的了 谢谢哥们 辛苦了

TOP

多谢了!

TOP

hao

TOP