网站设计与建设15课件_第1页
网站设计与建设15课件_第2页
网站设计与建设15课件_第3页
网站设计与建设15课件_第4页
网站设计与建设15课件_第5页
已阅读5页，还剩12页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第15章层叠式样式表CSS第三部分网站设计技术第15章层叠式样式表CSS第三部分网站设计技术1CSS是CascadingStyleSheets（层叠样式表单）HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。创建层叠样式表的四种方法，CSS是CascadingStyleSheets（层叠样215.1.样式表是放置在网页HEAD部分的格式指令的集合允许改变一个单一文件能改变整个网站的外观通过改变样式表可以改变网站的外观W3CRecommendationforHTML3.2开始支持样式表CSS1级规范和CSS2级规范15.1.样式表是放置在网页HEAD部分的格式指令的集合315.2层叠样式表CSS层叠样式表（CascadingStylesheet）指的是在一个单一的文件中使用多个样式定义。一个样式表文件可以链接到网站的每一个文档，因此可以控制整个网站的外观。但是在任何一个链接的文档中的样式定义会覆盖链接的样式表。术语Cascading（层叠）指的是继承或者在链接的、导入的、内嵌的以及内联样式之间的等级关系。/TR/REC-CSS1。一个CSS1测试套件/style/CSS/Test/。15.2层叠样式表CSS层叠样式表（CascadingS415.3定义和使用样式

4种方法：外部样式表文件链接导入样式信息内部样式表内嵌样式15.3定义和使用样式4种方法：53.内部样式表<html><head><styletype="text/css"><!--a{text-decoration:none;/*下划线：underline;none*/background:green;/*背景色*/ color:blue;/*前景色*/corsur:hand;font-size:20pt}/*字体大小*/body{text-decoration:underline;background-color:#ddccff;color:blue;font-weight:bold}--></style></head><body>使用CSS的一个简单实例。<br></body></html>3.内部样式表<html>6内部样式表是写在HTML的<head></head>里面的，只对所在的网页有效。使用内部样式表可能是使用样式最简单的方法。使用<STYLE>标记符在HTML文档的head部分放置信息。样式信息包含在注释标记符“<!---->”中内部样式表是写在HTML的<head></head>里面的，74.使用内嵌样式内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式，只对所在的Tag有效。内嵌样式的使用是直接在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值只适合用于偶然的样式改变。最优先4.使用内嵌样式8<html><head><title>CSS的一个简单实例</title><styletype="text/css"><!--body{text-decoration:underline;background-color:#ddccff;color:blue;font-weight:bold}--></style></head><body>使用CSS的一个简单实例。<br><spanstyle="background-color:#ff0000;color:yellow;font-size:30pt">这是一个使用CSS修饰文字的简单实例</span></body></html><html>9外部文件*.css链入导入外部文件*.css10链接来自一个样式表<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>CSS的一个简单实例</title><linkrel=stylesheettype="text/css"href="sample-1505.css"></head><body><ahref="">计算机科学与技术学院</a><br><spanstyle="background-color:#ff0000;color:yellow;font-size:30pt">这是一个使用CSS修饰文字的简单实例</span></body></html>一个CSS文件链接来自一个样式表<html>一个CSS文件11链接来自一个样式表(续)sample-1505.css<styletype="text/css"><!--a{text-decoration:none;/*下划线：underline;none*/background:green;/*背景色*/ color:blue;/*前景色*/corsur:hand;font-family:隶书;font-size:20pt}/*字体大小*/body{text-decoration:underline;background-color:#ddccff;color:blue;font-weight:bold}--></style>链接来自一个样式表(续)sample-1505.css<st12导入样式信息：仅适于IE<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>CSS的一个简单实例</title><styletype="text/css">@importurl("sample-1505.css"); h1{color:red}</style></head><body><ahref="">计算机科学与技术学院</a><br><spanstyle="background-color:#ff0000;color:yellow;font-size:30pt">这是一个使用CSS修饰文字的简单实例</span><h1>山东大学</h1></body></html>导入样式信息：仅适于IE<html>1315．4可变的样式元素表15.11．样式继承层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素当样式表继承遇到冲突时，总是以最后定义的样式为准。样式(Styles)的优先级依次是内嵌样式、内部样式、外部样式、浏览器缺省。15．4可变的样式元素表15.114CSS2特性Mediatypes（媒体类型）根据文档是在屏幕上显示的，是打印出来的，用语音合成器展示的，还是使用盲文设备展示的来决定文档外观。可以精致地改变字体类型使它可以在具体的环境中最利于阅读（例如，sansserif适于在屏幕上阅读，而serif适合在印刷媒体上阅读Pagedmedia（分页媒体）CSS2用限定宽度和高度的页框，决定了页媒体（例如幻灯片）的显示。该特性提供了一个区域，作为传输到打印媒体上的信息的分页符。Auralstylesheets（听觉样式表）使用听觉样式表可以优化听觉障碍用户语音合成器的使用。CSS属性页允许作者改变合成语音的质量（声音类型、频率、变形等）Bidirectionaltext（双向文本）对双向文本的支持对于显示国际组织的其他语言信息很重要。例如，有时Arabic和Hebrew语言使文档呈现混合的方向性。CSS2属性定义了算法来保证正确的双向解释。Fontsupport（字体支持）在CSS1中，假设客户端支持所有的字体。换句话，为了正确地产生页面，在用户系统中必须加载字体。与此对照，CSS2允许改进的客户端字体匹配，允许字体合成和渐进的生成，允许从Web中下载字体。Relativeandabsolutepositioning（相对和绝对定位）CSS2去除了对浏览器私有的<LAYER>标记符的需求，它提供了一个z轴允许在页面上堆放元素，从而显示。样式表的绝对定位允许你形成类似框架的页面CSS2特性Mediatypes（媒体类型）154．CSS定位CSS定位主要是在页面的布局和控制上进行定义，可使页面从这两个方面都展现的非常完美，更加富有动感。所谓相对定位是指允许元素在相对于文档布局的原始位置上进行偏移；而绝对定位允许元素与原始的文档布局分离且任意定位。实现CSS的定位最终还是要靠属性，CSS的定位属性共有9个，分别是：position、left、top、width、height、overflow、z-index、visibility和position4．CSS定位169.样式类连结：<span>或<div>标志局部使用样式单<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>CSS内联样式</title><styletype="text/css">@importurl("sample-1505.css"); h1{color:red}；

.mycolor{color:green;font-family:幼圆}</style></head><body><ahref="">计算机科学与技术学院</a><br><spanstyle="background-c

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论