0_2CSS样式表.ppt

1、CSS样式表,WEB基础,单元目标,网页的基础概念 Web标准 构造CSS规则 基本CSS选择器 在网页中添加CSS的方法 复合选择器 CSS的继承特性 背景样式的控制 文本样式的控制 图像样式的控制 网页中的导航 超级链接的控制 鼠标指针的控制 列表的控制 表格的控制 表单元素的控制,1.1 网页的基础概念,使用浏览器软件显示网页,1.2 Web标准,1.2.1标准的重要性 1.2.2 “Web标准”概述,1.2.1 标准的重要性,网页相关的技术走入实用阶段仅短短十几年的时间，就发生了很多重要的变化。 其中最重要的一点是“Web标准”这一理念被广泛地接受。,1.2.2 “Web标准”概述,下

2、面介绍关于网页的标准“Web标准”。 网页主要由3个部分组成： 结构（Structure） 表现（Presentation） 行为（Behavior） 用一本书来比喻，一本书分为篇、章、节和段落等部分，这就构成了一本书的“结构”，而每个组成部分用什么字体、什么字号、什么颜色等，就称为这本书的“表现”。,1.2.2 “Web标准”概述,由于传统的图书是固定的，不能变化的，因此它不存在“行为”。 在一个网页中，同样可以分为若干个组成部分，包括各级标题、正文段落、各种列表结构等，这就构成了一个网页的“结构”。 每种组成部分的字号、字体和颜色等属性就构成了它的“表现”。 网页和传统媒体不同的一点是，它

3、是可以随时变化的，而且可以和读者互动，因此如何变化以及如何交互，就称为它的“行为”。,1.2.2 “Web标准”概述,因此，概括来说，“结构”决定了网页“是什么”，“表现”决定了网页看起来是“什么样子”，而“行为”决定了网页“做什么”。 “结构”、“表现”和“行为”分别对应于3种非常常用的技术，即(X)HTML、CSS和JavaScript。 也就是说，(X)HTML用来决定网页的结构和内容，CSS用来设定网页的表现样式，JavaScript用来控制网页的行为。,“结构”、“表现”和“行为”的关系,1.2.2 “Web标准”概述,仅使用HTML定“结构”的页面效果,1.2.2 “Web标准”概

4、述,使用CSS设定样式之后的效果,1.2.2 “Web标准”概述,1.3 构造CSS规则,在具体介绍CSS之前，先思考一个生活中的问题。 张飞 身高:185cm; 体重:105kg; 性别:男; 性格:暴躁; 民族:汉族; ,这个表实际上是由3个要素组成的，即姓名、属性和属性值。,1.3 构造CSS规则,CSS的作用就是设置网页的各个组成部分的表现形式。 因此，如果把上面的表格换成描述网页上一个标题的属性表，可以设想应该大致如下： 2级标题 字体:宋体; 大小:15像素; 颜色:红色; 装饰:下划线 ,1.3 构造CSS规则,再进一步，如果把上面的表格用英语写出来： h2 font-famil

5、y: 宋体; font-size:15px; color: red; text-decoration: underline; ,1.3 构造CSS规则,CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。 因此，概括来说，CSS就是由3个基本部分“对象”、“属性”和“值”组成的。,1.4 基本CSS选择器,1.4.1CSS选择器的构成 1.4.2 标签选择器 1.4.3 类选择器 1.4.4 ID选择器,1.4.1 CSS选择器的构成,1.4.2 标签选择器,h1 color: red; font-size: 25px; ,1.

6、4.3 类选择器,.red color:green;/* 绿色 */ font-size:20px; /* 文字大小 */ 网页中调用：class选择器,1.4.4 ID选择器,#green font-size:30px; /* 字体大小 */ color:yellow;/* 颜色 */ 网页中调用：ID选择器,1.5 在网页中添加CSS的方法,1.5.1行内样式 1.5.2 内嵌样式 1.5.3 链接样式 1.5.4 导入样式,1.5.1 行内样式,行内样式是把样式表作为标签的属性直接书写在标签内部。 关于层叠样式表 层叠样式表 (CSS) 是一系列格式规则，它们控制网页内容的外观。使用 C

