第五讲使用CSS样式
- 格式：ppt
- 大小：757.50 KB
- 文档页数：30
下载文档原格式
合集下载
css样式用法
css样式用法CSS（层叠样式表）是一种用于控制网页样式布局的标记语言。
它通过选择器和属性来定义HTML元素的外观，包括字体、颜色、大小、边距和背景等。
1. 选择器：在CSS中，选择器用于选择要应用样式的HTML元素。
常见的选择器有：- 标签选择器: 通过标签名称选择元素，例如：p选择所有的段落元素。
- 类选择器: 通过类名选择元素，例如：.red选择所有类名为red的元素。
- ID选择器: 通过元素的唯一ID选择元素，例如：#header选择具有id为header的元素。
- 后代选择器: 通过嵌套关系选择元素，例如：div p选择所有嵌套在div内的段落元素。
2. 属性：CSS属性用于定义元素的样式。
常见的CSS属性有：- color属性: 定义文本的颜色，例如：color: red;将文本颜色设置为红色。
- font-size属性: 定义字体大小，例如：font-size: 16px;将字体大小设置为16像素。
- background-color属性: 定义背景颜色，例如：background-color: #f5f5f5;将背景颜色设置为浅灰色。
3. 继承：CSS中的某些样式是可以被子元素继承的，例如：字体样式。
如果父元素的字体样式设置为斜体，子元素的字体样式也会被继承为斜体。
4. 优先级：当多个CSS规则同时应用于同一个元素时，会根据优先级进行冲突解决。
优先级由高到低的顺序为：内联样式 > ID选择器 > 类选择器 > 标签选择器。
内联样式具有最高的优先级。
5. 盒子模型：CSS中的所有元素都被视为一个矩形的盒子。
盒子模型由内容、填充、边框和边距组成。
可以使用CSS属性来定义这些部分的样式。
总结：CSS样式用法可以帮助我们精确地控制网页元素的外观和布局。
通过选择器和属性，我们可以根据需求自由地定义各种样式。
了解CSS样式用法对于设计出美观、一致的网页至关重要。
第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}
第五章彻底弄懂CSS盒子模式（DIV布局快速入门）
</d iv > <div class="mainBox"> <h3>熟悉步骤 </h3> <p>正文内容 </p >
</div>熟悉工作流程
在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部 分我不能让它再出现表现控制标签，如：font、color、height、width、align 等标签不能 再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我 不是单纯的用 DIV 来实现排版的嵌套，DIV 是块级元素，而像 P 也是块级元素，例如 要分出几个文字内容块，不是一定要用 DIV 才叫 DIV 排版，不是―<div>文字块一 </div><div>文字块二</div><div>文字块三</div>‖，而用―<p>文字块一</p><p>文字块二 </p><p>文字块三</p>‖更合适。
Width
width + padding-left + padding-right + border-left + border-right
Height
height + padding-top + padding-bottom + border-top + border-bottom
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所 见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充 就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒 子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通 风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以 是小盒子（DIV 嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于 盒子，否则盒子会被撑坏的，而 CSS 盒子具有弹性，里面的东西大过盒子本身最多把 它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚 度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子 是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中， 假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后 从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。
css的用法
css的用法CSS(CascadingStyleSheets)是一种用于控制网页样式的样式表语言，它可以改变文本的大小、颜色、字体和对齐方式，以及改变布局和其他更多样式。
CSS 用于定义 HTML 元素的格式，格式的定义包括：字体、颜色、大小、对齐方式、边框和背景。
CSS 样式可以是内联的，也可以是外部的。
内联样式 - 通过使用“style”属性应用样式外部样式 - 通过外部文件应用样式常用 CSS 样式文本格式font-family : 字体font-size : 文字大小font-style : 文字格式font-weight : 粗体/斜体text-align : 文本对齐text-decoration : 文本装饰文本颜色color : 文本颜色background-color : 背景颜色框架样式border : 边框宽度border-color : 边框颜色border-style : 边框样式其他样式margin : 边距padding : 内边距width : 元素宽度height : 元素高度float : 悬浮CSS 也可以使用样式类型，其用于标记多个元素以设置相同的样式。
使用样式类型可以节省很多时间，因为不需要每次都重新定义样式。
CSS 也可以使用媒体查询，以根据视口宽度(viewport width)来应用不同的样式。
使用媒体查询，可以为不同的设备提供特定样式，从而改善用户体验。
最后，CSS 可以使用继承，它允许子元素从父元素继承样式，这样可以节省很多时间和精力。
这非常有用，因为您不必为每个子元素重新定义样式。
总之，CSS 是一种为 HTML 元素设置样式的强大工具，它可以为网页设计师和开发人员提供无限的非常有趣的创意和想法。
使用CSS样式的三种方法
使用CSS样式的三种方法一、内联样式内联样式通过style属性来设置，属性值可以任意的CSS样式。
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8"> 5<title>内联样式</title> 6</head> 7<body> 8<p style="background: red"> I love China!</p> 9</body>10</html>显示效果：二、内部样式内部样式定义在文档的head部分，通过style标签来设置。
需要使用元素选择器（p）来关联样式和要设置样式的标签（p标签）。
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8"> 5<title>内联样式</title> 6<style type="text/css"> 7 p{ 8 background: green; 9 }10 </style>11</head>12<body>13<p> I love China!</p>14 </body>15</html>效果：三、外部样式在文档外的*.css定义css样式，然后在文档的head部分通过link 元素引入。
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8"> 5<title>内联样式</title> 6<link rel="stylesheet" href="style.css"> 7</head> 8<body> 9<p> I love China!</p>10</body>11</html>style.css文件内容：1 p{2 background: yellow;3 }显示效果：a.在一个外部样式表中导入其他样式表的样式combine.css文件中导入上面的style.css1@import "style.css";2 body{3 background: red;4 }HTML文件中引入combine.css文件1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8"> 5<title>document</title> 6<link rel="stylesheet"href="combine.css">7</head>8<body>9 <p> I <span>love</span> China!</p>10</body>11</html>效果：b、声明样式表的字符编码1@charset "utf-8"2 p{3 background: yellow !important;4 }四、元素样式的层叠和继承1、样式层叠样式表允许以多种方式规定样式信息。
高效使用CSS样式表进行网页设计
高效使用CSS样式表进行网页设计第一章：CSS样式表的介绍与基本语法CSS（层叠样式表）是一种用于定义网页元素样式的标记语言，它可以实现网页的布局和美化效果。
CSS样式表相比于以前的HTML标签样式，具有更好的灵活性和可扩展性。
CSS样式表的基础语法包括选择器和声明块，通过选择器选择需要应用样式的元素，并在声明块中定义对应的样式属性和值。
第二章：CSS选择器的种类及用法CSS选择器用于选择需要应用样式的HTML元素，可以根据不同的需求选择不同的选择器。
常见的CSS选择器包括元素选择器、类型选择器、类选择器、ID选择器等。
元素选择器用于选择特定类型的HTML元素，类型选择器用于选择具有特定class属性的HTML元素，ID选择器用于选择具有特定id属性的HTML元素。
通过正确使用选择器，我们可以精确地选择需要应用样式的元素，从而对网页进行定制化设计。
第三章：CSS样式属性的常用分类与应用CSS样式属性用于定义元素的外观和行为。
样式属性可分为文本样式、背景样式、边框样式、盒子模型样式等不同的分类。
文本样式包括字体样式、字体大小、文字对齐等；背景样式包括背景颜色、背景图片等；边框样式包括边框颜色、边框样式等；盒子模型样式包括宽度、高度、内边距、外边距等。
通过合理地运用这些样式属性，我们能够创建出不同风格和效果的网页设计。
第四章：CSS样式表的层叠顺序与优先级当多个CSS样式同时作用于一个元素时，就会涉及到层叠顺序与优先级的问题。
CSS样式表的层叠顺序是基于选择器的优先级，优先级高的样式会覆盖优先级低的样式。
选择器优先级的计算方法是根据选择器类型和数量的不同进行加权，从而确定其优先级大小。
当优先级相同时，后面声明的样式会覆盖前面声明的样式。
了解和掌握样式表的层叠顺序与优先级，能够帮助我们准确地控制网页元素的样式效果。
第五章：CSS样式表的继承性与继承属性CSS样式表具有继承性，即某些样式属性会被子元素继承自父元素。
css样式的用法
css样式的用法CSS（层叠样式表）是一种用于描述HTML或XML等文档的外观和样式的语言。
它可以控制网页元素的颜色、大小、位置、边距等方面。
CSS的使用方法通常包括以下几个步骤：1.选择器：通过选择器来选择要应用样式的HTML元素。
常见的选择器有标签选择器、类选择器、ID选择器等。
2.属性：在选择器后面使用大括号括起来的样式规则中，使用属性来设置元素的样式。
例如，color属性设置文本颜色，font-size属性设置字体大小。
3.值：每个属性都有对应的值，用来具体设置属性的具体表现效果。
例如，color属性的值可以是颜色的名称（如red、blue）或十六进制数值（如#FF0000、#0000FF）。
4.层叠：当同一个元素被多个样式规则选中时，CSS会根据层叠的规则来确定最终应用的样式。
层叠的规则包括样式的优先级和样式的继承。
除了基本的使用方法，CSS还可以通过一些进阶特性来实现更复杂的样式效果，例如：1.盒模型：CSS中的每个元素都可以视为一个矩形盒子，通过设置元素的尺寸、内边距和外边距来调整盒子的大小和位置。
2.背景和边框：CSS可以设置元素的背景颜色、背景图片、边框宽度、边框样式等属性，来美化元素的背景和边框。
3.布局和定位：CSS可以使用浮动、定位和弹性布局等特性来实现页面元素的布局和定位，以实现不同的页面布局。
4.动画和过渡：CSS可以使用关键帧动画和过渡效果来给元素添加动态效果，如渐变、旋转、缩放等。
总之，CSS是用于美化和样式化网页的重要工具，通过选择器和属性的搭配使用，可以实现各种各样的样式效果，从而提升网页的视觉吸引力和用户体验。
CSS样式表基础知识解读
CSS样式表基础知识解读第一章：什么是CSS样式表CSS（层叠样式表）是一种用于描述网页内容在屏幕、纸张等媒介上展示样式的语言。
它的作用是控制HTML文档中的元素如何显示和布局。
CSS样式表可以将样式应用于HTML元素，将网页从简单的文本页面转化为视觉上吸引人的页面。
在使用CSS样式表前，需要将样式应用到HTML文档中。
这可以通过三种不同的方式来实现：内联样式、内部样式和外部样式表。
第二章：样式选择器在CSS样式表中，使用选择器来选择应用样式的HTML元素。
常见的选择器有元素选择器、类选择器、ID选择器和伪类选择器。
元素选择器是最基本的选择器，可以通过元素名称指定元素应用样式。
类选择器和ID选择器分别使用类名和ID来选择应用样式的元素。
伪类选择器是指对特定状态的元素应用样式，如:hover对鼠标悬停状态的元素应用样式。
第三章：CSS样式属性CSS样式属性用于指定元素的样式。
常见的样式属性包括文字颜色、背景颜色、字体大小、文字对齐、边框、填充等。
可以通过设置这些属性来改变HTML元素在页面中的外观和布局。
第四章：样式继承与层叠CSS样式表中的继承和层叠是使样式表更强大和灵活的两个重要概念。
继承是指子元素可以继承父元素的样式。
当子元素没有指定特定样式时，会自动继承父元素的样式。
层叠是指当多个样式规则应用于同一个元素时，这些样式规则可以根据特定的规则进行层叠，从而决定应用哪个样式。
第五章：CSS盒模型CSS盒模型是描述HTML元素的一个重要概念，它将每个元素看作一个盒子，这个盒子包含内容、填充、边框和外边距。
内容区域显示元素的实际内容，填充是在内容和边框之间的空白区域，边框是围绕内容和填充的线条，外边距是盒子与其它元素之间的空白区域。
第六章：CSS布局CSS样式表提供了多种布局技术，可以使网页的内容按照指定的方式进行排列。
常见的布局技术包括浮动、定位和弹性布局。
浮动允许元素浮动在其容器中的左侧或右侧，定位可以精确地定位元素在页面上的位置，而弹性布局则可以根据页面的宽度自动调整元素的大小和位置。
css样式表的作用及使用方式
css样式表的作用及使用方式CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。
使用CSS样式设置页面格式，可将页面内容与表现形式分离。
以下是CSS样式表的主要作用及使用方式：一、作用：1. 可以灵活控制网页中文本的字体、颜色、大小、间距、风格及位置。
2. 可以灵活地为网页中的元素设置各种效果的边框。
3. 可以方便地为网页中的元素设置不同的背景颜色、背景图像及平铺方式。
4. 可以控制网页中各元素的位置，使元素在网页中浮动。
5. 可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊和透明等只有在一些图像处理软件中才能实现的效果。
6. 可以与脚本语言相结合，使网页中的元素产生各种动态效果。
二、使用方式：1. 将样式定义在HTML元素的style属性中。
2. 将样式定义在HTML文档的header部分。
3. 将样式声明在一个专门的CSS文件中，以供HTML页面引用。
此外，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。
如果要修改样式，只需要在样式列表中找到相应的样式声明进行修改。
在多个页面中使用同一个CSS样式表，可以单独存放在一个CSS文件中，这样就可以在多个页面中使用同一个CSS样式表，实现多个页面风格的统一。
例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。
以上信息仅供参考，如需获取更多信息，建议咨询专业的编程人员。
简述 css 样式表的使用方式
简述css 样式表的使用方式
摘要：
1.CSS 样式表的概述
2.CSS 样式表的使用方式
2.1 元素中直接使用
2.2 从页面头部调用
2.3 采用链接的形式调用
正文：
CSS（层叠样式表）是一种用于描述HTML 或XML（包括SVG，MathML 等）文档样式的样式表语言。
CSS 样式表的使用方式主要有以下三种：
1.元素中直接使用：在HTML 元素中，我们可以通过style 属性直接编写CSS 样式。
这种调用方式的语法结构为：元素名称style="属性：属性值；"/元素名称。
例如，我们可以在一个div 元素中直接设置宽度、高度、背景色等样式。
2.从页面头部调用：我们将CSS 样式写在页面的head 元素中，然后在页面中通过class 或id 属性调用。
这种方式的语法结构为：style 选择符。
属性:属性值；/style。
在页面上，我们可以通过class 或id 选择符来应用这些样式。
3.采用链接的形式调用：我们可以将CSS 样式表与HTML 文档分离，通过在HTML 文档的head 部分使用link 标签引用外部CSS 文件。
这种方
式的语法结构为：<link rel="stylesheet" href="样式表文件路径" />。
这样，我们可以将所有的样式放在一个单独的CSS 文件中，便于管理和维护。
总之，CSS 样式表的使用方式有多种，可以根据实际需求选择合适的方式来应用CSS 样式。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.CSS规则的应用范围 规则的应用范围
CS4中 有外部样式表和内部样式表， 在Dreamweaver CS4中，有外部样式表和内部样式表，区 别在于应用范围和存放位置不同， 别在于应用范围和存放位置不同，下面是对这两种样式表 的介绍： 的介绍： 外部CSS样式表：存储在一个单独的外部CSS(.CSS) CSS样式表 CSS(.CSS)文件 外部CSS样式表：存储在一个单独的外部CSS(.CSS)文件 而非HTML文件)中的若干组CSS规则。 HTML文件 CSS规则 (而非HTML文件)中的若干组CSS规则。此文件利用文档头 部分的链接或@import @import规则链接到网站中的一个或多个页 部分的链接或@import规则链接到网站中的一个或多个页 面。 内部(嵌入式)CSS样式表：若干组包括在HTML )CSS样式表 HTML文档头部分 内部(嵌入式)CSS样式表：若干组包括在HTML文档头部分 的<style>标签中的CSS 规则。 <style>标签中的CSS 规则。 标签中的 除了外部和内部样式表外，还有内联样式， 除了外部和内部样式表外，还有内联样式，该样式定义在 整个HTML文档中的特定标签实例中， HTML文档中的特定标签实例中 整个HTML文档中的特定标签实例中，一般不建议使用该样 式。
在网页文档中使用CSS 在网页文档中使用CSS样式 CSS样式
在Dreamweaver CS4中，可以创建一个CSS样式，然后应用于网页文档 CS4中，可以创建一个CSS样式，然后应用于网页文档 的某个部分，完成文本的格式化。
创建CSS样式表 创建CSS样式表
在Dreamweaver CS4中，可以很方便地创建、编辑CSS样式表定义，并 CS4 可以很方便地创建、编辑CSS样式表定义， 且不需要直接编辑CSS代码，即使不懂CSS层叠样式表定义语法的用户 且不需要直接编辑CSS代码，即使不懂CSS层叠样式表定义语法的用户 ，也能轻松完成定义。Dreamweaver CS4提供了功能非常强大的CSS样 也能轻松完成定义。 CS4提供了功能非常强大的CSS样 式编辑器，不但可以在页面中直接插入CSS 样式定义，还可以创建、 式编辑器 ，不但可以在页面中直接插入 CSS样式定义 ，还可以创建、 编辑独立的CSS样式表文件。 编辑独立的CSS样式表文件。 选择“文件” 新建”命令，打开“新建文件”对话框， 选择“文件”| “新建”命令，打开“新建文件”对话框，在左侧的列表 框中选择“示例中的页”选项卡， 框中选择“示例中的页”选项卡，在“示例文件夹”列表框中选择“CSS 示例文件夹”列表框中选择“ 样式表” 选项 ， 样式表 ” 选项， 在 “ 示例页” 中可以选择预定义CSS 样式选项。 在 示例页 ” 中可以选择预定义 CSS样式选项 。 Dreamweaver CS4中提供了非常丰富的预定义样式表。 CS4中提供了非常丰富的预定义SS规则由两部分组成：选择器和声明(大多数情况下为包含多个声明 的代码块)。选择器是标识已设置格式元素的术语，例如 p、h1、类名 称或ID，而声明块则用于定义样式属性。例如下面CSS规则中，h1 是 选择器，大括号({})之间的所有内容都是声明块。 h1 { font-size: 12 pixels； font-family:Times New Roman； font-weight:bold； } 每个声明都由属性(例如上面规则中的font-family和值(例如Times． NewRoman)两部分组成。在如上的CSS规则中，已经创建了h1标签样 式，即所有链接到此样式的h1标签的文本大小为12像素、字体为Times New Roman、字体样式为粗体。
CSS样式简介 样式简介
CSS，是用来控制一个网页文档中的某文本区域外观的一组格式属性。使 用CSS能够简化网页代码，加快下载速度，减少上传的代码数量，从而可 以避免重复操作。CSS样式表是对HTML语法的一次重大革新，它位于文 档的<head>区，作用范围由CLASS或其他任何符合CSS规范的文本来设置 。对于其他现有的文档，只要其中的CSS样式符合规范，Dream weaver就 能识别它们。
1.CSS样式类型 1.CSS样式类型
CS4中 可以定义以下样式类型: 在Dreamweaver CS4中，可以定义以下样式类型: 类样式：可让用户将样式属性应用于页面上的任何元素。 类样式：可让用户将样式属性应用于页面上的任何元素。 HTML标签样式 重新定义特定标签( h1)的格式 创建或更改h1 标签样式： 的格式。 HTML标签样式：重新定义特定标签(如 h1)的格式。创建或更改h1 标签的CSS 样式时，所有用h1 h1标签设置了格式的文本都会被立即 标签的CSS 样式时，所有用h1标签设置了格式的文本都会被立即 更新。 更新。 高级样式：重新定义特定元素组合的格式，或其他CSS CSS允许的选择 高级样式：重新定义特定元素组合的格式，或其他CSS允许的选择 器表单的格式(例如，每当h2标题出现在表格单元格内时， h2标题出现在表格单元格内时 器表单的格式(例如，每当h2标题出现在表格单元格内时，就会应 用选择器td h2)。高级样式还可以重定义包含特定id id属性的标签 用选择器td h2)。高级样式还可以重定义包含特定id属性的标签 的格式(例如， #myStyle定义的样式可以应用于所有包含属性 定义的样式可以应用于所有包含属性／ 的格式(例如，由#myStyle定义的样式可以应用于所有包含属性／ 值对id= myStyle”的标签 id=“myStyle 的标签) 值对id= myStyle 的标签)。
新建CSS规则对话框中的基本操作 新建CSS规则对话框中的基本操作
“为CSS规则选择上下文选择器类型”：可以在该下拉列表中 选择要创建的选择器类型选项。选择“类”选项，可以创建一个 作为class属性，应用于任何HTML元素的CSS样式。选择ID选 项，可以定义包含特定ID属性标签的CSS样式。选 择“标签” 选项，可以重新定义特定HTML标签的默认格式。选择“复合内 容” 选项，可以定义可同时应用两个或多个标签、类或ID的复 合样式。 “选择或输入选择器名称”：可以在下拉列表中选择选择器名 称或者输入选择器名称。最主要的是类名称必须以句点开头，并 且可以包含任何字母和数字组合，例如.myhead1。ID名称必须 以#号开头，并且可以包含任何字母和数字组合，例如#mylD1。 “选择定义规则的位置”：可以在下拉列表中选择定义规则的 位置，如果要将规则放置到已附加到文档的样式表中，选择相应 的样式表。如果要创建外部样式表，选择“新建样式表文件”选 项。若要在当前文档中嵌入样式，选择“仅限该文档”选项。 在没有设置样式选项的情况下单击“确定”按钮，将产生一个新的 空白规则。
CSS样式的概念 CSS样式的概念
CSS样式是 样式是Cascading Style Sheets(层叠样式单 的简称，也可以称为 层叠样式单)的简称 样式是 层叠样式单 的简称，也可以称为“ 级联样式表”，它是一种网页制作的新技术， 级联样式表 ，它是一种网页制作的新技术，利用它可以对网页中的文 本进行精确的格式化控制。 本进行精确的格式化控制。
样式存放在与要设置格式的实际文本分离的位置， 样式存放在与要设置格式的实际文本分离的位置，通常在外部样 式表或HTML文档的文件头部分中。因此，可以将h1 HTML文档的文件头部分中 h1标签的某个规则 式表或HTML文档的文件头部分中。因此，可以将h1标签的某个规则 一次应用于许多标签(如果在外部样式表中，则可以将此规则一次 一次应用于许多标签(如果在外部样式表中， 应用于多个不同页面上的许多标签) 这样，CSS就可以提供非常便 应用于多个不同页面上的许多标签)。这样，CSS就可以提供非常便 利的更新功能。若在一个位置更新CSS规则， CSS规则 利的更新功能。若在一个位置更新CSS规则，使用已定义样式的所 有元素的格式设置将自动更新为新样式。 有元素的格式设置将自动更新为新样式。
新建CSS规则 新建CSS规则
创建一个CSS规则后，可以用来自动完成HTML标签的格式设置或者 创建一个CSS规则后，可以用来自动完成HTML标签的格式设置或者 class或ID属性所标识的文本范围的格式设置。 class或ID属性所标识的文本范围的格式设置。 将光标移至网页文档中，选择“格式”|“CSS样式”|“新建”命令，打开“ 将光标移至网页文档中，选择“格式”|“CSS样式”|“新建”命令，打开“新 建CSS规则”对话框，如图所示。 CSS规则”
使用CSS样式 使用CSS样式
精美的网页离不开CSS技术，使用CSS技术， 可以有效地对页面的布局、字体、颜色、背景 和其他效果实现更加精确的控制。CSS样式的 全名为Cascading Style Sheet，它可以定义 HTML标签，按列表的语法将许多文字、图片、 表格、表单、图层等设计加以格式设定。在 HTML语法中，常常需要使用到一些设定颜色、 字体大小或框线粗细之类的标签，而CSS在开 始制作网页时就将这些设定做好，不需要在制 作网页文档时再反复写入同样的标签。
CSS样式面板 CSS样式面板
CSS样式面板的基本操作 CSS样式面板的基本操作
拖动窗格之间的边框来调整窗格的大小，通过拖动“属性”列的分 隔线调整这些列的大小。 选择某个规则时，该规则中定义的所有属性都会显示在“属性”窗 格中。可以在“属性”窗格中修改CSS，而无论它是嵌入在当前文 档中还是链接到附加的样式表。默认情况下， “属性”窗格仅显 示那些先前已设置的属性，并按字母顺序排列它们。 单击“显示列表视图”按钮 ，可以打开列表视图，该视图中显 示所有可用属性的按字母顺序排列的列表，已设置的属性排在顶部。 单击“显示类别视图”按钮 ，可以打开类别视图，该视图中显 示按类别分组的属性，例如字体、背景、区块、边框等，已设置的 属性位于每个类别的顶部。 注释：对“属性”窗格所做的任何更改都将立即应用到网页文档中， 可以在操作的同时预览效果。
CSS样式面板 CSS样式面板