CSS层叠样式表.ppt

《CSS层叠样式表.ppt》由会员分享，可在线阅读，更多相关《CSS层叠样式表.ppt（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第三课程 层叠样式表桂智明 2009年3月CSS的概念 CSS（层叠样式表）是一种格式化网页的标准方层叠样式表）是一种格式化网页的标准方式，它就颜色、字体、间隔、定位以及页边距等式，它就颜色、字体、间隔、定位以及页边距等格式提供了格式提供了70种以上的属性，这些属性均适用种以上的属性，这些属性均适用于于HTML标记符。标记符。它扩展了它扩展了HTML的功能，可用更有效的方的功能，可用更有效的方法设计网页格式。法设计网页格式。css技术原理CSS是一种专注于对信息的视觉表现进行控制的技术。CSS的目标是用来取代HTML中的“设计”部分，使HTML专注于信息整理，而CSS来专注于信息的视觉表现优秀

2、的CSS与HTML设计使内容与表现完全分离，以更好的结构来展示信息，使得信息易于展现并易于修改什么是表现(Design)与内容(Content)？内容是指具体的信息，仅仅表示信息正文及各部分的名称，如标题、作者、正文、图片表现是指信息的展示形式，如标题使用16号黑体，正文使用12号宋体、图片采用文绕图间距10px的排列方式等内容(Content)表现(Design)为什么要实现表现与内容的分离？分离技术使我们在制作网站的时候能够充分对网站统一性、可用性进行思考与设计，提高网站可用性，改善用户体验易于维护M良好的规划与组织是维护的关键多个CSS协调工作、层次清晰import url(/css/f

3、onts.css);import url(/css/master.css);import url(/css/globalnav.css);import url(/css/globalfooter.css);import url(/css/styles.css);import url(/css/layout.css);import url(/css/columns.css);import url(/css/image_wrappers.css);import url(/css/forms.css);import url(/css/data.css);import url(/css/themes.

4、css);现阶段的问题浏览器对CSS支持的不完善相同浏览器的不同版本、不同操作系统下显示不同不同浏览器对CSS的支持是不同的单纯HTML的局限性：使用使用HTML方式方式 align=center 一级标题一级标题.其他正文其他正文 align=center 一级标题一级标题 CSS技术的优越性使用CSS方式H1text-align:center;font-family:楷体_gb2312一级标题.其他正文一级标题 只需要一个样式定义，只需要一个样式定义，解决了格式定义的重解决了格式定义的重复及维护格式的困难。复及维护格式的困难。CSS的分类外部链接样式表(External linking c

5、ss):实际上是一个仅包含样式规则的外部文本文件，其后缀名为“CSS”，当编辑此文件时，所有与此样式表链接的文档将全被更新。内嵌式样式表(Embedded CSS)：嵌在HTML代码的标记之间。内联式样式表(Inlink CSS):直接在某一HTML标记后添加样式代码。优先程度：内联式内嵌式外部链接CSS样式加入到HTML的几种方式 内联样式表（单行加入CSS样式）内容内容 嵌入样式表（在标签中加入CSS样式）外部样式表（在标签中加入CSS样式）输入样式表（在标签中加入CSS样式）import url(样式表样式表.css);H1 font-family:impact 在网页中使用CSS1 1

6、、链接外部链接外部CSS样式表样式表 （1）将样式保存在以）将样式保存在以CSS为扩展名的文本文件中）可用书为扩展名的文本文件中）可用书写器等编辑；写器等编辑；（2）在）在内使用内使用标记符链接：标记符链接：优点：可设置多个网页的统一格式，常用于网站。在html中植入CSS样式 用标记元素，将样式信息直接作为文档一部分用于HTML。注意，所有样式应放于 之中，且 必须成对使用，样式代码置于之中。优点：有利于统一设置单个网页的格式缺点：不便统一设置多个网页的格式在网页中使用CSS2q使用 import URL（CSS文件的URL）将CSS样式表文件信息导入HTML中。q注意：import URL

7、必须在中使用，且必须放在中。q与区别：区别：import URL是无论该网页是否使用CSS样式表，均读取；而仅在使用样式表时再去读样式表文件。在网页中使用CSS3导入CSS样式表在标记中加入样式HTML 标记符的 style 属性优点：可修饰单独的标记符缺点：没有发挥CSS统一设置格式的优势在网页中使用CSS4用脚本来使用CSS样式 文字变红 在标记符中用在标记符中用STYIE属性引入了脚本属性引入了脚本”onmouseover”后，当鼠标移动到指定的文本上后，当鼠标移动到指定的文本上(如如“文字变红文字变红”)时时,this.style.colorred样式加到文本上，使这些文字样式加到文本

8、上，使这些文字变成红色。为了返回默认设置，可以使用变成红色。为了返回默认设置，可以使用2个单引号来表个单引号来表示。在上例中，当鼠标移开文本时，文字又回到原来大小示。在上例中，当鼠标移开文本时，文字又回到原来大小显示。显示。在网页中使用CSS5注意事项上述上述CSS方法可以混合使用。方法可以混合使用。混合使用冲突处理：混合使用冲突处理：内在的定义会覆盖外在链接的内在的定义会覆盖外在链接的CSS；行间定义的行间定义的CSS会覆盖在会覆盖在内定义的内定义的CSS；用用CLASS和和ID对对CSS样式的引用有较高的优先样式的引用有较高的优先级；级；在某样式后有在某样式后有!Important”附带标签的样式具附带标签的样式具有最高优先级。有最高优先级。小 结