网页编程技术第3章css.ppt

第3章 在网页中使用CSS样式 3.1 CSS简介 3.2 CSS样式 3.3 在网页中使用CSS的方法 3.4 CSS属性 3.1 CSS简介 3.1.1 CSS的特点 将格式和结构分离 控制页面布局 制作体积更小下载更快的网页 将许多网页同时更新 浏览器成为更友好的界面 3.1.2 在网页中使用CSS的方式 在标记符中直接嵌套样式信息(内嵌) HTML 标记符的 style 属性 P style=“text-align:center” 在STYLE标记符中定义样式信息(插入) STYLE 标记符 STYLE type=“text/css” 样式定义 /STYLE 链接外部样式表中的样式信息(引入) LINK 标记符LINK rel=“stylesheet” type=“text/css” href=“stylesheetname.css” 优先级 内嵌插入引入浏览器缺省设置 3.2 CSS样式 3.2.1 CSS样式表组成 3.2.2 几种常用的selector html head meta http-equiv=Content-Type content=text/html; carset=gb2312 title类选择符/title style .myh1{ font-family:宋体; font-size:50pt; color:blue; } /style /head body div class=myh1通过类定义的格式 myh1/div p 没有通过类定义的格式 myh1/p p class=myh1这个p标签使用了类定义的格式 myh1/p /body /html 运行效果见：类选择符的使用 单独的选择器 #sidebar { border: 1px dotted #000; padding: 10px; } 根据这条规则，id 为 sidebar 的元素将拥有一个像素 宽为1px的黑色点状边框，同时其周围会有 10 个像素宽的 内边距（padding，内部空白）。老版本的 Windows/IE 浏 览器可能会忽略这条规则，除非你特别地定义这个选择器 所属的元素： div#sidebar { border: 1px dotted #000; padding: 10px; } 举例 ：ID选择符用法1.html 一个选择器，多种用法 即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次： 　#sidebar p { 　　　　　　　font-style: italic; 　　　　　　　text-align: right; 　　　　　　　margin-top: 0.5em; 　　　　　　} 　#sidebar h2 { 　　　　　　　font-size: 1em; 　　　　　　　 font-weight: normal; 　　　　　　　font-style: italic; 　　　　　　　margin: 0; 　　　　　　　line-height: 1.5; 　　　　　　　text-align: right; 　　　　　　　} 举例 ：ID选择符用法2.html 下面是使用包含选择器进行的样式定义: strong { color: red; } h2 { color: red; } h2 strong { color: blue; } 下面是它施加影响的 HTML： p The strongly emphasized word in this paragraph isstrongred/strong. /p h2 This subhead is also red./h2 h2 The strongly emphasized word in this subhead isstrongblue/strong. /h2 怎么样将CSS应用到HTML文档中呢? 有四种方法 在HTML文档的head标签内嵌入CSS的定义 使用link标签链接进来 使用CSS的@import 标签导入进来 在HTML文件中直接加入 html head style !-- .myh1{ font-family:宋体; font-size:50pt; color:blue; } -- /style meta http-equiv=Content-Type content=text/html; charset=gb2312 titlefirst/title /head body p