1、实验之一题目一、练习 CSS 定义1、 在我的电脑中，新建一个 CSS1 文件夹，并把老师提供的实验题目中的 images 文件夹复制到该文件夹中。采用 Dreamweaver，新建一个 HTML 文件，命名为testcss.html，并保存到 CSS1 文件夹中。2、 在之间，输入定义 CSS 的标记：3、 在上面所输入的标记之间输入如下的 CSS 样式：pbackground-color:#0000FF;color:white;text-align:center;font-size:12px;line-height:25px;说说上面样式所定义中各属性的含义是什么？答：在网页中输入如下的代
2、码，并保存修改过的文件，并浏览其效果。（花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。 ） （花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。 ） （花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。 ） （花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。 ）4、 采用类的方式重新定义 p 的样式：修改
3、之间的 p 为 .cont。如何把定义的类 cont 样式应用到 p 上？答：5、 把上题的类样式.cont 修改成 ID 样式#cont，如何把该样式应用到 p 上？答：总结定义 CSS 的三种类型:三种 CSS 的选择器的区别是什么?答:二、实例制作知识点： 背景背景颜色（background-color ）背景图片（background-image）背景图片重复性（background-repeat ）背景图片位置（background-position）背景图片附着（background-attachment）简写：background 字体字体大小：font-size字体颜色：col
4、or字体粗度：font-weight文本对齐：text-align首行缩进：text-indent行高：line-height字符间距：letter-spacing1、 采用 Dreamweaver 新建一个 html 文件，命名为 example.html，并保存到 CSS1 文件夹下面，然后在之间，输入定义 CSS 的标记：2、 在上面的 CSS 标记之间设置 body 的样式：body背景图片:url(images/pagebg.jpg);背景重复性:no-repeat;背景图片附着:fixed;注：属性写法可以参考上面的知识点。然后保存后查看效果。3、 在标签之间，输入如下的代码：商品
5、最新消息对于 IT 行业，设备的多样性与信息的多样性更加需要标准来保证它们之间的沟通与协作。我们可能在手机、打印机、数码相机之间交互数据；我们可能在网站、邮件和办公软件之间传递信息；我们可能要在未来新设备（例如机顶盒、信息家电）中应用现有资源。如果没有统一的标准，那么现在所有的信息都是孤立的、不可分享、不可重用的；我们需要浪费大量的人力物力重新为新设备建立数据；我们需要为每一次的多系统应用做专门的开发。4、 定义样式（1） 在中定义如下的样式.title 背景图片:url(images/titlebg.gif);背景重复性:repeat-x; height:47px; 颜色:white; 文本
6、对齐:center; width:500px; 字体大小:18px; 字体粗度:500;把 title 应用到 h1 上。 （提示： ） 。保存并查看效果。思考：标题的文字是不是靠上方了呢？在如果让它显示在该标题的垂直中间呢？（提示：加上行高属性）（2） 定义内容的样式.content width:500px; 颜色:#000000;背景:url(images/contentbg.gif);背景重复性:repeat-x;背景图片位置:left bottom;背景颜色:#fff;字体大小:12px; 首行缩进:2em;把 content 应用到 div 上。 （提示： ）保存后查看效果。并理解加
7、粗部分的作用是什么？思考：如何让每行的文字之间有大一些的距离呢？提示：加上行高（line-height:25px;）把上面的 CSS 中的背景写成缩写方式（background） 。复制之间的代码，并在 之间粘贴 7 次，最后查看下效果。最终效果图如下：三、综合实例尝试1、采用 Dreamweaver 新建一个 XHTML 文件，命名为 blog.htm，并保存到 CSS1 文件夹下面，在之间，输入定义 CSS 的标记：2、在上面的 CSS 标记之间为 body 定义如下的样式：body 背景颜色:#000; 字体大小:12px; 字体颜色:#CCCC00;(提示：背景颜色 backgroun
8、d-color字体大小 font-size字体颜色 color）3、向网页中的间输入一个层并在 CSS 中定义如下的样式:#wrapper 宽度:488px;然后把 wrapper 应用到刚插入的层上(即)。4、向 wrapper 层中输入如下的代码：（注意：复制代码后要在 DW 的代码视图中粘贴）天南地北博客 最新更新：如何学好 CSS? 然后在 CSS 中定义 logo 的样式如下：（注意类选择器与 ID 选择器的写法区别）.logo字体大小:22px; 高度:130px; 字体颜色:#FFFF33; 背景图片:url(images/headerbg.gif);背景重复性:no-repea
9、t;背景位置:left top;提示：(高度：height背景图片：background-image背景重复性：background-repeat背景位置：background-position) 采用背景简写的方法改写 logo 样式为：.logo字体大小:22px; 高度:130px; 字体颜色:#FFFF33; background:url(images/headerbg.gif) no-repeat left top;以后常用简写方式。浏览查看其效果。 为了使“天南地北博客”这几个字显示在中间，在 logo 样式中加入如下的样式：行高:130px;提示：行高：line-height想一
10、想为什么会显示在中间？ 为了使网页的内容显示在中间，在 body 中添加如下的样式：字体对齐:center提示：字体对齐 text-align 为了使内容能靠到浏览器的上边线，在 body 中添加如下的样式：间距:0;提示：间距 margin 为了使 wrapper 中所有字体左对齐，在 wrapper 样式中加入如下的样式：字体对齐:left; 使“天南地北博客”这几个字跟左边线有一定的间距，在 logo 样式中加入如下样式：填充:0 0 0 10px;提示：填充 padding 另外，由于 h1 默认有间距属性的值，为了去掉间距，在 logo 样式中加入如下样式：间距:0; 定义 nav
11、类的样式，如下：.nav字体对齐:center; 行高:30px; 背景:url(images/h2bg.jpg) repeat-x left top; 填充:0;字体颜色:#FF6600; 说说上面样式的意思？好好理解本题中各个 CSS 属性的作用，不明白的请向老师请教。5、在 header 层的下面，并且在 wrapper 层内添加如下的代码：最新日志前言“我的工资卡是交通银行的，但我经常在我家楼下的工商银行提款机上取款；我是上海人，我用普通话可以和广州的同学进行交流；今天水龙头坏了，我去水暖商店买了一个新的换上；我去法国旅游，通知我法国的朋友在北京时间 15:30 分来接我。“ 生活中每
12、天都发生类似的事情，这样的事情似乎再正常不过的了，并没有什么特别之处。但是，你有没有想过： 为什么所有银行卡的大小都是一样的尺寸？为什么我用普通话就能和广州同学交流？为什么买来的新水龙头的螺口正好与老的水管能接上？为什么法国朋友不会接错时间？ 对于日常的很多事情，我们并没有注意到这背后都有着一个隐藏的“因素”在起作用，这个因素就是：标准。 有了“银行卡的标准” ，你就不用担心不同银行的卡大小不一样，所有提款机的入卡口都一样；有了“普通话标准” ，全国人民可以方便的进行语言交流；有了“螺口的工业标准” ，你买个 6 分的水龙头就绝对可以可 6 分的水管接上；有了“格林威治标准时间” ，全世界的人
13、们都不会接错班机时间。 生活中各行各业都有着自己相应的标准与规范，标准可以方便交流、促进协作、提高效率。 对于 IT 行业，设备的多样性与信息的多样性更加需要标准来保证它们之间的沟通与协作。我们可能在手机、打印机、数码相机之间交互数据；我们可能在网站、邮件和办公软件之间传递信息；我们可能要在未来新设备（例如机顶盒、信息家电）中应用现有资源。如果没有统一的标准，那么现在所有的信息都是孤立的、不可分享、不可重用的；我们需要浪费大量的人力物力重新为新设备建立数据；我们需要为每一次的多系统应用做专门的开发。定义 CSS 样式： 为 content 定义样式，如下：#content背景颜色:#001F4
14、5; 填充:10px;查看其效果 为了使字体间的距离大点，在 content 中添加行高，如下：行高:20px; 定义 h2 标签的样式，如下：h2间距:0 10px; 字体大小:16px; 背景:url(images/linksh_bg.gif) no-repeat left top; 高度:25px; 行度:25px; 字体颜色:#FF6633; 左填充:25px;提示：左填充 padding-left思考：自己把 h2 改成采用类选择器定义，如下改呢？采用 ID 选择器呢？ 定义 h3 标签的样式，如下：h3字体颜色:#FFFFFF; 字体大小:14px; 间距:0; 字体对齐 :center; 定义 p 标签的样式，如下：p 填充:10px; 间距:0; 首行缩进 :2em; 提示：首行缩进 text-indent6、制作网页的底部在 content 层的下面，wrapper 层间添加如下的代码：南华工商计算机系信息专业 定义一个 ID 样式 bottom，样式要求如下：背景:url(images/bottombg.gif) no-repeat left top; 高度:84px; 行高:84px; 字体对齐:center; 字体颜色:#FFFFFF;然后把 bottom 应用到刚插入的层上。最终效果图：
