网页制作案例教程(HTML+CSS+JavaScript) 清华大学出版社 第8章 CSS样式表
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（4）输入样式表（Imported Styles）
输入外部样式表方法同链接的方法类似，不 同之处在于链接法不能同其他方法结合使用 ，但输入法则可以。注意，使用”@import” 导入外部的样式表文件时，需要在<style> 标签内，如： @import url(company.css);
8.2 CSS样式编辑与属性设置
③设置选择器类型为“类”，名字为 .dazi ④选择样式表的保存位置，输入样式表 的文件名，单击“保存”按钮，保存样 式表文件，同时打开“.dazi的CSS规则定 义”的对话框，如图8-2-5所示。
图8-2-5 “.dazi的CSS规则定义”的对话框
（2）附加外部CSS样式
网页如果需要链接或套用外部的样式表，就 需要将外部的样式附加到当前网页中，操作 为：
对已经定义的CSS样式进行重新编辑，要在 CSS样式面板中选择要编辑的样式名称，然 后点击面板下方的 按钮，会弹出“CSS规 则定义”对话框，在对话框中可以对CSS样 式重新编辑。
8.2.3 设置CSS样式属性
（1）CSS 类型属性
Font-family为样式设置字体系列（或多组字体系 列）。 Font-size定义文本大小。 Font-style指定“正常”、“斜体”或“偏斜体 ”作为字体样式。 Line-height设置文本所在行的高度。 Text-decoration向文本中添加下划线、上划线或 删除线，或使文本闪烁。
8.1.2 CSS基本语法 选择符{属性:值;} （1）选择符 用来指定针对哪一个HTML标签应用样式表的部分，任何 HTML元素都可以是一个CSS的选择符。例如， P { color: red } 当中的选择符是P，规则就会选择所有<p>标签的样式，该 规则表示在段落标签里的内容为红色。 （2）声明 声明是包含在大括号中的内容，首先给出属性名，可以包括 颜色、边界和字体等，然后是属性值，来给一个属性能够接 受的值，加上分号之后可以指定多个样式。例如： H1{ font-size: 24pt; color: green } 上述语句表示标题中的字体大小为24pt，颜色为绿色。
网页制作案例教程
毋建军 郑宝昆 郭锐 编著
清华大学出版社
第8章 CSS样式表
本章学习目标（知识要点）
了解CSS样式的概念 掌握CSS样式表的创建方法 掌握应用CSS样式表的方法
本章学习导航
CSS不属于HTML，它属于HTML的辅助语言， 是对HTML语言功能的一种扩展，用CSS可以做 出美观工整令浏览者赏心悦目的网页，CSS能 给网页添加许多我们想象不到的效果，本章主 要介绍创建CSS样式的操作，编辑和应用CSS 样式的基本操作。 本章内容在全书知识结构中所处位置如图所示
width：10in
Height：1cm Font-size：5mm Font-size：7pt Font-size：1pc Font-size：1.5em 表示为当前字符的1.5倍大小 Font-size：1.5ex Font-size：10px Width：50%
（7）选择器
CSS中一个很重要的概念是选择器（selector ），所有HTML语言中的标记都是通过不同 的CSS选择器进行控制的，通过它告诉CSS 要它给什么东西设置格式，用户只需要通过 选择器对不同的HTML标签进行控制，并赋 予各种样式声明，即可实现各种效果。
“链接”：网页与样式表文件的关系是链接 关系，而且不将样式表的信息导入网页中。 “导入”：将外部样式表文件的信息导入到 当前网页文档中。
5）单击“确定”按钮。这样外部的CSS 样式就会链接或导入到当前文档中。
（3）应用CSS样式
将设计好的CSS样式应用到网页中，具体操 作为： 1）首先要打开需要链接CSS样式的文档， 选中文字或图片等网页元素，执行以下操作 之一：
（6）关于单位
用CSS来指定大小的时候，在数值后面可以 加上一些单位来限定，这些单位分成绝对值 的单位和相对值的单位。具体描述表8-1-1 。
单位 描述 例
in
cm mm pt pc em ex px %
英寸（inch）
厘米（centimeter） 毫米（millimeter） 磅（point） 皮卡（pica） 相对于当前对象内文本的字体尺寸 相对于字符高度的相对尺寸 像素（pixel） 针对其他基准的大小的百分比
（3）链接样式表（Linked Style）
链接样式表也是外部样式表，它首先定义个扩展名为.css的文件，该文件包含 所有需要用到的CSS规则，不包含任何HTML代码，比如blue.css。创建样式 表文件后，需要将其与要进行格式设置的HTML文件进行关联，这种添加样式 表的方式是通过HTML中<link>标签来实现的， Link标签只在HTML页面的 <head>部分出现。链接样式表的方法就是在HTML文件的<head>部分添加 如下所示代码： <head> <title>line</title> <link rel="stylesheet" href="./css/andreas08(blue).css" type="text/css" media = " screen, projection " /> </head>
8.1.4 CSS样式和样式表应用方法
（1）行内样式表
行内样式表是最简单的一种使用方式，由标签 style属性支持，css规则直接写在标签内，如： <p style=”font-size:10px; bgcolor:#fff000; ”>
（2）嵌入样式表（Embeded Styles） 嵌入式样式表是一个样式集，它是网页代码的一 部分，在带有<style>标签的HTML文件内直接嵌入 CSS，它与行间样式表有相似的地方，但是又不同 ，行间样式表的作用域只有一行，而嵌入式样式表 可以作用在整个文档中。 对于嵌入式样式表，使用<style>标签，它也只能 在<head>内使用，语法格式为： <style type=””text/css” media=”media-type”> 其他CSS规则 </style>
2）在CSS样式面板中创建CSS样式表文 件
下面以创建一个大字的CSS为例，在CSS面 板中创建CSS样式的操作为：
①在CSS样式面板中，单击“新建”按钮 ，打开 “新建CSS规则”对话框，如图8-2-3所示。
Leabharlann Baidu
图8-2-3 “新建CSS规则”对话框图
类（可应用于任何HTML元素）：CSS样式可应用到网页中任何范 围或任何文本区域中。 ID（仅应用于一个HTML元素）：CSS样式只能应用到网页中一个 HTML元素。 标签（基于选择的内容）：标签样式将重新定义HTML 符合内容（ID、上下文选择器等）：CSS样式选择器样式将重新 定义一些标签的特定格式或包含某特定属性的所有标签的格式。
（3）组合规则 用户通过大括号内列出声明，有时候对于同一个选择符列出了几个规则，这时候规则是 可以合并起来写的，同时很多不同的选择符却具有重复的样式表声明，为了减少样式表 的重复声明，组合的选择符声明是允许的。例如： H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif } 该规则标明H1, H2, H3, H4, H5, H6的颜色都为红色，并且字体为sans-serif。 （4）继承 实际上，所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更 改。例如，一个BODY定义了的颜色值也会应用到段落的文本中。 有些情况是内部选择符不继承周围的选择符的值，但理论上这些都是特殊的。例如，上 边界属性是不会继承的；直觉上，一个段落不会有同文档BODY一样的上边界值。 （5）注释 注释是用户嵌入CSS代码中的专用位，浏览器会忽略掉注释。样式表里面的注解使用C 语言编程中一样的约定方法去指定。CSS的注释以字符/*开始以*/结束，两者之间的内 容浏览器都会忽略掉，注解的例子如以下格式：
网站发布、测试和维护 提高篇 Web服务器创建 网页中常见Flash制作 JavaScript网页应用 JavaScript篇 Javascript概述 使用CSS布局规划网页 CSS篇 CSS样式表 利用模板和库创建网页 交互式网页表单的设计与使用 网页布局规划设计 HTML篇 网页基本元素设计 HTML基础 网页设计与开发流程（ AscentSys医药商务系统） 基础篇 网页制作基础
8.2.1 创建CSS新样式
（1）创建样式表文件
1）从CSS样式模板中创建CSS样式表文件
①单击菜单栏中“文件”|“新建”命令，打开新建文 档对话框，可以选择“空白页”或“示例中的页” ②点击“创建”按钮，新建了一个CSS样式表文件。 ③新建的CSS样式表文件与HTML文档不同的地方是： 只有“代码”视图，其他视图按钮已被禁用。CSS样 式表是纯文本文件，其内容将不能在浏览器中查看。 ④编辑样式表后，单击菜单栏中“文件”|“保存”命 令，则可以保存一个外部的样式表文件。
选择器包括：
标签选择器 类选择器 id选择器 群组选择器 后代选择器 伪类（Pseudoclasses）
8.1.3 CSS样式和样式表类型 （1）外部文件方式 外部文件方式即将CSS写成一个文件的方式，在HTML 文 档头通过文件引用来进行风格控制。CSS文件可在 Dreamweaver的菜单下的styles选项来创建，相对说来， 在Dreamweaver下创建比较简单；如果熟悉CSS 属性，可 直接在记事本里写，最后的文件扩展名为CSS。 （2）内部文档头方式 这种方式与外部文件方式区别在于这种方式是将风格直接 定义在文档头<Head></Head>之间，而不是形成文件。 （3）直接插入式 直接插入式很简单，只是在每个HTML标志后书写CSS属性 就可以了。
8.1 CSS入门
8.1.1 CSS简介
CSS为Cascading Style Sheets的简写，即层叠样式 表。这里的样式就是指的格式，是各种网页元素所 呈现的形态，比如网页中字体的大小、颜色、图片 的安排等。层叠的意思就是CSS通常被译作层叠样 式表单，是用于增强控制网页样式并允许将信息与 网页内容分离的一种标记性语言。CSS提供比HTML 标签属性更多的特性让用户设置，应用起来也相对 灵活。有了CSS样式表后，许多HTML无法实现的功 能均可以实现了，并且会变得简洁，容量缩小。
1）打开CSS样式表面板。 2）执行以下操作之一：
单击CSS面板底部的“附加样式表”按钮 或者右键单击CSS样式面板，在弹出的快捷 菜单中选择“附加样式表”命令。
3）打开“链接外部样式表”对话框，如 图8-2-7所示。
图8-2-7 “链接外部样式表”对话框图
4）点击“浏览”按扭，选择要添加的样 式文件。添加的形式有两种：
在属性检查器中的“类”下拉列表中选择编辑好 的样式，如选择“dazi” 在CSS样式面板中，右击要应用的样式名称（如 .dazi），在弹出的快捷菜单中选择“套用”。
2）取消样式的应用，只需在选择己应用 样式的文本，在“属性检查器”中的“ 样式”下拉列表中选择“无”即可。
8.2.2 编辑CSS样式
Font-weight对字体应用特定或相对的粗体量。 Font-variant设置文本的小型大写字母变体。 Text-transform将所选内容中的每个单词的首字母大写或将文本 设置为全部大写或小写。 color 设置文本颜色。
（2）CSS 样式背景属性 背景颜色设置元素的背景颜色。两种浏览器都支持 背景颜色属性。 背景图像设置元素的背景图像。两种浏览器都支持 背景图像属性。 Background Repeat确定是否以及如何重复背景图 像。两种浏览器都支持重复属性。 Background Attachment确定背景图像是固定在其 原始位置还是随内容一起滚动。 Background Position (X) 和 Background Position (Y)指定背景图像相对于元素的初始位置。