5_ 级联样式表.pptVIP

3 CSS 1 CSS样式简介 2　在HTML中加入CSS的方法 3 相关的标记和属性 4 CSS属性 　　W3C把动态HTML（Dynamic HTML）分为三个部分来实现：脚本语言（包括JavaScript、Vbscript等）、支持动态效果的浏览器（包括Internet Explorer、Netscape Navigator等）和CSS样式表 CSS（Cascading Style sheets，层叠样式表）可轻松设置网页的显示位置和格式．（类似于word中的样式) CSS将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。把结构与样式分离，当多个网页采用相同的外观样式时，只要建立一个定义样式的CSS文件，让HTML调用这个CSS文件所定义的样式即可。 1 CSS样式简介 CSS的代码都是由一些最基本的语句构成的。它的基本语句的结构是这样的：  选择器 {属性：属性值 ;属性：属性值 ; ……} 选择器： 　　该CSS作用于的网页元素。可以是html元素、类选择器、id选择符或上下文选择符。  H3{ font-family:arial; font-size:12pt;　…… ２ 在HTML中加入CSS的方法 内联式样式表(inline) 嵌入式样式表(document level) 链接式外联式样式表(external) 引入外部样式 内联样式: 出现在一个标记内.作用范围仅限于所处标记的内容． body p style=font-size:14pt;color:blue 蓝色14号文字/p p第二行文字/P /body  嵌入样式: 仅对当前网页起作用。 ?html head title/title style type=text/css !-- p {font-weight:bold; color:green} -- /style/head body p第一行/p p第二行/p /body/html （!– 符： 使不支持css的浏览器忽略样式定义 ) 链接外部样式：可用于多个网页文件。 １、首先定义一个　.css文件，内容如下： p {font-weight:bold; color:green} 2、再编写要用此css的网页文件： HTMLHEADTITLE本页标题/TITLELINK?REL=stylesheet? HREF=/xyz.css? TYPE=text/css/HEAD …… 引入外部样式 style type=“text/css” !- - @import url(“import.css); @import url(/xx.css); - /style 将样式文件全部内容复制到@import处,以替换该关键字.而链接方式不替换. 　　3 相关的标记和属性 Html 选择符: p {font-weight:bold; color:green} 样式类　（Class Selector） 1、同一个html标签可以定义数个“类”。 即：同一标签可使用来自于嵌入或外部样式表的不同样式 。 例：在style中定义如下三个类（对于p标签） P.green { color: green }P.yellow { color: yellow}P.red { color: red} 在HTML中： P CLASS=green 绿黄色显示的字符 /PP CLASS=yellow 黄色显示的字符 /PP CLASS=red 红色显示的字符 /P 2、样式类可作用于任何标签，以点开头。 例： .italic { font-style:italic } h3 class=“italic” …… /h3 p class=“italic” …… /p Id 选择符: #id名｛规则１；……｝ Id属性用于定义一个特定的html元素。Eg: span id=“redone” text here /span 在样式表中，id值为redone的html元素的样式规则定义语句如下： style !-- # redone { color:red } -- /style htmlhead title/title style type=text/css !-- #redone{color:red } -- /style/head body p第一行/p p第二行/p span