人机交互原理及应用第三次实验报告
引言
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
层叠样式表(英文全称：Cascading Style Sheets 缩写：CSS)是一种用来表现HTML等文件样式的 计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页个元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。学习了HTML，便不可避免地要继续学习CSS。
过程
第一步：了解CSS
由于HTML的标签只对部分元素进行编辑，网页元素多需要一个个编辑就显得繁琐。CSS则是将同样类型的格式进行声明，同类型的元素便可以利用CSS进行相同的格式化，这样提高了工作效率。对于编辑的格式有一个优先次序：内联样式（在HTML元素内部）>内部样式表(位于<head>标签内部)>外部样式表>浏览器缺省设置。我们在这里仅使用外部样式表。
首先，要使用css可以在<head>标签中链接外部文件
link
接下来要了解的是怎样定义样式表。CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。此处仅解释四种选择器：派生选择器、id选择器、类选择器、属性选择器。至于其他具体语法则与html类似。
派生选择器：通过一句元素在其位置的上下文关系来定义样式。
派生选择器
id选择器：为标有特定id的HTML元素指定特定的样式。id选择器以"#"来定义。
id选择器
类选择器：以一个点号显示
类选择器
属性选择器：对带有指定属性的HTML元素设置样式
属性选择器
第二步：简单应用
我们尝试一下对简单的文本进行编辑。
简单应用（1）
简单应用（2）
简单应用（效果）
第三步：进阶应用
css可以为每个部分设置位置，配合html中的<div>可以对页面进行排版，而不是单纯地从上到下阅读。
效果
将要组织的部分设置为<div>，在css中设置宽度和高度，然后利用float属性，就可以使内容并排显示。注意调整分块宽度，达到想要的效果。若超出页面宽度则将分两行显示。margin为外边框，padding为内边框。给予分块之间一定的留白才能方便阅读，突出重点。
并列显示（1）
注：图片也可使用float属性，在文字旁装饰图片也能使网页更加美观。
CSS也可优化其他的元素。以下是对列表元素的优化。
列表优化
效果
第四步：完善网页
css只是辅助网页的工具，最终还是要回到对HTML的编辑来。
最终效果
总结
css作为工具功能完善强大，层叠样式表有助于实现负责任的Web设计。CSS对开发者构建Web站点的影响很大，并且这种影响可能是无止境的。将网页的大部分甚至是全部的表示信息从HTML文件中移出，并将它们保留在一个样式表中有诸多优点，如降低文件大小、节省网络带宽以及易于维护等。此外，站点的表现信息和核心内容相分离，使得站点的设计人员能够在短暂的时间内对整个网站进行各种各样的修改。
CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。只要修改保存着网站格式的CSS样式表文件就町以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。这就避免了一个个网页的修改，大大减少了工作量。
网友评论