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文

件，输入样式

表代码，熟悉

语法规则

对于小范围应用的样式，为了精简外部样式表的规模，常常在该html文档中直接定义样式表，故命名为内部样式表。此时可以使用

（3）内联样式

由于要将样式和内容混杂在一起，内联样式会损失掉样式表的许多优势，请慎用这种方法。例如仅当样式需要在某个元素上应用一次时采用内联样式。

要使用内联样式，你需要在相关的元素内使用样式（style）属性。Style属性可以包含任何CSS属性。如下代码改变段落的颜色和左外边距：

This is a paragraph

任务2 选择器的使用二、CSS主要是在相应的元素中应用样式，来渲染相对应用

的元素，那么这样我们选择相应的元素就很重要了，如何选

择对应的元素就需要我们所说的选择器。选择器主要是用来

确定html的树形结构中的DOM元素节点，作用是使样式表

作用与指定的元素。

CSS中有多种选择器，这里介绍两个常用选择器：id选

择器和类选择器。

（1）id 选择器

id 选择器可以为标有特定id的HTML元素指定特定的样

式。id选择器以“#” 来定义。下面的两个id选择器，第一个

定义元素的颜色为黑色，第二个定义元素的颜色为蓝色：

下面的HTML代码中，id属性为black的p元素显示为黑

色，而id属性为blue的p元素显示为蓝色。

这个文字是黑色。

这个文字是蓝色。

观看教师演

示，并动手操

作

（2）类选择器

在CSS中，类选择器以一个点号“.”定义：.center

{text-align: center;......}，即可以让所有拥有center 类的HTML 元素均为居中。在下面的HTML代码中，h1和p元素都有center类。这意味着两者都将遵守".center"选择器中的规则。

DOM中一切都是节点

Document：文档，是个平面文件

Object：将平面文件抽象为可处理的对象

Model：模型，从文档到对象的建模过程

显示如下图所示：

板书设计CSS样式应用

一、CSS样式应用

（1）外部样式表

（2）内部样式表

（3）内联样式

二、选择器的使用

（4）id选择器

（5）类选择器

课堂小结1、样式应用范围

2、选择器使用

课后反思本次主要讲述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选择器