第6章CSS样式实验

1、第第6章章 css样式表样式表实验实验 htmlhtml及及CSSCSS应用应用（1）设置文字效果）设置文字效果（2）设置行间距）设置行间距（3） CSS设置图片效果设置图片效果4制作制作首字下沉效果首字下沉效果（5）制作图文混排网页）制作图文混排网页2022-4-20网页设计技术5本章内容本章内容 6.1 CSS样式概述样式概述 6.2 CSS样式定义样式定义 6.3 CSS样式的使用样式的使用 6.4 CSS属性属性6.5 在在Dreamweaver中编辑中编辑CSS样式样式6.6 CSS应用示例应用示例 上机内容上机内容小结小结2022-4-20网页设计技术66.1 CSS样式概述样式概

2、述 nCSS（Cascading Style Sheets）又称层叠样式表层叠样式表，它是一系列格式规则集合，它能够定义网页元素的样式，如层、文本、表格、链接等元素的属性，一种样式信息与网页内容分离的标记性语言。n在CSS样式出现以前，HTML标签样式被广泛应用，HTML标签样式用于控制单个文档中一定范围内文本的格式。n而CSS样式不同，它不仅可以控制单个文档中一定范围内网页元素的格式，而且可采用外部链接的方式，控制整个站点内所有网页的格式。这样既保证了站点风格的一致性，又提高了工作效率。nCSS样式生成样式表文件扩展名为.CSS，当对CSS规则修改后，所有链接该规则的文档格式会自动改变，简化

3、了格式化网页的工作。返回返回示例示例2022-4-20网页设计技术7CSS样式由三部分组成：选择器、属性和值选择器、属性和值。语法格式：语法格式：选择器选择器 属性属性1:1:值值1;1;属性属性2:2:值值2 2 说明：说明：n选择器用来标识格式元素，可分为3种基本类型：标签（html）选择器、ID选择器、类（class）选择器。除了基本类型外，还可把基本类型的选择器组合使用。n属性和属性值之间用冒号（:）隔开，定义多个属性时，属性之间用分号（;）隔开。n如: bodycolor:black 选择器body指页面主体部分，color颜色属性名，black颜色属性值，其效果是使页面中的文字为黑

4、色。6.2 CSS样式定义样式定义例例6.16.1 在DW代码视图的编辑窗口输入以下代码，创建使用样式页面的文档css6_1.html。在标记符中直接嵌套样式信息 一代人 黑夜给了我黑色的眼睛我却用它寻找光明提示：style元素是HTML中的一个标记元素，提供了 一 组 对 应 于 浏 览 器 所 支 持 C S S 规 则 （ 如background 、font-size等），可以使用这个标记元素访问CSS样式属性。2022-4-20网页设计技术91.HTML1.HTML选择器选择器HTML选择器是最典型的选择器类型，网页设计者可为某个或某些HTML标记元素应用样式定义。pHTMLHTML选

5、择器的定义方法：选择器的定义方法： tagproperty:value例如，例如，设置表格中单元格内的文字大小为9pt，颜色为蓝色的CSS代码： td font-size: 9pt; color: bluepCSS可以在一条语句中定义多个选择器 例如，例如，将段落文本和单元格内的文字设置为蓝色的CSS代码： td,pcolor: bluep组合选择器组合选择器(逗号隔开)，其中所有标签都使用指定样式。p关联选择器关联选择器(空格隔开,pembackground:yellow) 表示段落中标签中背景为黄色，而其他地方出现的不受影响 （标记em用来表示强调，其默认样式为斜体）。6.2 CSS样式定

6、义样式定义102.class2.class选择器（类选择器）选择器（类选择器）独立独立classclass选择器选择器。可被任何HTML标记元素所应用。 语法格式：语法格式：.Classnameproperty:value 例如：例如： .blueonecolor:blue 应用：应用：需要引用该类的任意标记符内使用class属性 有雨的日子 不知是无意还是天意，有你的日子总有雨！不知是无意还是天意，有你的日子总有雨！ 6.2 CSS样式定义样式定义2022-4-20网页设计技术网页设计技术113.ID3.ID选择器选择器p其实与独立的class选择器的功能一样，区别在于语法和用法不同。p语法