7、SS 样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。 ,1.5.2 内嵌样式,内嵌样式是把样式表作为一对“style”标签写在”head”标签内部。 ,1.5.3 链接样式,链接样式是把样式表作为个外部的css文件保存，并且使用“link”标签链接到当前页面中。 什么是IP地址 ,1.5.4 导入样式,导入样式是把样式表作为个外部的css文件保存，并且使用“import”属性链接到当前页面中，也可以在一个样式表中导入多个其他的样式表文件。 import url(sheet2.css); import url(sheet2.css); import url(sh

8、eet2.css); import sheet2.css; import sheet2.css; import sheet2.css;,1.6 复合选择器,1.6.1交集选择器 1.6.2并集选择器 1.6.3 后代选择器,1.6.1 交集选择器,1.6.1 交集选择器,p/* 标记选择器 */ color:blue; p.special/* 标记.类选择器 */ color:red;/* 红色 */ .special/* 类选择器 */ color:green; ,1.6.1 交集选择器, 普通段落文本（蓝色） 普通标题文本（黑色） 指定了.special类别的段落文本（红色） 指定了.sp

9、ecial类别的标题文本（绿色） ,1.6.2 并集选择器,h1, h2, h3, h4, h2.special, .special, #one, p/*并集选择器*/ color:purple;/* 文字颜色 */ font-size:15px;/* 字体大小 */ ,1.6.3 后代选择器,最外层是标记，里面嵌套了标记，标记中又嵌套了标记，则称是的子元素，是的子元素。 p span/* 嵌套声明 */ color:red;/* 颜色 */ 后代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套。,1.6.3 后代选择器,.special i col

10、or: red; /* 使用了属性special的标记里面包含的 */ #one li padding-left:5px; /* ID为one的标记里面包含的 */ td.out .inside strong font-size: 16px; /* 多层嵌套，同样实用 */ 上面的第3行使用了3层嵌套，实际上更多层的嵌套在语法上都是允许的。,1.7 CSS的继承特性,1.7 CSS的继承特性,1.8 背景样式的控制,1.8.1背景颜色 1.8.2 背景图像 1.8.3 背景图像平铺,1.8.1 背景颜色,在HTML中，设置网页的背景颜色利用的是标记中的bgcolor属性，而在CSS中不但可以设

11、置网页的背景颜色，还可以设置文字的背景颜色。 在CSS中，网页元素的背景颜色使用background-color属性来设置，属性值为某种颜色。,1.8.2 背景图像,设置背景图像，使用background-image属性实现。 仍然以上面的实例为基础，在CSS样式部分，增加如下样式代码： body background-image:url(bg.gif); ,1.8.3 背景图像平铺,在默认情况下，图像会自动向水平和竖直两个方向平铺。 如果不希望平铺，或者只希望沿着一个方向平铺，可以使用background-repeat属性来控制。该属性可以设置为以下4种之一： repeat：沿水平和竖直两个

12、方向平铺，这也是默认值。 no-repeat：不平铺，即只显示一次。 repeat-x：只沿水平方向平铺。 repeat-y：只沿竖直方向平铺。,课堂练习,制作网页背景图像效果 步骤 1、打开网页素材。 2、添加样式表并设置背景图像的效果。,1.9 文本样式的控制,1.9.1创建基础页面 1.9.2设置文字的字体 1.9.3 设置文字的倾斜效果 1.9.4设置文字的加粗效果 1.9.5转换英文字母大小写 1.9.6控制文字的大小 1.9.7设置文字装饰效果 1.9.8设置段落首行缩进 1.9.9设置字词间距 1.9.10设置段落内部的文字行高 1.9.11设置段落之间的距离 1.9.12控制文

13、本的水平位置 1.9.13设置文字与背景的颜色,1.9.1 创建基础页面,创建一个基本的网页,在HTML中，设置文字的字体需要通过标记的face属性。 而在CSS中，则使用font-family属性。针对上述网页，在样式部分增加对标记的样式设置如下： h1 font-family:黑体; p font-family: Arial, Times New Roman; ,1.9.2 设置文字的字体,1.9.3 设置文字的倾斜效果,正常字体与“意大利体”，及“倾斜体”的对比,1.9.3 设置文字的倾斜效果,CSS中的font-style属性正是用来控制字体倾斜的，它可以设置为“正常”、“意大利体”和

