代码入门教程（25）

“春天没来”欢迎您 “春天没来”欢迎您“ “ 春天没来”欢迎您

第二章标签应用

第三十五节 css样式表应用（1）

从本节开始讲解css样式表的应用。下面讲解的内容为：css基本语法和CSS的使用方法。

CSS是W3C组织制定的用于控制网页内容显示效果的一种标记性语言。

在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。W3C把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。目前的最新版本是CSS3。

一、css基本语法:

CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。

1、基本格式如下：

selector {property: value} 即：选择符 {属性：属值}。先输入“选择符”，然后输入“属性与属值”。属性与属值放置在“大括号”内，并用“冒号”隔开。

选择符（也叫选择器）可以是多种形式，一般是你要定义样式的HTML标记（标签）。例如：BODY、P、TABLE……你可以通过此方法定义它的属性和属值。

body {color: black}

在上面的css定义中，选择符body是指页面主体部分，属性color是文字颜色，属值black黑色。此例的效果是使页面中的文字为黑色。

2、如果属性的属值是多个单词组成的，必须在属值上加引号。例如：字体的名称经常是几个单词的组合：

p {font-family: "sans serif"}

在上面的css定义中，选择符p是段落，属性font-family是文字字体，属值sans serif是具体的字体。

3、如果需要对一个选择符指定多个属性时，使用分号将所有的属性和值分开：

p {text-align: center; color: red}

在上面的css定义中，选择符p是段落，属性有两个。属性一是水平对齐方式，属值是居中；属性二是文字颜色，属值是红色。

4、为了使定义的样式表方便阅读，可以采用分行的书写格式：

{

text-align: center;

color: black;

font-family: arial

}

（段落排列居中，段落中文字为黑色，字体是arial）

二、CSS的使用方法：

1、标记加注法(in-line)：

如果只有一个HTML标记需要设定样式，则可在该标记内，加上属性：style=" "以个别修订样式。

2、页面内嵌法：

3、外部调用法：

4、双表法调用样式表：

在我们的个人图书馆中制作网页，最常用的方法是第一种方法。

作业：

1、CSS的定义是由哪几部分构成的？

2、CSS定义中的选择符、属性和值各在什么位置中？

3、CSS定义中的属值如果是多个单词组成的，应该怎样书写？

4、如果需要对一个选择符指定多个属性，应该怎样书写？

5、认识css定义的分行书写方法。

6、了解CSS的四种使用方法。

２0１3年１月19 日于北京

第二章标签应用

第三十六节 css样式表应用（2）

本节继续讲解css样式表的应用。本节讲解的内容为：用css样式设置文字。包括七个方面的内容：1、用css样式设置大号文字；2、用css样式设置行高；3、用css样式设置字距；4、用css样式设置首字大写；5、用css样式设置段落首行缩进； 6、用css样式设置滤镜；7、用css样式综合设置。

用css样式设置文字：

1、用css样式设置大号文字：

我们先看看下面的这段代码，这是没有使用css样式的文字标签，最大的文字只能是7号字。

“春天没来”欢迎您

我们再看看下面的这段代码，这是使用了css样式的文字标签，只要修改文字字号代码font-size: 100px里的属值，文字就可以无限增大。

“春天没来”欢迎您

2、用css样式设置行高：

代码1：

【◇ 一月送你一个吉祥 ◇】

【◇ 二月送你一个如意 ◇】

【◇ 三月送你一个快乐 ◇】

【◇ 四月送你一个欢喜 ◇】

【◇ 五月送你一个健康 ◇】

【◇ 六月送你一个福气 ◇】

【◇ 七月送你一个温暖 ◇】

【◇ 八月送你一个甜蜜 ◇】

【◇ 九月送你一个兴旺 ◇】

【◇ 十月送你一个顺利 ◇】

【◇ 十一送你一个聪明 ◇】

【◇ 十二送你一个富裕 ◇】

【◇ 祝愿朋友四季安康 ◇】

【◇ 祝愿朋友一生幸福 ◇】

代码2：

【◇ 一月送你一个吉祥 ◇】

【◇ 二月送你一个如意 ◇】

【◇ 三月送你一个快乐 ◇】

【◇ 四月送你一个欢喜 ◇】

【◇ 五月送你一个健康 ◇】

【◇ 六月送你一个福气 ◇】

【◇ 七月送你一个温暖 ◇】

【◇ 八月送你一个甜蜜 ◇】

【◇ 九月送你一个兴旺 ◇】

【◇ 十月送你一个顺利 ◇】

【◇ 十一送你一个聪明 ◇】

