网络编辑实用教程 (助理网络编辑师) 第一章计算机基础知识 制作人：潘红艳
5.1CSS基础知识 5.1.1CSS简介 CSS即Cascading Style Sheet,层叠样式表。样式是指网页的格 式，如文字的大小、颜色及图片的位置等。层叠是指在HTML文件中引 用数个定义样式的CSS文件时，若数个CSS文件间所定义的样式发生冲 突，将依据层次顺序(Cascading Order)处理。 CSS就是将样式的定义与HTML文件分离出来。只要建立一个定义样 式的CSS文件，并让所有HTML都调用这个CSS文件所定义的样式，以 后要更改HTML中某段落的样式时，只要到CSS文件中，更改样式的定 义即可。 助理网络编辑师 2
助理网络编辑师 2 5.1 CSS基础知识 5.1.1 CSS简介 CSS即Cascading Style Sheet，层叠样式表。样式是指网页的格 式，如文字的大小、颜色及图片的位置等。层叠是指在HTML文件中引 用数个定义样式的CSS文件时，若数个CSS文件间所定义的样式发生冲 突，将依据层次顺序（Cascading Order）处理。 CSS就是将样式的定义与HTML文件分离出来。只要建立一个定义样 式的CSS文件，并让所有HTML都调用这个CSS文件所定义的样式，以 后要更改HTML中某段落的样式时，只要到CSS文件中，更改样式的定 义即可
5.1.2定义样式表 CSS文件与HTML文件相同，属于纯文本文件，只是HTML文件的 扩展名为.html,CSS文件的扩展名为.css。但若是在HTML中使用CSS, 存盘格式依然是.html。我们称前者为外部样式表后者为内部样式表。 助理网络编辑师 3
助理网络编辑师 3 5.1.2 定义样式表 CSS文件与HTML文件相同，属于纯文本文件，只是HTML文件的 扩展名为.html，CSS文件的扩展名为.css。但若是在HTML中使用CSS， 存盘格式依然是.html。我们称前者为外部样式表后者为内部样式表
(1)在HTML文件内定义样式表 标记可以说明要定义的样式。TYPE属性是指定 标记以CSS的语法定义。如左图所示，定义样式表，在引用和 标记时改变字体的属性。预览结果如右图所示，两行文字均为红 色楷体。 c1.ht1-记事本 ▣☒ 文件您)编辑@)格式@)查看y帮助 HTIL> HEAD>》 在L文件内定义样式表 0u0回80Pm003 转上DD4国 H1,H2{F0NT-FAMILY:楷体_GB2312:COL0R:red} /杛用H1、2时，字体将变为红色楷体*/ 将1标记文字设为红色糟体 精？棒记灵字议为红色皆体 BODY> KFONT> P>1>将1标记文字设为红色楷体 P)H2>将2标记文字设为红色楷体 助理网络编辑师 4
助理网络编辑师 4 （1）在HTML文件内定义样式表 标记可以说明要定义的样式。TYPE属性是指定 标记以CSS的语法定义。如左图所示，定义样式表，在引用和 标记时改变字体的属性。预览结果如右图所示，两行文字均为红 色楷体
下面是语法各部分的说明。 隐藏标记。避免因浏览器不支持CSS语言，而导致错误。加上此标记， 不支持CSS的浏览器会自动略过此段内容。 .* 注释符号。包含在此符号中的内容主要用于解释CSS的设置值，注释内 容并不会显示或被引用在网页上，只是帮助别人或编辑者自己阅读。 助理网络编辑师 5
助理网络编辑师 5 下面是语法各部分的说明。 隐藏标记。避免因浏览器不支持CSS语言，而导致错误。加上此标记， 不支持CSS的浏览器会自动略过此段内容。 /* …… */ 注释符号。包含在此符号中的内容主要用于解释CSS的设置值，注释内 容并不会显示或被引用在网页上，只是帮助别人或编辑者自己阅读
(2)利用CLASS:类选择符定义样式 如左图所示的语句，是在HTML内引用标记的A1与A2的类样 式，分别定义为红色楷体和蓝色幼圆。预览结果如右图所示。 国c2htn1-记事本 口▣☒ 文件您)编辑)格式Q)查看帮助的 3样用G55头年n有发义样其a1老日回国 G过⊙国习公P性致：度年⊙公， 利用CLASS类选择符定义样式 体零D月项进在ad 日钟制装” 《1- 此特文季镜为红色镜修 P.A1{FOT-FAMILY:楷体GB2312:COL0R:red} 米.A2{FoWT-FAMILY:幼层：C0L0R:b1ue} 此行文字设为浏览器默认的字体 (正A如> 此行文字设为蓝色幼圆 KBODY> KFONT> 此行文字设为红色楷体 P>Hm1 CLASS=A1)此行文字设为澜览路默认的字体×P> 《P>H2 CLASS=A2>此行文字设为蓝色幼圆 《FONT> 地由输 助理网络编辑师 6
助理网络编辑师 6 （2）利用CLASS类选择符定义样式 如左图所示的语句，是在HTML内引用标记的A1与A2的类样 式，分别定义为红色楷体和蓝色幼圆 。预览结果如右图所示
下面是语法各部分的说明。 “P.A1{FONT-FAMILY:楷体；COLOR:red}”是针对标记，定义 A1类样式。 “*.A2{FONT-FAMILY:幼圆；COLOR:blue}”是针对整个HTML文件 定义A2类样式。 “此行文字设为红色楷体”是在标记内引用 A1的样式，将此行文字显示为红色楷体样式。 “此行文字设为浏览器默认的字体 虽然是在标记中引用A1样式，但前面定义的A1样式只限于 标记中，所以此行文字采用浏览器默认值样式，并没有显示任何特殊 效果。 “此行文字设为蓝色幼圆”是在 标记中引用A2的样式，A2样式适用于整个HTML文件，所以此 行文字显示为蓝色幼圆。 注：在利用CLASS类选择符定义样式时，“*”可以省略。 助理网络编辑师 7
助理网络编辑师 7 下面是语法各部分的说明。 • “P.A1 {FONT-FAMILY:楷体;COLOR:red}”是针对标记，定义 A1类样式。 • “*.A2 {FONT-FAMILY:幼圆 ;COLOR:blue}”是针对整个HTML文件 定义A2类样式。 • “此行文字设为红色楷体”是在标记内引用 A1的样式，将此行文字显示为红色楷体样式。 • “此行文字设为浏览器默认的字体” 虽然是在标记中引用A1样式，但前面定义的A1样式只限于 标记中，所以此行文字采用浏览器默认值样式，并没有显示任何特殊 效果。 • “此行文字设为蓝色幼圆 ”是在 标记中引用A2的样式，A2样式适用于整个HTML文件，所以此 行文字显示为蓝色幼圆 。 注：在利用CLASS类选择符定义样式时，“*”可以省略
(3)利用ID选择符定义样式 利用ID选择符定义样式与利用CLASS类选择符定义样式最大的区别 在于定义样式名称前的符号不同，用CLASS定义为“*样式名称”，用ID 定义为“#样式名称”。 如左图所示为利用引D选择符定义样式的方法。预览结果如右图所示。 圆c3.ht1-记事本 口▣☒ 文件)编辑⑧)格式Q)查者)帮助D 3师这得济定义年其-行ntegnet Feplar问 变弹D数善心量公立具D地地国 HEAD》 G⊙国日☆P:直兵⊙公，品 利用ID选择符定义样式 KSTYLE type=“TExT/Cssy 生址字色p网百制件对 (!- 北行女字使为虹色候修 P#A1{FONT-FAHILY:楷体GB2312:CoL0R:red #A2F0WT-FAMILY:幼层，C0L0R:b1ue 此行文字设为浏览器默认的字体 (/EAD〉 此行文字设为蓝色幼圆 BODY> KFONT> PID=A1>此行文字设为红色楷体 P>1ID=A1>此行文学读为览器邀认的字体 P>1ID=A2>此行文字设为蓝色幼圆 </ 助理网络编辑师 8
助理网络编辑师 8 （3）利用ID选择符定义样式 利用ID选择符定义样式与利用CLASS类选择符定义样式最大的区别 在于定义样式名称前的符号不同，用CLASS定义为“*.样式名称”，用ID 定义为“#样式名称”。 如左图所示为利用ID选择符定义样式的方法。预览结果如右图所示
下面是语法各部分的说明。 “P#A1{FONT-FAMILY:楷体；COLOR:red”是针对标记，定义 A1样式。 “#A2{FONT-FAMILY:华文隶书；COLOR:blue}”是针对整个HTML 文件定义A2样式。 “此行文字设为红色楷体”是在标记内引用A1的样 式，将此行文字显示为红色楷体样式。 “此行文字设为浏览器默认的字体”虽然是 在标记中引用A1样式，但前面定义的A1样式只限于标记 中，所以此行文字采用默认值样式，并没有显示任何特殊效果。 “此行文字设为蓝色华文隶书”是在 标记中引用A2的样式，A2样式适用于整个HTML文件，所以此行文 字显示为蓝色华文隶书。 助理网络编辑师 9
助理网络编辑师 9 下面是语法各部分的说明。 • “P#A1 {FONT-FAMILY:楷体;COLOR:red}”是针对标记，定义 A1样式。 • “#A2 {FONT-FAMILY:华文隶书;COLOR:blue}” 是针对整个HTML 文件定义A2样式。 • “此行文字设为红色楷体”是在标记内引用A1的样 式，将此行文字显示为红色楷体样式。 • “此行文字设为浏览器默认的字体”虽然是 在标记中引用A1样式，但前面定义的A1样式只限于标记 中，所以此行文字采用默认值样式，并没有显示任何特殊效果。 • “此行文字设为蓝色华文隶书”是在 标记中引用A2的样式，A2样式适用于整个HTML文件，所以此行文 字显示为蓝色华文隶书
(4)结构化选择符 在建立大型网站时必须使用许多样式，用户可以使用层次，以结构化 的方式定义CLASS.或ID选择符。如左图所示，如果将H1.A.B1改写 为H1.B1”同样可以达到样式效果。但结构化每一种选择符，可以更有 条理地使用样式。预览结果如右图所示。 国c4.ht1-记事本 ▣☒ 文件)编辑但)格式@)查看)帮助D 】地将化运桥前一imrn新什Int wrnet xulerer KHILL 文件广物查看包安量心工具心电的 KHEAD> 结构化选择符 t⊙D图的P黄⊙公， KSTYLE type=TEXT/CSS"> 地址D风面物落线 1- H1.A{FOT-FAMILY:楷体GB2312:COLOR:xed} 此行文字设为红色楷体 H1.A.B1{FOT-FAMILY:5圆；COLOR:blue】 此行文字设为蓝色幼圆 《HEAD> KBODY> KFONT> P>此行文字设为红色楷体 P>H1 CLASS=B1)此行文字设为蓝色幼圆<> K/BODY> 表的地品 助理网络编辑师 10
助理网络编辑师 10 （4）结构化选择符 在建立大型网站时必须使用许多样式，用户可以使用层次，以结构化 的方式定义CLASS或ID选择符。如左图所示，如果将“H1.A.B1”改写 为“H1.B1”同样可以达到样式效果。但结构化每一种选择符，可以更有 条理地使用样式。预览结果如右图所示