7、格式语法格式：#IDnameproperty:valuep用法用法:在HTML标记元素中应用ID属性引用CSS样式。p例如：例如：#redonecolor:redp应用：应用：红色热情6.2 CSS样式定义样式定义综合举例综合举例6.26.2：在DW代码视图的编辑窗口输入以下代码，创建综合几种选择器类型的页面css6_2.html：选择器举例选择器举例标题标题1的使用的使用测试关联选择器（没有关联）测试关联选择器（没有关联）测试关联选择器组合（具有关联关系）测试关联选择器组合（具有关联关系）这是黄河的水这是黄河的水这句话才使用了类这句话才使用了类“hello”的效果。的效果。这里危险这里危险c

8、ss6_2.htmlcss6_2.html2022-4-20网页设计技术13返回返回2022-4-20网页设计技术14一般情况下，CSS样式使用有四种方式。 1.1.内联式样式表内联式样式表 在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些标记元素中。 例如：例如：内联式样式表 说明：说明：这种样式表只对使用它的元素起作用，而不会影响其它元素，通常用在需要特殊格式的某个网页对象。这种样式表将样式和要展示的内容混在一起，失去了样式表的优点，一般不采用。6.3 CSS样式使用样式使用2022-4-20网页设计技术15 2. 2. 嵌入式样式表嵌入式样式表又称内部样式表，又称内

9、部样式表，包含在HTML文件头部HEADHEAD的stylestyle标签内的一系列CSS规则。书写格式：书写格式：6.3 CSS样式使用样式使用说明：说明：在此格式中，stylestyle的typetype属性值须设为text/text/csscss，表示定义的是一个CSS。当不支持CSS的浏览器读到这个属性时，自动忽略这个样式表。标记内定义的前后加上注释符，其作用是使不支持CSS的浏览器忽略样式表的定义。注意：注意：在定义嵌入式样式表时，一定要放在和标记之间。嵌入样式表的作用范围是在本HTML文档内。2022-4-20网页设计技术163. 3. 链接外部样式文件链接外部样式文件p先将样式表

10、写在一个扩展名为.CSS文件中，样式在样式表文件中的定义和嵌入式样式表的定义是一样的，此时只是不需要style元素。p在HEAD标记符内使用link标记元素，通过指定相应属性链接到外部样式表文件。代码格式： p说明：说明：标签定义了当前文档与其他文档的链接信息 rel：表示其它文档将以何种方式与HTML文档结合 href：目标文档的URL6.3 CSS样式使用样式使用174. 4. 导入外部样式文件导入外部样式文件p这种方式是在HTML文件的头部标记之间，用CSS样式表的import声明引入外部样式表文件。其格式： import URL(外部样式文件名);p引入外部样式表的使用与链接到外部样式

11、表很相似，都是将样式定义保存为单独文件。p区别：区别：导入方式在浏览器下载HTML文件时将样式文件的全部内容拷贝到import关键字位置，以替换该关键字；而链接外部样式文件仅在HTML文件需要引用CSS样式文件中的某个样式时，浏览器才链接样式文件，读取需要的内容并不进行替换。6.3 CSS样式使用样式使用2022-4-20网页设计技术18例例6.36.3 CSS CSS样式文件应用样式文件应用在DW的代码视图编辑窗口输入以下代码，创建外部样式表文件sheet1.css、sheet2.css和页面文件css6_3.html。sheet1.css代码代码/* CSS Document */h1fo

12、nt-size: 36px;font-family: 隶书;font-weight: bold;color: #993366;h2 b color:blue.water font-family:隶书; font-size:24px; text-align:righth3.hello font-family:隶书; text-align:center; font-size:36px6.3 CSS样式使用样式使用2022-4-20网页设计技术2022-4-20网页设计技术19sheet2.css代码代码/* CSS Document */#danger color:#990000;font-fam

