下载掌阅APP，畅读海量书库
立即打开
2-2 网页的样式控制（style属性）
HTML 5定义的标记告诉了浏览器需要在网页中显示怎样的文字或控件，而这些文件或控件的外观样式通常需要使用标记的style属性或CSS进行控制。
在HTML 5中，所有有关样式的设置都可以由标记的style属性来完成。其一般格式如下。
其中常用的参数有以下几个。
background-color：用于设置背景颜色。
color：用于设置网页中文字的颜色。
font-family：用于设置网页中文字的字体。
font-size：用于设置网页中文字的大小。
text-align：用于设置文本的对齐方式。
例如，在Visual Studio网站中添加一个新HTML页，并输入以下所示的HTML 5代码，按〈F5〉键启动网页，在浏览器中将得到如图2-6所示的效果。
图2-6 使用style设置文本样式
需要注意以下两点。
1）HTML 5规定无论文字中间的连续空格有多少个，都按一个空格处理。若需要在文字间显示多个连续的空格，应使用若干个普通空格替代符“ ”或使用全角空格替代符“ ”。为了提高代码的可读性，即便只需要显示一个空格，也应使用“ ”或“ ”来表示。
2）设置颜色时可以使用颜色值，也可以使用颜色名称。在Visual Studio源视图中编写代码时，可以使用其智能提示在打开的下拉列表框中选择需要的颜色名称。常用颜色的名称及对应的颜色值见表2-5。
表2-5 HTML 5中常用颜色的名称及对应的颜色值
前面介绍过使用元素的style属性控制HTML 5元素的样式，这种方式称为“内联式”，其优点是直观、方便。但缺点也十分突出，如果页面中有多个元素需要使用相同的样式，就需要进行多次书写，修改也十分麻烦。
串联样式表（Cascading Style Sheets，CSS），也称为级联样式表或层叠样式表，简称为样式表，是一种将页面元素样式设置集中化的方法， 引入CSS的主要目的就是实现将页面结构与页面外观表现分离 。CSS目前的最高版本是CSS 3，它较之前的版本有很大的改进。本书由于篇幅所限，所述内容仅包含了部分CSS 3的新特性，有兴趣的读者可自行参阅相关资料。
在设计由众多页面组成的网站时，设计页面外观样式会占据开发人员大量的时间，特别是网页设计完成后，各种颜色的搭配及不同页面的外观一致性要求往往会给后期维护工作带来较大的负担，而使用CSS则可以很好地解决这一问题。除了“内联式”，CSS还规定了“嵌入式”和“外部链接式”两种定义样式的方法。
1.嵌入式
所谓“嵌入式”样式控制，是将页面中所有样式控制代码集中放置在<head></head>标记之间，其语法格式如下。
选择器用于说明后面的样式设置对哪一部分起作用。选择器可以是网页中现有标记名称、ID和CSS类等。关于选择器的分类和使用方法将在后面进行详细介绍。
使用嵌入式样式定义方法，网页代码可书写成如下格式。
与内联式相比，嵌入式使代码简洁了许多，而且需要修改样式时只要修改<style></style>中的内容即可。但嵌入式的“集中控制”仅局限在当前网页中，无法将样式定义应用到整个网站包含的所有网页中。
2.外部链接式
所谓“外部链接式”样式控制，是将样式控制代码单独存放在一个以.css为扩展名的级联样式表文件内，再通过<link>标记引用其中对样式的定义。
（1）<link>标记
.css文件的内容就是嵌入式定义中<style>和</style>之间的样式定义部分，<link>标记的语法格式如下。
说明：rel属性是Relations的缩写，rel=＂stylesheet＂的含义是，将当前文档关联到一个级联样式表文件。href属性指示了被关联文件的名称，如果.css文件没有存放在当前目录中，应写出文件所在的URL（可以是本地站点，也可以是外部站点）。
显然，使用外部链接样式控制可以将样式定义应用到更为广泛的范围，这给结构复杂、页面众多的大型网站的设计带来了很大方便。
（2）样式定义的优先级
如果网页中既有内联式和嵌入式样式定义，又有外部链接式样式定义，而且这3种定义中还存在针对某特定元素的定义冲突， 浏览器将采用“就近使用”的优先原则，即采用与该元素位置最近的样式定义。
显然，内联式样式定义在任何情况下都最靠近元素位置，所以其优先级是最高的，也就是说，内联式样式定义将覆盖嵌入式和外部链接式样式定义。而对于嵌入式和外部链接式样式定义的优先级，要看<link>标记和<style>标记哪一个更靠近元素的位置。
需要注意的是，前面谈到的 “覆盖”只有在定义发生冲突时才会出现，如果低优先级和高优先级定义的内容没有冲突，则二者同时有效。 例如，嵌入式样式定义中设置了文字的颜色和大小，而内联式样式定义仅设置了文字的大小，则文字大小由内联式样式定义决定，而颜色仍由嵌入式样式定义决定。
选择器是CSS 3的一个重要内容，是一种集中设置页面元素样式的方式。使用选择器可以大幅度提高网页设计效率，便于网页的调试和修改。
1.类型选择器
“类型选择器”也称为“标记选择器”或“标签选择器”，它是以网页中现有标记为名称的选择器，用于统一设置某种标记的样式。例如，下列代码中table、tr和td为类型选择器，用于设置网页中所有表格（table）、表格行（tr）和单元格（td）的样式。代码运行结果如图2-7所示。
图2-7 代码运行结果
2.ID选择器和类选择器
为了使相同的网页元素具有不同的外观设置，可以通过指定元素ID名称并以该ID值为选择器设置样式。ID选择器书写时必须以“#”开头。
类选择器通过类名称指定一组样式设置，网页中的元素通过引用该类来应用这些样式设置。类选择器书写时必须以“.”开头。
例如，下列代码通过ID选择器和类选择器对3个图片元素进行样式设置，运行结果如图2-8所示。
图2-8 ID选择器和类选择器示例
类选择器img_r中的max-width和max-height是针对图片元素所在容器的div而言的，也就是说，图片自动缩放最大占满div的范围，而div的大小及显示位置由类选择器imgdiv决定（层采用绝对定位方式；距页面顶端20px；距页面左端520px；层大小为宽100px，高71px）。
3.包含选择器和组群选择器
包含选择器用于设置某元素下面子元素的样式。例如，下列代码使用包含选择器设置<div>标记下所有<a>子标记的字号为36px，字体为黑体。
如果希望div标记下的所有子标记都采用上述设置，可将代码改写成如下形式。
群组选择器可以对若干个不同元素进行统一的样式设置。例如，下列代码使用群组选择器使body、ul、li、a和p这几个元素具有相同的样式（内外边距均为0）。
4.属性选择器
属性选择器可以根据元素是否具有某个属性或属性是否具有某个特定值来决定是否对其应用指定的样式。CSS 3中属性选择器常用的格式有以下几种。
【 演练2-1 】属性选择器使用示例。
启动Visual Studio，选择“文件”→“新建”→“网站”命令，以“ex2-1”为名称新建一个ASP.NET空网站。在解决方案资源管理器中右击网站名称，在弹出的快捷菜单中选择“添加”→“HTML页”命令，以“Default”为文件名向网站中添加一个静态网页文件。
图2-9 代码运行结果
按如下所示编辑HTML代码，运行后得到如图2-9所示的结果。
说明：本例需要使用两个表示Word和PowerPoint文档的图标文件，可从Internet中下载并调整为20×20px大小，复制到网站文件夹中。超链接的目标文件可以是任意的Word文档和PowerPoint演示文稿（文件名必须是Word.docx和PPT.pptx），同样需要复制到网站文件夹中。
5.伪类选择器
“伪类选择器”也称为“虚类选择器”，它是在前面介绍的各种选择器的基础上，进一步添加“伪类”来控制特定标记样式设置的方法，其语法格式如下。
伪类选择器中最常用的是关于超链接的样式设置，举例如下。
盒模型（Box Model）是CSS 3用于指定网页元素应该如何呈现的一个重要概念。所有CSS 3的样式规定都与盒模型相关。
1.盒模型的概念
在网页设计中， 每个元素都可以理解成一个由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成的矩形框 。它们之间的关系如图2-10所示。
图2-10 W3C标准中CSS 3盒模型的示意图
从图2-10中可以看出下列关系。
包围content、padding、border和margin区域的外部矩形分别被称为content-box、padding-box、border-box和margin-box。
2.内外边距和盒大小
在实际应用中，使用最多的是外边距（margin）和内边距（padding）的设置。此外，还可以通过设置盒尺寸box-sizing来控制元素内容的宽和高。
（1）外边距（margin）
margin属性用于设置元素4个方向的外边距（margin-left、margin-right、margin-top和margin-bottom），它控制着环绕元素的矩形区域与相邻元素之间的距离。
需要注意以下两点。
1）margin-left和margin-right对所有元素都起作用，而margin-top和margin-bottom仅对块级元素（如p、h1～h6、div、table、tr和td等）起作用。
2）margin属性通常使用像素（px）作为尺寸单位，也可以设置为auto或百分比值，甚至可以设置成负值。
margin属性的常见用法如下。
（2）内边距（padding）
padding属性用于设置元素内部与元素边框之间4个方向的距离（padding-left、padding-right、padding-top和padding-bottom）。padding属性可以使用px、auto或百分比作为单位，但不能使用负值。padding属性的常见使用方法与margin十分相似，这里不再赘述。
（3）盒大小（box-sizing）
box-sizing属性主要用于设置元素的边界盒宽度和高度，以便使其以适当的大小适应某个区域的内容。box-sizing常用的取值有content-box（默认）和border-box。
content-box表示元素的宽度和高度为content的宽度和高度，padding和border不包含在内。例如，下列代码表示应用样式类class1的元素内容盒的宽度为200px，内边距为10px，使用蓝色实线边框。
代码表示元素的实际总宽度为：左右内边距20px（10+10）+左右边框10px（5+5）+内容宽度200px=230px。
下列语句省略了box-sizing属性，则默认box-sizing为content-box，故与上面的语句等效。
border-box表示content、padding和border都包含于元素的width和height中。下列代码表示元素的实际总宽度就是200px。
3.盒区域显示特效
在CSS 3中可以使用border-radius属性设置边框的圆角效果，使用border-image属性设置区域的图像边框效果，使用box-shadow属性设置区域的阴影效果。
（1）border-radius属性
CSS 3中提供了关于圆角边框的4个单独属性：border-top-left-radius（左上角）、border-top-right-radius（右上角）、border-bottom-right-radius（右下角）和border-bottom-left-radius（左下角）。每一个角都由水平半径和垂直半径两个值来表示，水平半径不等于垂直半径时为一个椭圆角，如图2-11所示。若属性值只有1个，则表示水平和垂直半径相等（圆角）。
图2-11 椭圆角示意
（2）border-image属性
CSS 3的border-image属性可以使用图像文件作为区域的边框，并自动将该图像分割为9部分进行处理，无须额外编写代码。其语法格式如下。
其中，val1～val4分别表示对图像进行分割时的上、右、下、左边距的大小。
（3）box-shadow属性
在CSS 3中使用box-shadow属性可为区域添加阴影效果。其语法格式如下。
其中，length1～length3表示阴影离开区域的横向距离、纵向距离和阴影的模糊半径；color表示阴影的颜色值。
【 演练2-2 】盒区域显示特效示例。
启动Visual Studio，选择“文件”→“新建”→“网站”命令，以“ex2-2”为名称新建一个ASP.NET空网站。在解决方案资源管理器中右击网站名称，在弹出的快捷菜单中选择“添加”→“HTML页”命令，以Default为文件名向网站中添加一个静态网页文件。
按照如下所示编辑HTML代码，运行后得到如图2-12所示的结果。
图2-12 盒区域的圆角和阴影效果
在Visual Studio 2015中，程序员可以十分方便地借助系统提供的各种工具，完成页面元素样式设置和布局的设计工作。通过前面的介绍可以知道，外部链接式样式控制是大型网站设计时首选的样式控制方式。在Visual Studio中可以像添加其他类型文件一样向网站中添加CSS样式表。
新建一个空白CSS样式表的操作步骤如下。
在解决方案资源管理器中右击网站名称，在弹出的快捷菜单中选择“添加”→“样式表”命令，在弹出的对话框中指定样式表文件名（默认名称为“StyleSheet.css”），然后单击“添加”按钮。
一个新的CSS样式表创建后，系统将自动切换到其代码编辑窗口（系统已自动创建了一个body{}空样式），程序员可根据需要依据前面介绍过的相关知识，借助Visual Studio提供的智能提示功能编辑该样式表文件。
如果希望将在其他环境（如Windows记事本、Dreamweaver等）中设计完毕的CSS样式表应用到当前网站某网页中（.html或.aspx），可以在解决方案资源管理器中将该样式表文件（.css）拖动到页面源视图的<head>标记和</head>标记之间，也可以将样式表拖动到页面设计视图窗口。拖动操作完成后，系统将自动在<head>标记和</head>标记之间添以下代码。
其中，××××为拖动到页面中的CSS样式表文件名。
如果希望使用的CSS文件是从其他位置复制到当前ASP.NET网站中的，需要在解决方案资源管理器中右击网站名称，在弹出的快捷菜单中选择“刷新文件夹”命令才能看到该文件，进而完成拖动操作。