CSS页面外观设计与布局.ppt

下载文档 降价啦

16
0
约7.04千字
约 40页
2017-09-19 发布于河南
举报
版权申诉
保障服务

CSS页面外观设计与布局.ppt

1、本文档共40页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

页面中使用CSS的三种方法样式规则 CSS被设计用来与HTML联合建立网页，它不能独立运行，需要依附到页面上才能发挥作用。通常在网页中CSS规定了3 种定义样式的方法。内联式：直接将样式控制放置在单个HTML元素内嵌入式：在网页的head部分定义样式外部链接式：以扩展名.css的文件保存样式定义方法一：内联式内联样式直接将CSS放在某个HTML标签中，通过使用style属性设置，一般形式为： style="属性名1: 值1; 属性名2: 值2;……“ 方法二：嵌入式在网页的head部分直接实现CSS样式, 即在<head>与</head>标签内，以<style>开始，</style>结束 CSS规则由两部分组成：选择符和声明。声明由属性名和属性值组成。所以简单的CSS规则如下：选择符{属性名1: 值1; 属性名2: 值2; ……} 例如：p { color : Green; } p（段落标签）为选择符，color（颜色）是p的属性名，green（绿色）是color的属性值。该规则声明所有段落标签的内容应该将color属性设置为绿色，即所有<p>中文本将变成绿色 CSS规则中主要的四要素选择符：表明CSS规则应用到页面的哪个部分。选择符最简单的类型是元素选择符，它指出明确的标签元素，例如HTML中的<p>标签声明：声明包含在{}大括号内。大括号内应首先给出属性名，接着是冒号，然后是属性值。结尾分号是可选项，推荐使用结尾分号，以便于规则的扩展属性：属性按官方CSS规范定义。用户可以定义特有的样式效果，与CSS兼容的浏览器可能会支持这些效果，如果不支持的浏览器会忽略这些属性值：声明的值放置在属性名和冒号之后。它确切定义应该如何设置属性。每个属性值的范围也在CSS规范中定义 <html xmlns="/1999/xhtml"> <head runat="server"> <title>例6-2</title> <style type="text/css"> body {text-align : center; } div{color: Red; background-color: blue} </style> </head> <body> <form id="form1" runat="server"> <div>嵌入式样式示例</div> </form> </body> </html> 方法三：链接式在页面中使用CSS最常用的方法是链接式样式。利用这种方法可以在网页中调用已经定义好的样式表文件（css文件）与嵌入式相比，链接式可以将定义好的样式在网站的多个页面上重复使用，提高了开发效率，降低了维护成本，同时也实现了将页面结构和表现彻底分离，最适合大型网站的外观设计方法三：链接式可以通过VS.NET2008添加样式表无论是定义内嵌式样式还是链接式样式，每个样式的定义格式相同：选择符 {属性名1: 值1; 属性名2: 值2; ……} 其中，选择符是指样式定义的对象，可以是HTML标记元素、用户自定义的类、用户自定义的id、伪类、具有层次关系的样式规则及并列的样式选择符等。 1.元素选择符任何HTML元素都可以是一个CSS的元素选择符，例如，div{color : red}，该样式规则中的元素选择符是div，div块内的所有文字颜色为红色 2.类选择符类选择符用于定义页面上的相关HTML元素组，使它们具有合适的相同样式规则。创建类时，用户需要给它命名，命名时最好使用字母和数字定义了类之后，用户可以使用它作为CSS的选择符。类选择符以“.”为起始标记，一般格式为： .类选择符 {属性名1: 值1; 属性名2: 值2; ……} 例如： .c1 { color : Red; } .c2 { font-size : large; } 上面定义了两个类，类“c1”定义了颜色属性，类“c2”定义了字体大小属性。在HTML文档中可以按下列方式引用： <div> <h1 class="c1">通知</h1> <p class="c2">将与今天下午2点召开各部门会议。</p> </div> 标签<h1>中的文本颜色为红色，标签<p>中的字体大小为 “large”。因为它们各自的class属性值为类“c1”和类“c2”。 3.id选择符只有在页面上的标签才能具有给定的id，它必须是唯一的，并只用于指示该元素下面的例子中标签<a>定义了一个id属性，值是“next”。 <a href="next.htm" id="next">下一步