css样式使用.doc

Css样式样式:是用来控制网页外观的一组格式属性。CSS（Cascading Style Sheets)样式可以用来一次对多个网页的所有样式进行控制。CSS样式表可以同时链接多个网页，当样式表更新或被修改之后，所有应用了该样式表的文档都会被自动更新。10.1 设置页面属性页面属性是用来设置页面标题、页面背景图像或颜色、页面默认的文本和链接颜色以及页面与网页元素之间的边距。 一. 设置页面属性方法：1)选择修改页面属性。打开设置页面属性外观窗口。 2)设置外观选项卡 字体 指定在网页中使用的默认字体。 大小 指定在网页中使用的默认字体大小。 文本颜色 指定显示字体的默认颜色。 背景颜色 指定页面使用的背景颜色。 背景图像 指定页面的背景图像。 左边距 和 右边距 指定左右页边距的大小。 上边距 和 下边距 指定上下页边距的大小。 3)打开并设置“链接页面属性”选项 窗口。 字体 指定链接文本使用的默认字体 大小 指定链接文本使用的默认的字体大小。 链接颜色 指定应用于链接文本的颜色。 已访问链接的颜色 指定应用于访问过的链接的颜色。 鼠标经过时链接的颜色 指定当鼠标（或指针)位于链接上时应用的颜色。 活动链接的颜色 指定当鼠标（或指针)在链接上单击时应用的颜色。 下划线样式 指定了应用于链接的下划线样式。 4)打开并设置“标题”选项 窗口。 标题字体 指定各标题样式文本使用的字体 字体加粗 字体倾斜 标题1标题6设置各标题字体的大小与颜色 练习10.1 1) 新建或打开一个网页，设置页面默认字体、字体大小、字体颜色。 2) 设置页面上边距为0、左边距为10。 3) 设置自选链接字体，设置链接颜色以及下划线样式。 4) 设置标题样式，并应用该样式到文章的各标题。10.2 创建 CSS 样式一.创建 CSS 样式方法： 1)选择窗口 CSS样式，打开 CSS 样式面板点击面板底部的 “+”图标。 2)进行下列选项的选择： 类：用于创建自定义样式。即创建一个可以作为 class 属性应用于文本区域或文本块的样式。 标签：重定义HTML标签。对指定的 HTML 标签的默认格式进行重新定义。（注意：使用重定义标签，会改变许多页面的布局。) 高级：用于对特定的标签组合进行格式定义。 3) 为新样式输入名字、选择标签，或者选择标签组合。 样式的名字前边必须要有一个句点。如果没有输入这个句点，Dreamweaver 自动输入。名字可以包含任何字母和数字的组合，但文字必须放在句号后。例如，.myhead1。 要重新定义 HTML 标签样式，可以键入一个 HTML 标签或者从弹出菜单中选择一个。 选择高级后，可以输入任何一个有效的表达式（例如，td, 或 #myStyle)，或者从弹出菜单中选择。可供选择：a:active（选中超链接), a:hover（光标位于超链接上), a:link（超链接没有任何动作时), 和 a:visited（访问过的超链接)。 4)选取要定义的样式出现的位置：定义在某个文件中或仅对本文档。 5)点击确定。出现样式定义对话框。 6)为新的 CSS 样式选择格式。在文档窗口中不显示的属性在对话框中会用一个星号（*)来标记。 I.样式对话框中的类型面板 字体：设置样式的字体。 大小：定义文本的字体大小。可以通过选取数字和度量单位来选择具体的字体大小，也可以选择一个相对的字体大小。最好使用象素Pixels 作为单位，这样可以阻止浏览器中的文本变形。 样式：定义字体样式为 Normal(正常)，Italic（斜体)，或者 Oblique（倾斜)。 行高：设置文本所在行的行高。如果选取 Normal，行高是根据字体大小自动计算的，可以自己键入一个精确的数值并选取一个计量单位。 修饰：添加下划线，上划线，整行划线，或令文本闪烁。 粗细：给字体指定粗体字的磅值。Normal 等同于 400；Bold 等同于 700。 变形：选取字体的变种，例如 small caps（小型大写字母)。 大小写：将选区中每个单词的第一个字母转为大写，或者令单词全部大写或全部小写。 颜色：定义文本色。 练习10-21)创建自定义的css样式标题1、标题2等，使用类型面板设计字体样式，并应用到当前网页中。 2)定义BODY和TD标签设置网页与表格字体大小为10点数。 3)创建自定义的css样式“正文”，字体大小为点数，字体幼圆；行高为1.5倍行高 II.样式对话框中的背景面板 背景颜色：设置元素的背景色。 背景图象：设置元素的背景图像。 重复：确定背景图像是否以及如何重复，选项如下： o 不重复：在元素的开头显示一遍图像。 o 重复：在元素的背景部分水平和垂直方向平铺图像。 o 水平/垂直：分别在水平和垂直方向重复显示。 （注：使用这一特性可以重新定义 body 标签以创建不平铺或不重复的背景图像。) 附件：确定背景图像是固定在原来位置还是随内容进行滚动。 水平位置和垂直位置：指定背景图像相对于元素的初始位置。如果这两个选项都选择居中，那么背景图像将在页面中居中对齐。 练习10-31)修改CSS标题2样式，设置自选背景； 2)修改Body标签,使用背景面板设置背景图象.（不重复、居中、固定) .样式对话框中的区块面板 单词间距:设置单词间距离。 字符间距:设置字符间距离. 垂直对齐:指定元素的垂直对齐属性，通常是与它的母元素相比较而言。 文本对齐:确定文本在元素内如何排列对齐。 文本缩进:确定文本第一行的缩进值。负值用于将文本第一行向外拉. 空白间距:确定如何处理元素内的空白符。 练习10-4.修改标题，使用区块面板设置文本对齐为居中。 . 重定义“正文”标签，缩进个字。 .样式对话框中的盒子面板 宽度/高度：设置元素边界宽度与高度。 .样式对话框中的边框面板 宽度：设置边框宽度。 颜色：设置边界框的颜色。可以分别对每条边界设置颜色。 样式：确定边界框样式。 练习10-5新建标题3样式，使用边框面板设置一条下边框（细线)，样式为双线、颜色为红色、 .样式对话框中的列表面板 样式：确定无序列表或有序列表的外观。 项目图象：为无序列表指定一幅自定义图像。点击 Browse（Windows)或 Choose（Macintosh)来查找图像，或直接输入图像的路径。 位置：确定列表项排列是根据缩进量换行 (outside)， 还是根据页边距换行 (inside)。 练习10-6新建“列表”样式，使用列表面板设置一幅图象作为项目符号。 .样式对话框中的定位面板 定位面板用于将被选文本的标签或块转到一个使用了（在层参数选项中设置的用以定义层的)默认标签的新层上去。 类型：确定浏览器定位层的方法： o Absolute 根据在定位框中所输入的相对于页面左上角的坐标来放置层。 o Relative 根据在定位框中所输入的相对于文档中对象位置的坐标。 o Static 将层置于文本流程中自己的位置。 显示：确定层的最初显示状态。如果没有指定这一属性，在默认情况下多数浏览器会继承原始的变量值。 o Inherit：继承层的载体的显示属性。如果层没有载体，它将是可视的。 o Visible：显示层的内容，不管层的载体的属性知如何。 o Hidden：隐藏层的内容，不管层的载体的属性如何。 Z轴：确定层的堆叠顺序。编号较大的层会显示在编号较小的层上边。变量值可以是正值也可以是负值。 溢出：（仅对 CSS 层有效) 确定如果层的内容超出了层的大小时如何处理。浏览器经常放大文本从而使它与在 Dreamweaver 的 Document 窗口中相比更占地方。该属性就是控制如何处理这种情况的。 o Visible 增加层的大小，从而将层的所有内容显示出来。层的扩大是向下和向右进行。 o Hidden 保持层的大小不变，将超出层的内容剪裁掉。不提供滚动条。 o Scroll 不管层的内容是否超出了层，都给层添加一个滚动条。 o Auto 只有在内容超出层的边界时才显示滚动条。 定位：指定层的位置和大小。浏览器如何解释层的位置取决于 Type 的设置。如果内容超出层的范围，尺寸大小的值就不予考虑了。 层的位置和大小的默认单位是像素。对 CSS 层而言，可以指定下列计算单位：pc（picas-十二点活字)，pt（points-磅值)，in（inches-英寸)，mm（millimeters-毫米)，cm（centimeters-厘米)，（ems)，（exs)或 %（percentage of the parents value-与层的母体的百分比)。单位缩写必须紧跟着设定值而不能有空格：如 3mm。 剪辑：定义层的可视部分。如果指定了剪辑区域，可以使用 JavaScript 之类的脚本语言读取并通过属性设置创建出特殊的效果（例如 擦去效果)。 .样式对话框中的扩展面板 扩展面板：是用来控制某些扩展功能。 分页：在打印的时候强迫在样式控制的对象前后换页。 光标：当光标滑过样式控制的对象时改变光标的图像。 滤镜：给由样式控制的对象应用特效，包括模糊和倒置等。 滤镜效果： Alpha 设置不同的透明度变化效果 Blur 建立模糊效果 DropShadow 建立一种偏移的影象轮廓，即投射阴影 FlipH 水平翻转 FlipV 垂直翻转 Glow 为对象的边界增加色彩光效 Gray 将图片以灰度形式显示 Invert 将色彩、饱和度以及亮度值完全反转,类似底片效果 Light 在一个对象上进行灯光投影 Mask 为一个对象建立彩色透明遮罩 Shadow 为对象建立轮廓的影效果 Wave 在X轴和Y轴方向利用正弦波打乱图片 Xray 只显示对象的轮廓 练习10-71)新建一个样式Alpha，仅应用该文档，设置透明度为50%（在扩展面板的滤镜下拉列表框中设置Alpha(Opacity=50)新建一个样式Alpha，设置扩展 Alpha(Opacity=100, FinishOpacity=0, Style=2)2)新建一个样式invert，仅应用该文档，(在扩展面板的滤镜下拉列表框中选择invert3)新建一个样式gray，仅应用该文档，(在扩展面板的滤镜下拉列表框中选择gray4)插入图片后分别设置以上新建的样式后在浏览器中查看效果。 5)新建一个样式mouse,设置当光标滑过样式控制的对象时改变光标的图像为hand10.3应用CSS 样式一.应用自定义CSS样式1. 在文档中，选择要应用CSS样式的文本或其它网页元素。 2. 执行下列操作之一： o 在“CSS样式”面板中，右键单击要应用的样式的名称，然后从上下文菜单选择“应用”。 o 在属性检查器中，从“样式”弹出式菜单中选择要应用的样式。 二.去掉已应用的样式 1. 选择要从去掉样式的对象或文本。 2. 在属性检查器中，从“样式”弹出式菜单中选择“无”。 10.4附加与链接CSS 样式表在编辑网页时可以给文档附加或链接一个CSS 样式表来应用样式。 当对一个 CSS 样式表进行了编辑后，所有使用该 CSS 样式表链接的文档都会根据修改进行更新。 I.附加 CSS 样式表： 1.选择窗口CSS样式打开CSS样式面板2.在 CSS样式面板上，右击窗口从弹出的菜单中选择“附加样式表”。也可以点击 CSS样式面板底部的附加样式表图标。 3.输入文件名或通过浏览查找需要附加的样式表文件4.点击确定按钮 。 注：附加的样式表中不包含仅适用于本文档的样式。 练习10-8新建一个网页，附加以上建立的CSS样式表。 II.链接外部 CSS 样式表： 1)打于CSS样式面板。 2)在CSS样式面板上右击窗口然后在弹出的菜单中选择样式表。 3)在对话框中点击链接。 4)在链接对话框中，查找外部 CSS 样式表，或者在 File/URL 框内直接输入样式表的路径。 5)选取链接或导入选项然后点击确定。 练习10-91)链接外部CSS样式表。 2)对当前网页中的文本应用链接的样式。 10.5 修改CSS 样式与样式表一.修改CSS样式1. 打开CSS样式面板 2. 单击要编辑的样式以选中 3. 单击位于 CSS 面板底部的“编辑样式”按钮 4. 打开CSS样式定义对话框，进行修改 5. 修改完毕后，点击“确定”按钮。 所作的更改将立即应用于当前文档。二.修改CSS样式表：1. 在“CSS样式”面板中，单击要编辑的样式表以选中 2. 单击位于“CSS样式”面板底部的“编辑样式表”按钮,所选CSS样式表的样式随即出现在对话框中。 3. 在对话框中，选择要编辑的样式，然后单击“编辑”。出现“CSS样式定义”对话框。 4. 根据需要修改样式，然后单击“确定 如果修改的样式表为多个文档使用的 CSS 样式表，所作的更改将反映在相应的页面中。本章要点设置页面属性设置整个网页的基本属性（包括页面背景图像或颜色、页面默认的文本颜色、链接颜色、页面与网页元素之间的边距）选择修改页面属性打开设置页面属性窗口进行设置创建CSS 样式1)打开CSS样式面板面板底部的“+”图标2)样式的种类： 自定义样式：自己创建一个网页样式。(选择此项，需输入样式名） 重定义HTML标签：对指定的 HTML 标签进行重新定义 使用CSS选择器：对链接的格式进行重新定义 3)样式存放位置：存放在样式表文件中或仅对本文档。4)在样式对话框中打开类型、背景、区块、边框、扩展等面板进行设置应用CSS样式1)选择要应用CSS样式的网页元素选择要应用的样式名后选择“应用”2)选择要从去掉样式的对象或文本在属性面板中从“样式”菜单中选择“无 修改CSS样式打开CSS样式面板 选择要编辑的样式 单击 CSS 面板底部的“编辑样式”按钮 打开CSS样式定义对话框进行修改修改完毕后点击“确定”按钮。更改将立即应用于当前文档。样式表文件的使用在编辑网页时可以给文档附加或链接一个CSS 样式表来应用样式。 当对一个 CSS 样式表进行了编辑后，所有使用该 CSS 样式表链接的文档都会自动更新。一、Dreamweaver设置页面属性操作步骤1. 打开页面属性对话框 选取文件菜单中的打开命令 打开网页artical.htm 选取修改菜单 选取页面属性选项2. 设置外观属性 选取页面字体框 选取宋体项目 选取大小文本框 选取单位框 设置文本大小12 选取点数项目 点击文本颜色按钮 选择所需的颜色 选取左边距框 选取上边距文本框 设置左边距为10 点击确定按钮 输入上边距值 3.设置页面的链接属性 选取链接项目 选取链接字体框 选取要设置的链接字体 选取大小文本框 选取文字大小单位框 设置链接文字大小 选取点数(pt)项目 点击链接颜色按钮 选取所需的颜色 选取下划线设置框 选取仅在变换图像时显示下划线项目4.设置标题样式属性 选取标题项目 选取标题字体框 选取标题字体黑体 点击粗体按钮 选取标题1文本框 设置标题1字体大小为20象素 点击标题 1 的颜色按钮 选择所需的字体颜色 点击确定按钮 5.对网页文本设置标题样式 选择要设置标题1字体的文字 选取格式框 选取标题1格式 重复选择文本并设置标题1样式 二、Dreamweaver创建自定义样式操作步骤1. 创建样式表文件 选取窗口菜单 选取 CSS 样式 点击新建 CSS 样式按钮 输入新建的 CSS 样式名 点击确定按钮 点击保存(S)按钮 输入要保存的样式表文件名（默认扩展名为. css) 将新样式存放在样式表文件中可以在其它网页中使用，该样式表文件应存放在自己的站点文件夹中 ”2. 设置新建样式 选取字体框 选取方正姚体, 黑体项目 选取大小文本方块 选取24 选取粗细框 选取粗体项目 选取行高框 选取行高单位框 输入行高 选取倍行高项目 点击文本颜色按钮 选取要设置的文本颜色 点击确定按钮 3.应用样式 选择要应用样式的文本 选取样式框 选取bt1样式 文本应用所选样式4.添加新的样式 点击新建 CSS 样式按钮 点击确定按钮 输入自定义样式名 样式自动存放在已建立的样式表文件中 ） 5. 设置新的样式选取字体框选取幼圆选取大小框选取12选取单位框选取点数(pt)选取粗细框选取细体选取行高