1、网站建设,主讲：韩维良,2018年4月,第9章,使用CSS样式表,第一节 认识CSS语言一、CSS样式概述层叠样式简称CSS（Cascading Style Sheet技术是一种是用于控制网页样式的标记性语言），是以HTML为基础的语言，用于定义网页中内容的格式，它扩展了HTML的功能（如行间距），美化网页，使网页设计者以更有效的方式设置网页格式。,3,主要特点：可以独立地为网页中的各种对象定义格式，即样式，包含多方面的格式要求，并为样式定义一个名称，从而可将一种样式用于多个网页。 保证了同一样式的多次重复使用。CSS 样式表中的层叠是指多个 CSS 样式表可以同时应用于同一个页面或网页中的同
2、一元素，浏览器根据 CSS 定义的层叠规则来决定哪一种样式具有最高优先级。,4,1、可以将网页样式与内容分离。2、能以前所未有的能力控制页面的布局。3、可以制作出体积更小，下载更快的网页。4、可以更快、更容易的维护及更新大量的网页。5、让浏览器成为更友好的界面。,二、 CSS样式作用1、CSS可以定义网页的多种样式，美化网页，如文字的大小颜色、段落格式、排版定位、对象位置、图片特效、鼠标指针样式等；2、样式与文档分离，通过修改样式表，实现页面格式的自动更新；3、CSS可以独立于网页文件，从而实现网站页面风格的批量修改。,第二节 CSS语言基本语法,CSS 样式由“选择符”和“声明”组成。选择符
3、说明样式作用的对象是谁；声明由“属性”和“属性值”组成。每条声明之间用“;” 分隔。文本编辑器编辑生成，大小写不等价；,selectors property: value; ,CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。因此，概括来说，CSS就是由3个基本部分“对象”、“属性”和“值”组成的。而且在一个样式中可以设置多个属性及其值。举例：定义一个样式体验。,选择符的类别：CSS选择符的使用有四种情况：（1）单元素名作为选择符 元素名样式规则（2）CLASS（类）作为选择符 .class名称样式规则 圆点引导（3）ID(标
4、识符)作为选择符 ID号样式规则 # 号引导,（4）元素组合作为选择符元素名1，元素名2，.元素名n样式规则.class名称1，.class名称2， .class名称n样式规则ID号1，ID号2，. ID号n样式规则用逗号分隔的多个选择符的组合。如下：H1,H2font-family:arial;text-align:center; color:red;.a,.b,.cfont-family: 隶书; color:yellow;#1,#2color:blue; font-family: 楷体;#2font-size=100pt;.cfont-size=100pt;,第三节 CSS基本应用1、在
5、标签内部定义样式属性在Html标签内部设计样式属性：标签内容如：img border: thick double;即重新定义一个Html标签的样式，只能用于再定义特定标签的样式。,2、使用标签定义仅在单个文档内部使用的样式，一般在文档首部定义： , ,3、使用标签导入外部CSS文件一般定义样式常用的方式，一个样式可被用于多个网页文件，只要修改了CSS样式文件中的样式，则所有使用该样式的网页格式同步发生变化，。使用LINK（链接）标签 ，语法：,4、使用import命令导入外部CSS文件与Link标签的功能相同，可用于导入一个外部样式文件。语法： import url(“样式表文件.css”);
6、要求：必须放在Style标签中使用。,第四节 CSS样式优先级层叠样式表的一般处理原则：（1）当两个不同的样式应用于同一段文本时，浏览器会显示所有的样式属性。如：一个样式定义字体为宋体，另一个样式定义颜色为红色，则这段文本显示为红色宋体，（2）如果两个样式发生冲突，则根据样式与文本的远近关系来选择样式，最近优先原则，越近越优先。（3）CSS样式比HTML定义的样式具有优先权。 （4）内部样式优先于外部样式。,当一个网页文档中为同一个对象定义多个样式时，根据这些样式的优先级决定谁有效。一、环境方面的优先级顺序1、网页设计者定义的样式；2、浏览者在浏览器中设置的样式；3、浏览器自带的默认样式。二、
7、应用方面的优先级顺序1、在标签内部添加的样式属性；2、使用标签定义的样式3、导入的外部样式；,三、选择符方面的优先级顺序1、ID选择符（优先权值为100）；2、类选择符（优先权值为10）；3、Html标签选择符（优先权值为1）；,第五节 CSS设备类型（略）用于指定CSS样式所作用的设备类型，使之能在不同的设备上正确显示。方法一：import url(样式表文件) 设备类型；方法二：media 设备类型 属性1：值； 属性2：值； ,第六节 CSS单位和属性一、CSS单位1、长度单位主要用于定义对象的宽度、高度、字号、字间距、文本缩排、行高、边距、间距、边框宽度等属性。绝对类型：英寸（in）、
8、厘米（cm）、毫米（mm）、点（point，写作pt）、字高（派卡pica，印刷单位，写作pc）相对类型：em:相对于当前字符的高度； ex:相对于字母x的高度； px:像素（相对于屏幕分辨率）,2、百分比单位。相对于上一级对象的相同属性作为参照值，为其百分之多少。格式：“+/-”+数值+“%”如：表格的宽度是屏幕宽度的80%。,3、颜色单位颜色名称，如red，blue；百分比合成颜色，RGB(*%,*%,*%)如：RGB(100%,100%,100%)表示白色数字合成颜色，RGB(*,*,*)如：RGB(255,255,255)表示白色十六进制数合成法#RRGGBB 或者#RGB如：#FF0
9、0CC #F0C,4、URL单位指链接路径，有相对路径和绝对路径之分，其中相对路径又分为相对根目录的路径和相对文档的路径。一般站外链接用绝对路径，站内链接用相对路径。,二、CSS属性1、CSS盒模型CSS将元素假设放在一个矩形区域中，然后对这个矩形区域进行属性设置，共有五类属性：边界(Margin)、边框(Border)、填充(Padding)、大小 (Height、Weight)、背景（background）等。,24,边界,边框,填充,对象,边界(Margin)：区块与其他对象的空白距离，有5 个属性：Margin-top、Margin-bottom、Margin-left、Margin-
10、right、Margin等。边框(Border)：自身的外围边框属性，有3类属性：边框宽度、边框颜色、边框样式，而宽度又有5个属性： Border-top-width、Border-bottom-width、Border-left-width、Border-right-width、Border-width填充(Padding)：区块内元素与区块边框的空白距离，有5个属性：Padding-top、Padding-bottom、Padding-left、Padding-right、Padding等。,26,27,padding-right,padding-left,border-right,bor
11、der-left,margin-right,margin-left,元素的总宽度 = 左边界+左边框+左填充+Width+右边界+右边框+右填充,28,元素的总高度 = 上边界+上边框+上填充+height+下边界+下边框+下填充,padding-top,padding-bottom,border-top,border-bottom,margin-top,margin-bottom,2、CSS定位CSS 定位 (Positioning) 属性允许你对元素进行定位。position 属性值的含义：static :没有特殊定位，遵循基本的定位规定，不能通过z-index进行层次分级。如层的定位：R
12、elative：不脱离文档流，参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右） 定位，并且可以通过z-index进行层次分级。即相对于自身原有的位置定位到某处，元素仍保持其未定位前的形状，它原本所占的空间仍保留。,31,#box_relative position: relative; left: 30px; top: 20px;,absolute :脱离文档流，相对于其包含块通过 top,bottom, left,right定位。元素框从文档流完全删除，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原
13、来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。,33,#box_relative position: absolute; left: 30px; top: 20px;,CSS的定位属性,第七节 使用Dreamweaver CS5可视化定义CSS样式一、新建样式的一般方法1、CSS的应用类型外部CSS样式表：各种自定义样式存放在扩展名为.css的纯文本文件。可以共享外部CSS样式表文件 ，让多个网页共同引用并应用，达到站点文件样式的一致性。同时，如果修改该样式表文件，所有引用的网页都将改变其样式，达到网站迅速改版的目的。通过CSS样式面板中“附加样式”按钮，可将
14、外部样式链接到当前网页中使用。,内部CSS样式表：只存在于当前网页中，并只针对当前页进行样式应用的方法。一般存在于文档head部分的style标签内。2、CSS样式面板显示“CSS样式”面板：在“窗口”菜单中单击“CSS 样式”。或者按 Shift+F11 键。,CSS样式面板下方的四个按钮分别是：附加样式表，新建CSS规则，编辑样式表，删除嵌入样式表。,37,附加样式表,新建CSS规则,编辑样式表,删除嵌入的样式表,“所有”模式与“当前”模式“CSS”面板默认情况下，是以“所有”模式展开。或者单击“全部”按钮；在“所有”模式下，“CSS”面板显示应用到当前文档的所有CSS规则。单击其中一个规
15、则，该规则的属性出现在下方的列表框中。单击“正在”切换到“当前模式”。在“CSS”面板中，单击“切换到当前选择模式”按钮。此时，在“当前”模式中，“CSS”面板显示当前所选内容的属性的摘要。,3、创建CSS样式表,打开设计视图，在需要插入样式的地方，执行“格式”“CSS样式”“新建”命令。 CSS样式面板中单击“新建CSS规则”。属性面板CSS目标规则中选“新CSS”编辑规则定义CSS样式的类型选择定义样式的位置；在“CSS规则定义”对话框中选择要为新CSS样式设置的样式选项。,输入所定义的样式名称,CSS样式共有四种类型：类（自定义的CSS样式：可用于任何HTML元素）：是唯一可以应用于文档
16、中的任何文本（与控制文本的标签无关）的 CSS 样式类型。与当前文档关联的所有自定义 (Class) 样式都显示在“CSS 样式”面板的“应用样式”视图中以及文本属性面板的 CSS 模式中。标签（重新定义HTML元素）：重定义现有的HTML标签，当创建或更改这类标签的CSS样式时，文档中所有用该标签设置了格式的文本都将自动更新，如给Body设置格式。,41,ID（可用于一个HTML元素）：可以创建一个用id属性声明的仅应用于一个HTML元素的id选择器。然后在“选择器名称”文本框中输入ID号。ID必须以井号（#）开头，能够包含任何字母和数字（如：#one）。仅对指定ID标签标识的一个标签有效。
17、复合内容（基于选择的内容）：主要定义超级链接四种形式的不同属性。,42,4、设置CSS样式格式CSS样式格式共有8种类型，根据需要设置相关的属性。 类 型(主要定义文字的属性) 背 景(设置网页表格单元格行层等的背景) 区 块(对段落的设置,定义文本的间距、对齐、缩进设置。) 方 框(对文本框图像框的设置) 边 框(设置表格的边框) 列 表(设置项目符号编号) 定 位(定义在网页中的位置) 扩 展(制作一些特殊效果),43,44,在“属性”面板中选择“CSS”按钮，单击“编辑规则”按钮，在弹出的“新建CSS规则”对话框中进行设置。在选择器名称中输入该文本样式名称“.head1”，单击“确定”按
18、钮，在弹出的“.head1的CSS规则定义”对话框中进行设置。回到网页正文部分，选中需要设置该种文本样式的文字，然后用鼠标单击“属性”面板中的“目标规则”下拉列表框中的样式名称，该样式就应用到文字上了。,二、定义文本样式在CSS规划定义的分类列表中选择“类型”；主要用于定义文本的属性。,字体（Font-family）：可以在下拉菜单中设置当前样式所用的字体。大小（Font-size）：设置字体的大小。可以通过选择数字和单位来指定字体，如“磅”、“像素”、“英寸”、“厘米”等，也可以选择相对的字体大小，如“极小、“特小”等。可以直接输入样式文本的字号，或从下拉列表中选择需要的字号，当选择字号后，
19、可以在其右侧的下拉列表框中选择字号的单位。,46,粗细（Font-weight）：设置字体的粗细程度，有“正常”、“粗体”、“特粗”和“细体”等。下拉列表框中可输入字体的粗细程度，也可从下拉列表中选择需要的粗细程度。样式（Font-style）：通过选择“正常”、“斜体”或“偏斜体”来设置字体的特殊格式；下拉列表框中可输入字体的特殊格式，也可以从下拉列表中选择字体的特殊格式。,47,变体（Font-variant） ：允许设置字体的变形形式，有“正常”和“小型大写字母”，主要针对英文字符设置。行高（Line-height） ：设置文本的行高。选择“正常”，则由系统自动计算字体的行高和大小；也可
20、以通过输入一个精确的数值并选择其计算单位，来具体指定行高。下拉列表中可选择“正常”或“值”选项，当选择“值”选择项时可在右侧的下拉列表框中选择值的单位。,48,大小写（Text-transform） ：可以设置字符的大小写方式。“首字母大写”，可以指定将每个单词的第一个字符大写；“大写”或“小写”可以分别将别选择的文本设置为大写或小写；“无”保持字符本身原有的大小写格式。可以输入文本的大小写方式，也可以在下拉列表中选择文本的大小写方式。修饰（Text-decoration） ：在该栏中设置文本的修饰效果，包括下划线、上划线、删除线、闪烁、无等复选框。,49,颜色（Color） ：用于设置文字的
21、颜色，单击选色按钮，在打开的颜色列表中选择需要的颜色，也可在文本框中直接输入颜色值。例如：设置文本样式：字体为“幼圆”、大小为9pt、颜色为浅红色（#FF6666）、粗细为“细体”，其它为默认。,50,三、定义背景样式在CSS规划定义的分类列表中选择“背景”；主要用于设置CSS样式的背景，包括背景颜色、背景图像、背景图像的控制等 。,背景颜色（Background-color） ：设置样式的背景颜色。背景图像（ Background-image） ：设置作为样式背景的图像文件所在的URL地址：单击“浏览”按钮从磁盘中选择某一个图像文件。重复（ Background-repeat） ：可以设置是
22、否允许背景图像被重复。“不重复”只在应用样式的元素开始部分显示一次图像；“重复”在应用样式的元素背景上纵向和横向重复显示图像；“横向重复”相应的显示图像的横向重复延伸；“纵向重复”相应的显示图像的纵向重复延伸。,52,附件（Background-attachment） ：设定当拖动浏览器滚动条浏览滚动页面时，背景图像是固定在它的原始位置，还是同内容一起滚动。“固定”表明背景图像固定在原始位置；“滚动”表明背景图像可以滚动。有些浏览器会将固定方式始终作为滚动方式来处理。水平位置（Background-position(X)）：设置背景图像相对于文档窗口的水平位置：左、中、右。垂直位置（Backg
23、round-position(Y)） ：设置背景图像相对于文档窗口的垂直位置：顶部、底部、居中。,53,四、定义区块样式在CSS规划定义的分类列表中选择“区块”，主要用于设置块元素的文字间距、对齐方式、排列方式、文字缩进等。块元素可以是文本、图像和层等。,单词间距（Word-spacing）：设置单词间的间距方式，可以输入一个数值，并在其右方的下拉列表中选择设置数值的单位；字母间距（Letter-spacing）：设置字母间的间距，设置字母间的间距。若在列表中选择“值”选项，在右侧的下拉列表中可以设置数值的单位。垂直对齐（Vertical-align）：可设置指定元素相对于其父级元素在垂直方向
24、上的对齐方式。应用于IMG图像，可以设置图文的对齐方式 如果输入数值，显示的是一个百分比。,56,文本对齐（Text-align） ：设置文本中元素的对齐方式：left（左）、right（右）、center（居中）、justify（两端对齐）。文字缩进（Text-indent） ：设置文本首行缩进的距离，在其右侧的下拉列表中选择数值单位。如果输入为负值时等于创建了文本凸出（反缩进），其显示取决于浏览器。输入第一行的缩进距离，只有当标签应用于文本块时，该设置才会显示在Dreamweaver的文档窗口中。,57,空格（White-space） ：设置在应用样式元素时空格、Tab键和换行符的处理方法
25、。“正常”表示按照正常的方法处理空格，多个空格当做一个空格来对待；“保留”表示保留所有的原始空格形象，比如空格、跳格和回车符等，都作为文本用PRE标签包围；“不换行”表示设定文本不会自动换行，只有使用换行标记BR才换行。该设置不会显示在Dreamweaver的文档窗口中。显示（Display）：可以设置哪些元素被显示以及如何显示。,58,五、定义方框样式在CSS规划定义的分类列表中选择“方框”，主要用于控制网页中块元素的内容距区块边框的距离、区块的大小、区块间的间隔等。块元素可为文本、图像和层等。,注： 方框（盒子）属性把对象作为一个整体看待，装在一盒子里,宽（Width）和高（Height）
26、：设置元素的大小尺寸。在该下拉列表中可指定元素的宽度和高度，也可以输入一个数值，然后在右侧的下拉列表中设置数值的单位。浮动(Float)：在该下拉列表框中设置应用样式元素的浮动位置。页面不并移动，将元素放置在页面边缘的左侧或右侧时，其他元素会围绕该元素。只有在被用于IMG标签时，才会在Dreamweaver的文档窗口中显示该属性。如在下拉列表框中选择“右对齐”选项，则将元素放置到页面右侧的空白处，同样若选择“左对齐”选项则将元素放置到页面左侧的空白处。,60,清除(Clear)：定义元素的某个边侧不允许有层出现。如在下拉列表框中选择“左对齐”选项，则层不能出现在应用样式元素的左侧。同样如选择“
27、右对齐”选项，则层不能出现在应用样式的右侧。如果层在设置该样式前已在元素的某侧，而又设置了层不能出现在该侧边，则该元素会被将会自动移开,移动到层的下面。只有在被用于IMG标签时，才会在Dreamweaver的文档窗口中显示该属性。,61,填充(Padding)：定义元素的内容和边框之间的间距大小。该设置不会显示在Dreamweaver的文档窗口中。在“上”、“右”、“下”和“左”下拉列表框中设置对应边的空白大小。四边可以相同，也可以不同。边界：定义元素边缘和其他元素之间的空间大小。只有在被应用于文本块一类的元素时，才会在Dreamweaver的文档窗口中显示该属性。可分别在“上”、“右”、“下
28、”和“左”下拉列表框中设置对应边的空白大小。在其右侧的下拉列表框中可选择值的单位，四边可以相同，也可以不同。,62,六、定义边框样式在CSS规划定义的分类列表中选择“边框”,主要用于设置表格、图像框的边框样式。,样式（Style）：设置边框的样式；“点划线”表明边框是点线形，“虚线”表明边线是虚线形。通过上、右、下和左可以分别设置四个边的风格，“全部相同”表示四边边框线的风格一致。宽度（Width）：定义应用该样式的元素边框的宽度。细、中、粗和数值可以作为相应的宽度选项。颜色（Color）：可以设置边框对应位置的颜色。,65,七、定义列表样式在CSS规划定义的分类列表中选择“列表”，主要用于设
29、置文本列表的类型、列表项图片等。,类型（List-style-type）：在下拉列表中，可以选择无序列表或者有序项目的符号或编号的外观类型。项目符号图像（List-style-image）：可以设置以图片作为列表项目的符号。通过直接在文本框中输入图片文件的URL地址，或单击浏览按钮，从磁盘上选择图片文件。位置（List-style-position）：可以设置列表项换行时是缩进还是边缘对齐。如选择“内”选项，则当列表过长而自动换行时，不缩进；若选择“外”选项，则当列表过长而自动换行时以缩进方式显示。,68,八、定义定位样式在CSS规划定义的分类列表中选择“定位”，主要用于精确控制网页元素的位置
30、，主要针对Ap div层的位置进行控制。提供网页元件的相对位置或绝对位置的设置，甚至可以将两个元件重叠在一起，使用“层”参数选择定义层的默认标签，将标签或所选文本块更改为新层。这部分参数被扩展成了DW中的层。,类型（Position）：在下拉列表中，可以选择设置浏览器中分层的放置方式。“绝对”使用在Placement框中输入的相对于页面左上角的绝对坐标放置分层。“相对”使用在Placement框中输入的坐标放置分层，该坐标是相对于文档中的对象位置。“固定”相对于浏览器容器来定位，固定定位的元素不会随浏览器滚动条的滚动而变化。“静态”将层定位在文本自身的位置。宽（Width）和高（Height）
31、：设置层的大小。,71,溢出（Overflow） ：设置层内容溢出的处理方式。可见：当分层中的内容超出分层的边界时，分层会自动向下或向右扩展它的大小，以容纳分层的内容，使之可见。隐藏：当分层中的内容超出分层的边界时，分层大小不变，也不出现滚动条，超出边界的内容不显示。滚动：无论分层中的内容是否超出分层范围，分层上总会出现滚动条，利用滚动条进行浏览。自动：在分层中的内容超出分层的边界时，出现滚动条以便显示所有分层内容。,72,定位（Placement）：指定层的位置和大小。它的具体使用依赖于类型部分的设置，分为上、右、下和左四个部分。显示（Visibility） ：决定层的初始显示状态，如果没有
32、设置该属性，在默认状态下，大多数浏览器将继承其上级的值。“继承”继承层的上一级的可见性属性。“可见”显示各个分层的内容，而不考虑其上级元素。“隐藏”隐藏层的内容，而不考虑其上级元素。,73,Z轴（Z-index） ：在下拉列表中可以选择定义分层的叠放顺序。编号高的分层显示在编号低的分层之上。其数值可以为正也可以为负。剪辑（Clip） ：设置Apdiv层可见部分的位置和大小。定义可视区域的左上角和右下角的坐标。如果指定了剪辑区域，可以通过脚本语言如JavaScript来对其进行操作，例如可以输入其属性以创建特殊效果。,74,九、定义扩展样式在CSS规划定义的分类列表中选择“扩展”，主要用于控制鼠
33、标指针形状、图片特殊效果、控制打印时的分页以及为网页元素添加滤镜效果。,分页（Page-break）：可以设置在打印页面时强制分页的位置。在“之前”（Page-break-before）和“之后” （Page-break-after）的下拉列表中，可分别设置分页前和分页后的位置。此属性只有4.0以上版本的浏览器支持。视觉效果：可以设置样式的一些可视效果。光标（Cursor）：用于设置当鼠标掠过被样式控制的对象时的指针外观。如选择hand，鼠标指针会变为“手形”，只有4.0及其以上版本的浏览器支持此属性。,76,过滤镜（Filter）：在其下拉菜单中选择需要的特效，对被样式控制的对象指定特殊的效
34、果，包括模糊和反转，只有4.0及其以上版本的浏览器支持此属性。,77,十、管理CSS样式1、应用自定义（Class）CSS样式将插入点置于欲设置CSS样式的段落中或者在段落中选择一个文本范围，右击选择“CSS样式”，再选择某种已定义的格式。 也可以在菜单中选择。或在属性面板的“类”列表中选择。,78,2、将自定义样式从选定内容中删除选中内容，右击选择“CSS样式”，再选择“无”。3、创建和链接到外部CSS样式表单击附加样式表按钮，再选择CSS样式文件。4、编辑CSS样式在CSS样式面板中，双击欲修改的CSS样式文件名称。,79,例1：创建一个CSS文件，定义一个正文的格式，要求行首留两字的空白
35、，行间距为1.5倍，其它格式自定。新建CSS样式，选择“类（可应用于任何HTML元素）”，保存样式在zw.css样式文件中。从创建一个样式文件，定义一个样式到应用样式的全过程演示一遍。,80,设置CSS样式内容,设置行间距,83,设置行首空白：两个12磅字的空白。,应用：用刚才建立的ZW样式，设置当前网页中的不同位置上的一段文本。拓展：将刚才建立的ZW样式，附加到另一个网页中，再设置该网页中的文本对象。修改：修改ZW样式中的文本颜色。查看两个网页中的表现情况，从而了解CSS的工作原理，体会其优势。,84,例2：重定义单元格标签。新建CSS样式，先选中定义CSS的类型为“标签（重新定义）”，再在
36、其下方的下拉列表中选择欲重新定义格式的标签。保存样式在table_td.css样式文件中。,85,如先在表格中添加几个表格，再重新定义单元格标签，如将单元格的背景颜色设置成黄色，字体颜色设置成蓝色，其它任意。完成后所有表格中的单元格全部变成设置后的效果。,86,例3. 使用CSS选择器（即定义超级链接）新建CSS样式，选择“复合内容（基于选择的内容）” 类型，再选择超级链接的不同状态。,a:link正常显示状态a:hover鼠标指向时的状态a:active鼠标指向并按下左键时的状态a:visited已经访问过以后的状态设置a:link 无下划线，颜色为#333366设置a:visited 无下
37、划线，颜色为#009999 设置a:hover 有下划线，颜色为#ff9900在网页中设置几个超级链接，则其属性变为刚才定义的属性。设置完以后在页面属性的链接（CSS）中可以看到结果。,实例4：CSS控制网页背景新建CSS样式，选择“类（可应用于任何标签）”，命名为textback，仅对该文档生效。选择“背景”类别，设置颜色为CCFF66,选中网页中的一部分内容，应用该样式另外，新建tdback样式，设置“背景”类别下的背景图像(素材库中任选一个)，选择“重复”，并应用到下面一个单元格中。,实例5：CSS区块排列文本新建CSS样式，命名为block1，保存在font.css样式文件中。,设置“
38、类型”为宋体，大小14px，行高2em区块另外，首行文字缩进2个字符。,对中文文本应用该样式。新建block2样式，“类型” 中设置字体为Verdana，大小为16px。在“区块” 中设置文本对齐为两端对齐。对英文文本应用该样式。,实例6：CSS方框对齐对象 新建CSS样式，命名为box1，仅对该文档生效。,设置“方框”属性。,对图片应用该样式(使图片对象的位置任意:有时做得不好)。,实例7：CSS边框创建漂亮按钮三个只有一个单元格的表格，分别设置不同的边框样式。也可以对图像类对象设置边框（加一个相框）。,新建CSS样式，命名为border1，仅对该文档生效。,以同样的方法设置CSS样式border2、border3 对三个按钮分别应用样式，设置的效果在预览时看到。,3、CSS样式表的基本语法CSS的基本语法：选择器、属性和属性值。selector property: value 如：h1 color:red; font-size:14px; 作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。这就是一条完整的声明，h1代表定义的最大标题。,如右建立的一个名为ys01的样式的代码。,
