第5章 CSS层叠样式表
5.1 CSS基本概念
5.2 在DW中创建CSS
5.3 CSS滤镜
5.1 CSS基本概念
• CSS是Cascading Style Sheets（层叠样式表）的缩写 • CSS是HTML的扩展，是网页设计中不可或缺的核心 技术 • 利用CSS可以有效地对页面的布局、字体、颜色、背 景和其他效果实现更精准的控制 • CSS技术最大的优势就是实现了结构与形式的分离， 从而更加有利于网站的开发和维护 • CSS布局（CSS层）是很有效的网页布局方式
用“CSS面板”
• •
用“属性面板”
5.2 在DW中创建CSS
【案例2】 利用CSS为网页设置样式
设 置 后
设 置 前
5.2 在DW中创建CSS
【案例2】 利用CSS为网页设置样式 （样例文件为：mysite_ch5\exam8_10\css-0.html） 单击“页面属性”按钮，设置“页面字体”为幼圆，“大小”12pt， “文本颜色” 为#006600，自动添加如下代码及样式（如图）： <style type="text/css"> <!-body,td,th { font-family: 幼圆; font-size: 12pt; color: #006600; } --> </style>
5.1 CSS基本概念
5.1.1 样式和规则
（3）类选择符 • 在选择符中不指明HTML标签名，这样可以把几个不同的元素定 义成相同的样式（用法二） 例：定义一个right类 ，表示文字靠右对齐 .right{text-align:right} 这样定义的类，可以应用到任何元素，如段落、标题等： <p class="right"> 这个段落向右对齐</p> <h1 class="right">这个标题向右对齐</h1> <h3 class="right">这个标题向右对齐</h3>
前面建立的是“标签选 择器”，这里是“类选择 器”
5.2 在DW中创建CSS
【案例2】 利用CSS为网页设置样式 （样例文件为：mysite_ch5\exam8_10\css-0.html） 使用“属性”面板，设置当前选定对象的CSS样式属性 例如：选择最后一行文字，设置为蓝色，加粗，如下图
这里自动设置为“类选择器”
提示：单击属性面板上的“样式”，选 择“附加样式表”，如图所示
5.2 在DW中创建CSS
5.2.1 建立CSS规则
建立CSS规则，可以使用方法： 用“页面属性”（“属性面板”上的按钮）
• 设置后查看代码，例如：body,td,th { font-size: 12px }，指定了 整个网页，表格单元格和表格标题的3个标签的样式 课堂演示（教材P.148） 先选定对象，再通过属性面板，如设置文本的字体、颜色、大 小、对齐等，系统将自动创建样式
5.1 CSS基本概念
5.1.2 层叠和顺序
内部样式 在<head>与</head>之间用style标签加入css样式定义 适用于所指定的网页样式 例如：前面的【案例1】在HTML文档中加入CSS样式
5.1 CSS基本概念
5.1.2 层叠和顺序
外部样式 方法一：链接样式（Linked styles） 在网页文件的head部分用link标签链接外部样式表文件 <head> <link href=”my.css” rel=”stylesheet” type=”text/css” > </head> 方法二：导入样式（Imported styles） 在网页文件的head部分@import命令引用外部样式表文件。 <style type=”text/css”> <!-@import url“my.css” -- > </style>
本章作业
1. 2. 教材P.161—1~5 先创建一个网页，创建完成后保存文档。然后仿照【案例2 】，复制以上创建的网页为一个新网页，再在新网页中利 用CSS修改标题、文本、列表、表格等对象的格式。 （提示：你需要提交2个网页，原网页和用CSS修改的网页）
要求： 1. 网页整体必须用表格排版，页面宽度800像素 2. 网页中至少包含2级不同的标题，要有正文以及适当的图片 3. 要注意网页所表现的内容，例如【案例2】介绍了某个景点 4. 最后一行要写上你的个人信息（班级、学号、姓名）
5.3 CSS滤镜
【案例3】 利用CSS滤镜设置文字和图片的显示效果 （样例文件1：mysite_ch5\filter_1.html） （样例文件2：mysite_ch5\filter_2.html） （样例文件3：mysite_ch5\filter_3.html）
style=“FILTER: alpha(opacity=50)” （图片为半透明） style=“FILTER: alpha(opacity=0, finishopacity=100, style=2, startx=0, starty=0, finishx=180, finishy=270” （图片为线性渐变） 文字滤镜参见“filter_3.html”
5.1 CSS基本Web页面中，CSS有下面3种层叠方式： 外部样式：存储在一个单独的外部CSS文件中的若干组CSS规则。 使用link标签链接到外部样式表文件（.css文件），如果修改外部样 式表文件，那么所有链接到该样式表文件的网页都将随之变化 内部样式：若干组包括在 HTML 文档head部分的 style 标签中的 CSS规则，为当前网页设置样式信息。内部样式的内容在“CSS样 式”面板中的“所有规则”窗格内列出，此样式仅对当前文档有效 内联样式：通过HTML标签的style属性为单个网页元素嵌套样式信 息（内联样式不符合“结构与形式分离”的网页设计原则，故不建 议使用） 顺序问题： 当同一个元素（例如段落P的颜色）出现不同的CSS定义时，内层 屏蔽外层（内层定义优先）
5.1 CSS基本概念
5.1.1 样式和规则
（3）类选择符 • 把相同元素分类定义为不同的样式（用法一） • 定义类选择符时，在自定类的名称前面加一个点号 • 类名为英文单词或以英文开头与数字的组合 例：为段落定义两个类，一个向右对齐，一个居中对齐 1. 先定义类 p.right{text-align:right} p.center{text-align:center} 2. 应用时，在HTML标签里加入class类参数 <p class="right"> 这个段落向右对齐的</p> <p class="center">这个段落是居中排列的</p>
能使网页中的文字或者图片产生丰富多彩的艺术效果 CSS具有14个滤镜（filter）属性 （参考教材P.158） 例如： Alpha 滤镜 Opacity--透明度，范围从0 到 100（从透明到不透明） Finishopacity--设置渐变透明，用来指定结束时的透明度， 范围也是从0 到 100 Style--指定透明区域的形状特征。其中0代表统一形状、1代 表线形、2代表放射状、3代表长方形 startx和starty--代表渐变透明效果开始的X和Y坐标 finishx和finishy--代表渐变透明效果结束的X和Y的坐标
可以单击“CSS样式”面板上 的某条规则，查看其“属性” 或者单击“编辑属性”按钮， 修改属性
5.2 在DW中创建CSS
【案例2】 利用CSS为网页设置样式 （样例文件为：mysite_ch5\exam8_10\css-0.html） 展开“CSS样式”面板，单击“新建CSS规则”按钮，创建类 “.title_1”，如图所示。 将样式应用与网页中的两个标题
5.1 CSS基本概念
5.1.2 层叠和顺序
内联样式 在HTML标签内使用style属性定义的，适用于该标签的个别样式 例如： <html> <head> </head> <body> <p style=“color:#ff00ff;font-family:„隶书‟;font-size:28“> 内联样式举例 </p> </body> </html>
5.1 CSS基本概念
5.1.1 样式和规则
【案例1】在HTML文档中加入CSS样式 步骤： 1. 复制文件“css_1a.html”，更名为“css_1b.html” 2. 在<head></head>标记之间输入以下代码： <style type="text/css"> <!-p{text-align: left; color:red} ul{color:#00ffff} --> </style> 说明： 1. CSS样式要放在<style></style>中 2. stype=“text/css”表示使用CSS语法 3. <!-- 中间为注释内容 -->
5.2 在DW中创建CSS
【案例2】 利用CSS为网页设置样式 （样例文件为：mysite_ch5\exam8_10\css-0.html） 展开“CSS样式”面板，单击“新建CSS规则”按钮，设置标签td的行 高为135%，如图所示。 代码如下： td { line-height: 135%; }
全部设置完成后
5.2 在DW中创建CSS
5.2.2 套用CSS
在网页中套用已经建立的CSS样式，可以采用以下方法： 用“属性面板” • 方法：选定要套用对象，在属性面板的“样式”下拉列表中选 取样式 用“CSS面板” • 方法：选定要套用对象，右击 “CSS面板”中的样式，在菜单 中选择“套用”
简述css中样式表的定义类型
简述css中样式表的定义类型一、引言CSS（层叠样式表）是一种用于描述网页上元素的外观和样式的语言。
在CSS中，样式表可以通过不同的方式定义，以适应不同的需求和使用场景。
本文将详细介绍CSS中样式表的定义类型。
二、内联样式内联样式是将CSS样式直接写在HTML元素的style属性中。
它的优先级最高，会覆盖其他类型的样式定义。
内联样式使用简单方便，适用于只需要对少量元素进行特殊样式设置的情况。
三、嵌入样式嵌入样式是将CSS代码写在HTML文档头部的<style>标签中。
这种方式可以在同一个HTML文件中定义多个元素的样式，使得代码结构更加清晰。
嵌入样式适用于对整个HTML文件或多个元素进行统一设置样式的情况。
四、外部链接样式外部链接样式是将CSS代码存储在独立的.css文件中，并通过<link>标签引入到HTML文件中。
这种方式使得CSS代码可以被多个HTML 文件共享，提高了代码复用性和维护性。
外部链接样式适用于需要对整个网站或多个页面进行统一设置样式的情况。
五、导入样式导入样式是通过@import规则将一个CSS文件引入到另一个CSS文件中。
这种方式可以将CSS代码分割成多个模块，提高代码的可读性和维护性。
导入样式适用于需要对大型网站的样式进行模块化管理的情况。
六、层叠顺序层叠顺序是指当多个样式定义作用于同一个元素时，浏览器如何确定最终应用哪个样式。
在CSS中，根据优先级的不同，可以使用以下方式定义样式：1. 元素选择器：通过HTML元素名称选择元素（例如div、p），优先级较低。
2. 类选择器：通过class属性选择元素（例如.class），优先级较高。
3. ID选择器：通过id属性选择元素（例如#id），优先级最高。
4. 内联样式：直接写在HTML元素的style属性中，优先级最高。
当多个样式具有相同的优先级时，后面定义的样式会覆盖前面定义的样式。
七、总结CSS中有多种方式可以定义样式表，包括内联样式、嵌入样式、外部链接样式和导入样式。
CSS
1
复习4-1 复习
HTML 标记一般配对使用，不区分大小写 标记一般配对使用， 标记都具有属性。 标记都具有属性。属性提供关于网页上 HTML 元素的附 加信息 <元素名 [属性＝“值”] …> 内容 </元素名 ： 元素名 属性 属性＝ 元素名>： 元素名 <font> 文字 </font> <元素名 [属性＝“值”] … >：<img src=“…”> 元素名 属性 属性＝ ： <元素名 ：<br> 元素名>： 元素名 META 标记放置在网页的标题处以提供关于页面的信息。 标记放置在网页的标题处以提供关于页面的信息。 搜索引擎常会用到这些信息
alt=“..” border=“..”>
表格标记： 表格标记：<TABLE>、<TR>、<TD> 、 、 表单标记： 表单标记：<FORM action=“url” method=“get/post”>
INPUT元素 元素
</FORM>
3
复习4-3 复习
代码阅读
<TABLE width="200" border="1" align="center" > <CAPTION align="bottom">我的表格 我的表格</CAPTION> 我的表格 <TR bgcolor="yellow"> <TH>1</TH> <TH>2</TH> </TR> <TR align="center"> <TD rowspan="2">3</TD> <TD align="right">4</TD> </TR> <TR> <TD align="right">5</TD> </TR> </TABLE>
层叠样式表
尺寸及定位 属性
Top Position
z-index
Company Logo
CSS样式表分类
根据样式代码的位置，分为三类： 行内样式
内嵌样式
外部样式
在最后一个声明后面加上一个分号 (;) 是一个好习惯
Company Logo
行内样式
您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内 样式”。行内样式使用元素标签的 STYLE 属性定义。 <html> <head> <title>行内样式表示例</title> </head> <body> <p style="font-family:华文彩云;">庐山美景——小天池</p> <p style="font-weight:bold">小天池位于庐山牯岭北面，池中之水置于高 山而终年不溢不涸。池后山脊上，屹立着一座白塔似的喇嘛塔。塔建于1936 年。小天池山对面还有一怪石，远望似一雄鹰伸颈欲鸣。</p> </body> </html>
type="text/css"表示类型是样 式表文本
Company Logo
CSS样式表常见的属性
属性 CSS名称 font-family Font-size Font-style 说明 设置或检索文本的字体 设置或检索文本字体的大小 设置或检索文本的字体样式，即字体风格，主 要设置字体是否为斜体。取值范围： normal | italic | oblique 用于设置字体的粗细，取值范围： Normal | bold | bolder | lighter | number
css层叠原则
css层叠原则
层叠是CSS 的一个基本概念，它允许不同的CSS 规则相互作用，并最终确定一个元素的样式。
CSS 层叠原则如下：
1. 样式表的来源：样式表可以来自多个不同的来源，包括浏览器默认样式表、用户自定义样式表、文档内部样式表和外部样式表。
这些样式表的优先级从高到低排列。
2. 选择器的优先级：在同一来源的样式表中，选择器的优先级决定了哪个规则会被应用。
具体来说，选择器的优先级从高到低排列为：ID 选择器、类选择器、元素选择器和通配符选择器。
3. 重要性：在同一来源和相同优先级的样式表中，如果两个规则的优先级相同，那么具有更重要性的规则将被应用。
重要性可以通过在规则的后面添加`!important`来设置。
4. 继承：如果一个元素没有直接设置样式，那么它将继承其父元素的样式。
5. 样式的计算顺序：当多个规则适用于同一个元素时，样式的计算顺序是从父元素到子元素，从左到右。
第5章 CSS样式与模板的使用
第五章 CSS样式与模板的使用 样式与模板的使用
CSS样式的创建 样式的创建、 二、 CSS样式的创建、编辑与导出 • Dreamweaver MX 2004拥有自动创建样式的功能， 2004拥有自动创建样式的功能 拥有自动创建样式的功能， 如用户选定某段文字后，为其设置字体、 如用户选定某段文字后，为其设置字体、字号和 颜色等属性后，系统自动创建以StyleX (X为数字 颜色等属性后，系统自动创建以StyleX (X为数字 序列)为名的样式，且自动显示在属性面板的“ 序列)为名的样式，且自动显示在属性面板的“样 下拉列表框中。 式”下拉列表框中。 • 用户除了可以应用Dreamweaver MX 2004创建的样 用户除了可以应用Dreamweaver 2004创建的样 式外，还可以应用Dreamweaver 2004定义自己 式外，还可以应用Dreamweaver MX 2004定义自己 需要的样式。 需要的样式。 认识“CSS样式 样式” 1、认识“CSS样式”面板 • 窗口/CSS样式 窗口/CSS样式 认识“相关CSS CSS” 2、认识“相关CSS”面板 • 窗口/标签检查器/相关CSS(点击CSS属性标签) 窗口/标签检查器/相关CSS(点击CSS属性标签) CSS(点击CSS属性标签
第五章 CSS样式与模板的使用 样式与模板的使用
• CSS样式表可以设置HTML卷标，段落等的样式。 CSS样式表可以设置HTML卷标 段落等的样式。 样式表可以设置HTML卷标， CSS的基本语法 3、 CSS的基本语法 • 在代码视图模式中辨别CSS语法，最简单的方法就 在代码视图模式中辨别CSS语法， CSS语法 是寻找span标识符，凡是包含在<span></span>标 span标识符 是寻找span标识符，凡是包含在<span></span>标 识符之间的部分，就是CSS语法。 CSS语法 识符之间的部分，就是CSS语法。 • CSS可将原有的HTML卷标定义成自己想要的效果， CSS可将原有的HTML卷标定义成自己想要的效果 可将原有的HTML卷标定义成自己想要的效果， 其基本语法是在卷标之后加上｛｝符号， ｛｝符号 其基本语法是在卷标之后加上｛｝符号，在此符 号内填入CSS所设置的HTML属性。 CSS所设置的HTML属性 号内填入CSS所设置的HTML属性。 h2{font-size：16px；color： 如：h2{font-size：16px；color：red}
Web程序设计(第4版)-第5章
5.1 脚本语言JavaScript
5.1.2 JavaScript语言概述
• JavaScript是一种嵌入在HTML文件中的脚本语言，它 是基于对象和事件驱动的，能对诸如鼠标单击、表单输入、 页面浏览等用户事件做出反应并进行处理。 • JavaScript特点：
var str;
/*声明变量str*/
num1=10;
/*说明num1为整型，并将其值赋为10*/
num2=3.02e10;
str1="欢迎您";
《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：9787121260360
5.1 脚本语言JavaScript
5.1.3 JavaScript编程基础
5.1 脚本语言JavaScript
5.1.3 JavaScript编程基础
4．运算符和表达式
• 算术运算符。算术运算符的操作数和结果都是数值型值。算术运算符 及位运算符可与赋值运算符结合形成简记形式
赋值运算符简记形式表
运算符 操 作
+
加法
*
乘法
%
取模
--
递减
运算符 -（双目） / ++ -（单目）
• 传统脚本语言常用来编写执行一次性任务，通常以文本(如 ASCII)保存，只在被调用时进行解释或编译。
• 而现在脚本和传统编程语言之间的界限越来越模糊。在一些 脚本语言中，有经验的程序员可以进行大量优化工作。
• 本章所讨论的脚本语言是指用于Web页面及程序设计的脚本 语言，它们通常是嵌入式（嵌入到HTML文件中）的、具有解 释执行的特征。
CSS层叠样式表优先法则
CSS层叠样式表优先法则CSS样式优先级的收集、整理CSS 优先级法则：1. 选择器都有⼀个权值，权值越⼤越优先；2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；3. 创作者的规则⾼于浏览者：即⽹页编写者设置的CSS 样式的优先权⾼于浏览器所设置的样式（⽤户样式表）；若⽤户样式表设置了!important”规则，则优先级为最⾼级(⾼过内联样式)（个⼈添加）4. 继承的CSS 样式优先级低于后来指定的CSS 样式；5. 在同⼀组属性设置中标有“!important”规则的优先级最⼤。
多重样式优先级：如果外部样式、内部样式和内联样式同时应⽤于同⼀个元素，就是使多重样式的情况。
⼀般情况下，优先级如下：（内联样式）Inline style >（内部样式）Internal style sheet >（外部样式）External style sheet有个例外的情况，就是如果外部样式放在内部样式的后⾯，则外部样式将覆盖内部样式。
样式的层级关系：权重：权值的⼤⼩跟选择器的类型和数量有关样式的优先级跟样式的定义顺序有关标签选择器的权值永远都⽐⼀个类选器择器的权值低，⽆论有多少个————⽐较同⼀级别的个数，数量多的优先级⾼，如果相同即⽐较下⼀级别的个数important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承通配选择符的权值 0,0,0,0标签的权值为 0,0,0,1伪对象选择的权值为 0,0,0,1伪类选择的权值为 0,0,1,0类的权值为 0,0,1,0属性选择的权值为 0,0,1,0ID的权值为 0,1,0,0内联样式的权值为1,0,0,0important的权值为最⾼ 1,0,0,0,0权值使⽤规则：选择器的权值加到⼀起，⼤的优先；如果权值相同，后定义的优先。
同类选择器⽆加权选择器权重值的计算：A：如果规则是写在标签的style属性中（内联样式），则A=1，否则，A=0. 对于内联样式，由于没有选择器，所以 B、C、D 的值都为 0，即 A=1, B=0, C=0, D=0（简写为 1,0,0,0，下同）。
Dreamweaver中层叠样式表的创建及使用
《Dreamweaver中层叠样式表的创建及使用》教案教学目标层叠样式表（CSS）是网页设计工作者制作网页时经常使用的工具。
利用它，可以统一定制网页文本、图片、表格等多种网页元素的样式，可以设计出更加丰富多彩的网页效果，而且能够迅速地将样式应用于整个网站的多个网页上。
通过本章的教学，要求学生掌握以下基本内容：1.了解层叠样式表的基本知识。
2.掌握在Dreamweaver文档中利用CSS面板创建层叠样式表的基本方法。
3.掌握将CSS样式应用到各种网页元素上的方法。
4.掌握修改CSS样式的方法，并观察到该修改对网页外观的影响。
5.掌握管理CSS层叠样式表的基本方法，学会将外部样式表链接到网站的多个网页上，以便直接应用已创建好的CSS样式，统一多个网页的外观。
教学内容∙CSS层叠样式表的基本知识：内联式样式表、嵌入式样式表、外部样式表。
∙在Dreamweaver中，使用CSS面板创建、应用、修改CSS层叠样式。
∙链接外部样式表。
教学重点∙创建CSS样式。
∙应用CSS样式。
∙修改CSS样式。
∙链接外部样式表。
教学形式课堂讲授与网络自学相结合教学辅助手段∙通过多媒体屏幕广播或屏幕投影，学生可实时观看教师的操作演示过程。
∙学生可以访问网络教学站点。
教学站点提供了重点操作的Flash动画演示。
教学时间安排：1课时（45分钟）∙层叠样式表的基础知识：10分钟。
∙创建和应用CSS样式：15分钟。
∙修改CSS样式：5分钟。
∙链接外部样式表：5分钟。
∙小结：10分钟。
教学方法与过程首先介绍为何在网页设计中引入层叠样式表的概念，使学生对层叠样式表的作用有一个感性的认识。
然后介绍层叠样式表的基本种类。
接着介绍利用CSS面板创建CSS样式、应用CSS样式以及修改CSS样式的方法。
其后，介绍如何为网站的多个网页链接已有的外部样式表。
最后，进行小结。
在小结过程中，引导学生辨认和判断三种样式表在网页的HTML代码中具体的代码表示，并引导学生总结这些代码是如何通过CSS面板进行设置的，使得学生进一步加深对理论知识的理解。
层叠样式表
这只是个js文件，需要配合jquery选择器(网页).doc使用$(document).ready(function(){$("#btn1").click(function(){$("#one").css("background","red");//选择id=one的div});$("#btn2").click(function(){$(".mini").css("background","yellow");//class=mini的div});$("#btn3").click(function(){$("div").css("background","orange");//选取所有的div元素});$("#btn4").click(function(){$("#two .mini").css("background","green");//id=two下的class=mini的div区域});$("#btn5").click(function(){$(".three p").css("background","blue");//class=three里面所有的p元素});$("#btn6").click(function(){$("span,#two,.mini").css("background","pink");//选取三个的并集，如果没有的条件则忽略});$("#btn7").click(function(){$("#one+div").css("background","aqua");//id=one下一个div});$("#btn8").click(function(){$("#two~div").css("background","#fedcbd");//id=one所有的的兄弟div元素});$("#btn9").click(function(){$(".one>p").css("color","red");//div的子元素是p的元素,是子元素才认识});$("#btn10").click(function(){$("#one p").css("color","blue");//div的子元素是p的后代元素,只要在里面就认识});//以下是基本过滤器的操作$("#btn11").click(function(){$("div:first").css({backgroundColor:"#BA55D3"});//选取第一个div元素,});$("#btn12").click(function(){$("div:last").css({backgroundColor:"yellow"});//选取第一个div元素,});$("#btn13").click(function(){$("div:even").css({backgroundColor:"#00FA9A"});//获取索引为偶数的div元素,});$("#btn14").click(function(){$("div:odd").css({backgroundColor:"#FF00FF"});//获取索引为奇数的div元素,});$("#btn15").click(function(){$("div:gt(4)").css({backgroundColor:"#B0E0E6"});//获取索引大于4的div元素,不包括4});$("#btn16").click(function(){$("div:lt(4)").css({backgroundColor:"#6A5ACD"});//获取索引小于4的div元素,不包括4});//以下是内容过滤器$("#btn17").click(function(){$(".mini:contains('我')").css({backgroundColor:"#9ACD32"});//包含文本’我‘的div元素});$("#btn18").click(function(){$(".mini:empty()").css({backgroundColor:"#F0FFFF"});//不含文本或者文本为空});$("#btn19").click(function(){$("div:has(p)").css({backgroundColor:"#8A2BE2"});//含有选择器所匹配的元素});$("#btn20").click(function(){$(":hidden").show(5000);//含有选择器所匹配的元素});//以下是子元素选择器操作,$("#btn21").click(function(){$("div.one :nth-child(2)").css("background","blue");//选取第2个子元素});$("#btn22").click(function(){$("div.one :first-child").css("background","red");//第一个子元素});$("#btn23").click(function(){$("div.one :last-child").css("background","green");//最后一个子元素});$("#btn24").click(function(){$("div.one :only-child").css("background","#00BFFF");//只有子元素});});。
第5章 CSS和DIV的应用
第5章 CSS和DIV的应用
5.1 CSS样式 5.1.3 创建CSS样式 在Dreamweaver CS6中，执行“窗口”|“CSS样式” 命令，打开“CSS样式”面板，如图5.1所示。在 “CSS样式”面板的底部排列有几个按钮，具体内容 如下。 “附加样式表”：可以在HTML文档中链接一 个外部的CSS文件。 “新建CSS规则”：可以编辑新的CSS样式文件。
第5章 CSS和DIV的应用
5.1.4 定义CSS样式属性 3．区块样式的定义 在“CSS规则定义”对话框左侧的“分类”列表框中选择“区块”选项可 以定义标签和属性的间距和对齐设臵，如图5.5所示。
图5.5 区块样式的定义
第5章 CSS和DIV的应用
5.1.4 定义CSS样式属性 3．区块样式的定义 在“区块”中的各选项参数如下： • Word-spacing：设臵单词的间距，若要设臵特定的值，在下拉列表框 中选择“值”选项，然后输入一个数值，在第二个下拉列表框中选择 度量单位。 • Letter-spacing：增加或减小字母或字符的间距。若要减少字符间距， 指定一个负值，字母间距设臵覆盖对齐的文本设臵。 • Vertical-align：指定应用它的元素的垂直对齐方式。仅当应用于＜img ＞标签时，Dreamweaver才在文档窗口中显示该属性。 • Text-align：设臵元素中的文本对齐方式。 • Text-indent：指定第一行文本缩进的程度。可以使用负值创建凸出， 但显示取决于浏览器。仅当标签应用于块级元素时，Dreamweaver才 S和DIV的应用
5.1.4 定义CSS样式属性 在“类型”中的各选项参数如下： • Font-weight：对字体应用特定或相对的粗体量。“正常”等于 400,“粗体”等于700。 • Font-variant：设臵文本的小型大写字母变量。Dreamweaver不在文 档窗口中显示该属性。 • Text-transform：将选定内容中的每个单词的首字母大写或将文本设 臵为全部大写或小写。 • color：设臵文本颜色。