第三章 CSS样式表_语法规则
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
伪类选择器
在IE浏览器中，CSS中通过设置伪类来控 制链接的样式
特殊的伪类选择器
<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>
所有的段落都采用 P 样 式，保证样式统一
外部样式
根据样式文件与网页的关联方式又分为：
链接（LINK ）外部样式表 导入（import）外部样式表
样式文件 P { ….. }
网页1
网页2
网页3
链接外部样式表 使用LINK（链接）标签 ，语法： <HEAD> <LINK rel = “stylesheet” type = ”text/css” 样式表文件.css” > </HEAD>
ID选择器
#green{ font-size:30px; /* 字体大小 */ color:yellow; /* 颜色 */ } 网页中调用：<p id="yellow">ID选择器</p>
声明 声明
#id
{
color: yellow ; 属性 值
font-size: 30px; 属性 值
}
ID 选择器
交集选择器
h3
.special
h3 , .special
h1, h2, h3, h4, h2.special, .special, #one, p{ /*并集选择器*/ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ }
后代选择器
最外层是<p>标记，里面嵌套了<span>标记， <span>标记中又嵌套了<b>标记，则称<span> 是<p>的子元素，<b>是<span>的子元素。 p span{ /* 嵌套声明 */ color:red; /* 颜色 */ } 后代选择器的使用非常广泛，不仅标记选择器可 以以这种方式组合，类别选择器和ID选择器都可 以进行嵌套。
仅使用HTML定 “结构”的页面 效果
“Web标准”概述
使用CSS设定样式之后的效果
构造CSS规则
在具体介绍CSS之前，先思考一个生活中的问题。 张飞 { 身高:185cm; 这个表实际上是由 体重:105kg; 3个要素组成的， 性别:男; 即姓名、属性和属 性格:暴躁; 性值。 民族:汉族; }
构造CSS规则
CSS的作用就是设置网页的各个组成部分的表现 形式。 因此，如果把上面的表格换成描述网页上一个标 题的属性表，可以设想应该大致如下： 2级标题{ 字体:宋体; 大小:15像素; 颜色:红色; 装饰:下划线 }
构造CSS规则
再进一步，如果把上面的表格用英语写出来： h2{ font-family: 宋体; font-size:15px; color: red; text-decoration: underline; }
“Web标准”概述
由于传统的图书是固定的，不能变化的，因此它 不存在“行为”。 在一个网页中，同样可以分为若干个组成部分， 包括各级标题、正文段落、各种列表结构等，这 就构成了一个网页的“结构”。 每种组成部分的字号、字体和颜色等属性就构成 了它的“表现”。 网页和传统媒体不同的一点是，它是可以随时变 化的，而且可以和读者互动，因此如何变化以及 如何交互，就称为它的“行为”。
font-size: 20px; 属性 值
}
类别选择器
class类选择器
<HEAD> <STYLE type="text/css">
.myinput
{
CLASS类选择器
border: 1px solid; border-color:#D4BFFF; color:#2A00FF } 类选择器的定义格式为： </STYLE> .类名 </HEAD> { <BODY> 应用类选择器： …样式规则; <FORM > class＝”类名“ } <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>
WEB基础
CSS样式表CSS样式表-语法规则 样式表
目标
网页的基础概念 Web标准 Web标准 构造CSS CSS规则 构造CSS规则 基本CSS CSS选择器 基本CSS选择器 在网页中添加CSS CSS的方法 在网页中添加CSS的方法 复合选择器 CSS的继承特性 CSS的继承特性
网页的基础概念
复合选择器
交集选择器 并集选择器 后代选择器
交集选择器
类别名称 声明 声明
h3.class
{
color: red; 属性 值
font-size: 23px; 属性 值
}
标记
选择器
h3
h3.special
.special
交集选择器
p{ color:blue; } p.special{ color:red; } .special{ color:green; }
“Web标准”概述
因此，概括来说，“结构”决定了网页“是什 么”，“表现”决定了网页看起来是“什么样 子”，而“行为”决定了网页“做什么”。 “结构”、“表现”和“行为”分别对应于3种非 常常用的技术，即 (X) HTML、CSS和 JavaScript。 也就是说，(X) HTML用来决定网页的结构和内容， CSS用来设定网页的表现样式，JavaScript用来 控制网页的行为。
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 =“water”>我是段落，水是这样的 我是段落， 我是段落 水是这样的</P> </BODY>
“Web标准”概述
“结构”、“表现”和“行为”的关系
DHTML 简介
“Web标准”概述
DHTML 是制作动态 HTML 页面的技术！ 是制作动态 页面的技术！
DHTML =
HTML
+
层叠样式表 CSS
+
脚本语言 JavaScript
指定一个网页 的元素
决定元素的大小 颜色和位置
操纵网页的元素
“Web标准”概述
在网页中添加CSS的方法
Байду номын сангаас
1 2 3 4
行内样式 内嵌样式 链接样式 导入样式
行内样式
您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内 样式”。行内样式使用元素标签的 STYLE 属性定义。 /*－－关键代码--*/ <p>剩余时间：成交结束<BR> 新旧程度：全新 <BR> 所 在 地：北京 <BR> 宝贝数量：5 件 <BR> 浏 览 量：220 次</p> <p style=“color:#FF00FF; font-family:隶书; fontweight:bold; font-size:24px"> 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以 </p>
内嵌样式
<HTML> 行内样式表局限于某个标签，如果希望本网页内的所以 <HEAD> 同类标签都采用统一样式，这时应采用内嵌样式。 <TITLE>应用样式</TITLE> <STYLE TYPE="text/css" > P 选择器 { font-size:20px; 样式规则 color:blue; 样式表 text-align:center } 用分号隔开 </STYLE> </HEAD> <BODY> <P>我是段落 1</P> <P>我是段落 2</P> <P>我是段落 3</P> <P>我们的样式绝对统一</P> </BODY> </HTML>
构造CSS规则
CSS的思想就是首先指定对什么“对象”进行设 置，然后指定对该对象的哪个方面的“属性”进 行设置，最后给出该设置的“值”。 因此，概括来说，CSS就是由3个基本部分—— “对象”、“属性”和“值”组成的。
基本CSS选择器
1 2 3 4 5
CSS选择器的构成 选择器的构成 标签选择器 类选择器 ID选择器 选择器 超链接伪类选择器
/* 标记选择器 */
/* 标记.类选择器 */ /* 红色 */ /* 类选择器 */
交集选择器
<body> <p>普通段落文本（蓝色）</p> <h3>普通标题文本（黑色）</h3> <p class="special">指定了.special类别的段 落文本（红色）</p> <h3 class="special">指定了.special类别的标 题文本（绿色）</h3> </body>
后代选择器
.special i{ color: red; } /* 使用了属性special的标记里面包含的<i> */ #one li{ padding-left:5px; } /* ID为one的标记里面包含的<li> */ td.out .inside strong{ font-size: 16px; } /* 多层嵌套，同样实用 */ 上面的第3行使用了3层嵌套，实际上更多层的嵌 套在语法上都是允许的。
HTML选择器
应用H2样式 应用P样式
类选择器
.red{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ } 网页中调用：<p class=“green”>class选择器 </p>
类别名称 .class 声明 声明
{
color: green; 属性 值
CSS选择器的构成
标签选择器
h1{ color: red; font-size: 25px; }
声明 声明
h1
{
co lo r: red ; 属性 值
fo n t-size: 2 5 p x ; 属性 值
}
选择器
HTM标签选择器
/*--关键代码--*/ <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> <P> 2、龙睛：龙睛……..。</P> <P> 3、高头：高头….。</P>
使用浏览器软件显示网页
Web标准
1 标准的重要性 2 “Web标准”概述 标准” 标准
网页相关的技术走入实用阶段仅短 短十几年的时间，就发生了很多重要的 变化。 其中最重要的一点是“Web标准” 这一理念被广泛地接受。
“Web标准”概述
下面介绍关于网页的标准——“Web标准”。 网页主要由3个部分组成： 结构（Structure） 表现（Presentation） 行为（Behavior） 用一本书来比喻，一本书分为篇、章、节和段落 等部分，这就构成了一本书的“结构”，而每个 组成部分用什么字体、什么字号、什么颜色等， 就称为这本书的“表现”。