山东大学web技术课程教学ppt12
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
山东大学计算机科学与技术学院
9
《网站设计与建设》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
7.导入样式信息：仅适于IE
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS的链入外部样式表示例</title> <style type="text/css"> @import url("sample-1203.css"); </style> </head> <body> CSS的链入外部样式表示例(body背景图) <h2>CSS h2：网站规划与网页设计</h2> <p>CSS P：网站设计与建设</p> <p class="myh2">myh2 网站规划与网页设计</p> </body> </html>
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
第12章 层叠样式表CSS
山东大学计算机科学与技术学院
《网站设计与建设》
《网站设计与建设》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
概 述
介绍样式表的基本概念
CSS1
CSS2 介绍5种使用CSS的方法
山东大学计算机科学与技术学院
13
《网站设计与建设》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
11.样式继承
继承是将样式定义从父元素传递给其他
山东大学计算机科学与技术学院
4
《网站设计与建设》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
3.CSS的一个简单实例
<html xmlns="/1999/xhtml"> <head> <title>一个简单CSS示例演示</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-h1 {color:red; font-size: 14px;} h2,h4 {font-size: 14px; display:inline;} --> </style> </head> <body> <h1><a href="">这是标题1</a></h1> <h2>这是标题2</h2> <h3 style="display:none">这是标题3</h3> <h4>这是标题4</h4> </body> </html>
山东大学通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
9.内嵌样式：混合在HTML标记里，只对所在的标记有效
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS内嵌样式表示例</title> <style type="text/css"> <!-h2 {font-size: 8px;color:red;} p {margin-left: 50px} body {background-image: url("./images/back.gif"); background-position:bottom right; background-repeat:no-repeat; background-attachment:fixed; } .myh2 {font-size: 16px;color:red;} --> </style> </head> <body> CSS的链入外部样式表示例(body背景图) <h2>CSS h2：网站规划与网页设计</h2> <p style="color:blue;font-size:16">CSS P：网站设计与建设</p> <p class="myh2">myh2 网站规划与网页设计</p> </body> </html>
的显示分隔开来 CSS可以有效地对页面的布局、字体、颜 色、背景和其它效果实现更加精确的控制 W3C Recommendation for HTML 3.2开始 支持样式表
山东大学计算机科学与技术学院
3
《网站设计与建设》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
2.层叠样式表 CSS
山东大学计算机科学与技术学院
2
《网站设计与建设》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
1.样式表
是放置在网页HEAD部分的格式指令的集合 使用样式可以改变HTML多个元素外观 允许改变单一文件能改变整个网站的外观 通过改变样式表可以改变网站的外观 样式表最重要的目标是将文件的内容与它
山东大学计算机科学与技术学院
7
《网站设计与建设》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
6.链接外部样式表
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 一个CSS文件 <title>CSS的链入外部样式表示例</title> <link rel="stylesheet" type="text/css" href="sample-1203.css"> </head> <body> CSS的链入外部样式表示例(body背景图) <h2>CSS h2：网站规划与网页设计</h2> <p>CSS P：网站设计与建设</p> <p class="myh2">myh2 网站规划与网页 设计</p> </body> </html>
山东大学计算机科学与技术学院
5
《网站设计与建设》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
4.CSS基本语法
山东大学计算机科学与技术学院
6
《网站设计与建设》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
5.CSS的class和id示例
<html xmlns="/1999/xhtml"> <head> <title>CSS的class和id示例演示</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;} .MyNews {font-size: 20px; font-weight:bold; text-align: right; color:blue;} --> </style> </head> <body> <h1 class="title">这是页面最上端的标题</h1> <h1 id="navi">这是页面左侧标题，用来导航</h1> <h1 class="news">这是页面新闻的标题</h1> <p class="news">这是引用未定义的CSS样式：新闻的内容</p> <p class="MyNews">这是引用自定义的CSS样式：新闻的内容</p> </body> </html>
山东大学计算机科学与技术学院
12
《网站设计与建设》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
10.CSS的区域样式优于CSS示例
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS区域样式示例</title> <style type="text/css"> <!-h2 {font-size: 8px;color:red;} p {margin-left: 50px} body {background-image: url("./images/back.gif"); background-position:bottom right; background-repeat:no-repeat; background-attachment:fixed; } .myh2 {font-size: 16px;color:red;} --> </style> </head> <body> CSS的链入外部样式表示例(body背景图) <h2>CSS h2：网站规划与网页设计</h2> <p style="color:blue;font-size:16"> <span style="backgroundcolor:#ff0000;color:yellow;"> CSS P：网站设计与建设</span></p> <p class="myh2"> myh2 网站规划与网页设计</p> </body> </html>
山东大学计算机科学与技术学院
8
《网站设计与建设》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
6.链接外部样式表---续 sample-1203.css
<style type="text/css"> <!-h2 {font-size: 8px;color:red;} p {margin-left: 50px} body {background-image: url("./images/back.gif"); background-position:bottom right; background-repeat:no-repeat; background-attachment:fixed; } .myh2 {font-size: 16px;color:red;} --> </style>
山东大学计算机科学与技术学院
10
《网站设计与建设》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
8.内部样式：<head>内部定义，只对所在的网页有效
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS内部样式示例</title> <style type="text/css"> <!-h2 {font-size: 8px;color:red;} p {margin-left: 50px} body {background-image: url("./images/back.gif"); background-position:bottom right; background-repeat:no-repeat; background-attachment:fixed; } .myh2 {font-size: 16px;color:red;} --> </style> </head> <body> CSS的链入外部样式表示例(body背景图) <h2>CSS h2：网站规划与网页设计</h2> <p>CSS P：网站设计与建设</p> <p class="myh2">myh2 网站规划与网页设计</p> </body> </html>
在一个单一文件中使用多个样式定义，用
来为结构化文档(如HTML文档或XML应用)添 加样式(字体、间距和颜色等)的标记语言。 Cascading（层叠）指的是继承或者在链接 的、导入的、内嵌的以及内联样式之间的 等级关系。 在同一个文档中，区域样式(SPAN)格式定 义优于样式表定义。 CSS可用在<p><td><font><body><span>等 标签里