《商务网站设计与开发》课件第03章 层叠样式表.pptx

1、 CSS简介3.1 选择符3.2 CSS的层叠性与优先次序3.3 常用属性及其应用实例3.4 CSS盒子模型和网页布局方式3.5 思考题3.6层叠样式表（Cascaing Style Sheet，简称为CSS）是W3C组织所拟定出的一套标准的样式语言规范。随着CSS技术技术的使用，HTML页面真正“活动”了起来。而在HTML 5中，一些纯粹用作显示效果的元素将取消，因为它们显示效果的工作更适合由CSS来担当。作为一种用于网页展示的样式语言，CSS增加了更多的样式定义方式来辅助HTML语言。通过CSS样式表的定义，只要设定某种元素（如：表格、背景、连结、文字、按钮、滚动条等）的样式，则各网页相同

2、种类的元素将会呈现出相同的风格。这种方式不仅加快了网站开发的进度，而且便于建立一个风格统一的网站。CSS的定义可以直接放在HTML元素中，称为内联样式。形式如下：This is a paragraph.CSS的定义可以放在HTML文件的元素中，称为内部样式表。形式如下：body background-color:yellow;CSS的定义也可以独立保存在一个扩展名为.css的文件中，通过链接的方式包含入网页中，称为外部样式表。形式如下：一条CSS规则中包括两个部分：一个选择符（selector）和一个或多个描述（declaration），描述之间用分号隔开。每一个描述中又包含属性名（prope

3、rty）和属性值（value）。语法如下：selector property:value;property:value;.下面的CSS规则中声明了段落元素的显式方式，包括文本居中、黑色、arial字体。CSS中的注释在“/*”和“*/”之间。p text-align:center;color:black;font-family:arial;在这个例子中，p是选择符，text-align、color和font-family是属性，并为这些属性设置了相应的属性值。（1）类选择符选择符可以是一种HTML元素，例如“p”、“table”等，这些可以看作是HTML预定义的类。例如下面的CSS规则：bod

4、y background:#fff;margin:0;padding:0;p color:#ff0000;应用了上述CSS的HTML文档中所有的元素（虽然只可能有一个）和所有的元素都将无需声明而自动遵守上述的CSS规则。（2）子类选择符选择符可以是一种HTML元素的一部分实例，可以理解为基于该类元素（基类）的一个子类。例如下面的CSS规则：td.fancy background:#666;p.rchild text-align:right在HTML应用上述CSS规则时，必须声明元素的class为某个子类。例如下面代码：ABCp标记中的内容如果在定义子类时没有给出基类的名称，则可认为它是任何基类

5、的子类。例如下面的CSS规则：.cchild text-align:center（3）嵌套类选择符选择符可以是根据元素之间的嵌套关系而确定的类，嵌套关系也可以理解为上下文关系。例如下面的CSS规则和相应的HTML代码：td a text-align:center;File A File B File C上述CSS规则意味着：只有在单元格中的超链接才会应用文字居中的样式，而其它的超链接则会忽略这一规则。（4）id选择符选择符可以是HTML文档中的一个特定元素，例如用“id”属性标识的某一个段落。这些可以看作是HTML元素类的实例对象。例如下面的CSS规则和相应的HTML代码：#red color

6、:red;#green color:green;这个段落是红色。这个段落是绿色。id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。（5）伪类与伪元素选择符CSS 伪类（Pseudo-class）用于向某些选择器添加特殊的效果。使用伪类选择符的语法如下：selector:pseudo-class property:value;伪类伪类描述描述:active向被激活的元素添加样式。:hover当鼠标悬浮在元素上方时，向元素添加样式。:link向未被访问的链接添加样式。:visited向已被访问的链接添加样式。下面代码给出了伪类用于超链接的显式效果，

7、在不同的状态下超链接的颜色不同：a:link color:#FF0000;/*未访问的超链接*/a:visited color:#00FF00;/*已访问的超链接*/a:hover color:#FF00FF;/*鼠标位于超链接之上*/a:active color:#0000FF;/*鼠标在超链接上按键*/这是一个由伪类装饰的超链接（6）选择符分组 如果需要将多个类或id设置成相同的样式，我们可以对多个选择符进行分组设置。被分组的选择符用逗号隔开，共享相同的声明。下面的例子中所有的标题元素都会以绿色进行显示，而段落和表格中的字体也被一起设定为9pt大小。h1,h2,h3,h4,h5,h6 co

