网页设计与制作项目教程（第四版） 模块05精致网页由样式表开始

网页设计与制作项目教程（第四版）模块05精致网页从样式表开始教学课件教学目标：学习目标Objectives•理解CSS基本原理：掌握样式表如何实现内容与形式的分离及其优势。•熟悉CSS样式属性：重点掌握文本属性、段落区块属性、超链接伪类及列表属性。•掌握样式建立方法：了解内联、嵌入及外部样式表文件的建立与引用逻辑。核心价值CSS是从“做网页”到“设计网页”的质变。它让网页排版从表格堆砌转向更灵活、更专业的代码控制。教学目标：能力与素养目标能力目标素养目标•熟练运用CSS进行精细化排版；•掌握DW内置CSS设计器的操作；•能独立设计响应式图文样式。•创新思维：探索独特视觉风格；•问题解决：解决样式冲突与兼容性；•持续学习：关注CSS3行业动态。知识要点与关联知识知识要点能力要求关联知识CSS样式表原理理解层叠概念、样式优先级CSS选择器分类掌握标签选择器、类选择器、ID选择器、伪类样式表存放位置掌握内联、嵌入、外部链接(link)CSS文本/区块属性掌握字体大小、颜色、行高、缩进等任务引领一：产品说明书界面制作任务说明：通过多层嵌套表格布局网页结构，并利用自定义CSS样式精准控制小标题和正文的字体效果，打造整洁专业的说明书界面。重点展示：Logo导航、图文混排、自定义颜色与字号样式实操原子拆解1.外表格布局(860px)2.嵌套多层表格定位3.新建类选择器(.bt1)4.定义并应用样式步骤1：构建外表格基础结构•新建文件：命名为index.html。•插入外表格：宽度逻辑860px宽度在主流显示器上均能良好展示，居中对齐可确保大屏下视觉重心不偏移。○菜单路径：“插入”->“Table”。○设置：3行1列。○宽度：860像素。○对齐方式：居中。步骤2：复杂结构的多级嵌套•1.第一行单元格：嵌入1行2列表格（宽100%）放置页头。•2.第二行单元格：嵌入1行2列表格。•3.继续嵌套：在上述第二行左格，再嵌入2行1列表格（宽100%）。•4.填充图片：插入logo.jpg,menu.jpg,dh.jpg,flower.jpg。嵌套逻辑表格嵌套是布局的基本功。通过将单元格划分为更小的表格，可以实现文字和图片的微米级错位对齐。1行2列表格嵌套2行1列表格步骤3：新建CSS规则定义颜色•创建规则：页面空白处右击->“CSS样式”->“新建”。•选择器设定：•属性定义：○选择器名称：.bt1○注意：前面必须有英文句点“.”代表类。○分类：类型(Type)。○颜色(Color)：#84665C(深棕色)。步骤4：样式的精准应用•1.在编辑器中选中需要格式化的小标题文字。•2.属性面板切换：点击底部面板左侧的CSS按钮。•3.目标规则选择：在下拉列表中选择刚才定义的bt1。验证逻辑当选中文字变色且底部标签栏出现标记时，说明样式应用成功。专家提示：CSS命名规范在创建Class类选择器时，必须遵守：•前导点符号：定义名称时必须以.开头（如.mytext），但调用时不要写点。•首字符限制：名称不能以数字开头。•禁止特殊符号：除了下划线（_）和连字符（-），严禁使用中文、空格或特殊字符。•语义化建议：推荐使用功能命名（如.news-title）而非表现命名（如.red-font）。相关知识：CSS的三位一体结构选择器{属性:属性值;}解析说明•选择器：“是谁要变？”(如h1标签)•属性：“变什么？”(如颜色)•值：“变成什么样？”(如红色)深度理论：常用CSS选择器分类对比类型语法示例应用场景权重/特点HTML标签选择器p{...}全站/全页统一样式最低，自动生效Class类选择器.news{...}最常用，灵活重复应用中，手动调用ID类选择器#header{...}独立、唯一的模块高，仅限一次伪类选择器a:hover{...}交互状态切换针对特定动态行为相关知识：超链接伪类与LVHA顺序超链接的四种状态：必记口诀：LVHA(LoveHate原则)。编写样式时必须严格遵循此顺序，否则会导致部分状态样式失效。•a:link-初始状态（未访问）•a:visited-已访问过的状态•a:hover-鼠标悬停状态（最常用）•a:active-正在单击瞬间的状态代码示例深度理论：三类样式表存放位置分析类型位置优点缺点内联样式表标签style属性内针对性强，优先级最高内容与形式高度耦合嵌入样式表内部管理方便，页面加载快无法实现跨页面复用外部样式表独立.css文件代码复用度最高，易维护需额外发起HTTP请求操作原子化：实现正文首行缩进•1.新建CSS样式名.wz。•2.“类型”分类：字号12px，行高20px。•3.“区块”分类(Block)：找到Text-indent。•4.参数设定：输入2ems。EMS单位2ems代表缩进当前字体大小的两倍距离。相比固定像素，ems能随字号缩放自动调整，更具响应性。操作原子化：重定义a标签显示风格•选择器类型：标签(重新定义HTML元素)。•选择器名称：

