CSS层叠样式表幻灯片.ppt

DIV+CSS布局布局特点 一.精简代码，建设重构难度。 二.网页访问速度 三.SEO优化 四.浏览器兼容性 -容易出现多种浏览器不兼容的问题 (2)类别选择器 head style .red{color:red; font-size:18px; } .green{color:green; font-size:36px; } /style /head (3)ID选择器 ID选择器与CLASS基本相同，不同在于ID选择器只能在HTML页面中使用一次，针对性更强。 head style #bold{font-weight:bold;} #green{font-size:30px; color:green;} /style /head body p id=“bold”ID选择器/p p id=“green”ID选择器1/p /body 3.HTML中CSS分类 （1）行内样式 p style=“color:#000000; font-style:italic;”正文内容/p 评价：最简单，每个标记都要设置，维护成本高，网页过胖。 （2）内嵌式-定义在head head style … /style /head (3) 链接式 CSS样式表单独成文件 Format.css H2{color:#0000ff; } P{color:#ff000000; text-decoration:underline; } html head link href=“format.css” type=text/css rel=“stylesheet” /head body h2…/h2 p正文/p /body P{background-color:red background-image:url(abc.gif) background-repeat:repeat background-attachment:fixed background-position:20% 2cm}能够简写成： P{background :url(abc.gif) red 20% 2cm repeat fixed} 第八节字体属性 文字大小(font-size)属性取值可以：绝对值、相对值、长度、百分比。使用负数值无效。如果不设置，默认为中等大小。 字体设置(font-family）定义字体名称，字体定义可以取值为字体一，字体二，……中间用逗号分隔。 字体磅值(font –weight)定义字体是否加粗，nomarl,bold,bolder,lighter,从100—900。 默认为normal，等价于400 字体风格：(font-style） 有normal（普通）、italic(斜体)。 如：.abc{font-syle:italic} 字母转换（font-variant),如果不做说明，为Normal ，英文字母都保持不变，若取值为small-caps，英文字符除去作为其它样式设定的外，一律转换为小写。 第 7 章?? C S S —— 层 叠 样 式 表 第一节C S S概述 CSS：即层叠样式表或级联样式表，它是用来表现XML或HTML等文件样式的一种标记语言。 版本： V1.0 1998 V2.0 2001 V3.0 CSS的作用： 1.可将网页样式与内容分离； 2. 以前所未有的能力控制页面布局，进行精确定位； 3. 可以制作出体积更小、下载更快的网页；可减少表格、图像用量； 4.更快、更容易的维护及更新大量网页； 5.兼容性好。 传统HTML缺点 维护困难； 标记不足； 网页过“胖”； 定位困难。 2.基本CSS选择器 CSS组成：对象｛属性：值｝ 对象-选择器(selector) 选择器： （1）标记选择器 CSS标记选择器就是声明哪些标记采用哪种CSS样式。 style h1{ color:red; font-size:36px; } /style body p class=“red”CLASS选择器1/p p class=“green”CLASS选择器2/p /body html head link href=“format.css” type=text/css rel=“stylesheet” /head body h2…/h2 p正文/p /body 二、在页面中引用css的方法 最简单的方式是使用html的style标记。此标记放在文件的head部分，包含网页的样式结构。 层叠的意义及分类： 它的意