Download presentation
Presentation is loading. Please wait.
1
网 站 设 计 与 建 设 Website design and developments
2
第三部分 网站设计技术 第15章 层叠式样式表CSS
3
CSS是Cascading Style Sheets（层叠样式表单）
HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。 创建层叠样式表的四种方法，
4
15.1.样式表 CSS1级规范和CSS 2级规范 是放置在网页HEAD部分的格式指令的集合 允许改变一个单一文件能改变整个网站的外观
通过改变样式表可以改变网站的外观 W3C Recommendation for HTML 3.2开始支持样式表 CSS1级规范和CSS 2级规范
5
15.2 层叠样式表 CSS层叠样式表（Cascading Stylesheet）指的是在一个单一的文件中使用多个样式定义。
一个样式表文件可以链接到网站的每一个文档，因此可以控制整个网站的外观。但是在任何一个链接的文档中的样式定义会覆盖链接的样式表。 术语Cascading（层叠）指的是继承或者在链接的、导入的、内嵌的以及内联样式之间的等级关系。 一个CSS1测试套件
6
15.3 定义和使用样式 4种方法： 外部样式表 文件链接 导入样式信息 内部样式表 内嵌样式
7
3. 内部样式表 <html> <head> <style type="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>
8
内部样式表是写在HTML的<head></head>里面的，只对所在的网页有效。
使用内部样式表可能是使用样式最简单的方法。 使用<STYLE>标记符在HTML文档的head部分放置信息。 样式信息包含在注释标记符“<! >”中
9
4.使用内嵌样式 内嵌样式是混合在HTML标记里使用的， 用这种方法，可以很简单的对某个元素单独定义样式，只对所在的Tag有效。 内嵌样式的使用是直接在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值 只适合用于偶然的样式改变。 最优先
10
<html> <head> <title>CSS的一个简单实例</title> <style type="text/css"> <!-- body {text-decoration:underline;background-color:#ddccff ; color:blue;font-weight:bold} --> </style> </head> <body> 使用CSS的一个简单实例。<br> <span style="background-color:#ff0000;color:yellow;font-size:30pt">这是一个使用CSS修饰文字的简单实例</span> </body> </html>
11
外部文件 *.css 链入 导入
12
链接来自一个样式表 <html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS的一个简单实例</title> <link rel=stylesheet type="text/css" href="sample-1505.css"> </head> <body> <a href=" <span style="background-color:#ff0000;color:yellow;font-size:30pt">这是一个使用CSS修饰文字的简单实例</span> </body> </html> 一个CSS文件
13
链接来自一个样式表(续)sample-1505.css <style type="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>
14
导入样式信息：仅适于IE <html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS的一个简单实例</title> <style type="text/css"> @import url("sample-1505.css"); h1 {color:red} </style> </head> <body> <a href=" <span style="background-color:#ff0000;color:yellow;font-size:30pt">这是一个使用CSS修饰文字的简单实例</span> <h1>山东大学</h1> </body> </html>
15
15．4 可变的样式元素 表15.1 1．样式继承 层叠性就是继承性， 当样式表继承遇到冲突时，总是以最后定义的样式为准。
样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素 当样式表继承遇到冲突时，总是以最后定义的样式为准。 样式(Styles)的优先级依次是内嵌样式、内部样式、外部样式、浏览器缺省。
16
CSS2特性 Media types（媒体类型） Paged media（分页媒体） Aural style sheets（听觉样式表）
根据文档是在屏幕上显示的，是打印出来的，用语音合成器展示的，还是使用盲文设备展示的来决定文档外观。可以精致地改变字体类型使它可以在具体的环境中最利于阅读（例如，sans serif适于在屏幕上阅读，而serif适合在印刷媒体上阅读 Paged media（分页媒体） CSS2用限定宽度和高度的页框，决定了页媒体（例如幻灯片）的显示。该特性提供了一个区域，作为传输到打印媒体上的信息的分页符。 Aural style sheets（听觉样式表） 使用听觉样式表可以优化听觉障碍用户语音合成器的使用。CSS属性页允许作者改变合成语音的质量（声音类型、频率、变形等） Bidirectional text（双向文本） 对双向文本的支持对于显示国际组织的其他语言信息很重要。例如，有时Arabic和Hebrew语言使文档呈现混合的方向性。CSS2属性定义了算法来保证正确的双向解释。 Font support（字体支持） 在CSS1中，假设客户端支持所有的字体。换句话，为了正确地产生页面，在用户系统中必须加载字体。与此对照，CSS2允许改进的客户端字体匹配，允许字体合成和渐进的生成，允许从Web中下载字体。 Relative and absolute positioning（相对和绝对定位） CSS2去除了对浏览器私有的<LAYER>标记符的需求，它提供了一个z轴允许在页面上堆放元素，从而显示。样式表的绝对定位允许你形成类似框架的页面
17
4．CSS定位 CSS定位主要是在页面的布局和控制上进行定义，可使页面从这两个方面都展现的非常完美，更加富有动感。 所谓相对定位是指允许元素在相对于文档布局的原始位置上进行偏移；而绝对定位允许元素与原始的文档布局分离且任意定位。 实现CSS的定位最终还是要靠属性，CSS的定位属性共有9个，分别是： position、left、top、width、height、overflow、z-index、visibility和position
18
9.样式类连结：<span>或<div>标志局部使用样式单
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS内联样式</title> <style type="text/css"> @import url("sample-1505.css"); h1 {color:red}； .mycolor {color:green;font-family:幼圆} </style> </head> <body> <a href=" <span style="background-color:#ff0000;color:yellow;font-size:30pt">span用CSS内联样式</span> <h1 >未使用内联样式</h1> <h1 style="color:blue;font-size=30pt;">山东大学</h1> <p>使用自己定义的<span class="mycolor">绿色</span></p> </body> </html>
Similar presentations