a。•核心设置：视觉排版默认的蓝色下划线往往破坏整体美感。设为none可去除下划线，让链接文字看起来更自然。○Text-decoration设为none。○Color设为#093。○Font-style设为italic。操作原子化：利用图片作为列表图标•1.新建类样式.list。•2.“列表”分类(List)：应用提醒设置好CSS后，必须在属性面板中选中整个标签并应用该样式才有效。○Type设为none(取消默认黑点)。○Image(图片)：点击浏览，选择漂亮的图标文件。操作原子化：固定背景不随滚动条移动需求：页面内容较长时，希望背景大图锁死在窗口，不被滚走。•1.定义body标签样式。•2.Background-image：选择图片。•3.Background-repeat：no-repeat。•4.Background-attachment：

fixed(固定)。视觉特效Fixed属性可以创造出类似视差滚动的深邃感，显著提升网站的高级感。项目渐近：整理目录结构与外部样式挑战：随着文件增多，根目录杂乱不堪。我们需要建立二级目录并提取公共CSS。•新建目录：songmovie,classicbooks。•文件迁移：将对应内容页拖入目录。•核心任务：建立hobby.css并实现跨目录引用。自动更新注意：拖拽文件时DW会提示“更新文件”。必须点击“更新”，软件会自动修复所有HTML内部的路径引用。深度解析：外部CSS的引用路径"../"当CSS文件与HTML不在同一层级时：路径含义：

`../`代表从当前目录返回上一级目录。

`../../`代表返回上两级。•同级引用：•父级引用：

回味思考：客观题精选(1)•1.CSS的全称及其核心作用是？

答案：C.CascadingStyleSheet和层叠样式表•2.外部样式表是个独立文件，其文件后缀名通常为？

答案：A.CSS•3.哪个HTML标签常用于构建CSS样式所依赖的区块布局？

答案：B.回味思考：客观题精选(2)•4.下列哪种CSS属性用于设置文字的加粗显示？

答案：A.font-weight:bold•5.给页面中所有的标签统一添加背景色的方法是？

答案：B.h1{background-color:#FFFFFF}（标签选择器）•6.修改段落行间距，对应的CSS属性是？

答案：line-height专家提示：层叠与优先级如果同一个元素被设置了多个冲突的样式，谁生效？1.就近原则：

内联样式>嵌入样式>外部样式表。2.选择器权重：

ID选择器(100)>类选择器(10)>标签选择器(1)。3.重要性强制：使用!important可以无视以上规则强制生效。思考题：CSS的逻辑应用Q1：按照选择器来分，CSS样式分为哪几类？Q2：如