dreamweaver cs5自学教程-第十课：css样式表

《dreamweaver cs5自学教程-第十课：css样式表》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第十课：CSS样式表10-1认识CSS(1)10-2认识CSS(2)如果说目前在Web设计和开发技术领域，什么是非常“火”的新技术，CSS/DIV页面的布局无疑是其中之一CSS（CascadingStyleSheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的

2、特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。（其实我们在前面的课程中已经接触到）作用：例子演示。从CSS对标记的控制入手，讲解CSS的初步知识以及编辑方法。希望大家能够掌握下一面几个方面的内容：①、标记的概念②、传统HTML的缺点③、CSS的引入1、传统HTML标记，在批量编辑时效率低，不够标准利用CSS样式编辑网页，可以大大挺高效率，规范网页的设计标准。2、CSS样式代码在网页代码中的位置CSS代码styletype="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样

4、式”面板：全部﹤style﹥中显示的是当前网页中的所有CSS样式P表示CSS样式应用的标签的类型，下方显示的是当前CSS样式设置的属性下方修改当前CSS样式的属性修改CSS样式后将会全部应用到同类标签1、利用CSS样式给图片添加边框：选中图片，在CSS样式面板中点击“新建规则”设置“新建CSS规则”的应用属性设置成功，全部﹤style﹥中显示刚刚设置的“img”的属性2、属性的显示方式从下方的按钮中设置█3）手工输入代码10-5CSS选择器选择器（selector）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进

5、行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。希望大家能够掌握以下几个方面的内容：标记选择器（对标记起作用）类别选择器ID选择器同一个Id选择器不能同时出现在两个标记中的，原因是id不但用于CSS同时也是javascript语法的一个目标设置。所以相同的id名称会造成混乱。创建一个新的CSS样式的时候，需要设置选择器的类型（共有四种选择类型）1、标记选择器标签类型主要针对HTML标记，选择“p”时就是对网页中的p元素设置属性选择器的名称可以从下拉列表中选择，不能随便输入设置“p”的属性2、

6、类别选择器当个别化的控制网页中的元素时，“类”是一种比较灵活的CSS样式应用方式选择“类”之后，选择器的名称自定义命名，名称前面需要先输入一个“.”以表示这是一个类选择器。然后设置类的属性。设置好类后，网页代码中会出现类的属性设置。但是网页中的元素并没有变化。所以要对网页元素应用类。选中目标，应用类。注：用同样的方式可以添加多个类，设置不同的属性，应用到不同的网页元素上3、ID选择器：利用ID选择器设置的CSS样式只能应用一次ID选择器名称可以自定义命名，名称前面加一个“#”。设置ID选择器的CSS样式同样，设置好类后，网页代码中会出现类的

7、属性设置。但网页中的元素并没有变化。选择网页元素，设置元素的ID（与选择器的ID名称相同），即可应用设置的属性。10-6小试牛刀－美化页面(1)1）设置网页属性设置（字体12像素、黑色；背景图片bg.gif；边距均为0）2）创建表格边框样式.line（颜色#CC66FF）3)设置底部文字的样式.white（字体白色）4）美化输入文本框样式.input█设置网页属性设置（字体12像素、黑色；背景图片bg.gif；边距均为0）在网空白的地方点击，点击下方的“页面属性”设置设置成功后，生成的CSS样式代码█创建表格边框样式.line（颜色#CC6

8、6FF）打开CSS样式面板，添加CSS样式设置CSS样式属性“solid”是实线。选择需要设置的元素，添加类“Line”，同样的方式给更多的元素添加类属性设置█修改设置好的CSS