快速导航
第三章 设计Web页面
3.1 HTML和CSS
3.1.1 同时使用HTML和CSS的原因
就像Web Forms和MVC致力的那样，HTML和CSS同时使用正是为了将内容和显示分离，HTML告诉浏览器该显示什么，而CSS定义了显示的方式。
3.1.2 CSS简介
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
当工作在.aspx页面中时，有两种不同的视图可用：设计模式和源代码模式。
Ctrl+F5：运行但不进入调试，可以在浏览器中查看输出。
3.2 CSS的更多内容
3.2.1 选择器
- 类型选择器
- 类选择器
- id选择器
- 通用选择器
- 组合选择器
3.2.2 属性
每个HTML元素都有其宽高属性：
-
content：元素内容
-
padding：内部元素与边框之间的距离。
-
border：边框厚度
-
margin：边框外边缘与相邻元素之间的距离。
盒子模型分W3C标准盒模型和IE盒子模型两种：
box-sizing: content-box默认是W3C盒子模型，width指content部分的宽度。box-sizing: border-box是IE盒子模型，width表示content+padding+border这三个部分的宽度。
3.2.3 样式的优先级
网站自己有自己的样式，浏览器也有内置样式，甚至，用户也可以通过浏览器创建样式表，应用到访问的每个页面上。譬如在IE中选择Internet选项，如下所示：
其他浏览器也有自己的方式添加用户样式表。
浏览器的样式有5种来源，如下图所示：
浏览器按以下规则确定如何显示内容：
- 叠加：找到所有样式，把零散部分合并到一起，如上图所示，从上到下权重依次降低。
- 覆盖：对于相同的规则，权重最高的生效，如果权重都一样，取最后声明的规则。
3.3 样式表
3.3.1 页面中添加CSS
将CSS样式表独立出来之后，在head中添加link标签，除了href代表CSS所在路径外，仍然需要rel属性，用来声明该文件是什么类型，其它属性如type或者media可以省略不写。
3.3.2 内联样式
每个HTML元素都有一个style属性，可以直接添加样式，这种样式就被称为内联样式，然而这种样式非常难以维护并且复用性不高。
<div style='color:blue'>
This is an inline style.
</div>
3.4 应用样式
在设计模式中，上方的工具栏中有一个格式化工具栏：
在第一个下拉框中选择"应用新样式"，可以跳转到相应的样式设计框，选择需要的样式确定即可：
顶部"视图"菜单中有三个适用于设计模式下的选项：标尺和网格、视觉辅助和格式化标记：
3.5 管理样式
我们将以第一章约定好的图书馆示例程序来演示接下来的操作：
- 删除Content目录中的Site.css文件。
- 删除Default.aspx文件。
- 在Content目录下新增一个新的CSS文件，命名为main。
- 在项目下添加一个新的Web Form，命名为Default。
- 将默认的form标签删除，在body标签内添加以下内容：
<body>
<h1>am informative text title.</h1>
I am informative text.
<h2>I am product title.</h2>
I am product text.
</body>
- 接下来我们从格式工具栏中，选择"应用新样式"，选择器选成body，位置选成"现有样式表"，url选成"Content/main.css"。font-family我们选Arial，font-size为medium，如下图所示：
- 在源代码模式下，在head标签中添加对main.css的引用：
<link href="Content/main.css" rel="stylesheet" />
- 我们再用上面同样的方式，为main.css创建一个类样式".title"，将font-family设置为Cambria，并在源代码中，为h1和h2添加title类。
<h1 class='title'>am informative text title.</h1>
I am informative text.
<h2 class='title'>I am product title.</h2>
I am product text.
- 然后我们再新建一个"label"类样式，如下所示：
.label{
font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
}
- 你可以将其他文本放入div标签中，并指定类为"label"：
<h1 class="title">I am informative text title.</h1>
<div class="label">I am informative text.</div>
<h2 class="title">I am product title.</h2>
<div class="label">I am product text.</div>
- 另外，你可能已经发现label类和title类里使用了同样的font-family，你可以合并他们：
.title, .label{
font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
}
3.6 练习
- .intro p、p .intro和p, .intro有什么区别？
- 外边距和内边距对元素有不同的影响，如果要拉伸元素的边框，使用哪个比较好？
- 页面上如何访问外部样式表中的样式？
- VS提供了哪些工具帮助开发人员管理网页样式？