ch08-应用CSS样式美化网页.pptx

Dreamweaver CS5网页设计与制作基础教程,第8章 应用CSS样式美化网页,8.1 认识CSS样式表,8.1.1 CSS的基本概念 8.1.2 CSS样式的类型 8.1.3 CSS样式基本语法,8.1.1 CSS的基本概念,CSS（Cascading Style Sheet），中文译为【层叠样式表】，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。,8.1.2 CSS样式的类型,1. 自定义CSS(类样式) 2. 重定义标签的CSS 3. CSS选择器样式(高级样式),8.1.3 CSS样式基本语法,CSS的基本语法由三部分构成：选择器（Selector）、属性（Property）和属性值（Value）三个部分。,8.2 创建CSS样式,8.2.1 建立标签样式 8.2.2 建立类样式 8.2.3 建立复合内容样式 8.2.4 建立ID样式 8.2.5 链接外部样式表,8.2.1 建立标签样式,启动Dreamweaver CS5，在菜单栏中，选择【文件】【打开】菜单项，打开素材文件。 在【CSS样式】面板上，单击【新建CSS规则】按钮。 弹出【新建CSS规则】对话框，单击展开【选择器类型】下拉按钮，选择【标签（重新定义HTML元素）】，单击【确定】按钮。 弹出【CSS规则定义】对话框，在【分类】列表中，选择各项进行设置，单击【确定】按钮。 切换至代码视图，可以看到在代码中，添加了相应的代码。 保存文档，按下键盘上的【F12】键，即可在浏览器中浏览到网页的视觉效果。,8.2.2 建立类样式,在【CSS样式】面板上，单击【新建CSS规则】按钮 。 弹出【新建CSS规则】对话框，单击展开【选择器类型】下拉按钮，选择【类（可应用于任何HTML元素）】，单击【确定】按钮。 弹出【CSS规则定义】对话框，在【分类】列表中，选择各项进行设置，单击【确定】按钮。 切换至代码视图，可以看到在代码中，添加了相应的代码。 保存文档，按下键盘上的【F12】键，即可在浏览器中浏览到网页的视觉效果。,8.2.3 建立复合内容样式,在【新建CSS规则】对话框中，单击展开【选择器类型】下拉按钮，选择【复合内容（基于选择的内容）】选项，在【选择器名称】下拉选项中，包括了4个选项。,8.2.4 建立ID样式,在【CSS样式】面板上，单击【新建CSS规则】按钮 ，如图8-13所示。 弹出【新建CSS规则】对话框，单击展开【选择器类型】下拉按钮，选择【类（可应用于任何HTML元素）】，单击【确定】按钮。 弹出【CSS规则定义】对话框，在【分类】列表中，选择【方框】选项，设置参数，单击【确定】按钮。 在【插入】面板中，单击【插入Div标签】按钮。 弹出【插入Div标签】面板，单击展开【插入】下拉选项，选择【在结束标签之前】选项，单击【ID】下拉选项，选择【#top】选项下，单击【确定】按钮。 此时，已经插入ID名称为top的Div，在页面中看到刚刚创建的#top的CSS样式表。,8.2.5 链接外部样式表,单击【CSS样式】面板下方的【附加样式表】按钮 ，弹出【链接外部样式表】对话框，单击【文件/URL】后面的【浏览】按钮，插入文件，选中【链接】单选项，单击【确定】按钮，即可完成添加外部链接样式表的操作。,8.3 将CSS应用到网页,8.3.1 内联样式表 8.3.2 内部样式表 8.3.3 外部样式表,8.3.1 内联样式表,内联式样式表是在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些控制信息的标记中。,8.3.2 内部样式表,内部样式表是把样式表放到页面的区里，这些定义的样式就应用到页面中，样式表是用标记插入的。,8.3.3 外部样式表,外部式样式表是指将样式表作为一个独立的文件保存在计算机上，这个文件以“.css”作为文件的扩展名。样式在样式表文件中定义和在嵌入式样式表中的定义是一样的，只是不再需要style元素。,8.4 设置CSS样式,8.4.1 设置文本样式 8.4.2 设置背景样式 8.4.3 设置区块样式 8.4.4 设置方框样式 8.4.5 设置边框样式 8.4.6 设置列表样式 8.4.7 设置定位样式,8.4.1 设置文本样式,在【CSS规则定义】对话框的【分类】区域，选择【类型】选项，可以对文本的样式进行设置。,8.4.2 设置背景样式,启动Dreamweaver CS5，在菜单栏中，选择【文件】【打开】菜单项，打开素材文件。 在【CSS样式】面板上，单击【新建CSS规则】按钮。 弹出【新建CSS规则】对话框，单击展开【选择器类型】下拉按钮，选择【类（可应用于任何HTML元素）】，在【选择器名称】文本框输入文本，单击【确定】按钮。 弹出【CSS规则定义】对话框，在【分类】列表中，选择【背景】选项，设置参数，单击【确定】按钮。 在页面中选中需要应用背景样式的内容，在【属性】面板中，单击展开【类】下拉按钮，选择刚刚定义的CSS样式。 此时，在页面中，即可看到刚刚定义的背景样式效果，通过以上步骤即可完成操作。,8.4.3 设置区块样式,使用【区块】类别可以定义段落文本中文字的字距、对齐方式等格式，在【CSS规则定义】对话框左侧，选择【区块】选项，即可进行相应的设置。,8.4.4 设置方框样式,在图像的属性面板上，可以设置图像的大小、图像水平和垂直方向上的空白区域等，方框样式完善并丰富了这些属性设置，定义特定元素的大小及其与周围元素间距等属性。,8.4.5 设置边框样式,在Dreamweaver CS5中，使用【边框】类别可以定义元素周围的边框的宽度、颜色和样式等设置。,8.4.6 设置列表样式,在Dreamweav