13、ily:华文彩云;font-size:24pxa:linkcolor:red; text-decoration: none;/*未访问的链接*/a:visitedcolor:blue; text-decoration: none;/*已访问的链接*/a:activecolor:yellow;text-decoration: none;/*活动链接*/a:hover color:#990000;text-decoration:underline/*鼠标指针移到上面链接的颜色*/h2 b color:green6.3 CSS样式使用样式使用2022-4-20网页设计技术20css6_3.html代

14、码代码 导入链接外部样式表 标题1的使用。测试上下选择器（具有上下文）这是黄河的水这句话才使用了类“hello”的效果。这里危险。测试链接的颜色6.3 CSS样式使用样式使用2022-4-20网页设计技术216.3 CSS样式使用样式使用2022-4-20网页设计技术225. 5. 样式表的优先级样式表的优先级p同时使用多层样式表，很可能的情况是在一个网页中既定义了内联式样式表和嵌入式样式表又链接了外部样式表，这时网页会变得怎么样？p三种样式表具有不同的优先级: 内联式样式表内联式样式表 嵌入式样式表嵌入式样式表 外部式样式表外部式样式表 所以某个元素在挑选多层样式表时，会首先选择优先级最高的

15、样式，即就近原则就近原则。6.3 CSS样式使用样式使用返回返回2022-4-20网页设计技术23n 字体属性 n 文本属性 n 颜色和背景属性 n 容器属性 n 列表属性 n 鼠标属性 n 定位和显示 n CSS滤镜 6.4 CSS属性属性2022-4-20网页设计技术246.4 CSS属性属性2022-4-20网页设计技术256.4 CSS属性属性返回返回2022-4-20网页设计技术261.1.创建创建CSSCSS样式样式p单击“CSS样式”面板右下角的“新建CSS规则”按钮 6.5 在在Dreamweaver中编辑中编辑CSS样式样式（1 1）定义的位置）定义的位置仅对该文档仅对该文档

16、：此时CSS样式的 代 码 会 嵌 套 在 网 页和标签中。新建样式表文件：新建样式表文件：则弹出“保存样式表文件为”对话框，选择样式文件的存储路径和文件名，将CSS样式代码单独存放在一个CSS文件中。已有的某已有的某CSSCSS文件：文件：将新建的CSS样式规则写入已有的CSS文件中。其代码会嵌套在网页和标签中。2022-4-20网页设计技术27（2 2）选择器的类型）选择器的类型 类类自定义CSS规则，可应用于网页任何标签。在应用时，它会在HTML标签内加入一个类（class）来规定标签中的格式。比如,将类的样式mystylemystyle定义于某个标题，代码：标题1应用自定义样式 标签标

17、签重新定义特定标签的外观，如创建或更改h1标签的CSS样式，所有应用h1标签的文本都会立即更新。 高级高级在CSS选择器中，它的功能最为强大，可定义链接的特效，定义特定元素组合的格式设置（如body,table,td,用逗号隔开），定义嵌套的样式（td img 空格隔开），定义包含特定id属性的标签的格式设置。6.5 在在Dreamweaver中编辑中编辑CSS样式样式2022-4-20网页设计技术28a:linka:link 链接文本普通状态的外观a:activea:active 当前活动的超级链接文本的外观a:hovera:hover 鼠标悬停状态下超级链接文本的外观a:visited a

18、:visited 已经访问的超级链接文本的外观 CSSCSS超级链接样式超级链接样式6.5 在在Dreamweaver中编辑中编辑CSS样式样式2. “CSSCSS”样式面板样式面板正在正在模式：只显示当前文档中页面元素CSS规则全部全部模式：显示整个网页文件所涉及的全部CSS规则“显示类别视图显示类别视图”按钮按钮 按类别显示DW所支持的所有CSS属性“显示列表视图显示列表视图”按钮按钮 按字母顺序显示DW所支持的所有属性“设置属性视图设置属性视图”按钮按钮 仅显示已设置的属性，默认视图“附加样式表附加样式表”铵钮铵钮 选择要链接或导入到当前文档中的外 部样式表“新建新建CSSCSS规则规则

