Dreamweaver CS5自学教程-第十课CSS样式表.doc

第十课：CSS样式表10-1 认识CSS (1) 10-2 认识CSS (2)如果说目前在Web设计和开发技术领域，什么是非常“火”的新技术，CSS/DIV页面的布局无疑是其中之一CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。（其实我们在前面的课程中已经接触到）作用：例子演示。从CSS对标记的控制入手，讲解CSS的初步知识以及编辑方法。希望大家能够掌握下一面几个方面的内容：、标记的概念 、传统HTML的缺点 、CSS的引入 1、传统HTML标记，在批量编辑时效率低，不够标准利用CSS样式编辑网页，可以大大挺高效率，规范网页的设计标准。2、CSS样式代码在网页代码中的位置CSS代码style type=text/css 特点：1） 灵活控制网页中的每个元素的样式 2） 把内容和格式处理相分离，提高工作效率3、CSS样式的链接10-3 编辑CSS样式(1) 10-4 编辑CSS样式(2)如何编辑CSS样式 1) 属性面板快捷操作1、在下方的属性面板对选中的目标建立CSS规则创建的CSS规则将会应用到所有同类目标上2、建立的CSS规则代码自动添加在网页代码head部分中3、对建立的CSS样式修改：把鼠标光标在设计页面中放置到需要修改的内容上边，在下方的属性面板中修改，即可对所有应用了此CSS规则的目标修改 2）使用CSS样式面板打开“CSS样式”面板：全部style中显示的是当前网页中的所有CSS样式P表示CSS样式应用的标签的类型，下方显示的是当前CSS样式设置的属性 下方修改当前CSS样式的属性修改CSS样式后将会全部应用到同类标签1、利用CSS样式给图片添加边框：选中图片，在CSS样式面板中点击“新建规则”设置“新建CSS规则”的应用属性设置成功，全部style中显示刚刚设置的“img”的属性2、属性的显示方式从下方的按钮中设置 3）手工输入代码10-5 CSS选择器选择器（selector）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。希望大家能够掌握以下几个方面的内容：标记选择器 （对标记起作用）类别选择器 ID选择器同一个Id选择器不能同时出现在两个标记中的，原因是id不但用于CSS同时也是javascript语法的一个目标设置。所以相同的id名称会造成混乱。创建一个新的CSS样式的时候，需要设置选择器的类型（共有四种选择类型）1、标记选择器标签类型主要针对HTML标记，选择“p”时就是对网页中的p元素设置属性选择器的名称可以从下拉列表中选择，不能随便输入设置“p”的属性2、类别选择器当个别化的控制网页中的元素时，“类”是一种比较灵活的CSS样式应用方式选择“类”之后，选择器的名称自定义命名，名称前面需要先输入一个“.”以表示这是一个类选择器。然后设置类的属性。设置好类后，网页代码中会出现类的属性设置。但是网页中的元素并没有变化。所以要对网页元素应用类。选中目标，应用类。注：用同样的方式可以添加多个类，设置不同的属性，应用到不同的网页元素上 3、ID选择器：利用ID选择器设置的CSS样式只能应用一次ID选择器名称可以自定义命名，名称前面加一个“#”。设置ID选择器的CSS样式 同样，设置好类后，网页代码中会出现类的属性设置。但网页中的元素并没有变化。选择网页元素，设置元素的ID（与选择器的ID名称相同），即可应用设置的属性。10-6 小试牛刀美化页面(1)1） 设置网页属性设置（字体12像素、黑色；背景图片bg.gif；边距均为0）2） 创建表格边框样式 .line （颜色#CC66FF）3) 设置底部文字的样式 .white （字体白色）4） 美化输入文本框样式 .input 设置网页属性设置（字体12像素、黑色；背景图片bg.gif；边距均为0）在网空白的地方点击，点击下方的“页面属性”设置设置成功后，生成的CSS样式代码 创建表格边框样式 .line （颜色#CC66FF）打开CSS样式面板，添加CSS样式设置CSS样式属性“solid”是实线。选择需要设置的元素，添加类“Line”，同样的方式给更多的元素添加类属性设置修改设置好的CSS样式属性，网页中所有应用这一类样式的元素属性都会改变10-7 小试牛刀美化页面(2) 设置底部文字的样式 .white （字体白色）添加新的CSS样式，建立一个新的类对选中的网页元素应用类 美化输入文本框样式 .input美化文本输入框变成右边的样子 新建一种CSS样式，设置边框的样式属性选中文本框，应用.bk类再修改.bk的背景属性，使文本框的背景颜色与外边框的颜色相同。10-8 样式的复合声明在利用CSS选择器控制HTML标记时，除了每个选择器的属性可以一次声明多个，选择器本身也可以同时声明多个，并且任何形式的选择器包括标记选择器、class类别选择器、ID选择器等都是合法的。需要对多个不同标签的元素统一设置风格样式时，需要使用样式的复合声明输入需要设置的多个选择器名称，要用逗号隔开，然后设置样式规则。样式复合声明的代码注：复合声明不但可以同时应用到同一类Html标签，也可以混合类或ID共同使用10-9 嵌套与继承 选择器的嵌套：针对网页单个一部分中的某个元素专门设置样式属性设置选择器嵌套，需要对特定的部分添加选择器，以便能精确的定位然后新建CSS规则，设置样式属性注：CSS嵌套可以利用复合声明，应用到多个不同部分的不同元素中 继承，简单的说就是将各个HTML标记看作一个个容器，其中被包含的小容器会继承所包含它的大容器的风格样式。我们在这里从页面各个标记的父子关系出发，讲解CSS的继承。实例：在一个网页中插入一个Div层，ID为big再嵌入一个Div子层，ID为small对子层设置一个CSS样式：背景颜色和蓝色背景再对父层设置一个CSS样式：加文字下划线可以看出，对父层的CSS样式设置，会默认的应用到子层上子层的CSS样式设置，不会影响父层。10-10 应用CSS到网页中(1) 10-11 应用CSS到网页中(2) 内嵌式 （写在head头部信息中） 对一个网页添加CSS样式，选择body 设置样式，确定，在网页代码headhead中显示CSS样式代码 行内样式 （写到html标记里面） 在Html标签里按空格键可以添加多种CSS样式，但目前主流的设计方式是内容与样式分离，所以这样的行内样式尽量的少用。 链接式 （适合多个页面使用） CSS样式的信息并不写在网页中，而是通过一个文件的形式进行链接用于显示样式（主流实用）建立一个CSS样式表文件，并保存在根目录下设置CSS样式，保存。 导入样式 打开需要链接CSS样式的网页，点击“附件样式表”浏览-选择-确定所有应用这种CSS样式的网页都用这种方法来导入外部的CSS样式表修改CSS样式：在软件视图中可以切换到CSS样式表中或在CSS样式面板中设置 各种方式的优先级问题 当网页的元素受到多种CSS样式设置时，它们的优先级别如下：行内样式内嵌式 链接式 、链接式对网页进行整体的设计、内嵌式对个别页面做适当的调整、行内样式对网页元素精确的调整（尽量少用）10-12 综合实例-类型样式新建名称为“.title1”的类样式，定义在样式表文件“css2.css”中设置CSS样式，保存应用选择需要应用CSS样式的对象，应用类“titie” CSS规则的修改10-13 综合实例背景样式建名称为“.tb”的类样式，定义在样式表文件“css2.css”中，具体设置如下：在“背景”分类下设置背景颜色为“#EEDEDB”。新建CSS样式规则设置CSS样式属性 选择table，应用类“tb”注：背景图片也可在CSS样式中设置10-14 综合实例区块样式新建关于标签“body”的样式，定义在新的样式表文件“css2.css”中，具体设置如下：分类具体设置类型字体“楷体”，大小“14”，行高“16”背景背景颜色“#DFC0BB”区块文本对齐“居中”新建CSS规则设置属性 也可以在面板直接修改属性注：避免空格产生的代码，可以使网站打开的速度更快（css教程）/css/css_reference.asp10-15 综合实例方框与边框新建名称为“.copy”的类样式，定义在样式表文件“css2.css”中，具体设置如下：分类具体设置类型字体“宋体”，大小“12”，行高“25”颜色“#333333”背景背景颜色“#04A292”区块文本对齐“居中”新建名称为“.copy”的类样式,并进行设置选中“版权所有”表格td，应用类copy新建名称为“.img01”的类样式，定义在样式表文件“css2.css”中，具体设置如下：分类具体设置边框样式“outset”，宽度“4px”，颜色“#846761”方框宽“270px”，高“180px”，浮动“向左”填充“5px”，边界“5px”新建名称为“.img01”的类样式确定应用。10-16 综合实例导航栏新建名称为“.lead”的类样式，定义在样式表文件“css2.css”中，具体设置如下：分类具体设置类型字体“宋体”，大小“14”，行高“25”颜色“#FFFFFF”背景背景颜色“#03756B”区块文本对齐“居中”方框宽“109”，高“25”边框样式：“上”下拉列表框中选择“实线”宽度：取消全部相同 “右”下拉列表框 “1”“上”、“下”、“左”下拉列表框 “0”颜色：取消全部相同 “右”下拉列表框 “#FFFFFF”新建名称为“.lead”的类样式，并进行设置确定，应用。10-17 综合实例超链接样式设置链接样式超级链接的4种状态a:link 超链接默认状态a:visited 已经浏览过的链接a:hover 鼠标经过时a:active 点击链接时鼠标经过时背景颜色为：#33FF991、设置“超链接默认状态”的CSS样式2、设置“已经浏览过的链接”的CSS样式3、设置“鼠标经过时”的CSS样式10-18 综合实例设置技巧添加到网页中的超链接CSS样式的代码，它会影响到整个网页的超链接当我们设计的网页中应用多种超链接CSS样式时，就要用到CSS样式的嵌套和继承分别控制超链接的样式，在超链接CSS样式的代码前面输入要控制的链接的类代码10-19 综合实例滤镜 网页的设计配色可以通过下面的配色软件完成给图片添加滤色效果1、设置好图片的属性并选择图片，选择应用到图片的CSS样式2、修改CSS样式属性下边是属性代码说明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 的坐标。注：其它扩展特效的设置按照上面的代码说明设置。10-20 css使用技巧1）CSS 禁用/启用CSS 禁用/启用允许您直接从 CSS 样式面板禁用和重新启用 CSS 属性。禁用 CSS 属性只会取消指定属性的注释，而不会实际删除该属性。2）CSS 检查检查模式允许您以可视化方式详细显示 CSS 框模型属