DW_09使用CSS样式表分解.ppt

网站建设;第9章;第一节 认识CSS语言 一、CSS样式概述 层叠样式简称CSS（Cascading Style Sheet技术是一种是用于控制网页样式的标记性语言），是以HTML为基础的语言，用于定义网页中内容的格式，它扩展了HTML的功能（如行间距），美化网页，使网页设计者以更有效的方式设置网页格式。;主要特点：可以独立地为网页中的各种对象定义格式，即样式，包含多方面的格式要求，并为样式定义一个名称，从而可将一种样式用于多个网页。 保证了同一样式的多次重复使用。 CSS 样式表中的层叠是指多个 CSS 样式表可以同时应用于同一个页面或网页中的同一元素，浏览器根据 CSS 定义的层叠规则来决定哪一种样式具有最高优先级。;1、可以将网页样式与内容分离。 2、能以前所未有的能力控制页面的布局。 3、可以制作出体积更小，下载更快的网页。 4、可以更快、更容易的维护及更新大量的网页。 5、让浏览器成为更友好的界面。 ;二、 CSS样式作用 1、CSS可以定义网页的多种样式，美化网页，如文字的大小颜色、段落格式、排版定位、对象位置、图片特效、鼠标指针样式等； 2、样式与文档分离，通过修改样式表，实现页面格式的自动更新； 3、CSS可以独立于网页文件，从而实现网站页面风格的批量修改。;第二节 CSS语言基本语法 ;CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。 因此，概括来说，CSS就是由3个基本部分——“对象”、“属性”和“值”组成的。 而且在一个样式中可以设置多个属性及其值。 举例：定义一个样式体验。 ;选择符的类别： CSS选择符的使用有四种情况： （1）单元素名作为选择符 元素名{样式规则} （2）CLASS（类）作为选择符 .class名称{样式规则} ? 圆点引导 （3）ID(标识符)作为选择符 ＃ID号{样式规则} ? # 号引导;（4）元素组合作为选择符 元素名1，元素名2，…….元素名n{样式规则} .class名称1，.class名称2，… .class名称n{样式规则} ＃ID号1，＃ID号2，……. ＃ID号n{样式规则} 用逗号分隔的多个选择符的组合。 如下： H1,H2{font-family:arial;text-align:center; color:red;} .a,.b,.c{font-family: 隶书; color:yellow;} #1,#2{color:blue; font-family: 楷体;} #2{font-size=100pt;} .c{font-size=100pt;} ;第三节 CSS基本应用 1、在标签内部定义样式属性 在Html标签内部设计样式属性： 标签名 style=“属性1:值；属性2:值；”标签内容/标签名 如： img { border: thick double;} 即重新定义一个Html标签的样式，只能用于再定义特定标签的样式。 ;2、使用style标签定义 仅在单个文档内部使用的样式，一般在文档首部定义： style type=text/css !-- 选择符{ 属性1:值; 属性2:值; …… } -- /style ;3、使用link标签导入外部CSS文件 一般定义样式常用的方式，一个样式可被用于多个网页文件，只要修改了CSS样式文件中的样式，则所有使用该样式的网页格式同步发生变化，。 使用LINK（链接）标签 ，语法： HEAD LINK href = ”样式表文件.css”rel = “stylesheet” type = ”text/css” /HEAD ;4、使用@import命令导入外部CSS文件 与Link标签的功能相同，可用于导入一个外部样式文件。 语法： STYLE TYPE=text/css @ import url(“样式表文件.css”); /STYLE 要求：必须放在Style标签中使用。 ;第四节 CSS样式优先级 层叠样式表的一般处理原则： （1）当两个不同的样式应用于同一段文本时，浏览器会显示所有的样式属性。 如：一个样式定义字体为宋体，另一个样式定义颜色为红色，则这段文本显示为红色宋体， （2）如果两个样式发生冲突，则根据样式与文本的远近关系来选择样式，最近优先原则，越近越优先。 （3）CSS样式比HTML定义的样式具有优先权。 （4）内部样式优先于外部样式。 ;当一个网页文档中为同一个对象定义多个样式时，根据这些样式的优先级决定谁有效。 一、环