网页设计与制作-电子教案-陈彦许第3章节CSS样式.pptVIP

尚辅网 / 陈彦许 主编 陈维华 卢爱芹 副编著 第3章 CSS样式 中国水利水电出版社 第3章 CSS样式 【学习目标】 2.学会CSS样式的创建与编辑方法 3.学会CSS样式的创建与编辑方法 1.掌握CSS样式的概念 3.1 CSS样式的概念 3.1.1 CSS样式简介 （Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组网页元素的格式设置规则，用于控制网页的外观。通过使用CSS样式设置网页页面的格式，可将网页中的内容与表现形式分离。网页中的内容使用HTML文档描述，网页内容表现形式使用CSS规则来定义。CSS规则可以存放在另一个文件中或插入于HTML文档中（通常为文件头部分）。将网页的内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。 C S S 3.1 CSS样式的概念 3．1．2 CSS规则 上海大众{ 型号：Polo； 颜色：白色； 售价：10万； } 页面｛ 宽：800像素； 高：1000像素； 字体：宋体； 大小：12像素； 背景色：灰色； ｝ Body{ width:800px; height:1000px; font-family:宋体; font-size：12px； background-color: gray; } 3．2 Dreamweaver中使用CSS 3．2．1 创建CSS 方法一：在打开的HTML文档中，选择菜单栏中“格式/CSS样式/新建”命令。 方法二：选择菜单“窗口→CSS样式”，确认打开样式面板。单击“CSS样式”面板底部的新建CSS规则按钮。如图所示。 方法三：在“CSS面板”中，单击面板标题栏右端的图标，然后在弹出菜单中选择“新建”命令。如图所示。 3．2 Dreamweaver中使用CSS 3．2．1 创建CSS 类（可应用于任何HTML元素）：用于创建自定义样式。即创建一个可以作为 class 属性应用于文本区域或文本块的样式。 ID(仅应用于一个HTML元素)：与类选择器很相似，但是ID选择器只能在HTML页面中使用一次，针对性更强。 标签（重定义HTML元素）。对指定的 HTML 标签的默认格式进行重新定义。（注意：使用重定义标签，会改变许多页面的布局。) 复合内容（基于选择的内容）：用于对特定的标签组合进行格式定义。 在“新建CSS规则”对话框中，有4种“选择器类型”可供选择，分别为“类（可应用于任何HTML元素）”、“ID（仅应用于一个HTML元素）”、“标签（重定义HTML元素）”和“复合内容（基于选择的内容）”。 “新建CSS规则”对话框 3．2 Dreamweaver中使用CSS 3．2．1 创建CSS Font-family(字体)：设置样式的字体。 Font-size(大小)：文本的大小。。 Font-style(样式)：定义字体样式为 Normal(正常)，Italic（斜体)，或者 Oblique（倾斜)。 Line-height(行高)：设置文本的行高。 Text-decoration(修饰)：添加underline:下划线，overline:上划线，line-through:整行划线，blink:命令文本闪烁。 Font-weight粗细：给字体指定粗体字的磅值。Normal 等同于 400；Bold 等同于 700。 Font-variant(变形)：选取字体的变种，例如 small caps（小型大写字母)。 Font-transform(形式)：将选区中每个单词的第一个字母转为大写，或者令单词全部大写或全部小写以及上标、下标显示。 Color（颜色）：定义文本颜色。 类型面板 3．2 Dreamweaver中使用CSS 3．2．1 创建CSS Background-color(背景颜色)：设置元素的背景色。 Background-image(背景图象)：设置元素的背景图像。 Background-repeat(重复)：背景图片重复放置的方式，包括“no-repeat(不重复)”、“repeat(重复)”、“ repeat-x (横向重复)”和“repeat-y (纵向重复)”这4种方式。“no-repeat”表示图