原创力文档- 1、本文档共22页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
第5章 CSS层叠样式表 5.1 CSS基本概念 5.2 在DW中创建CSS 5.3 CSS滤镜 5.1 CSS基本概念 CSS是Cascading Style Sheets（层叠样式表）的缩写 CSS是HTML的扩展，是网页设计中不可或缺的核心技术 利用CSS可以有效地对页面的布局、字体、颜色、背景和其他效果实现更精准的控制 CSS技术最大的优势就是实现了结构与形式的分离，从而更加有利于网站的开发和维护 CSS布局（CSS层）是很有效的网页布局方式 5.1 CSS基本概念 CSS样式 选择符（selector） 属性（properties） 属性值（value） 选择符 { 属性 : 值 } 选择符 { 属性1 : 值1; 属性2 : 值2 } 基本格式： 复合样式： 5.1.1 样式和规则 5.1 CSS基本概念 5.1.1 样式和规则 （1）单个“HTML标签”作为选择符 例如，body、table、p 等 例1：body {color: black} 效果：页面主体（body）中的文字为黑色 例2：p {font-family: "隶书"} 效果：定义了段落字体为隶书 例3：p {text-align: center; color: red ;font-size:50pt} 效果：定义了段落居中排列，段落中的文字为红色，字号50 注意：需要对一个选择符指定多个属性时，属性之间使用分号分隔 5.1 CSS基本概念 5.1.1 样式和规则 【案例1】在HTML文档中加入CSS样式 步骤： 复制文件“css_1a.html”，更名为“css_1b.html” 在<head></head>标记之间输入以下代码： <style type="text/css"> <!-- p{text-align: left; color:red} ul{color:#00ffff} --> </style> 说明： 1. CSS样式要放在<style></style>中 2. stype=“text/css”表示使用CSS语法 3. <!-- 中间为注释内容 --> 5.1 CSS基本概念 5.1.1 样式和规则 （2）选择符组 把具有相同属性和值的选择符组合起来书写，用逗号将选择符分开，以减少重复定义 例：h1, h2, h4, h6{color:green} 效果：组里所有标题元素的文字都为绿色 例：p, table{font-size: 9pt} 效果：段落和表格的文字大小为9号字 5.1 CSS基本概念 5.1.1 样式和规则 （3）类选择符 把相同元素分类定义为不同的样式（用法一） 定义类选择符时，在自定类的名称前面加一个点号 类名为英文单词或以英文开头与数字的组合 例：为段落定义两个类，一个向右对齐，一个居中对齐 1. 先定义类 p.right{text-align:right} p.center{text-align:center} 2. 应用时，在HTML标签里加入class类参数 <p class="right"> 这个段落向右对齐的</p> <p class="center">这个段落是居中排列的</p> 5.1 CSS基本概念 5.1.1 样式和规则 （3）类选择符 在选择符中不指明HTML标签名，这样可以把几个不同的元素定义成相同的样式（用法二） 例：定义一个right类 ，表示文字靠右对齐 .right{text-align:right} 这样定义的类，可以应用到任何元素，如段落、标题等： <p class="right"> 这个段落向右对齐</p> <h1 class="right">这个标题向右对齐</h1> <h3 class="right">这个标题向右对齐</h3> 5.1 CSS基本概念 5.1.2 层叠和顺序 在Web页面中，CSS有下面3种层叠方式： 外部样式：存储在一个单独的外部CSS文件中的若干组CSS规则。使用link标签链接到外部样式表文件（.css文件），如果修改外部样式表文件，那么所有链接到该样式表文件的网页都将随之变化 内部样式：若干组包括在?HTML?文档head部分的?style?标签中的CSS规则，为当前网页设置样式信息。内部样式的内容在“CSS样式”面板中的“所有规
文档评论（0）