商务网页第12课课件.pptx

1、第4章 CSS网页式样制作技术4.1 CSS基础知识l CSS翻译成中文是层叠样式表或样式表，这么说大家可能不太容易理解。其实，CSS就是显示样式，专门用来设置各类元素的显示效果。我们把元素的显示效果事先采用CSS技术封装成一个样式，在主HTML文档中调用这个样式，就能得到这个事先设定的显示效果。4.1.1 CSS的作用l CSS是增强网页显示效果的超文本标记语言，能够起到代替和增强标签属性的作用。CSS的突出特点是：简洁、易用、高效，可以重复使用，也可以继承使用。l 传统HTML代码在设置网页时，如果一个网页具有很多个标签及实例，要求统一设置为宋体、字号大小为16px（像素）、蓝色、加粗，则

2、必须对每一个标签的相关属性做出同样的设置，工作烦琐效率低，代码的可读性差。如果使用CSS样式表，就只需要设定一次就好了。而且还能在本网站的其他网页中引用，大大提高了工作效率，代码的可读性也好。如果需要将字体颜色改为绿色、字号大小改为12px，则修改一次CSS规则即可，非常高效。CSS示例 h4 font-family:宋体;color:#0000CC;font-size:18px 第一个标题h4实例 第二个标题h4实例 第三个标题h4实例 第四个标题h4实例 第五个标题h4实例l 上例中，标签与中的内容就是一个具体的CSS样式表实例，描述了标题4的显示属性。然后，在网页文档体中只需要正常引用标

3、题4标签即可，不必重复设置各个标题4的显示属性。l 如果需要改变“标题4”的外观，例如把字号大小改为12px，字体颜色改为绿色，则只需要改动CSS样式表的相应内容即可。改动部分如下：h4font:宋体;color:”green”;font-size:12px4.1.2 CSS的构成规则l CSS的样式结构比较简单易懂，具有模块化的特点，由“选择符”和“声明”两部分组成.l 其中，选择符是CSS样式必须定义的，相当于样式的名称。网页元素就是通过这个选择符来确定其显示样式的，选择符将在本章4.1.4小节中详细介绍。声明就是具体的显示规则，通过设定各个属性值，达到需要的显示效果。l 为了养成良好的书

4、写习惯，便于阅读，通常采用如下书写方式来书写CSS代码：h4 h4 font-family:font-family:宋体宋体；color:blue;color:blue;font-size:16px font-size:16px；4.1.3 CSS样式类别l CSS是配合HTML网页文件使用的，如果没有HTML，则CSS没有任何作用。HTML使用CSS样式时主要分以下几种情况：内联样式、内部样式、外部样式（链接样式、导入样式）。1内联样式内联样式，也称为“行内样式”，就是在HTML的标签中，直接定义并立即使用CSS样式的应用方式。内联样式对改进网页制作效率方面几乎没有什么作用，所以很少使用。定

5、义及引用内联样式的方法是非常特殊的，需要通过“style”来定义，设置方法为这种应用模式几乎没有对HTML文档有任何改进，文档依旧庞大、烦琐，易读性差。只是使用了CSS规则让功能增强一些，不建议使用。CSS行内样式示例 CSS标题h4实例 2内部样式l 内部样式，也称为“内嵌样式”，是指将CSS代码内嵌在HTML文档头中的应用方式。该方式能够简化HTML的文档代码，提高HTML的制作效率。实现方法是将CSS代码封装在和之间，形成一个CSS代码模块，整体嵌入在HTML文档的文档头中，也就是嵌入在标签与之间。l 定义内部样式，需要使用标签及相关属性，设置方法为：选择符名属性1:属性1的值;属性2:

6、属性2的值;l 内部样式主要用于CSS样式内容比较简单、内容较少的情况。实际的应用场景较少，多用于教学、演示等。l 引用内部样式（包括外部样式），就是指定HTML中的元素套用哪一个CSS样式，并通过选定样式选择符（在下小节中讲解）来指定。l 引用内部样式选择符的方法为对于标签选择符，HTML中会根据标签自动套用CSS中定义的该标签选择符，无须额外编写任何引用标签选择符的代码，最简单；对于类选择符，需要使用class=类选择符名来指定，设置方法为对于ID选择符，需要使用id=ID选择符名来指定，设置方法为 CSS内嵌式样示例 /*定义CSS开始 */h4 /*定义h4选择符 */font-fam