19、”铵钮铵钮“编辑样式编辑样式”按钮按钮“删除删除CSSCSS规则规则”按钮按钮6.5 在在Dreamweaver中编辑中编辑CSS样式样式2022-4-20网页设计技术30 3. CSS3. CSS样式定义对话框（样式定义对话框（CSSCSS属性）属性） 创建了新样式后，即可在“CSS样式定义”对话框中进行设置，CSS样式属性的8大类型。 6.5 在在Dreamweaver中编辑中编辑CSS样式样式2022-4-20网页设计技术31CSSCSS属性属性8 8大类型说明：大类型说明：类型格式：类型格式：此类属性用于定义网页中文本的字体、大小、颜色、文本链接的修饰线等格式。背景格式：背景格式：为整

20、段文字或其它页面元素加入背景格式，如背景色或图像。区块格式：区块格式：控制文本的间距、缩进或对齐方式等。方框格式：方框格式：控制网页中的块元素，方框共分为4个部分：边界、边框、填充、方框内容。边框格式：边框格式：为任何网页元素加上边框（如宽度、颜色和样式），且边框的样式多样（粗细、凹下等）。如宽度、颜色。列表格式：列表格式：可以设置项目符号的样式（如项目符号大小和类型），还可以用图片来代替项目符号。6.5 在在Dreamweaver中编辑中编辑CSS样式样式2022-4-20网页设计技术32定位格式定位格式： 提供网页元素的相对位置或绝对位置的设置，甚至可以将两个元素重叠在一起。这对于一些固定

21、元素（如表格）来说，是一种功能的扩展，而对于浮动元素来说，却是有效的、用于精确控制其位置的方法。扩展格式：扩展格式： 设置页面打印的分页效果和网页视觉效果，其属性包含两部分：分页分页为打印的页面设置分页符；视觉效果视觉效果为网页元素施加特殊效果。【光标光标】 ：可指定在某个元素上要使用的光标形状，共有15种选择方式，分别代表鼠标指针的各种形状。【滤镜滤镜】：特殊效果有阴影、模糊、透明、光晕等。这些效果在DW的设计视图中是显现不出来的，只有在浏览器中浏览时才能看到。6.5 在在Dreamweaver中编辑中编辑CSS样式样式2022-4-20网页设计技术33(1)(1)导出样式表文件导出样式表文

22、件在当前文档中设置的样式只在该文档中有效。要使当前文档中的样式应用到其他文档，则可以考虑将其中的样式导出为样式表文件，这样，DW就可以通过样式表链接，使整个站点具有相同的样式设置。 单击“文件”的“导出”命令，选择“CSS”样式或在CSS样式面板中，执行“右键”菜单的“导出”命令。 在对话框中设置好保存的文件名及路径。4.CSS4.CSS样式导入与导出样式导入与导出6.5 在在Dreamweaver中编辑中编辑CSS样式样式2022-4-20网页设计技术34(2)(2)链接或导入外部样式表文件链接或导入外部样式表文件样式表文件是一个仅包含样式规则的文本文件。通过“附加样式表”命令可将其他页面中

23、的样式应用到当前页面中，具体操作： 在“CSS样式”面板中，单击“附加样式表”按钮，打开“链接外部样式表”对话框。 在“选择样式表文件”对话框中，指定样式表的路径及名称，则创建的外部链接样式表显示在“CSS样式”面板中。 注意：编辑外部样式表将影响到所有链接引用它的文编辑外部样式表将影响到所有链接引用它的文档。用户可以将档。用户可以将CSSCSS样式表文件复制到自己的站点内编样式表文件复制到自己的站点内编辑。辑。6.5 在在Dreamweaver中编辑中编辑CSS样式样式返回返回6.6 CSS应用示例应用示例 例例6.4 设置文字样式设置文字样式 2022-4-20网页设计技术35设置文字效果

24、p font-family:黑体; /* 文字字体 */ font-size:35px; /* 文字大小 */ color:#0033CC; /* 颜色 */ font-weight:bold; /* 粗体 */ font-style:italic; /* 斜体 */ text-decoration:line-through; /* 删除线 */CSS设置文字效果2022-4-20网页设计技术366.6 CSS应用示例应用示例 l段落是由一个个文字组合而成的，同样是网页中最重要的组成部分之一，因此前面提到的文字属性，对于段落同样适用。但CSS针对段落也提供了很多样式属性。l在使用Word编辑文

