实验二CSS层叠样式表

《网页制作》课程实验报告

≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡

知识点：CSS样式表的简单应用

知识点：CSS样式表的简单应用 考点说明： CSS样式表是《网络技术应用》第5章第2节中的一个知识点，属于学业水平测试的一个重要考点，也是一个难点。 一、选择题： 1. 下面哪种不是我们常见的CSS样式表。（） A. 嵌入式样式表 B.内联样式表 C. 外联式样式表 D. 关联式样式表 2.根据下图判断当前页面使用的CSS加入方式是( ) A. 嵌入式样式表 B. 内联式样式表 C. 外联式样式表 D. 依赖式样式表 3. 在HTML中加入

，此为( ) A. 嵌入式样式表 B. 内联式样式表 C. 外联式样式表 D. 动态式样式表 4. 在HTML中加入CSS的方法有多种，其中把样式代码定义成一个文件，然后链接到被引用的网页中，这种方法称为( ) A. 直接编写 B. 外联式样式表 C. 内联式样式表 D. 嵌入式样式表 5. 在网站开发时，为了保证网站页面风格的一致，最好采用( ) A. 外联式样式表 B. 内联式样式表 C. 嵌入式样式表 D. JavaScript 6. 所谓外联式样式表，就是把样式定义为一个文件，然后在网页中调用该文件，这个文件的扩展名是( ) A. doc B. txt C. css D. bmp 7. css样式表中，若想只对当前页面应用样式，最好使用( ) A. 嵌入式样式表 B. 内联式样式表 C. 外链式样式表 D. 直接编写 8. 可以通过一个css文件管理网站中多个网页外观设置的是( ) A. 外联式样式表 B. 内联式样式表 C. JavaScript样式表 D. VBScript样式表

CSS样式应用

课题名称：CSS样式应用 教学目的： 知识目标：1、掌握css基本语法 2、了解css 特点 能力目标：运用CSS样式布局网页的能力 情感目标：提高学生团结合作精神，提高学生竞争意识 教学重点：1、css基本语法 2、css基本特点 教学难点：样式表的应用 教学方法：讲授法、演示法、讨论法 课时安排：2课时 教学环境：多媒体教室 学习过程： 教学环节教学内容学生活动 新课导入请同学们观看下面两幅图，对比说出两幅图的差异： 图一未应用CSS样式找出两幅图片的差异，并由组长进行总结

图二应用了CSS样式 任务1 CSS样式应用 利用CSS将页面独立成更多的区域，在打开页面的时候，逐 层加载。这就避免了象表格嵌套那样将整个页面圈在一个大 表格里，使得页面体积变小，浏览速度变快。 一、如何插入样式表 当浏览器读到一个样式表时，浏览器会根据它来格式化 HTML文档。插入样式表的方法有三种： （1）外部样式表 顾名思义，外部样式表是指储存在html文档之外的独立 CSS文件中的样式表。当样式需要应用于很多页面时，外部 样式表将是理想的选择。在使用外部样式表的情况下，你可 以通过改变一个文件来改变整个站点的外观。每个页面使用 元素链接到样式表。 元素在（文档的）头部 中： 浏览器会从文件mystyle.css中读到样式声明，并根据它 美化HTML文档。外部样式表可以在任何文本编辑器中进行 编辑，但该文件中不能包含任何的html元素。样式表应该 以.css 扩展名进行保存。下面是一个样式表文件的例子： hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} 不要在属性值与单位之间留有空格。例如使用 “margin-left: 20 px” 而不是“margin-left: 20px”，它仅在IE6中 有效，但是在Mozilla/Firefox或Netscape中却无法正常工作。 （2）内部样式表 新建html文 件，输入样式 表代码，熟悉 语法规则

css样式大全(精华版)

字体属性：(font) 大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高{line-height: normal;}(正常) 单位：PX、PD、EM 粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体{font-variant: small-caps;}(小型大写字母) normal;(正常) 大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体：(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性：(background) 色彩{background-color: #FFFFFF;} 图片{background-image: url();} 重复{background-repeat: no-repeat;} 滚动{background-attachment: fixed;}(固定) scroll;(滚动) 位置{background-position: left;}(水平) top(垂直); 简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/ 区块属性：(Block) /*这个属性第一次认识，要多多研究*/ 字间距{letter-spacing: normal;} 数值/*这个属性似乎有用，多实践下*/ 对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进{text-indent: 数值px;} 垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值 空格white-space: pre;(保留) nowrap;(不换行)

(完整版)《CSS样式》习题答案

一、选择题 1．CSS是（ C ）的缩写。 A．C olorful S tyle S heets B．C omputer S tyle S heets C．C ascading S tyle S heets D．C reative S tyle S heets 2．引用外部样式表的格式是（ B ）。 A．

网站

网站

请指出这个几字的颜色及对齐方式

请指出这个几字的颜色及对齐方式

请指出这个几字的颜色

2、样式文件引入 不改变以下程序，分别使“网站实验”几个字变红色，“css网页实验”几个字变成绿色（分别使用外联和导入方式）

网站实验

css网页实验

3、如何使有超级链接的文字不出现下划线，如何使鼠标移动到超链上产生变色的效果 写出以下语句，并改变参数，使超链上产生变色，并改变有超级链接文字的下划线的类型

未访问的链接

访问过的链接

鼠标激活的链接 4、用 css 控制的网页 1)用以下语句建立一个6.htm文件

CSS样式表的应用-css标签功能的使用

CSS样式表的应用 如果说目前在Web设计和开发技术领域，什么是非常“火”的新技术，CSS/DIV页面的布局无疑是其中之一 1．CSS的概念 CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。（其实我们在前面的课程中已经接触到） 作用：例子演示。 从CSS对标记的控制入手，讲解CSS的初步知识以及编辑方法。希望大家能够掌握下一面几个方面的内容： ?标记的概念 ?传统HTML的缺点 ?CSS的引入 特点：1）灵活控制网页中的每个元素的样式 2）把内容和格式处理相分离，提高工作效率 注：CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰

富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS 设计的优秀页面层出不穷。 2.如何编辑CSS样式 1) 属性面板快捷操作 2）使用CSS样式面板 A．管理CSS规则按钮（添加按钮、链接按钮、修改按钮、删除按钮） B．显示规则列表（显示全部元素的样式、显示当前编辑元素的样式） C．显示所选规制属性 D．查看CSS属性视图按钮（分类、按字母排列、显示设置） 3）手工输入代码 3.CSS选择器