Dreamweaver_CS5自学教程-第十课：CSS样式表 2.docVIP

第十课：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 !-- body,td,th { font-size: 12px; color: #FF0000; } -- /style 特点：1） 灵活控制网页中的每个元素的样式 2） 把内容和格式处理相分离，提高工作效率 3、CSS样式的链接 10-3 编辑CSS样式(1)10-4 编辑CSS样式(2) █ 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选择器 类别选择器 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样式面