12 css
This presentation is the property of its rightful owner.
Sponsored Links
1 / 19

第 12 章 层叠样式表 CSS PowerPoint PPT Presentation


  • 108 Views
  • Uploaded on
  • Presentation posted in: General

第 12 章 层叠样式表 CSS. 概 述. 介绍样式表的基本概念 CSS1 CSS2 介绍 5 种使用 CSS 的方法. 1. 样式表. 是放置在网页 HEAD 部分的格式指令的集合 使用样式可以 改变 HTML 多个元素 外观 允许改变单一文件能改变整个网站的外观 通过改变样式表可以改变网站的外观 样式表最重要的目标是将文件的内容与它的显示分隔开来 CSS 可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制 W3C Recommendation for HTML 3.2 开始支持样式表. 3. 2. 层叠样式表 CSS.

Download Presentation

第 12 章 层叠样式表 CSS

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


12 css

第12章 层叠样式表CSS


12 css

概 述

  • 介绍样式表的基本概念

  • CSS1

  • CSS2

  • 介绍5种使用CSS的方法


12 css

1.样式表

  • 是放置在网页HEAD部分的格式指令的集合

  • 使用样式可以改变HTML多个元素外观

  • 允许改变单一文件能改变整个网站的外观

  • 通过改变样式表可以改变网站的外观

  • 样式表最重要的目标是将文件的内容与它的显示分隔开来

  • CSS可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制

  • W3C Recommendation for HTML 3.2开始支持样式表

3


12 css

2.层叠样式表 CSS

  • 在一个单一文件中使用多个样式定义,用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的标记语言。

  • Cascading(层叠)指的是继承或者在链接的、导入的、内嵌的以及内联样式之间的等级关系。

  • 在同一个文档中,区域样式(SPAN)格式定义优于样式表定义。

  • CSS可用在<p><td><font><body><span>等标签里

4


12 css

3.CSS的一个简单实例

<html xmlns="http://www.w3.org/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="http://www.sdu.edu.cn">这是标题1</a></h1> <h2>这是标题2</h2> <h3 style="display:none">这是标题3</h3> <h4>这是标题4</h4> </body> </html>

5


12 css

4.CSS基本语法

6


12 css

5.CSS的class和id示例

<html xmlns="http://www.w3.org/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>

7


12 css

6.链接外部样式表

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;

charset=gb2312">

<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>

一个CSS文件

8


12 css

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>

9


12 css

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>

10


12 css

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>

11


12 css

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>

12


12 css

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="background-color:#ff0000;color:yellow;"> CSS P:网站设计与建设</span></p>

<p class="myh2">myh2 网站规划与网页设计</p>

</body>

</html>

13


12 css

11.样式继承

  • 继承是将样式定义从父元素传递给其他元素的原则

  • 所有在元素中嵌套的元素都会继承外层元素指定的属性值,有时会把很多层嵌套的样式“叠加”在一起,当样式表继承遇到冲突时,总是以最后定义的样式为准。

  • 样式的优先级依次是区域样式、内嵌样式、内部样式、外部样式、浏览器缺省。

14


12 css

12.CSS框模型

  • #box { width: 70px; margin: 10px; padding: 5px;}

15


12 css

13.CSS定位

  • 相对定位和绝对定位

  • 相对定位是指允许元素在相对于文档布局的原始位置上进行偏移;而绝对定位允许元素与原始的文档布局分离且任意定位。

  • 定位属性有position、left、top、width、height、overflow、z-index和visibility等

  • CSS定义:.left20 {position:relative;left:20px;}

  • HTML:<p>左侧顶格内容</p><p class="left20" >相对坐标,离左侧正常位置20像素</p>

16


12 css

14.CSS定位示例

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;

charset=gb2312"> <title>CSS定位示例</title>

<style type="text/css"> <!--

#logo{

height:1000px;

position:relative;/*相对定位*/ }

#logoLink{

display:block;

width:173px;

height:144px;

background:url(./images/sdu-logo.gif) no-repeat;

position:absolute;

top:20px;

left:10px; } -->

</style>

</head>

<body>

<div id="logo">

<a href="http://www.sdu.edu.cn" id="logoLink"></a>

</div>

</body>

</html>

17


12 css

第12章 小结

  • 介绍样式表的基本概念

  • CSS1

  • CSS2

  • 介绍5种使用CSS的方法


12 css

第12章 思考问题

结束

12.1 什么是层叠样式表CSS?

12.2 为什么在网页设计中引入CSS技术?

12.5 层叠样式表中的“层叠”含义是什么?

12.7 CSS定义中class和id两种方式有什么区别?

12.9 样式表的叠加规则是什么?


  • Login