8、lor:green;p,table font-size:9pt CSS允许以多种方式规定样式信息，包括内联样式、内部样式表、外部样式表等。如果在同一个HTML文档内部以不同的方式应用了多个CSS的定义，且对同一个HTML元素存在不止一次样式定义时，浏览器会使用哪个样式呢？通常，这些来源不同的样式将根据一定的优先规则层叠于一个虚拟样式表中，且其优先顺序从高到低为：n 内联样式（在 HTML 元素内部定义样式）n 内部样式表（在HTML文档头部元素中定义样式）n 外部样式表（在HTML文档头部元素中链接CSS文件）n 浏览器默认设置（每个浏览器都对各种元素有默认的显示样式）CSS文本属性n 在CS

9、S中，文本属性可定义文本的外观，如，改变文本的颜色、对齐文本、装饰文本、对文本进行缩进等。属性属性描述描述color设置文本的颜色text-indent规定文本块首行的缩进text-align对齐元素中的文本word-spacing设置字间距letter-spacing设置字符间距text-transform控制元素中的字母text-decoration向文本添加修饰white-space设置元素中空白的处理方式direction设置文本方向 p line-height:0.5;text-indent:1cm;h1 text-decoration:overline;h2 text-decora

10、tion:line-through;h3 text-decoration:underline;h4 text-decoration:blink;h5 letter-spacing:20px;清明 作者：杜牧 清明时节雨纷纷，路上行人欲断魂。借问酒家何处有，牧童遥指杏花村。CSS表格属性n CSS样式表中允许设置表格的属性，以确定表格的布局。属性属性描述描述border-collapse设置是否把表格边框合并为单一的边框border-spacing设置分隔单元格边框的距离caption-side设置表格标题的位置empty-cells设置是否现实表格中的空单元格table-layout设置显示单

11、元，行和列的算法盒子模型对于CSS控制页面起着举足轻重的作用。熟练掌握盒子模型，以及盒子模型各个属性的含义和应用方法后，就可以轻松地控制页面中每个元素的位置。下面将介绍盒子模型的概念及其属性的含义和使用方法。CSS中盒子模型用于描述一个为HTML元素形成的矩形盒子。盒子模型是由margin（边界）、border（边框）、padding（空白）和content（内容）4个属性组成。CSS的定位功能n 在网页设计中，能否控制到各个模块在页面中的位置非常关键。这些模块只有放置在正确的位置，网页的布局看起来才够美观。网页中的各种元素都必须有自己合理的位置，才能搭建出整个页面的结构。n 使用CSS的定位

12、功能，可以相对地、绝对地或者固定地对任何一个元素进行定位。在文本流中，任何一个元素都被文本流设置了其自身的位置，但通过CSS的定位就可以改变这些元素的位置。可以通过某个元素的上、下、左、右移动对其进行相对定位。进行相对定位后，虽然元素的表现区脱离了文本流，但在文本流内却为该元素保留一块空间位置，这个位置不能随着文本流的移动而移动。CSS的定位方式l 在CSS中对元素的定位，可以通过position属性设置。是所有元素定位的默认值，无特殊定位，对象遵循HTML定位规则，不能通过z-index进行层次分级。static参数相对定位。对象不可层叠，可以通过left、right、bottom、top等

13、属性指定该元素在正常文档流中的偏移位置，可以通过z-index进行层次分级。relative参数绝对定位。脱离文档流，通过left、right、bottom、top等属性进行定位。选取其最近的父级定位元素，当父级元素的position为static时，该元素将以body坐标原点进行定位，可以通过z-index进行层次分级。absolute参数固定定位。该参数固定的对象是可视窗口，而并非body或父级元素，可通过z-index进行层次分级。fixed参数将元素的top属性设置为20px，则元素将移动到原位置顶部下方20像素的地方；同时，将该元素的left设置为30px，则该元素将向右移动30像素

14、，效果如图3-5所示。#box_relative position:relative;left:30px;top:20px;绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，文本流中其它元素的布局就像绝对定位的元素不存在一样。#box_relative position:absolute;left:30px;top:20px;常见的网页排版模块图（1）CSS文本属性可以设置文字的样式，HTML中的文本元素也可以对文字样式进行设置。试比较这两种方式的主要不同之处。（2）CSS的层叠性是如何体现的，试举例说明。（3）从软件工程的角度来分析，用CSS进行网页显示样式的设计有何优点。（4）简述CSS盒子模型的主要思路。