HTML_层叠样式表-个人_finished.pptVIP

层叠样式表  控制字体的样式 控制文字的样式 控制文本的样式 控制颜色和背景的样式 控制列表的样式 控制用户界面的样式 控制框与边框的样式 控制显示的样式 控制空白的样式 (完) 3. 色调与风格 2. 字体控制 1. 页面控制方法 学习统一控制页面风格的方法 学习如何统一控制页面的色调与风格 学习如何统一控制页面字体 目标 3. 2. 1. Web标准和CSS（层叠样式表）简介 层叠样式表的语法结构 添加层叠样式表的方法 内容摘要 5. 4. 控制外观样式 控制文字样式 3.行为（behavior） 2.表现（Presentation） 1.结构（Structure） HTML XML XHTML DOM ECMAScript（JavaScript 等） CSS Web标准的构成 Web标准由一系列规范组成，由于Web设计越来越趋向于整体与结构化，目前Web标准也逐步变为由三大部分组成的标准集 高效率的开发与简单维护 信息跨平台的可用性 降低服务器成本 便于改版 加快网页解析速度 与未来兼容 更良好的用户体验 Web标准的好处 CSS（Cascading StyleSheets，层叠样式表） 是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量，尤其是当你面对的是有数百个网页的站点时。 内容结构和格式控制相分离。 CSS层叠样式表简介 3. 链接到外部文件 2. 添加在head中 1. 直接添加 标签名 style=” 属性列表[；]”网页内容 /标签名 link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen” style type=”text/css” !-- 样式表的具体内容 -- /style 添加层叠样式表的方法 4. 联合使用样式表 style type=“text/css” @import “*.css”; 要添加的其他样式表具体内容 /style 2.群组选择符 1.类型选择符 对一组对象进行相同样式指派 比如：h1,h2,h3{} 以网页中已有的标签类型作为名称的选择符 比如: body{} p{} 层叠样式表的语法结构 4.Id及class 3.包含选择符 CSS提供的由用户自定标签名称的一种选择符模式，用户可以使用id和 class对页面中的HTML标签进行自定义名称，从而达到扩展HTML标签及组合HTML标签的目的. p id=“myPre”Hello world/p p class=“myClass”China/p 对某一个对象中的子对象进行样式指定时使用 比如：p li{}表示p内的li标签将被指定样式 CSS属性与选择符: 选择符{属性：值} 属性名 描述 font-family： 字体名称 font-size:： 字号参数 font-style: 斜体字的名称 font-weight: 字体粗细 属性名 描述 值 text-transform: 文字的大小写 uppercase：所有文字大写显示 lowercase：所有文字小写显示 capitalize：每个单词头字母大写显示 none：不继承母体的文字变形参数 text-decoration: 文字修饰 underline：为文字加下划线 overline：为文字加上划线 line-through：为文字加删除线 blink：使文字闪烁 none：不显示上述任何效果 属性名 描述 值 word-spacing: 间隔距离 间隔距离的取值：points、em、pixes、in、cm、mm、pc、ex、normal等。 letter-spacing: 字母间距 数字 line-height: 行间距离 数字 text-align: 文本水平对齐 left：左对齐 right：右对齐 center：居中对齐 justify：相对左右对齐 vertical-align: 文本垂直对齐 top：顶对齐；bottom：底对齐 text-top：相对文本顶对齐 text-bottom：相对文本底对齐 baseline：基准线对齐 middle：中心对齐 sub：以下标的形式显示 super：以上标的形式显示 text-indent: 缩进距离 数字 属性名 描述 值 color: 颜色属性 1）用十六进制方式 #ff0000 2）用 rgb(R,G,B)方