14、“倾斜”3种样式，分别如下： font-style:normal; font-style:italic; font-style:oblique;,然而遗憾的是，实际上大多数操作系统和浏览器还不能很好地实现非常精细的文字加粗设置，通常只能设置“正常”和“加粗”两种粗细，分别如下。 font-weight:normal /*正常*/ font-weight:bold /*加粗*/,1.9.4 设置文字的加粗效果,1.9.5 转换英文字母大小写,例如下面3个文字段落分别可以实现单词的首字母大写、所有字母大写和所有字母小写。 p.one text-transform:capitalize; /* 单词

15、首字母大写 */ p.two text-transform:uppercase; /* 全部大写 */ p.three text-transform:lowercase; /* 全部小写 */,1.9.6 控制文字的大小,p font-family: Arial, Times New Roman; font-size:12px; 字号单位可以是像素，也可以是em，1em=16px,1.9.7 设置文字装饰效果,text-decoration属性设置,1.9.8 设置段落首行缩进,Text-indent属性是以各种长度为属性值，为了缩进两个字的距离。 例如，对网页代码的p2段落进行如下设置： #

16、p2 text-indent:2em; ,1.9.8 设置段落首行缩进,这里再举一个不太常用的例子，如果希望首行不是缩进，而是凸出一定距离，也称为“悬挂缩进”，请看如下代码： #p2 padding-left:2em; text-indent:-2em; ,1.9.9 设置字词间距,在CSS中，可以通过letter-spacing和word-spacing这两个属性分别控制字母间距和单词间距。例如下面的代码： #p1 font-style:italic; text-transform:capitalize; word-spacing:10px; letter-spacing:-1px; ,1.

17、9.10 设置段落内部的文字行高,在HTML中是无法控制段落中行与行之间的距离的。 在CSS中，使用line-height可以控制行的高度，通过它就可以调整行与行之间的距离。,1.9.11 设置段落之间的距离,下面介绍如何控制段落之间的距离。 例如为标记增加一条CSS样式，目的是给两个段落分别增加1像素粗细的红色实线边框，代码如下： p border:1px red solid; margin:5px 0px; ,1.9.12 控制文本的水平位置,text-align属性设置,1.9.13 设置文字与背景的颜色,文字的各种颜色配合其他页面元素组成了整个五彩缤纷的页面，在CSS中文字颜色是通过c

18、olor属性设置的。 下面的几种方法都是将文字设置为蓝色，它们是完全等价的定义方法。 h3 color: blue; h3 color: #0000ff; h3 color: #00f; h3 color: rgb(0,0,255); h3 color: rgb(0%,0%,100%); ,1.9.13 设置文字与背景的颜色,第1种方式是使用颜色的英文名称作为属性值。 第2种方式是最常用一个6位的十六进制数值表示。 第3种方式是第2种方式的简写方式，形如#aabbcc的颜色值，就可以简写为#abc。 第4种方式是分别给出红绿蓝3种颜色分量的十进制数值。 第5种方式是分别给出红绿蓝3种颜色分量的

19、百分比。,1.10 图像样式的控制,1.10.1设置图像边框 1.10.2 样式表的边框属性 1.10.3 设置不同方向的边框属性 1.10.4 对象缩放 1.10.5 图文混排 1.10.6 图像的对齐方式 1.10.7 图文的垂直对齐方式,1.10.1 设置图像边框,在HTML中可以直接通过标记的border属性值为图像添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的粗细。当设置该值为0时，则显示为没有边框。 代码如下所示： 然而使用这种方法存在很大的限制，即所有的边框都只能是黑色，而且风格十分单一，都是实线，只是在边框粗细上能够进行调整。如果希望更换边框的颜色，或者换成虚线边框

20、，仅仅依靠XHTML是无法实现的。,1.10.2 样式表的边框属性,在CSS中可以通过边框属性为图像添加各式各样的边框。border-style用来定义边框的样式，如虚线、实线或点画线等。 在CSS中，一个边框由3个要素组成。 border-width（粗细）：可以使用各种CSS中的长度单位，最常用的是像素。 border-color（颜色）：可以使用各种合法的颜色来定义方式。 border-style（线型）：可以在一些预先定义好的线型中选择。,课堂练习,制作图像边框效果 步骤 1、打开网页素材。 2、添加样式表并设置图像的边框效果。,1.10.3 设置不同方向的边框属性,如果希望分别设置4

