css样式表基础

层叠样式表（CSS） “层叠样式表”（Cascading Style Sheets,缩写为CSS）是由W3C协会所制定，主要的用途是定义网页数据的编排、显示、格式化及特殊效果，因为HTML提供的、、、

、

、_{、^{等控制标记虽然可以将数据格式化，但能做到的格式化有限，而CSS正好弥补了这个不足。 CSS属于较新技术，故IE3.0版本以上支持，Netscapt Navigator 4.0版以上支持。此外，不同浏览器显示的结果可能有不同。 一、如何链接HTML文件与层叠样式表 它有4种方法： ●在HTML文件的区块嵌入层叠样式表的定义。 ●将层叠样式表定义在单独的文本文件，然后将之导入或链接至 HTML文件。 ●在HTML文件的标签属性style中加入样式定义 ●在HTML文件中套用样式类别。 1．在HTML文件的区块嵌入层叠样式表的定义 2．将层叠样式表导入或链接至HTML文件 只有IE浏览器支持。先看下面导入样式表： 将样式表定义在独立的文本文件body.css中，然后嵌入HTML文件。这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。 其BODY.CSS文件内容： BODY { font-family: "宋体"; font-size=30; color:blue } 再看链接样式表： 将样式表定义在独立的文本文件body.css中，然后链接至HTML 文件。这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。 3．在HTML文件中套用样式类别 您也可以在样式表文件中定义不同的样式类别（Style Class），然后在HTML文件中套用不同的样式类别。 （3）外部样式表：老师先给学生讲解外部样式的概念和用法，然后老师在台上进行演示并操作，老师在下面进行巡视指导学生操作，老师并讲解一个实例来 二、class和id的引用 （1）class的定义方法：首先老师引出刚才我们在样式的定义中，样式前为什么加一个点号，然后老师进行解释，并引出class类的定义，老师在上面进行边操作边解释使用方法和概念，并用让学在完下面的实例 用class方法来定义字体的大小，老师在下面进行指导。 （2）id的定义方法：<指定标签id="id名">,老师在上面进行讲解id的使用方法和概念，然后用一个实例来进行讲解，让学生在下面完任务，老师在下面进行指导学生操作 （3）标签样式的设置，老师讲解标签样式的设置与前两者之间有什么不同，进行对比区分，然后进行讲解标签的用法和概要，然后老师用一个实例来进行讲解，学生在下面进行操作，老师在下面进行指导。 【课后小结】 通过学习样式的引用、class和id的定义，使学生能掌握css样式中的样式的引用和使用，同时也让学生掌握样式的定义 【作业】 课后设计一个网页，主题自行定义。}}

CSS样式表范例

附：CSS样式表范例（中国学生网） 1、巧用CSS控制鼠标样式变换 主页上的鼠标是不是就只有箭头和小手两种模样呢？如果鼠标移到“帮助”等字样上时，形状就变成求助的问号；鼠标移到可能需要较长时间等待的超链接时，鼠标形状就变成等待的样子……那该多好啊！其实，借助我们的css，几句很简单的代码就可以实现这一切！ 不信？把鼠标移到下面的演示文字上看看效果吧！ 演示：手形 源代码：

演示：手形

演示：移动 源代码：

演示：移动 演示：等待 源代码：

等待状态

演示：定位指示 源代码：

演示：定位指示

演示：帮助 源代码：

演示：帮助

是不是简单又方便？这里我们只用到了CSS中的“cursor”属性，利用“style=cursor:值”这样的语句形式，分别设置具体的值就可以了。例如：值为“hand”时，当鼠标移到相应的文字或图片上时，就会变成超链接的小手形；值为“move”时，当鼠标移到相应的文字或图片上时，就会变成上下左右带方向箭头的形状，依此类推。 2、横线样式的输入框（中国学生网） 在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框，而是一条细线。其实要实现这样的效果并不困难，只要用一段简短的CSS代码控制好表单输入框的样式即可。 代码主要运用了表格边框的样式控制，将左、上、右边框设置为none，只剩下下边框即可。

CSS样式表复习讲义

CSS样式表复习讲义 一、CSS概述 CSS的全称是Cascading Style Sheet，通常称为“层叠样式表”。是网页设计不可缺少的工具之一。 CSS是一组样式，它是用来进行网页风格设计的，它能精确控制页面的布局、字体、颜色和其他效果，不受浏览器的设置的影响。 <例1>在浏览器中使用CSS样式和没使用CSS样式的对比。（1.html） 二、CSS样式内容形式和应用 对象｛a属性:a属性值；b属性:b属性值；……….. ；x属性:x属性值；｝ ●对象：表示要定义样式的对象名称 ●属性：属性名称，如color(前景色) ●属性值：设置属性的具体值，如给color设置red或#00FF00。（常见属性另见文件） （一）、对象：可以是： 1、HTML标签。如：body、p、a等；只对该标签起作用。 例： P { color: #FFFFFF; background-color: #999999; font-family: "宋体"; font-size: 30px; } 直接应用到相同标签：

使用样式表的文字

*2、类对象（class），以“.”开始，名称可以是字母和数字的组合。 例： .myfirst { font-family: "宋体"; font-size: 12px; color: #FF0000; } 应用：使用样式表的文字 *3、ID对象，以“#”开始，名称可以是字母和数字的组合。 例： #hh { font-family: "宋体"; font-size: 36px; font-style: italic; } 应用：我用了css样式表