商务网页第12课.pptx

第4章 CSS网页式样制作技术4.1 CSS基础知识CSS翻译成中文是层叠样式表或样式表，这么说大家可能不太容易理解。其实，CSS就是显示样式，专门用来设置各类元素的显示效果。我们把元素的显示效果事先采用CSS技术封装成一个样式，在主HTML文档中调用这个样式，就能得到这个事先设定的显示效果。4.1.1 CSS的作用CSS是增强网页显示效果的超文本标记语言，能够起到代替和增强标签属性的作用。CSS的突出特点是：简洁、易用、高效，可以重复使用，也可以继承使用。传统HTML代码在设置网页时，如果一个网页具有很多个h4标签及实例，要求统一设置为宋体、字号大小为16px（像素）、蓝色、加粗，则必须对每一个h4标签的相关属性做出同样的设置，工作烦琐效率低，代码的可读性差。如果使用CSS样式表，就只需要设定一次就好了。而且还能在本网站的其他网页中引用，大大提高了工作效率，代码的可读性也好。如果需要将字体颜色改为绿色、字号大小改为12px，则修改一次CSS规则即可，非常高效。htmlheadtitleCSS示例/titlestyle h4 { font-family:宋体; color: #0000CC; font-size:18px}/style/headbody h4第一个标题h4实例/h4 h4第二个标题h4实例/h4 h4第三个标题h4实例/h4 h4第四个标题h4实例/h4 h4第五个标题h4实例/h4/body/html上例中，标签style与/style中的内容就是一个具体的CSS样式表实例，描述了标题4的显示属性。然后，在网页文档体中只需要正常引用标题4标签h4即可，不必重复设置各个标题4的显示属性。如果需要改变“标题4”的外观，例如把字号大小改为12px，字体颜色改为绿色，则只需要改动CSS样式表的相应内容即可。改动部分如下： h4{font:宋体; color:”green”; font-size:12px}4.1.2 CSS的构成规则CSS的样式结构比较简单易懂，具有模块化的特点，由“选择符”和“声明”两部分组成.其中，选择符是CSS样式必须定义的，相当于样式的名称。网页元素就是通过这个选择符来确定其显示样式的，选择符将在本章4.1.4小节中详细介绍。声明就是具体的显示规则，通过设定各个属性值，达到需要的显示效果。h4 ｛ font-family:宋体； color:blue; font-size:16px； ｝为了养成良好的书写习惯，便于阅读，通常采用如下书写方式来书写CSS代码：4.1.3 CSS样式类别CSS是配合HTML网页文件使用的，如果没有HTML，则CSS没有任何作用。HTML使用CSS样式时主要分以下几种情况：内联样式、内部样式、外部样式（链接样式、导入样式）。1．内联样式内联样式，也称为“行内样式”，就是在HTML的标签中，直接定义并立即使用CSS样式的应用方式。内联样式对改进网页制作效率方面几乎没有什么作用，所以很少使用。定义及引用内联样式的方法是非常特殊的，需要通过“style”来定义，设置方法为标签名 style=属性1:属性1的值;属性2:属性2的值;……这种应用模式几乎没有对HTML文档有任何改进，文档依旧庞大、烦琐，易读性差。只是使用了CSS规则让功能增强一些，不建议使用。htmlheadtitleCSS行内样式示例/title/headbody h4 style=font-family:楷体;color:#0000CC; font-size:24px CSS标题h4实例 /h4 !-- 通过style定义了一个内联样式应用示例--/body/html2．内部样式内部样式，也称为“内嵌样式”，是指将CSS代码内嵌在HTML文档头中的应用方式。该方式能够简化HTML的文档代码，提高HTML的制作效率。实现方法是将CSS代码封装在style和/style之间，形成一个CSS代码模块，整体嵌入在HTML文档的文档头中，也就是嵌入在标签head与/head之间。定义内部样式，需要使用style标签及相关属性，设置方法为：style选择符名{属性1:属性1的值;属性2:属性2的值;……}/style内部样式主要用于CSS样式内容比较简单、内容较少的情况。实际的应用场景较少，多用于教学、演示等。引用内部样式（包括外部样式），就是指定HTML中的元素套用哪一个CSS样式，并通过选定样式选择符（在下小节中讲解）来指定。引用内部样式选择符的方法为对于标签选择符，HTML中会根据标签自动套用CSS中定义的该标签选择符，无须额外编写任何引用标签选择符的代码，最简单；对于类选择符，需要使用class=类选择符名来指定，设置方法为标签 class=类选择符名对于ID选择符，需要使用id=ID选择符名