Web开发技术—CSS

1、ASP.netASP.net程序设计程序设计第3章 CSS主要内容CSS概述CSS语法CSS选择器CSS样式CSS盒模型及定位3.1 CSS概述CSS (C Cascading S Style S Sheets)即层叠样式表，主要用其定义HTML元素的显示方式。在HTML文档中使用CSS定义元素样式，很好地解决了页面显示内容和表现形式的分离问题，提高了HTML页面的工作效率。HTML标签主要用于定义文档内容，如果需要对于网页内容进行显示格式的调整，可以在标签中增加属性设置以满足要求，但是这种修改方法收到标签位置和内容的限制，给页面表现形式的修改增加了困难。若在主页制作时采用CSS技术，可以有效

2、地对页面的布局、字体、颜色、背景和其它效果实现更加精确的整体控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者多个网页的外观和格式。3.1.1 CSS历史网页设计最初使用HTML标签来定义网页文档以及格式的，通过使用 、 这样的标签，HTML通过浏览器可以表达“标题”、“段落”、“表格”等信息内容和格式。但是这种格式表达样式单一，不能够满足更多的文档样式需求。而两种主要的浏览器（Netscape 和 Internet Explorer），为了丰富网页的现实内容和效果，不断地将新的 HTML 标签和属性添加到 HTML 规范中，这使得文档中的内容要清晰地独立于文档表现层变

3、得越来越困难。为了解决这些问题，万维网联盟（W3C），在 HTML之外创造出样式（Style）。样式主要用于定义如何显示 HTML 元素，我们将独立于样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。1997年W3C在颁布HTML标准的同时公布了第一个层叠样式标准CSS1。在这个版本中，已经包含了font的相关属性、颜色和背景的相关属性、box的相关属性等。1998年5月发布了CSS2版本，样式得到了进一步的充实，并且开始使用样式表结构。现在所使用的CSS版本基本都是在这个版本的基础上发展起来的。2004年2月

4、正式推出了CSS2.1。它在CSS2的基础上作了一定的修改，删除了部分不被浏览器支持的属性。2010年推出CSS3。3.1.2 CSS的创建现在所有的主流浏览器均支持层叠样式表。样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。如果再HTML文档中一个元素被不止一个样式定义时，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中：浏览器缺省设置外部样式表内部样式表（位于 标签内部）内联样式（在 HTML 元素内部）因此，内联样式（在 HTML 元素内部）拥

5、有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。插入样式表的方法有以下三种：一、外部样式表外部样式表适合于需要应用于很多页面的样式的定义。当在一个网站的文档中使用外部样式表时，可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到外部样式表。 标签应定义在文档的标签中。语法格式如下： 其中href用于指定要引用的css文件的路径，使得浏览器会从该css文件中读取样式声明，并根据它来格式文档。外部样式表应该保存在以.css为扩展名的文件中，该文件内容可以在任何文本编辑器中进行编辑，但文件不能包含任何的 h

6、tml 标签。二、内部样式表内部样式表适合于在单个文档中使用的特殊样式。可以通过标签进行定义，应该放在标签中。语法格式如下： 样式定义 三、内联样式内联样式适用于只在某个元素上使用一次的样式的定义。这种样式的定义和内容混杂在一起，失去了样式表的许多优势，因此不建议大量使用。要使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。例如：用户名：四：多重样式如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。3.2 CSS语法CSS基本语法结构：selector declaration1; declaratio

7、n2; . declarationN;其中，selector表示选择器，用来表示该样式表要修饰的HTML元素，在之后的大括号中可以添加一条或多条声明，每条声明的基本结构为“property: value; ”，property表示属性，value为该属性的取值。请注意：1、如果属性值由若干单词构成，则应该给属性值加引号：、属性值可以有多种表示方法。3、CSS 对大小写不敏感，但是，如果与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。4、注意每个属性声明后面应该加分号，如果不加，在解释这个样式时会无法解释这条属性的声明以及下一条属性的声明。5、可以对于选择器进行分组。

8、6、CSS 继承是指在设置了父级选择器的CSS样式后，该选择器以下的子级都默认使用此样式。一般只有文字文本具有继承特性，如文字大小、文字粗细、文字颜色、字体等。3.3 CSS选择器选择器是CSS基本格式中的重要组成部分，它指明了样式表中格式的设置对象，也明确了样式表的使用方式。在样式表的应用过程当中，要根据选择器的不同类型进行格式引用。3.3.1 派生选择器派生选择器也称为上下文选择器，可以通过上下文关系来定义某个HTML元素的样式。语法格式：父标签 子标签属性：属性值；3.3.2 id 选择器id选择器是为定义的样式指定id，要为某个HTML元素设置这种样式，则需要在该元素标签中设置id属性

9、值为该样式id。id 选择器语法格式为：#id名属性：属性值；3.3.3类选择器语法格式如下：在 CSS 中，类选择器以一个点号显示：.类选择器名属性：属性值；这种选择器的一个重要特点是以点号开始。3.3.4属性选择器CSS中的属性选择器可以对带有指定属性的 HTML 元素设置样式，其基本语法格式如下：属性名属性：属性值；3.3.5 通配符选择器通配符选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，基本语法格式如下：*属性：属性值；3.3.6 元素选择器元素选择器是CSS中最基本的选择器，也是最常用的选择器。例如：pcolor:red;back

