《CSS初步教学步骤》由会员分享，可在线阅读，更多相关《CSS初步教学步骤(15页珍藏版)》请在人人文库网上搜索。
1、框架与基本(CSS+DIV)的教学步骤准备工作：(1)进入猫扑网，看一下别人的框架网页(2)新建一个站点，将教师提供的资料复制到图片文件夹下。教学目标：制作如下图所示的页面。一、框架1. 关于框架外层是框架集，叫Frameset。里面的是框架，叫Frame。一般根据位置自动命名为“topframe”。一般根据位置自动命名为“bottomframe”。这是最主要的框架，系统自动将最主要的框架命名为“main”，将其余两个框架自动命名为“framen”，其中“n”是数字。2. 建立框架并保存(1) 建立框架并讲解(2) 在框架中输入几个非常简单的汉字(3) 保存框架。3. 制作几个新页面及完成顶部。
2、框架、底部框架的制作(1) 讲解制作框架的目的：为了超链接(2) 制作三个最简单的新页面：gaogeng.htm、fangao.htm和dafengqi.html。(3) 在每个页面中加入画家的简介即可。(4) 在顶部框架中加入最简单的链接文字(5) 在底部框架中输入几个关于版权的文字。4. 完成框架的链接(1) 将各个画家链接到对应的页面；(2) 更改目标显示位置5. 完善页面：在各个画家页面中加入作者头像及作品要求其HTML格式为：完成后，要求在浏览器中观察各个对象的边距及排列情况。1) H1是否靠边2) Body是否靠边3) 段落文字的大小、颜色及靠边情况二、几个非常重要的知识点1. 盒。
3、子模型盒子模型是CSS控制时一个很重要的概念，只有很好地掌握了盒子模型以及其中各个元素的用法，才能真正地控制好页面中的各个元素。所有页面中的元素都可以看成是一个盒子，占据一定的页面空间。需要通过调整盒子的边框和距离等参数，来调节盒子的大小。(1) 结合下图，知晓padding，border，margin，content几个单词的含义bordermarginContent(内容)padding(2) width，height两个单词，特别提醒指的是content的高度和宽度(3) 模型黄色部分为实际内容，设置的width和height表示这一部分的宽和高。黄色部分为实际内容，设置的width和h。
4、eight表示这一部分的宽和高。黄色部分为实际内容，设置的width和height表示这一部分的宽和高。黄色部分为实际内容，设置的width和height表示这一部分的宽和高。padding-top padding-bottomborder-bottom border-top margin-bottom margin-top (4) 计算一个盒子在网页中实际占据的位置大小的计算方法是：宽度=内容的width+左右padding+左右border+左右margin高度=内容的height+上下padding+上下border+上下margin设置某盒子的参数如下：Width:200px;Heig。
5、ht:150px;Padding-top:15px;Padding-right:20px;Padding-bottom:18px;Padding-left:13px;(以上四句，可以简写为Padding:15px 20px 18px 13px;，按顺时针方向。)Border-top:3px solid red;Border-right:5px solid red;Border-bottom:8px solid red;Border-left:6px solid red;margin -top:6px;margin -right:7px;margin -bottom:12px;margin -l。
6、eft:4px;(以上四句，可以简写为margin:6px 7px 12px 4px;，按顺时针方向。)请计算：该盒子在网页中实际所占的宽度和高度。如其父盒子宽1000px，高度无限，请问一行可以装下多少个这样的盒子。(5) 多个盒子(什么叫父盒子，什么叫子盒子)a. 父盒子中包含一个子盒子时，子盒子的margin以父盒子的content为界。也就是子盒子的margin+border+padding+content=父盒子的content(即width)b. 父盒子中包含多个子盒子时，由多个盒子来共同占有父盒子的content位置。类似下图：特别需要注意：上图中，两个盒子之间的水平空白是左盒子。
7、的margin-right + 右盒子的margin-left而上下两个盒子之间的空白是两者之中的最大者，即max(padding-bottom上盒子，padding-top下盒子)(6) 盒子的背景色需要特别提醒的是：margin部分在实际制作网页的时候往往不可见，但其事实上存在。如其父盒子有背景色，则margin部分显示其父盒子的背景色。如有背景色，Padding部分显示背景色。实验下述代码：(7) 再计算某页面CSS代码如下(参见上图)：其效果如下：请说出：1) 子盒子距离左边、上边的有多少个像素？2) 左右盒子之间的空白是多少个像素？3) 上下盒子之间的空白是多少个像素？4) 父盒子能。
8、够横向容纳多少个盒子，纵向又容纳多少个盒子？5) 父盒子最右边还能容下多宽的盒子？(8) 特殊的盒子bodybody是一个特殊的盒子，对于不同的浏览器，默认情况下body的margin并不一样。可在关于body的CSS样式中加上类似“border:1px #00CC00 solid;”的语句来查看body的margin。另外，body的background-color延伸自浏览器整个页面，这与其它盒子不同。其它盒子的margin的背景颜色由其父盒子的背景颜色决定。2. 行内元素和块级元素in-line(行内元素)和block-line(块级元素)在网页制作里非常重要，因为HTML里几乎所有元素。
9、都属于行内元素或者块级元素中的一种。 (1) 块级元素：总是在新行上开始；高度，行高以及外边距和内边距都可控制；可以设置margin、padding的元素；宽度缺省是它的容器的100%，除非设定一个宽度。它可以容纳内联元素和其他块元素(2) 行内元素和其他元素都在一行上；宽，行高及外边距和内边距不可改变；一般情况下行内元素没有没有上下填充，也就是说你设置padding-top padding-bottom将是徒劳。宽度就是它的文字或图片的宽度，不可改变行内元素只能容纳文本或者其他内联元素(3) 可变元素可变元素为根据上下文语境决定该元素为块元素或者内联元素。有些元素可以互换。使用“disapl。
10、ay:inline;”，把块级元素变为行内元素；使用“disaplay:block;”，把行内元素变为块级元素；使用“disaplay:none;”，把对应元素隐藏起来。测试一下下面的例子：更改代码为：由此得出重要结论：通过设置display属性，可以改变某个标记的元素类型，或者把某个标记隐藏起来。(4) 常见的行内元素和块级元素行内元素(inline element)* a - 锚点* abbr - 缩写* acronym - 首字* b - 粗体(不推荐)* bdo - bidi override* big - 大字体* br - 换行* cite - 引用* code - 计算机代码(在。
11、引用源码的时候需要)* dfn - 定义字段* em - 强调* font - 字体设定(不推荐)* i - 斜体* img - 图片(与本次有关，可设置border、padding和margin。)* input - 输入框* kbd - 定义键盘文本* label - 表格标签* q - 短引用* s - 中划线(不推荐)* samp - 定义范例计算机代码* select - 项目选择* small - 小字体文本* span - 常用内联容器，定义文本内区块* strike - 中划线* strong - 粗体强调* sub - 下标* sup - 上标* textarea - 多行文。
12、本输入框* tt - 电传文本* u - 下划线* var - 定义变量块元素(block element)* address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - 常用块级容易，也是css layout的主要标签* dl - 定义列表* fieldset - form控制组* form - 交互表单* h1 - 大标题(与本次有关)* h2 - 副标题* h3 - 3级标题* h4 - 4级标题* h5 - 5级标题* h6 - 6级标题* hr - 水平分隔线* isindex - input prompt* m。
13、enu - 菜单列表* noframes - frames可选内容，(对于不支持frame的浏览器显示此区块内容* noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)* ol - 排序表单* p - 段落* pre - 格式化文本* table - 表格* ul - 非排序列表三、基本CSS1. 建立全局的CSS(特殊)要求存盘后到浏览器中再次观察各个对象的情况。(1) H1是否靠边(2) Body是否靠边(3) 段落文字的大小、颜色及靠边情况2. 标记选择器(对段落标记应用CSS)标记选择器是针对HTML标记的选择器(1) 对段落标记应用CSS(2) 对图像标记。
14、应用CSS(3) 对应用CSS(要求学生自己设置)3. 类别选择器标记选择器一旦声明，那么页面中所有的相应标记都会相应地产生变化。当希望其中的一个标记有个性的设置时，需要类别选择器。头像太大，需要更改CSS达芬奇的画很长，不太适用于前面所定义的CSS，故需要类别选择器。(最后添加即可)4. ID选择器(1) 使用ID选择器和DIV的理由观察页面，发现页面的宽度调整起来一点都不灵活，因此，需要想办法将内容装进一个个的盒子里这就是DIV。而DIV需要通过CSS设置各种属性，例如宽、高、背景色等等。由于DIV的属性往往具有唯一性，因此需要设置ID选择器(2) 主要页面的结构右边DIV，其id为“ri。
15、ght”左边DIV，其id为“left”(3) 更改页面代码类似下述结构在上述代码中，id为background的代码部分是为了适应有些浏览器对CSS的解释不同而设置的。(Fixfox和IE对CSS的解释经常不同)(4) 设置ID选择器的CSS代码注意事项：必须在其名称前加上“#”。a. 设置左边DIV的CSS代码修改头像的类别选择器为：b.设置右边的CSS代码大致计算：300*3=900，留出空位，因此暂时设置宽度为1000px。CSS代码如下：而名为main的DIV的宽度应设置为左右两个DIV之和，因此，设置CSS代码如下：观察此时的页面如下图：共存在4个问题(1) H1的背景应与图像对齐。
16、(2) 图像之间中间的间隔太宽(3) Main的背景色没有显示出来(4) 右边太宽修改CSS代码如下：因为：3*300+6*1+3*10=936px注意：最左边的间隔不能加，因为是right的Padding，不包含在width中。下述方法解决背景色问题：首先在代码中添加一的DIV，然后在CSS中设置其代码。5. 伪类选择器切换到最上面的框架的代码视图，加入如下CSS代码。四、在其它文档中应用CSS将CSS部分单独制作成一个文件，导入dafengqi.html和gaogeng.html中。五、扫尾工作切换至frameset文件的代码视图，修改框架的高度，有无框架和框架颜色。六、学完本课得出的经验在排版类似上述图片时，一般仅设置图片的左margin和上margin，这样，无论是什么浏览器，两个图片之间的空格相加为左margin，图片上下的距离为上margin。而图片与右边边框可以通过两种方法设置一是外面DIV的右padding，右padding=图片的左margin；二是通过设置外面DIV的width来实现。而图片与下边边框也可以通过下述方法设置外面DIV的下padding，下padding=图片的上margin；变通：当左右两边的距离与图片之间的距离不一样时，如下图，可以通过设置不同的左右PADDDING来实现。必要时甚至可以设置负值。