【◇ 十二送你一个富裕 ◇】

【◇ 祝愿朋友四季安康 ◇】

【◇ 祝愿朋友一生幸福 ◇】

代码解析：

请看上面的两段文字代码：第一段行高设置为line-height: 1em，第二段行高设置为line-height: 1.5em，比较一下两段文字中两行文字之间的间距，体会设置不同行高的不同显示效果。

3、用css样式设置字距：

代码1：

<font style="line-height: 1.5em; letter-spacing: 1px; font-size: 20pt;"

color="#ff0000">既然愚公能移山，何愁代码学习难； 立下愚公移山志，步步登上代码山。

<font style="line-height: 1.5em; letter-spacing: 1px; font-size: 20pt;"

color="#ff0000">学习代码别怕难，常用标签记心间； 属性属值弄明白，反复实践是关键。

代码2：

<font style="line-height: 1.5em; letter-spacing: 4px; font-size: 20pt;"

color="#ff0000">既然愚公能移山，何愁代码学习难； 立下愚公移山志，步步登上代码山。

学习代码别怕难，常用标签记心间； 属性属值弄明白，反复实践是关键。

代码解析：

请看上面的两段文字代码：第一段字距设置为letter-spacing: 1px，第二段字距设置为letter-spacing: 4px，比较一下两段文字中每行文字之间的字距，体会设置不同字距的不同显示效果。

4、用css样式设置首字大写：

既

然愚公能移山，何愁代码学习难；立下愚公移山志，步步登上代码山。</div>

代码解析：

在块区<div></div>中，设置了一个标签，在标签中，设置了一个float: left代码，因此，标签中的内容“既”字就大写并下沉了。

效果：

既然愚公能移山，何愁代码学习难；立下愚公移山志，步步登上代码山。

5、用css样式设置段落首行缩进：

我是一个年已花甲的退休教师，一不懂代码，二不会英语。前年，儿子给我买了一个笔记本电脑，刚开始玩的时候，连“关机”也不会，看个电子书、玩个游戏，都十分困难。后来，又给我注册了一个图书馆，更找不着“北”了。进入网络以后，页面中的内容五彩缤纷，这儿闪烁，那儿跳动，文字内容，五颜六色，真不知该点击什么地方了！然而，就是在这个图书馆中，我学到了不少的知识。现在，我不但能够浏览别人的文章、收藏别人的文章，而且还学会了自己撰写文章，编辑图片，使用边框，在实践操作的过程中，我知道了那些五彩缤纷的美丽网页，都是用代码制作的。于是，我对代码产生了兴趣，开始学习代码、研究代码。经过一段时间的努力学习、刻苦钻研，终于迈进了代码的门槛。我已经撰写了几十篇关于360doc图书馆的知识和操作方法的文章，制作了几百个个人图书馆的顶图，还有一些底图、图书馆首页的模块等作品，初步地尝到了学习代码的甜头。在实践的过程中，我认识到，代码并不是什么神秘的天书，也不是高不可攀的山峰，不懂英语，没有学过系统的电脑知识，照样可以学会代码，用代码制作自己喜欢的各种漂亮的网页。

在这里，我把自己学习代码的体会撰写成这些文章，编辑成小册子，陆续发表，提供给大家，用以帮助愿意学习代码而又不知从哪里入手的朋友们共享，希望能够对馆友们有所帮助，引导你步入代码的门槛。

我的这些文章，语言不一定十分规范，概念不一定非常准确。我本着这样一条原则，力求通俗易懂，讲解具体，可操作性强，使大家能够看明白，会操作，真正起到引导入门的作用。

由于本人的水平有限，文章中一定存在不少纰漏和错误之处，希望大家批评指正。在此我预先向给我提出宝贵意见的朋友们表示感谢。

代码解析：

text的意思是文本，indent在计算机英语中意思是缩进，后面的2em意思就是2个相对单位。单位em的意思就是文字的高度，1em就是1个文字的高度，2em就是两个文字的高度，因为汉字是方块字，高度和宽度是相同的，所以“text-indent:2em;”的意思就是文本缩进2个文字的宽度。

6、用css样式设置滤镜：

<p style="width: 769px; height: 106px; filter: shadow

(color= #FF4500, strength=60); ">

<font style="line-height: normal; font-size: 40pt; font-style: normal;

font-variant: normal; font-weight: normal;" color="#ffff00" face="宋体">

代码解析：

（1）filter: shadow(color= #FF4500, strength=60代码的意思为：滤镜：阴影效果滤镜（阴影颜色＝#FF4500，阴影强度＝60）