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选择器
选择器（selector）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。希望大家能够掌握以下几个方面的内容：
标记选择器（对标记起作用）
类别选择器
ID选择器
同一个Id选择器不能同时出现在两个标记中的，原因是id不但用于CSS同时也是javascript语法的一个目标设置。所以相同的id名称会造成混乱。
4.小试牛刀-css美化页面
1）设置网页属性设置（字体12像素、黑色；背景图片bg.gif；边距均为0）
2）创建表格边框样式.line （颜色#CC66FF）
3) 设置底部文字的样式.white （字体白色）
4）美化输入文本框样式 .input
5．选择器的复合声明
在利用CSS选择器控制HTML标记时，除了每个选择器的属性可以一次声明多个，选择器本身也可以同时声明多个，并且任何形式的选择器包括标记选择器、class 类别选择器、ID选择器等都是合法的。
6． CSS的嵌套与继承
1）选择器的嵌套
2继承，简单的说就是将各个HTML标记看作一个个容器，其中被包含的小容器会继承所包含它的大容器的风格样式。我们在这里从页面各个标记的父子关系出发，讲解CSS的继承。
7. 应用CSS到网页中
在对CSS有了大致的了解后，便希望使用CSS对页面进行全方位的控制。我们在这里主要介绍如何使用CSS控制页面，以及其控制页面的各种方法，包括行内样式、内嵌式、链接式、导入式等。并最后探讨各种方式的优先级问题。希望大家能够掌握以下几个方面的内容：
?内嵌式（写在head头部信息中）
?行内样式（写到html标记里面）
?链接式（适合多个页面使用）
?导入样式
?各种方式的优先级问题
行内样式》内嵌式》链接式
8.综合实例
1）．新建名称为“.title1”的类样式，定义在样式表文件“css2.css”中，具体设置如下：
类型分类下设置：字体“隶书”，大小“24”，颜色“#FF0000”
理解“行高”的定义
2）.新建名称为“.tb”的类样式，定义在样式表文件“css2.css”中，具体设置如下：在“背景”分类下设置背景颜色为“#EEDEDB”。
3）．新建关于标签“body”的样式，定义在新的样式表文件“css2.css”中，具体设置如下：
所有浏览器都支持vertical-align 属性。
https://www.sodocs.net/doc/8f12831516.html,/css/css_reference.asp
4）．新建名称为“.copy”的类样式，定义在样式表文件“css2.css”中，具体设置如下：
5）.
设置如下：
6）. 新建名称为“.lead”的类样式，定义在样式表文件“css2.css”中，具体设置如下：
7）
超级链接的4种状态
a:link 超链接默认状态
a:visited 已经浏览过的链接
a:hover 鼠标经过时
a:active 点击链接时
鼠标经过时背景颜色为：#33FF99
8．重建css样式表文件css3.css，改变网页风格。例如:下图样例。要点：1)、练习配色。
2) 使用样式表的滤镜，对图片增加效果。
filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=300, FinishY=240);
height: 300px;
width: 660px;
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。
FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到100。
Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。
StartX和StartY：代表渐变透明效果的开始X和Y坐标。
FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。
9. CSS使用技巧
1）CSS 禁用/启用
CSS 禁用/启用允许您直接从CSS 样式面板禁用和重新启用CSS 属性。禁用CSS 属性只会取消指定属性的注释，而不会实际删除该属性。
2）CSS 检查
检查模式允许您以可视化方式详细显示CSS 框模型属性，包括填充、边框和边距，无需读取代码，也不需要独立的第三方实用程序（如Firebug）。
3）浏览器兼容性测试
由于不同的浏览器对CSS样式标准的执行情况不一样，会导致同样的网页在不同的浏览器中显示的差异性。
DIV＋CSS网页排版具有利于SEO和网页打开速度更快的优点，然而浏览器兼容问题一直困绕着许多从事DIV＋CSS网页排版的美工人员。
设计时主要要兼顾 IE系列浏览器（ie 6、ie7、ie8）
火狐浏览器
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文件的区块嵌入层叠样式表的定义 附：CSS样式表范例（中国学生网） 1、巧用CSS控制鼠标样式变换 主页上的鼠标是不是就只有箭头和小手两种模样呢？如果鼠标移到“帮助”等字样上时，形状就变成求助的问号；鼠标移到可能需要较长时间等待的超链接时，鼠标形状就变成等待的样子……那该多好啊！其实，借助我们的css，几句很简单的代码就可以实现这一切！ 不信？把鼠标移到下面的演示文字上看看效果吧！ 演示：手形 源代码： 演示：手形 演示：移动 演示：等待 源代码： 等待状态 演示：定位指示 演示：帮助 是不是简单又方便？这里我们只用到了CSS中的“cursor”属性，利用“style=cursor:值”这样的语句形式，分别设置具体的值就可以了。例如：值为“hand”时，当鼠标移到相应的文字或图片上时，就会变成超链接的小手形；值为“move”时，当鼠标移到相应的文字或图片上时，就会变成上下左右带方向箭头的形状，依此类推。 2、横线样式的输入框（中国学生网） 在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框，而是一条细线。其实要实现这样的效果并不困难，只要用一段简短的CSS代码控制好表单输入框的样式即可。 代码主要运用了表格边框的样式控制，将左、上、右边框设置为none，只剩下下边框即可。 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; } 直接应用到相同标签： 使用样式表的文字、
CSS样式表范例
CSS样式表复习讲义