7、ily:宋体;/*声明*/color:#000099;/*声明*/font-size:25px /*声明*/有CSS选择符的标题h4实例 没有CSS选择符的标题h3实例3外部样式l 外部样式是指把CSS代码存储在HTML的文件外部，以“.css”文件格式独立存储的应用方式。当HTML需要引用CSS样式时，需要以链接或者导入的方式将CSS文件中定义的样式全部集成到HTML的文档头中，就像在一个HTML文件中一样。后续的引用方法与内部样式的引用方法相同。l 外部样式又分为外部链接样式和外部导入样式两种类型。（1）外部链接样式外部链接样式是最常用、最实用的一种CSS使用方法，将HTML网页内容和CS

8、S显示规则分离，形成“一个网页文件+一个CSS文件（如果必要，可以形成多个CSS文件）”的形式。这种分离非常有利于项目人员之间的分工协作，代码编写人员侧重于网页功能的实现，美工人员侧重于页面的美化设计，工作效率大大提高。而且，这种分离使得HTML代码极其精炼，易于项目后期的升级与维护。定义外部链接样式分两部分：一部分是在HTML文档头中做外部CSS样式的链接声明，明确需要连接的外部样式文件（.css源文件）的名称及其存放路径；另一部分是在CSS源文件中定义显示样式（定义选择符及其声明）。CSS源文件通常是由多个选择符及其声明组成的，数量没有限制，需要多少就定义多少。在CSS源文件中编写CSS样

9、式的语法规则与内部样式的编写规则是一样的，等同于把内部样式中选择符及声明的内容统一打包在CSS源文件中。定义与引用外部式样，分以下3个步骤：在HTML的头文档中做外部链接样式的声明，需要使用标签及其相关属性。设置方法为其中，标签的主要属性如下表：属性值描述hrefURL规定被链接文档的位置relAlternateAuthorHelpIconLicenceNextPingbackPrefetchPrevSearchSidebarStylesheettag规定当前文档与被链接文档之间的关系。通常需要设置为“Stylesheet”typeMIME_type规定被链接文档的MIME类型。最常用的值是“

10、text/css”在CSS源文件中定义选择符及其声明，完成外部样式的定义工作。在CSS源文件中定义选择符及其声明，设置方法为：选择符名属性1:属性1的值;属性2:属性2的值;在HTMl中引用选择符在HTML文档体中引用外部样式中的选择符与引用内部样式中的方法是一样的。l 应用外部链接样式HTML代码示例如下：l 应用外部样式CSS代码示例如下（存储在CSS_example.css文件中）：h4 /*定义h4选择符 */font-family:宋体;/*声明*/color:#000099;/*声明*/font-size:25px /*声明*/CSS外部链接应用示例 有CSS选择符的标题h4实例

11、没有CSS选择符的标题h3实例 上述示例代码中，文档头中声明了“CSS_example.css”文件，然后在HTML代码就能引用“CSS_example.css”中定义的CSS样式了。（2）外部导入样式外部导入样式与外部链接样式的基本作用是相同的，CSS源文件的代码规则也完全相同，只是引用CSS代码文件的技术实现方式不同：一种是外部链接方式，一种是外部导入方式。但外部导入样式也有其优点，不仅可以导入到HTML中，也可以导入到CSS样式中。外部导入样式特别适用于对IO访问要求高、网页响应速度快的场景。定义并引用外部导入样式，需要使用“import”来实现，导入到文件头中的与之间。也可以理解为，把

12、内部样式中的定义中的“选择符”和“声明”部分打包成CSS源文件，用导入的方法将其导回来。定义和引用外部导入样式与定义和引用外部链接样式类似，同样分两部分：一部分是在HTML文档头中做外部导入样式的声明，另一部分是在CSS源文件中定义选择符及其声明。在HTML文档头中做外部导入样式的声明，需要使用“import”及其相关属性。设置方法为：import url(CSS文件名);需要注意的是，结尾必须以分号“;”结尾，与声明外部链接样式不同，这是为什么呢？因为外部链接样式使用的是标签,而外部导入样式使用的是一个特殊的功能语句。在CSS文件中定义选择符及其声明内容。在CSS文件中定义外部导入样式中选择符及其声明的方法与外部链接样式的方法完全一样。设置方法为：选择符名属性1:属性1的值;属性2:属性2的值;在HTML中引用选择符。l 应用外部导入样式的HTML代码示例如下：l 本例中，应用外部导入样式的CSS代码文件也是css_example.css文件，不再重复介绍。CSS外部导入应用示例 import url(css_example.css);有CSS选择符的标题h4实例 没有CSS选择符的标题h3实例