10、ground-color:#efefef;font-size:20px;3.4 CSS样式3.4.1 文字样式文本属性主要用来对文本格式进行设置，例如修改文本的颜色、文本字体、字符间距、文本对齐方式、文本缩进方式等。下面做些具体介绍。属性功能font-family设置字体系列，可以是通用字体系列和特定字体系列。font-size设置字体的尺寸，单位可以是px、em或百分比。font-style设置字体风格，可取值为normal、italic（斜体）和oblique（倾斜）。font-variant以小型大写字体或者正常字体显示文本，可取值为normal、small-caps或inherit。f

11、ont-weight设置字体的粗细，可取值为normal、bold（粗体）和整数值（100-900）。1、文字字体有关文字字体的设置如下：2、文字颜色。修改文字颜色可以使用color属性，例如：pfont-size:30px;color:red;例如：30px红色文字。效果如下：3、文本缩进方式。Web页面上的段落可以像word中的文档一样设置文本的缩进状态，这需要使用到CSS提供的text-indent 属性。text-indent 属性可以使元素的第一行实现缩进效果，一般来说，所有块级元素都可以应用 text-indent属性，但是该属性无法应用于行内元素以及图像等的替换元素。例1.首行缩

12、进：p text-indent: 2em;一个段落可以有多行构成，通常设置首行缩进两个汉字。效果如下：4、对齐方式。设置水平对齐方式使用text-align属性，它具有五个属性值，如下：left，表示左边对其；right，表示右对齐；center，表示文本居中对齐；justify，表示两端对齐；inherit，表示应该从父元素继承 text-align 属性的值。例如：h1text-align:center;文本居中对齐效果如下：5、字符间距。CSS中使用word-spacing 属性来修改字（由空白符包围的一个字符串）间距，也就是修改单词之间的距离。其默认值为normal即使用标准间距（0）

13、，若使用正值，则表示增大间距，若使用负值，则表示减小间距。例如：h1.looseword-spacing:1em;h1.tightword-spacing:-5px;Increasing the word spacingReduce the word spacing效果如下：6、字符转换Web页面中的英文字母在现实中往往有些特殊规定，比如全部使用大写、单词首字母大写等等，这给HTML文档编写带来了麻烦，一旦输入不符合格式要求，显示也就跟着出错，为了避免这种情况，可以使用text-transform属性处理文本的大小写。text-transform属性具有以下几个属性值：none，表示不对文本做

14、任何修改；uppercase，表示将文本全部转换为大写字母；lowercase，表示将文本全部转换为小写字母；capitalize，表示每个单词的首字母大写。例如：h1 text-transform: capitalize;this is a title.效果如下：7、文本修饰。利用text-decoration属性可以对文本进行简单地修饰。该属性的常用属性值如下：none，表示不添加任何修饰；underline，表示添加下划线；overline，表示添加上划线；line-through，表示添加删除线；blink，表示添加文本闪烁效果。例如：p.underlinetext-decoratio

15、n:underline;带有下划线的文本段落。效果如下：8、文本方向。为了显示不同阅读习惯的文本，可以使用direction属性修改文字方向。direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的为止。direction 属性有两个值：ltr 和 rtl。ltr表示从左到右显示文本，rtl表示从右到左显示文本。例如：punicode-bidi:bidi-override;direction:rtl;这是一个从右到左显示的段落。效果如下：3.4.2 列表与表格样式1、CSS列表样式设置。通常我们在向他人讲解某个问题时，总是要

16、列举几个重要的条目，这就形成了列表。可以通过列表样式的设置，使得列表更加醒目、清晰。（1）列表类型列表分为有序列表（）和无需列表（），在有序和无序列表中又有很多种类。有序列表通过左侧的编号字符来区别类型，主要类型有：disc（实心圆）、circle（空心圆）、square（实心方块）；而无序列表则通过列表左侧的项目符号图标来区别类型，主要类型有：decimal（数字）、decimal-leading-zero（0开头的数字，如01, 02, 03），lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大

17、写英文字母）、lower-greek（小写希腊字母）等。（2）列表项图像和列表标志位置。有时，常规的标志不能够满足我们的格式需求，可以考虑使用图像来作为项目标志，这种效果可以利用list-style-image属性达到。还可以通过list-style-position属性控制标志出现在列表项内容之外还是内容内部。例如：ullist-style-image:url(1.ico);list-style-position:inside;项目1项目2效果如下：2、CSS表格样式设置。使用CSS表格属性可以美化表格的外观。属性属性描述描述width设置元素的宽度。height设置元素的高度。text-a

18、lign设置表格文本的水平对齐方式，取值为left、right和center。vertical-align设置表格文本的垂直对齐方式，取值为top、bottom和middle。padding设置表格中内容与边框的距离。color设置文本颜色。background-color设置背景颜色。border设置边框属性。border-collapse设置是否把表格边框合并为单一的边框，取值为separate、collapse和inherit。border-spacing设置分隔单元格边框的距离，可使用两个值分别表示水平间距和垂直间距。caption-side设置表格标题的位置，取值为top、bottom和inherit。IE8以上支持该属性。empty-cells设置是否显示表格中的空单元格，取值为hide、show和inherit。table-layout设置显示单元、行和列的算法，取值为automatic、fixed和inherit。3.4