Download presentation
Presentation is loading. Please wait.
1
网 站 设 计 与 建 设 Website design and developments
2
第三部分 网站设计技术 第12章 层叠式样式表CSS
3
CSS是Cascading Style Sheets（层叠样式表单） 表现与内容分离
HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。 创建层叠样式表的四种方法，
4
15.1.样式表 是放置在网页HEAD部分的格式指令的集合
<style type="text/css">和</style>分别被浏览器识别为CSS的开始和结束， 通过改变样式表可以改变网站的外观 使用样式可以做出影响HTML多个元素的改变， 或者对整个文档进行样式的改变， 也可以周期性地改变样式。
5
<style type="text/css"> <!--
<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> <style type="text/css">和</style>分别被浏览器识别为CSS的开始和结束，而注释标记<!-- -->则是避免不支持CSS的浏览器将CSS内容作为网页正文显示在页面上。
6
15.2 层叠样式表 CSS层叠样式表（Cascading Stylesheet）指的是在一个单一的文件中使用多个样式定义。
一个样式表文件可以链接到网站的每一个文档，因此可以控制整个网站的外观。 术语Cascading（层叠）指的是继承或者在链接的、导入的、内嵌的以及内联样式之间的等级关系。 优先级 在任何一个链接的文档中的样式定义会覆盖链接的样式表。
7
12.3 CSS基本语法 CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值：
选择器(selector) { 属性(Property): 属性值(Value); }
8
12.4 CSS定义和使用方式 定义和使用样式 的4种方法： 外部样式表 文件链接 导入样式信息 内部样式表 内嵌样式
9
内部样式表 <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>
10
内部样式表是写在HTML的<head></head>里面的，只对所在的网页有效。
使用内部样式表可能是使用样式最简单的方法。 使用<STYLE>标记符在HTML文档的head部分放置信息。 样式信息包含在注释标记符“<! >”中
11
内嵌样式 内嵌样式是混合在HTML标记里使用的， 用这种方法，可以很简单的对某个元素单独定义样式，只对所在的Tag有效。
内嵌样式的使用是直接在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值 只适合用于偶然的样式改变。 最优先
12
<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>
13
在style参数后面的引号里的内容相当于在样式表大括号里的内容。
注意：style参数可以应用于任意BODY内的元素（包括BODY本身）。 使用内嵌样式的好处是可以在一个单一标记符中指定一个属性集合，但只适合用于偶然的样式改变。
14
外部文件 *.css 链入 导入
15
链接来自一个样式表 <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文件
16
链接来自一个样式表(续)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>
17
导入样式信息：仅适于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>
18
class和id用法 如果不希望标记的所有样式都被修改 需要用到两个标记属性：class和id。
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 指定 h1.title{font-weight: bolder; text-align: center;} h1#navigator {font-size: 14px; text-align: left;}
19
<head> <title>演示CSS</title> <style type="text/css"> <! h1.title {font-weight: bolder; text-align: center;} h1#navi {font-size: 12px; font-weight: bolder; text-align: left;} h1.news {font-size: 16px; font-weight:bold; text-align: center; color:green;} > </style> </head> <body> <h1 class="title">这是页面最上端的标题</h1> <h1 id="navi">这是页面左侧标题，用来导航</h1> <h1 class="news">这是页面新闻的标题</h1> </body>
20
<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>
21
当样式表继承遇到冲突时，总是以最后定义的样式为准。 样式(Styles)的优先级依次是内嵌样式、内部样式、外部样式、浏览器缺省。
层叠性就是继承性， 样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素 当样式表继承遇到冲突时，总是以最后定义的样式为准。 样式(Styles)的优先级依次是内嵌样式、内部样式、外部样式、浏览器缺省。
22
12．5 CSS样式 2011年6月 发布为 W3C 推荐标准。 CSS3 里增加了不少功能，如：“border-radius”、“text-shadow”、“transform”以及“transition”等。 W3C于2011年9月开始设计CSS4
23
CSS常用样式-- （1）CSS背景
24
<head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} p.no2 {background-color: gray; padding: 100px;} </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <p>这是段落</p> <p class="no2">这个段落设置了内边距</p> </body> </html>
25
CSS常用样式-- （2）CSS文本属性
26
CSS常用样式-- （3）CSS字体属性
27
CSS框模型 (Box Model) 定了元素框处理元素内容、内边距、边框和外边距的方式。
28
<body> <style type="text/css"> .test_demo {overflow: scroll; height: 120px; width: 120px; background:#CCCCCC;}</style> <div class="test_demo"> dfdfdfsfsdfsdfsdffghfg<br>hfghfghfghfghfghfghfghfghfgh</div> </body>
29
margin-left:2cm padding:1cm
30
CSS定位 CSS 为定位和浮动提供了一些属性， 利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，
还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
31
所谓相对定位是指允许元素在相对于文档布局的原始位置上进行偏移；
而绝对定位允许元素与原始的文档布局分离且任意定位。 实现CSS的定位最终还是要靠属性， CSS的定位属性： position、left、top、width、height、overflow、z-index、visibility和position 。。。。
32
<style>. right,. left{height:300px;width:200px;}
<style> .right,.left{height:300px;width:200px;} .right{ float:right;background:#000000;} .left{ float:left;background:#009933;} .main{background:#F60; height:300px;} </style> <div class="right">RIGHT</div> <div class="left">LEFT</div> <div class="main">MAIN</div>
Similar presentations