21、条边框的不同样式，在CSS中也是可以实现的，只需要分别设定border-left、border-right、border-top和border-bottom的样式即可，依次对应于左、右、上、下4条边框。 在使用时，依然是每条边框分别设置粗细、颜色和线型这3项。 例如，设置右边框的颜色，那么相应的属性就是border-right-color，因此这样的属性共有12（43=12）个。,1.10.4 对象缩放,如果可以通过设置宽度width和高度height属性来控制对象的宽度和高度，取值单位可以是像素也可以是百分比。,1.10.5 图文混排,Word中文字与图像有很多排版的方式，在网页中同样可以通

22、过CSS设置实现各种图文混排的效果。 文字环绕图像的方式在实际页面中的应用非常广泛，如果再配合内容、背景等多种手段便可以实现各种绚丽的效果。 在CSS中主要是通过给图像设置float属性来实现文字环绕。,课堂练习,制作图文混排效果 步骤 1、打开网页素材。 2、添加样式表并设置图文混排的效果。,课堂练习,制作图文混排效果 步骤 1、打开网页素材。 2、添加样式表并设置图文混排的效果。,1.10.6 图像的对齐方式,图像水平对齐的方式与上一章中文字水平对齐的方式基本相同，分为左、中、右3种。 不同的是图像的水平对齐通常不能直接通过设置图像的text-align属性，而是通过设置其父元素的该属性来

23、实现的，如下例所示。 ,1.10.7 图文的垂直对齐方式,默认的纵向对齐方式,1.10.7 图文的垂直对齐方式,默认的纵向对齐方式 由此可以得出结论，在默认情况下，行内的图像的最下端，将与同行的文字的基线对齐。 图像与文字基线对齐,1.10.7 图文的垂直对齐方式,要改变这种对齐方式，需要使用vertical-align属性。 此外，最经常用到应该是如何居中对齐。这时可以将vertical-align属性设置为middle。这个属性值的严格定义是，图像的下端与文字的基线加上文字高度的一半所在水平线对齐。,1.11 网页中的导航,在一个网站中，所有页面都会通过超链接相互链接在一起，这样才会形成一

24、个有机的网站。 因此在各种网站中，导航都是网页中最重要的组成部分之一。 因此，也出现了很多各式各样非常美观、实用性很强的导航样式，如图所示的是Microsoft公司关于Office的网站，上部的导航条和Office 2007软件风格非常一致。,1.11 网页中的导航,1.11 网页中的导航,下图所示的是Microsoft Windows Mobile，它的导航使用的是菜单方式。对于一些内容非常多的大型网站，导航就显得更重要。,1.12 超级链接的控制,1.12.1网页中的链接 1.12.2 伪类,1.12.1 网页中的链接,在XHTML语言中，超链接是通过标记来实现的，链接的具体地址则是利用标

25、记的href属性，代码如下： 网页顽主论坛,1.12.2 伪类,在IE浏览器中，CSS中通过设置伪类来控制链接的样式,课堂练习,制作网页交互按钮效果 步骤 1、制作网页中的内容。 2、添加样式表。,课堂练习,制作网页交互按钮效果 步骤 1、制作网页中的内容。 2、添加样式表。,1.13 鼠标指针的控制,1.14 列表的控制,1.14.1 设置列表的项目符号 1.14.2 设置图像项目符号,1.14.1 设置列表的项目符号,通常的项目列表主要采用或者标记，然后配合标记列出各个项目，简单的列表代码如下，其效果如图所示。,1.14.1 设置列表的项目符号,通过使用list-style-type属性来控制列表的项目符号类型。 disc : CSS1实心圆circle : CSS1空心圆square : CSS1实心方块decimal : CSS1阿拉伯数字lower-roman : CSS1小写罗马数字upper-roman : CSS1大写罗马数字lower-alpha : CSS1小写英文字母upper-alpha : CSS1大写英文字母none : CSS1不