25、档时，可以很轻松的设置行间距，在CSS中通过“line-heightline-height”属性同样可以轻松地实现行距的设置。在CSS中“line-height”的值表示的是两行文字之间基线的距离。如果给文字加上下划线，那么下划线的位置就是文字的基线。l “line-height”的值跟CSS中所有设定具体数值的属性一样，可以设定为相对数值，也可以设定为绝对数值。在静态页面中，文字大小固定时常常使用绝对数值，达到统一的效果。而对于论坛、博客这些可以由用户自定义字体大小的页面，通常设定为相对数值，可以随着用户自定义的字体大小而改变相应的行距。CSS文字段落文字段落例例6.5 设置文字段落设置文字

26、段落 行间距line-height 冬至，是我国农历中一个非常重要的节气，也是一个传统节日，至今仍有不少地方有过冬至节的习俗。冬至俗称“冬节”、“长至节”、“亚岁”等。早在二千五百多年前的春秋时代，我国已经用土圭观测太阳测定出冬至来了，它是二十四节气中最早制订出的一个。时间在每年的阳历12月22日或者23日之间。 冬至是北半球全年中白天最短、黑夜最长的一天，过了冬至，白天就会一天天变长。古人对冬至的说法是：阴极之至，阳气始生，日南至，日短之至，日影长之至，故曰“冬至”。冬至过后，各地气候都进入一个最寒冷的阶段，也就是人们常说的“进九”，我国民间有“冷在三九，热在三伏”的说法。在我国古代对冬至很

27、重视，冬至被当作一个较大节日，曾有“冬至大如年”的说法，而且有庆贺冬至的习俗。汉书中说：“冬至阳气起，君道长，故贺。”人们认为：过了冬至，白昼一天比一天长，阳气回升，是一个节气循环的开始，也是一个吉日，应该庆贺。晋书上记载有“魏晋冬至日受万国及百僚称贺其仪亚于正旦。”说明古代对冬至日的重视。2022-4-20网页设计技术38行间距示例行间距示例 例例6.6 制作首字下沉效果制作首字下沉效果许多报刊、杂志的文章第一个字都很大，并且向下浮动，这种首字放大的效果，同样可以方便地应用在网页中。在CSS中首字下沉的效果是通过对第一个字进行单独设置样式风格来实现的。首字放大 端午节是古老的传统节日，始于中

28、国的春秋战国时期，至今已有2000多年历史。据史记“屈原贾生列传”记载，屈原，是春秋时期楚怀王的大臣。他倡导举贤授能，富国强兵，力主联齐抗秦，遭到贵族子兰等人的强烈反对，屈原遭馋去职，被赶出都城，流放到沅、湘流域。他在流放中，写下了忧国忧民的离骚、天问、九歌等不朽诗篇，独具风貌，影响深远（因而，端午节也称诗人节）。公元前278年，秦军攻破楚国京都。屈原眼看自己的祖国被侵略，心如刀割，但是始终不忍舍弃自己的祖国，于五月五日，在写下了绝笔作怀沙之后，抱石投汨罗江身死，以自己的生命谱写了一曲壮丽的爱国主义乐章。 传说屈原死后，楚国百姓哀痛异常，纷纷涌到汨罗江边去凭吊屈原。渔夫们划起船只，在江上来回打捞他的真身。有位渔夫拿出为屈原准备的饭团、鸡蛋等食物，“扑通、扑通”地丢进江里，说是让鱼龙虾蟹吃饱了，就不会去咬屈大夫的身体了。人们见后纷纷仿效。一位老医师则拿来一坛雄黄酒倒进江里，说是要药晕蛟龙水兽，以免伤害屈大夫。后来为怕饭团为蛟龙所食，人们想出用楝树叶包饭，外缠彩丝，发展成棕子。说明： 在CSS定义中属于一个行内元素,在行内定义一个区域，也就是一行内可以被 划分成好几个区域，从而实现某种特定效果。 本身没有任何属性。 在p span 的 css规则定义：分类方框-浮动-左对齐 在CSS定义中属于一个块级元素 。 可以包含段落、标题、表格