《第4章 CSS样式基础》由会员分享,可在线阅读,更多相关《第4章 CSS样式基础(9页珍藏版)》请在人人文库网上搜索。
1、第4章 CSS样式基础,本章主要讲述了CSS样式的应用方法,现如今网页的排版格式越来越复杂,很多效果需要通过CSS来实现,现代网页制作离不开CSS技术,采用CSS技术可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制,只要对相应的代码做一些简单的编辑,就可以改变同一页面中的不同部分或页数不同页面的外观和格式,用CSS不仅可以做出美观工整令浏览者赏心悦目的网页,还能给网页添加许多神奇的效果。,4.1 CSS概述,CSS是由Cascading Style Sheets缩写来的。是一种对Web文档添加样式的简单机制,是一种表现HTML和XML等文件样式的计算机语言,是一种叫做表样式。
2、的技术。对于设计者来说它是一个非常灵活的工具,不必再把繁杂的样式定义编写在文档结构中,可以将有关文档的样式指定的内容全部脱离出来,在标题中定义、在行内定义,甚至作为外部样式表文件供给HTML页面调用。,4.1.1 CSS的特点 4.1.2 CSS的类型 4.1.3 CSS的基本语法,4.2 CSS样式表的基本用法,要想在XHTML中应用CSS样式,首先要考虑的是选择合适的选择符,选择符是CSS控制XHTML文档中对象的一种方式,用来告诉浏览器这段样式将应用到哪个对象。,4.2.1 如何在HTML内插入样式表 在CSS样式表中,最接近目标的样式定义优先权越高,高优先权样式将继承低优先权样式的未重。
3、叠定义但覆盖重叠的定义。 4.2.2 CSS样式表规则 CSS规则就是所有样式表的基础,每一条规则都是一条单独的语句,它确定应该如何设计样式,以及应该如何应用这些样式。因此,样式表由规则列表组成,浏览器用它来确定页面的显示效果,甚至是声音效果。 CSS由两部分组成:选择符和声明,其中声明由属性和属性值组成,所以简单的CSS规则如下:,4.3 CSS样式表分类,CSS样式表的分类可以分成三种:内联样式(Inline Style)、内部样式表(Internal Style Sheet)和外部样式表(External Style Sheet)。 4.3.1 内联样式 内联样式仅仅是XHTML标签对于。
4、style属性的支持所产生的一种CSS样式表编写方式,并不符合表现与内容分离的设计模式,使用内联样式与表格式布局从代码结构上来说完全相同,仅仅利用了CSS对于元素的精确控制优势,并没能很好的实现表现与内容的分离,所以这种书写方式应当尽量少用。 4.3.2 内部样式表 内部样式表是CSS样式表的初级应用形式,它只针对当前页面有效,不能跨页面执行,因此达不到CSS代码多用的目的,在实际的大型网站开发中,很少会用得到内部样式表。 4.3.3 外部样式表 外部样式表是CSS样式表中较为理想的一种形式。将CSS样式表代码单独编写在一个独立文件之中,由网页进行调用,多个网页可以调用同一个外部样式表文件,因。
5、此能够实用代码的最大化多用及网站文件的最优化配。,4.4 CSS文档结构,CSS通过与XHTML的文档结构相对应的选择器(selector)来达到控制页面表现的目的,而文档结构不仅仅在CSS的应用上非常重要,对于行为层同样也非常重要。,4.4.1 结构 4.4.2 继承 4.4.3 特殊性 4.4.4 层叠 4.4.5 重要性,4.5 单位和值,在CSS选择符中提到过,每一个CSS属性的值均由两种指定形式,一种是指定值范围,如float属性,只可能应用left,right,none三种值,另一种为数值,如width能够使用09999px或其他数学单位来指定,除了px像素单位之外,CSS提供了许。
6、多其他类型的数学单位帮助进行值的定义。,4.5.1 颜色值 4.5.2 定义值 4.5.3 群选择符 4.5.4 派生选择符 4.5.5 id选择符,4.5.6 类选择符 类型选择符(Type Selectors),以文档语言对象类型作为选择符,即以HTML标签(或叫做标记、tag)作为选择符,class选择符与HTML选择器实现了让同类标签共享同一样式 4.5.7 定义链接的样式表 许多网站使用一个或多个全局样式表,网站上每个页面都与它相链接,使用全局中样式表后,用户改变某个文件,这个文件将影响用户网站上每个页面的外观,4.6 课堂练习,在网页设计中利用CSS样式起到了关键的作用,通过前面的。
7、学习和了解,接下来我们将学到的知识运用到实践中。,4.6.1 设计分析 4.6.2 制作步骤 4.6.3 案例总结,视频位置:光盘视频第4章4-6-1.swf 源文件位置:光盘源文件第4章4-6-1.html,4.7 课堂讨论,本章向读者讲述了CSS样式的就出,那么想知道通过学习本章你对CSS样式基础掌握的如何呢?尝试回答下面的问题吧。 4.7.1 问题1 CSS能做什么 CSS样式表可以用来改变从文本样式到页面布局的一切,并且能够与JavaScript结合产生动态显示效果。文本格式和颜色、图形外观和布局、绘制页面各部分的边框和动态操作。 4.7.2 问题2CSS和HTML区别 超文本标记语言。
8、(HTML,Hypertext Markup Language)由标记文档内特定元素的一系列标签组成。这些元素都具有默认表示样式。默认表示样式由浏览器提供,基于HTML的正式规范。用户通过链接到样式表,甚至通过在HTML文件内包括样式表,可以对HTML页面应用样式表,这样可以重新定义每个元素的表示样式。 HTML页面可以包含设置表达样式的属性和标签,但是与CSS比较,它们的功能和效果有限。样式表可以与HTML表达标记一起使用,例如标签或者color=”red”属性,或者可以完全替换表达标记和属性。,4.8 课后练习,制作设计工作室网页 通过本章那个的学习读者已经初步掌握了CSS样式的基础,下面通过课后的练习对知识进行巩固加深记忆。,源文件地址:光盘 素材第4章4-8.html 视频地址:光盘 视频第4章4-8.swf。