Web开发及人机交互导论 实验三 CSS+DIV基础
Posted 上山打老虎D
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web开发及人机交互导论 实验三 CSS+DIV基础相关的知识，希望对你有一定的参考价值。
一、实验目的
1.掌握CSS基本概念、CSS类型及4种CSS样式定义的方法。
2.理解DIV的概念。
3.掌握DIV的属性设置方法。
4.学会使用CSS+DIV进行页面布局设计。
二、实验环境
Windows10系统下的H Builder X
三、实验步骤
项目1：CSS四种样式的引用
四种样式表的引用，分别为：
（1）行内样式表引用
（2）内部样式表引用
（3）链入外部样式表引用
（4）导入外部样式表引用
下面将通过这四种引用，实现如样例图示所示的网页设计。
（1）行内样式表引用
行内样式表即通过标记的style属性来进行直接设置,行内样式表优先级最高，代码块如下：
显示效果如下图：
此时，即将格式直接写入到div中因此有最高的优先级，即如果与其他样式发生冲突，默认会选用内嵌样式表的内容。
（2）内部样式表引用
内部样式表是在html的head标记中通过style标记来定义的，本实验中讲通过浅蓝色背景部分和深绿色部分进行展示：
①浅蓝色背景：
通过对<body>标签中<background>属性进行修改，可以实现对背景颜色的定义，具体代码实现如下：
②深绿色部分：
这部分与①不同，不直接对<div>标签进行定义，而通过对class的定义间接进行定义，具体代码实现如下：
其中，上方的代码在<style>标签中完成了对背景颜色和两个class的定义，分别设置了背景的颜色、两个class的颜色和相应的大小。
显示效果如下图：
（3）链入外部样式表引用
顾名思义，链入外部样式即独立于html文件之外的css文件。链入样式表通过link标记的href 属性加载外部样式表文件，样式表文件名必须带后缀. css,否则不能加载,同时对type、rel属性进行设置。格式为：<link type=“text/css” rel=“stylesheet” href=“css1.css”/>。其中，“href”等号后为要链入的css文件的相对路径。只有保证路径的正确，才能成功链入相应的css文件，这是必不可少的。
①编写css文件：
想要链入css文件，则必须先定义一个css文件。因此，我们新建一个css文件，并进行层和段落样式的定义，具体代码如下：
②将写好的css文件链入：
在链入并创建的过程中，自动补全会显示出已经成功定义的内容，观察已经定义的“div3”就可以发现已经才css1.css（刚才编写的css文件）中定义，表示已经成功链入写好的css文件。
具体代码如下：
显示效果如下：
（4）导入外部样式表引用。
导入外部样式表与（3）相类似，一样也需要提前准备一个css文件。但不同之处在于可以使用其他网站上面的css样式进行导入。在导入时，要使用@import url(“”)。其中双引号内的为本地css文件的相对地址或者提供css样式网页的网址。
①编写css文件：
想要导入css文件，则必须先定义一个css文件或使用网页的css样式。在此，我们新建一个本地css文件，并对文本框，图片以及区块的背景进行class定义，具体代码如下：
②导入css文件：
这里必须要注意，import必须在第一行，否则将出现错误。
将css导入，并配置其他元素后即可实现样例所要求的。具体代码如下：
显示效果如下：
项目一全部代码如下：
主页面：
两个css文件：
总显示效果：
项目2：CSS+DIV页面布局设计
（1）margin属性
通过对网络上页面的分析，我们可以得出，margin实际上是两个盒子之间的内容，其定义方式为margin: “a” “b” “c” “d”，其中，abcd分别表示按顺时针顺序的上右下左四个方向的距离。样例里，每一部分处理方式都相同，下面就以实现头部信息区和导航信息区作实例进行演示，具体代码实现如下：
我们注意到由于图例的示范中，在头部信息区与导航信息区之间存在空隔，因此我们要定义两个行内样式表，并在两个行内样式表中进行定义并实现相应的功能。具体显示效果如下：
（2）float属性
由于四个样式图例中均含有左右分部的部分。如效果一第三行、效果二的第二行里的蓝色和浅蓝色的排列。这里就需要用到float属性，其定义方式为float: a; 其中a里填需要悬浮到的位置（left、right或none）。下面通过对效果二的第二行的实现来进一步演示：
显示效果：
（3）padding属性
padding属性是对文本内容和文本框之间间隔的属性，在这四种效果中，第四种效果需要用到该属性。padding的格式与margin基本一样，四个参数表示相应与顺时针上右下左四个方向的距离。具体实现如下：
显示结果如下：
在对每部分元素的定义时，采用了引入本地css文件的形式，css文件内容如下：
不难发现，这种在css文件中进行定义，而不是在主页面文件中直接定义的方法可以使对各个元素格式的定义更清晰，大大提高代码的可读性。
四、结果与分析
（1）在四种引入方式中，实现的优先级为 行内样式表>内部样式表>链入外部样式表>导入外部样式表。
（2）可以采用不同的clear元素，产生不同的页面效果。
（3）在定义部分形状的大小时如果不采用多少像素，而采用百分之多少去定义，页面的缩放将不会影响具体的比例。
（4）可以在自动代码补全的下拉菜单中观察，否已经成功导（链）入相应的css文件，并且可以在该下拉菜单中查看到是在哪个css文件中定义了该元素。
五、心得体会
（1）在编写页面时如果使用导入外部css文件进行格式编辑，将提高代码的可读性，也能是代码更美观，让对格式的修改更简单清晰。
（2）使用padding和margin这类元素时要注意四个参数的值，要养成一边微调一边观察的习惯。
（3）对格式等定义不清楚，在实验过程中，由于不清楚定义边框的格式，反复调试很长时间才得到解决。
（4）与单调的页面相比，这样采用多种盒子进行的设计，使得页面更美观。更能吸引读者去阅读。
以上是关于Web开发及人机交互导论 实验三 CSS+DIV基础的主要内容，如果未能解决你的问题，请参考以下文章