Css详解PPT
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
操作步骤同链接样式表
样式的混合使用
行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常 常 需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某张网页内，部分内容”与众不同“，采用行内样式
外部样式文件
内嵌样式
内嵌样式-2 选择器
根据选择器的不同，内嵌样式又分为： HTML 选择器 CLASS 类选择器 ID 选择器
内嵌样式-3 HTML选择器
/*--关键代码--*/ <HEAD> <STYLE type="text/css"> P { /*设置样式：字体和背景色*/ font-family: System; font-size: 18px; color: #3333CC; } H2 { background-color: #CCFF33; text-align: center; } </STYLE> </HEAD> <BODY> <H2>品种特征方面：</H2> <P> 1、蛋鱼：蛋鱼…….。</P> 应用H2样式 <P> 2、龙睛：龙睛……..。</P> <P> 3、高头：高头….。</P>
. myClass { color : #4499ee ; } ID选择器
#title { font-family : "幼圆" }
类别选择器
复合选择器
“交集”选择器 div.divClass {……} div#divId {……} “并集”选择器 div, h1#htitle, p.pClass {……} 后代选择器 div h1#htitle div, h1#htitle, p.pClass {……}
CSS概述 概述
目 录
※ CSS是什么 ※ 为什么要使用CSS ※ CSS 中盒状模型 ※ CSS语法 ※ 引入CSS的4种方式 ※ CSS选择器 ※ CSS的继承和优先级 ※ 常见样式介绍 ※ 学习方法
需要具备的基础知识
在继续学习之前，你需要对下面的知识有基本的了解：
HTML XHTML
HTML&XHTML
层叠(级联)样式表 定义如何显示HTML 元素. 属于标记语 言,它不需要编译,可以直接由浏览器执行(属于浏览器解 释型语言).
• HTML 标签原本被设计为用于定义文档内容。 • HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格 ”之类的信息。 • 不断地有新的 HTML 标签和属性（比如字体标签和颜色属性）添 加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点 变得越来越困难。 • 为了解决这个问题，万维网联盟（W3C)，肩负起了 HTML 标准化 的使命，并在 HTML 4.0 之外创造出样式（Style）。 所有的主流浏览器均支持层叠样式表。
HTML: HTML是一种基本的WEB网页设计语言 XHTML: XHTML是一种为适应XML而重新改造的HTML。当XML越来越 成为一种趋势，就出现了这样一个问题：如果我们有了XML，我们 是否依然需要 HTML?为了回答这个问题，1998年5月我们在旧金山 开了两天的工作会议，会议的结论是：需要。我们依然需要使用 HTML。因为大量的人们已经习惯使 用HTML来作为他们的设计语 言，而且，已经有数以百万计的页面是采用HTML编写的。
引入CSS的4种方式
行内引入 <p style="样式代码">段落文本</p> 内嵌引入 <style type="text/css" >样式代码</style> 外部导入 <style type="text/css">@import "样式文件url"; </style> 外部链接
<link href="样式文件url " rel="stylesheet" type="text/css" />
HTML&XHTML
以下是 XHTML 相对 HTML 的几大区别： XHTML 要求正确嵌套 XHTML 所有元素必须关闭 XHTML 区分大小写 XHTML 属性值要用双引号 XHTML 用 id 属性代替 name 属性 XHTML 特殊字符的处理
CSS (Cascading Style Sheets)
为什么要使用CSS
CSS使页面结构和表现分离，使页面结构清晰，载入更快； CSS使设计师在修改设计时更有效率，而代价更低； CSS使整个站点保持视觉的一致性； CSS使站点对浏览者更具亲和力； 在世界上越来越多人采用 Web 标准时，掌握CSS可以提高设计师 的职场竞争实力。
CSS 语法
CSS 语法由三部分构成：选择器、属性和值 语法由三部分构成：选择器、 CSS 对空格和大小写不敏感 selector {property: value;[property: value;]…} 示例: p { color : red; font-weight : bold; } #dataCell { text-align : center; }
外部样式 根据样式文件与网页的关联方式又分为：
链接（LINK ）外部样式表 导入（import）外部样式表样式文件 P
{ ….. }
网页1
网页2
网wenku.baidu.com3
链接外部样式表
使用LINK（链接）标签 ，语法： <HEAD> <LINK rel = “stylesheet” type = ”text/css” 第一步：创建样式表文件newstyle.css </HEAD> 第二步：把样式文件和网页关联
内嵌样式-6 特殊的选择器
<HEAD> <STYLE type="text/css"> HTML选择器 A { /*设置超链接不带下划线 设置超链接不带下划线*/ 设置超链接不带下划线 color: blue; text-decoration: none; /*文本修饰：无*/ 文本修饰： 文本修饰 } 特殊的伪类：A代表超链接，hover代表鼠标悬停 A:hover {/*鼠标在超链接上方停留时，带下划线 */ 鼠标在超链接上方停留时， 鼠标在超链接上方停留时 color: red; text-decoration:underline; /*文本修饰：下划线 文本修饰： 文本修饰 下划线*/ } </STYLE> HEAD> <BODY> <A href=“a.htm" >俺是超链接，移过来我就显示下划线 俺是超链接， 俺是超链接 移过来我就显示下划线</A> </BODY> </HTML>
HTML选择器
应用P样式
内嵌样式-4 class类选择器
<HEAD> <STYLE type="text/css"> CLASS类选择器 .myinput { border: 1px solid; border-color:#D4BFFF; color:#2A00FF } 类选择器的定义格式为： </STYLE> .类名 </HEAD> { <BODY> …样式规则; <FORM > } <P>用户名 <INPUT name="textfield" type="text" class="myinput"></P> <P>密 码 <INPUT name="textfield" type="password" class="myinput"> </P> <P> <INPUT type="submit" name="Submit" value=" 重 填 "> <INPUT type="submit" name="Submit" value=" 提 交 "> </P>
CSS 选择器
含义及作用
通过CSS选择器定位哪些HTML元素需要应用样式，及应用哪些样 式。
选择器分类
基本选择器 复合选择器 特殊选择器
基本选择器
<span id="title" class="myClass">author</span> Html标记选择器 span { font-size : 20px; }
href = ”样式表文件.css” >
样式文件： 样式文件： newstyle.css P { ….. }
第三步：浏览查看各网页
Onel.htm
another.htm
演示： 演示：链接样式表示例 样式表示例
导入外部样式表
使用@import导入 ，语法： <HEAD> <STYLE TYPE="text/css"> @ import 样式表文件.css; </STYLE> </HEAD>
特殊选择器
超链接标签<a>拥有特殊类型的选择器
a{} 为所有的超链接标签设置样式 a:link{} 普通状态下的超链接样式 a:visited{} 已经点击过的超链接样式 a:hover{} 鼠标经过该超链接时的样式 a:active{} 鼠标点击超链接时的样式
常用的样式属性
属性 颜色 文本属性 CSS名称 color font-size font-family text-align 边框属性 (用于表 单元素) 定位属性 (position) border-style border-width border-color top left width height z-index 字体大小 字体 文本对齐 边框样式 边框宽度 边框颜色 顶部边距（上边距） 左边距 宽度 高度 z 轴索引号，用于层 说明
行内样式 某个HTML标签 对于某个HTML标签： 1）如果有多种样式，如果规定 的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行 内样式表显示，如果没有，再 考虑内嵌样式显示，如果还没 有，最后采用外面样式表显示， 否则就按HTML的默认样式显示；
<DIV> 层标签
…关键代码… <DIV id="Layer1" style="position:absolute; left:149px; top:110px; width:357px; height:87px; z-index:1; " > <IMG src="talk.gif" width="91" height="76"> <P>Z-index=1，我是第一层，我是容器，包含图片段落</P> </DIV> <DIV id="Layer2" style=“….; z-index:2; …."> <IMG src="bbs_logo.gif" width="101" height="43"> <P>Z-index=2，我是第二层，包含图片和段落 </P> </DIV>…
应用类选择器： class＝”类名“
内嵌样式-5 ID选择器
<HEAD> <STYLE TYPE="text/css"> #fire ID选择器 { color:red; font-size: 24px; } </STYLE> ID选择器的定义格式为： ＃ID名 { …样式规则; }
</HEAD> 应用ID选择器：ID＝”ID名“ <BODY> <H2 ID="fire">我是二级标题，火是这样的 我是二级标题， 我是二级标题 火是这样的</H2> <P ID ="fire">我是段落，火是这样的 我是段落， 我是段落 火是这样的</P> </BODY>
HTML&XHTML
（1）XHTML解决HTML语言所存在的严重制约其发展的问题。HTML发展到今天存 在三个 主要缺点：不能适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直 接显示HTML；由于HTML代码不规范、臃肿，浏览器需 要足够智能和庞大才能够正确显示 HTML；数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML。因此HTML需要 发展才能解决这个问题，于 是W3C又制定了XHTML，XHTML是HTML向XML过度的一个桥梁。 （2）XML是web发展的趋 势，所以人们急切的希望加入XML的潮流中。XHTML是当前替 代HTML4标记语言的标准，使用XHTML 1.0，只要你小心遵守一些简单规则，就可以设计出既 适合XML系统，又适合当前大部分HTML浏览器的页面。这个意思就是说，你可以立刻设计使 用 XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到 XML。 （3）使用XHTML的另一个优势是：它非常严密。当前网络上的HTML的糟糕情况让人震惊， 早期的浏览器接受私有的HTML标签，所以人们在页面设 计完毕后必须使用各种浏览器来检测 页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览 器。 （4）XHTML是能与其它基 于XML的标记语言、应用程序及协议进行良好的交互工作。 （5）XHTML是Web标准 家族的一部分，能很好在无线设备等其它用户代理上。 （6）在网站设计方 面，XHTML可助你去掉表现层代码的恶习，帮助你养成标记校验来测 试页面工作的习惯
样式的混合使用
行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常 常 需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某张网页内，部分内容”与众不同“，采用行内样式
外部样式文件
内嵌样式
内嵌样式-2 选择器
根据选择器的不同，内嵌样式又分为： HTML 选择器 CLASS 类选择器 ID 选择器
内嵌样式-3 HTML选择器
/*--关键代码--*/ <HEAD> <STYLE type="text/css"> P { /*设置样式：字体和背景色*/ font-family: System; font-size: 18px; color: #3333CC; } H2 { background-color: #CCFF33; text-align: center; } </STYLE> </HEAD> <BODY> <H2>品种特征方面：</H2> <P> 1、蛋鱼：蛋鱼…….。</P> 应用H2样式 <P> 2、龙睛：龙睛……..。</P> <P> 3、高头：高头….。</P>
. myClass { color : #4499ee ; } ID选择器
#title { font-family : "幼圆" }
类别选择器
复合选择器
“交集”选择器 div.divClass {……} div#divId {……} “并集”选择器 div, h1#htitle, p.pClass {……} 后代选择器 div h1#htitle div, h1#htitle, p.pClass {……}
CSS概述 概述
目 录
※ CSS是什么 ※ 为什么要使用CSS ※ CSS 中盒状模型 ※ CSS语法 ※ 引入CSS的4种方式 ※ CSS选择器 ※ CSS的继承和优先级 ※ 常见样式介绍 ※ 学习方法
需要具备的基础知识
在继续学习之前，你需要对下面的知识有基本的了解：
HTML XHTML
HTML&XHTML
层叠(级联)样式表 定义如何显示HTML 元素. 属于标记语 言,它不需要编译,可以直接由浏览器执行(属于浏览器解 释型语言).
• HTML 标签原本被设计为用于定义文档内容。 • HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格 ”之类的信息。 • 不断地有新的 HTML 标签和属性（比如字体标签和颜色属性）添 加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点 变得越来越困难。 • 为了解决这个问题，万维网联盟（W3C)，肩负起了 HTML 标准化 的使命，并在 HTML 4.0 之外创造出样式（Style）。 所有的主流浏览器均支持层叠样式表。
HTML: HTML是一种基本的WEB网页设计语言 XHTML: XHTML是一种为适应XML而重新改造的HTML。当XML越来越 成为一种趋势，就出现了这样一个问题：如果我们有了XML，我们 是否依然需要 HTML?为了回答这个问题，1998年5月我们在旧金山 开了两天的工作会议，会议的结论是：需要。我们依然需要使用 HTML。因为大量的人们已经习惯使 用HTML来作为他们的设计语 言，而且，已经有数以百万计的页面是采用HTML编写的。
引入CSS的4种方式
行内引入 <p style="样式代码">段落文本</p> 内嵌引入 <style type="text/css" >样式代码</style> 外部导入 <style type="text/css">@import "样式文件url"; </style> 外部链接
<link href="样式文件url " rel="stylesheet" type="text/css" />
HTML&XHTML
以下是 XHTML 相对 HTML 的几大区别： XHTML 要求正确嵌套 XHTML 所有元素必须关闭 XHTML 区分大小写 XHTML 属性值要用双引号 XHTML 用 id 属性代替 name 属性 XHTML 特殊字符的处理
CSS (Cascading Style Sheets)
为什么要使用CSS
CSS使页面结构和表现分离，使页面结构清晰，载入更快； CSS使设计师在修改设计时更有效率，而代价更低； CSS使整个站点保持视觉的一致性； CSS使站点对浏览者更具亲和力； 在世界上越来越多人采用 Web 标准时，掌握CSS可以提高设计师 的职场竞争实力。
CSS 语法
CSS 语法由三部分构成：选择器、属性和值 语法由三部分构成：选择器、 CSS 对空格和大小写不敏感 selector {property: value;[property: value;]…} 示例: p { color : red; font-weight : bold; } #dataCell { text-align : center; }
外部样式 根据样式文件与网页的关联方式又分为：
链接（LINK ）外部样式表 导入（import）外部样式表样式文件 P
{ ….. }
网页1
网页2
网wenku.baidu.com3
链接外部样式表
使用LINK（链接）标签 ，语法： <HEAD> <LINK rel = “stylesheet” type = ”text/css” 第一步：创建样式表文件newstyle.css </HEAD> 第二步：把样式文件和网页关联
内嵌样式-6 特殊的选择器
<HEAD> <STYLE type="text/css"> HTML选择器 A { /*设置超链接不带下划线 设置超链接不带下划线*/ 设置超链接不带下划线 color: blue; text-decoration: none; /*文本修饰：无*/ 文本修饰： 文本修饰 } 特殊的伪类：A代表超链接，hover代表鼠标悬停 A:hover {/*鼠标在超链接上方停留时，带下划线 */ 鼠标在超链接上方停留时， 鼠标在超链接上方停留时 color: red; text-decoration:underline; /*文本修饰：下划线 文本修饰： 文本修饰 下划线*/ } </STYLE> HEAD> <BODY> <A href=“a.htm" >俺是超链接，移过来我就显示下划线 俺是超链接， 俺是超链接 移过来我就显示下划线</A> </BODY> </HTML>
HTML选择器
应用P样式
内嵌样式-4 class类选择器
<HEAD> <STYLE type="text/css"> CLASS类选择器 .myinput { border: 1px solid; border-color:#D4BFFF; color:#2A00FF } 类选择器的定义格式为： </STYLE> .类名 </HEAD> { <BODY> …样式规则; <FORM > } <P>用户名 <INPUT name="textfield" type="text" class="myinput"></P> <P>密 码 <INPUT name="textfield" type="password" class="myinput"> </P> <P> <INPUT type="submit" name="Submit" value=" 重 填 "> <INPUT type="submit" name="Submit" value=" 提 交 "> </P>
CSS 选择器
含义及作用
通过CSS选择器定位哪些HTML元素需要应用样式，及应用哪些样 式。
选择器分类
基本选择器 复合选择器 特殊选择器
基本选择器
<span id="title" class="myClass">author</span> Html标记选择器 span { font-size : 20px; }
href = ”样式表文件.css” >
样式文件： 样式文件： newstyle.css P { ….. }
第三步：浏览查看各网页
Onel.htm
another.htm
演示： 演示：链接样式表示例 样式表示例
导入外部样式表
使用@import导入 ，语法： <HEAD> <STYLE TYPE="text/css"> @ import 样式表文件.css; </STYLE> </HEAD>
特殊选择器
超链接标签<a>拥有特殊类型的选择器
a{} 为所有的超链接标签设置样式 a:link{} 普通状态下的超链接样式 a:visited{} 已经点击过的超链接样式 a:hover{} 鼠标经过该超链接时的样式 a:active{} 鼠标点击超链接时的样式
常用的样式属性
属性 颜色 文本属性 CSS名称 color font-size font-family text-align 边框属性 (用于表 单元素) 定位属性 (position) border-style border-width border-color top left width height z-index 字体大小 字体 文本对齐 边框样式 边框宽度 边框颜色 顶部边距（上边距） 左边距 宽度 高度 z 轴索引号，用于层 说明
行内样式 某个HTML标签 对于某个HTML标签： 1）如果有多种样式，如果规定 的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行 内样式表显示，如果没有，再 考虑内嵌样式显示，如果还没 有，最后采用外面样式表显示， 否则就按HTML的默认样式显示；
<DIV> 层标签
…关键代码… <DIV id="Layer1" style="position:absolute; left:149px; top:110px; width:357px; height:87px; z-index:1; " > <IMG src="talk.gif" width="91" height="76"> <P>Z-index=1，我是第一层，我是容器，包含图片段落</P> </DIV> <DIV id="Layer2" style=“….; z-index:2; …."> <IMG src="bbs_logo.gif" width="101" height="43"> <P>Z-index=2，我是第二层，包含图片和段落 </P> </DIV>…
应用类选择器： class＝”类名“
内嵌样式-5 ID选择器
<HEAD> <STYLE TYPE="text/css"> #fire ID选择器 { color:red; font-size: 24px; } </STYLE> ID选择器的定义格式为： ＃ID名 { …样式规则; }
</HEAD> 应用ID选择器：ID＝”ID名“ <BODY> <H2 ID="fire">我是二级标题，火是这样的 我是二级标题， 我是二级标题 火是这样的</H2> <P ID ="fire">我是段落，火是这样的 我是段落， 我是段落 火是这样的</P> </BODY>
HTML&XHTML
（1）XHTML解决HTML语言所存在的严重制约其发展的问题。HTML发展到今天存 在三个 主要缺点：不能适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直 接显示HTML；由于HTML代码不规范、臃肿，浏览器需 要足够智能和庞大才能够正确显示 HTML；数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML。因此HTML需要 发展才能解决这个问题，于 是W3C又制定了XHTML，XHTML是HTML向XML过度的一个桥梁。 （2）XML是web发展的趋 势，所以人们急切的希望加入XML的潮流中。XHTML是当前替 代HTML4标记语言的标准，使用XHTML 1.0，只要你小心遵守一些简单规则，就可以设计出既 适合XML系统，又适合当前大部分HTML浏览器的页面。这个意思就是说，你可以立刻设计使 用 XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到 XML。 （3）使用XHTML的另一个优势是：它非常严密。当前网络上的HTML的糟糕情况让人震惊， 早期的浏览器接受私有的HTML标签，所以人们在页面设 计完毕后必须使用各种浏览器来检测 页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览 器。 （4）XHTML是能与其它基 于XML的标记语言、应用程序及协议进行良好的交互工作。 （5）XHTML是Web标准 家族的一部分，能很好在无线设备等其它用户代理上。 （6）在网站设计方 面，XHTML可助你去掉表现层代码的恶习，帮助你养成标记校验来测 试页面工作的习惯