项目活动六　CSS样式的应用(课件）-高二《网页设计与制作》同步教学（北京理工版）

项目活动六　CSS样式的应用 任务一　CSS基础知识 任务二　CSS的具体应用 返回 1 任务一　ＣＳＳ 的基础知识　 一、ＣＳＳ 所加位置 编辑ＣＳＳ 时， 使用记事本或Ｄｒｅａｍｗｅａｖｅｒ 打开网页代码。 找到< ｈｅａｄ > 和< / ｈｅａｄ > ， 在< ｈｅａｄ > 和< / ｈｅａｄ > 之间加入语句< ｓｔｙｌｅ > < / ｓｔｙｌｅ > ， 然后所有的样式表都定义在< ｓｔｙｌｅ > 和< / ｓｔｙｌｅ > 之间。 下面我们来看具体的应用。 (１) < ｓｔｙｌｅ > ｔｄ {ｆｏｎｔ － ｓｉｚｅ: ９ｐｔ, ｌｉｎｅ － ｈｅｉｇｈｔ: １５０％} < / ｓｔｙｌｅ > 这句表示网页的字 体大小为９ 磅， 文字行距１５０％， ｔｄ 是单元格元素， 这句代码是对单元格内的字体起控制作用。 这里的< ｓｔｙｌｅ > 后面的ｔｄ 是选择符， 网页内所有的ｔｄ 元素都会起作用。 这些选择符可以是所有的ｈｔｍｌ 标记， 下一页 返回 任务一　ＣＳＳ 的基础知识　 (２) < ｓｔｙｌｅ > ａ {ｃｏｌｏｒ: ｆｆ００００} ｉｎｐｕｔ {ｆｏｎｔ － ｓｉｚｅ: ９ｐｔ} < / ｓｔｙｌｅ > 表示超链接都为红 色， 单行文本框的字体大小是９ 磅。 二、ＣＳＳ 的作用 ＣＳＳ 的作用是可以大量减少网页代码， 从而为网页减肥。 原理是在网页中自定义样式表的选择符， 然后在网页中大量引用这些选择符。 目前大部分网站都是使用ｃｌａｓｓ 来引用的。 在ＣＳＳ 中， ｃｌａｓｓ 和ｉｄ 的作用是完全一样的。 ｉｄ 的使用方法: 在网页< ｓｔｙｌｅ > 和< /ｓｔｙｌｅ > 之间定义选择符名， 选择符名前加＃。 这些选择符名可以是字母、数字， 或者是字母、数字的组合， 然后在网页元素中使用ｉｄ ＝ ∗∗来引用它。 上一页 下一页 返回 任务一　ＣＳＳ 的基础知识　 １.选择符名语法 <ｓｔｙｌｅ > ＃８ {ｃｏｌｏｒ: ００００８０} ＃ｐ２ {ｍａｒｇｉｎ － ｌｅｆｔ: ２０} ＃１４ {ｆｏｎｔ － ｓｉｚｅ: １４ｐｔ} < / ｓｔｙｌｅ >， 然后在网页使用这句引用它: < ａ ｉｄ ＝８ > 黑蓝色的字< / ａ > < ａ ｉｄ ＝１４ >１４ 磅的字< / ａ >< ｐ ｉｄ ＝ ｐ２ > 。 也就是说， < ａ ｉｄ ＝８ > 黑蓝色的字< / ａ > 等价于< ａ ｓｔｙｌｅ ＝ ｃｏｌｏｒ: ００００８０ >黑蓝色的字< / ａ > , < ａ ｉｄ ＝１４ >１４ 磅的字< / ａ > 等价于< ａ ｓｔｙｌｅ ＝ ｆｏｎｔ － ｓｉｚｅ: １４ｐｔ >１４ 磅的字< / ａ > 。 上一页 下一页 返回 任务一　ＣＳＳ 的基础知识　 注意: 在一定条件下， 使用ｉｄ 来引用可能不起作用或报错， 或与ｊａｖａｓｃｒｉｐｔ 的ｉｄ 发生冲突， 这种情况下， 可以使用ｃｌａｓｓ 来引用。 ｃｌａｓｓ 的使用方法与ｉｄ 一样， 所不同的是: 在网页的<ｓｔｙｌｅ >和< / ｓｔｙｌｅ >之间定义选择符名， 选择符名前加“. ” (即点)。 ２.样式表语法 样式表的项和它的值应该用冒号连接， 例如ｃｏｌｏｒ: ＦＦ０００００。 样式表也可直接嵌在段落当中， 而不用ｃｌａｓｓ 或ｉｄ 引用， ３.最常用的样式表语言 (１) ｃｏｌｏｒ (颜色， (２) ｆｏｎｔ － ｓｉｚｅ (字体大小)。 (３) ｆｏｎｔ － ｆａｍｉｌｙ (字体类型)。 上一页 下一页 返回 任务一　ＣＳＳ 的基础知识　 (４) ｗｉｄｔｈ 和ｈｅｉｇｈｔ (宽度和高度)。 (５) ｌｉｎｅ － ｈｅｉｇｈｔ (段落行距， 建议使用百分比的形式， (６) ｍａｒｇｉｎ － ｔｏｐ (表示段前), ｍａｒｇｉｎ － ｂｏｔｔｏｍ (表示段后), ｍａｒｇｉｎ － ｌｅｆｔ (表示段落 左边距左边框的距离), ｍａｒｇｉｎ － ｒｉｇｈｔ (表示段落右边距右边框的距离)。 (７) ｔｅｘｔ － ａｌｉｇｎ (段落的对齐方式， 例如ｌｅｆｔ、ｃｅｎｔｅｒ、ｒｉｇｈｔ 等)。 (８) ｂａｃｋｇｒｏｕｎｄ － ｃｏｌｏｒ (背景颜色)。 (９) ｐｏｓｉｔｉｏｎ: ａｂｓｏｌｕｔｅ, ｔｏｐ: ∗, ｌｅｆｔ: ∗ (表示绝对定位)。 上一页 下一页 返回 任务一　ＣＳＳ 的基础知识　 ４.最常用的样式表代码实例 (１) 去掉超链接下划线， < ｓｔｙｌｅ > ａ {ｔｅｘｔ － ｄｅｃｏｒａｔｉｏｎ: ｎｏｎｅ} < / ｓｔｙｌｅ > 。 (２) 超链接变色， < ｓｔｙｌｅ > ａ {ｃｏｌｏｒ: ００００００} ａ: ｈｏｖｅｒ {ｃｏｌｏｒ: ｆｆ００００} < / ｓｔｙｌｅ > 。 (３) 改变超链接的颜色