第3章CSS样式表讲义.ppt

第三章 CSS基础 * Part 3　CSS基础 CSS概述 1 CSS样式表的基本语法 2 4 CSS样式表的应用方式 3 CSS样式设置 什么是CSS样式表 CSS 指层叠样式表（Cascading Style Sheets），它是网页中最重要的工具之一，控制着网页中所有内容的格式。 在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 设计者可以通过修改样式表的定义而使网页呈现完全不同的外观，而当网站拥有几十甚至上百个页面的时候，修改页面的样式表文件即可修改页面的外面，从而大地减少工作量。 为什么需要CSS样式表 样式表能实现内容与样式的分离，方便团队开发 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 样式表的基本语法 样式表的基本结构 STYLE type=text/css P {color:red; font-size:30px; font-family:隶书;} …… /STYLE 声明文档样式表结束 文档样式表开始，类型为CSS样式 样式规则 选择器 样式规则 P {color:red; font-size:30px; font-family:隶书;} 属性 属性的值 -- 　　 “类型”类别主要用于定义文本属性，具体为： 　　1．字体：设置字体或字体组。 　　2．大小：选择或键入字体的大小，单位可以选择“像素（px）”、“点数（pt）”等。 　　3．粗细：设置字体的粗细程度。 　　4．样式：选择文本的字体格式有正常、斜体和偏斜体三种，偏斜体是指文本为倾斜的字体格式。 1.类型 CSS样式设置 　　5．变量：设置文字变形的字体格式。此项在Dreawmeaver8文档窗口中不显示，Internet Explorer6.0版本以上显示，Netscape Navigator不支持。 　　6．行高：设置文本的行间距。有两个选项：正常：自动设置文本间行的高度；（值）：设置文本之间的行距的具体数值。 　　7．大小写：将所选内容中每个单词的首字母大写，或者将文本设置为全部大写或小写。 　　8．修饰：选择需要的复选框，给文字添加修饰。 　　9．颜色：设置文字的颜色。 1 类型 CSS样式设置 　　在“CSS规则定义”对话框中选择“背景”类别，如图。 2 背景 CSS样式设置 　　1．背景颜色：设置背景颜色。 　　2．背景图像：设置背景图像，通过后面的“浏览”按钮可以选择一个图像作为背景。 　　3．重复：表示背景图像的填充方式，有四个选项： 　　?“不重复”：图像不重复，只是应用CSS样式的网页元素前面显示一次。 　　?“重复”：图像会在水平和垂直方向重复。 　　?“水平重复”：背景图像在水平方向上重复。 　　?“纵向重复”：背景图像在垂直方向上重复 　　4．附件：确定背景图像是固定在原始位置还是随内容一起滚动 。 　　5．“水平位置”和“垂直位置”：指定背景图像相对于元素的初始位置。这可以用于将背景图像与页面中心垂直和水平对齐。如果附件属性为“固定”，位置则相对于“文档”窗口而不是元素。 2 背景 CSS样式设置 　　在“CSS规则定义”对话框中选择“区块”类别可以定义标签和属性的间距、对齐等设置 ，如图。 3 区块 CSS样式设置 　　1．单词间距：选择或设置单词间的间距。负值表示减小字符间距。字母间距设置可覆盖对齐的文本设置 　　2．字母间距：选择或设置字母间的间距。 　　3．重直对齐：设置元素在垂直位置上的对齐方式。 　　4．文本对齐：设置文本的对齐方式。 　　5．文字缩进：指定第一行文字缩进程度，并可在右侧选择数值单位。也可以使用负值创建凸出，但显示方式则取决于浏览器。 　　6．空格：设置文本处理空格的方式。“正常”收缩空白；“保留”即保留所有空白，包括空格、制表符和回车；“不换行”指当用户强行换行时才换行，否则不会自动换行。 　　7．显示：指定是否以及如何显示元素。“无”表示关闭应用此属性的元素的显示 。 3 区块 CSS样式设置 　　在“CSS规则定义”对话框中选择“方框可以为控制元素在页面上的放置方式的标签和属性定义设置。可以在应用填充和边距设置应用于元素的各个边，也可以使用“全部相同”设置将相同的设置应用于元素的所有边。如图。 4 方框 CSS样式设置 　　1．宽和高：设置元素的宽度和高度。宽和高定义的对象多为图片，表格，层等。 　　2．浮动：设置元素的浮动位置。如选择左对齐，则将元素放置到左页面的空白处。设置其它他元素（如文本、层、表格等）在哪个边围绕浮动。其他元素按通常的方式环绕在浮动元素的周围。 　　3．清除：设置元素的哪一边允许分层。如左对齐：表示不允许分层出现在元素的