《网页设计与制作》层叠样式表（1）（举一反三考点练）-讲义
2025-11-04
|
14页
|
93人阅读
|
0人下载
精品
内容正文：
举一反三考点练
《网页设计与制作》层叠样式表-讲义
1. 理解CSS基础概念与创建流程
2. 熟悉核心选择器与样式属性
3. 掌握外部样式表链接、维护与媒体查询
知识点一 CSS基础概念与创建流程
1.概念与优势
（1）定义
① CSS 是控制网页颜色、字体、大小、边框、背景、浮动等外观的格式规则集合。
② 实现“内容与表现分离”，HTML 只存放文本信息，外观由 CSS 独立管理。
③ 搜索引擎更友好，页面容量比表格布局减少约 50%，加载速度更快。
（2）优势
① 统一修改：改一个 CSS 文件即可刷新全站风格。
② 跨设备兼容：能在不同分辨率、浏览器、手持终端上保持版面一致。
③ 符合 W3C 标准，利于后期维护、团队协作与 SEO。
2.样式存放位置
（1）外部样式表
① 存储于独立 .css 文件，用 <link> 或 @import 引入，可被多页共享。
② 修改一次即可影响所有引用页面，是大型站点的首选方案。
③ Dreamweaver 中通过“CSS 设计器→附加现有的 CSS 文件”完成链接。
（2）内部样式表
① 写在当前页 <head> 的 <style> 标签内，仅作用于本文档。
② 适合单页特效或测试阶段，减少 HTTP 请求。
③ 示例：重新定义 body{margin:0; background:#090;} 即生效。
（3）内联样式
① 直接写在标签 style 属性里，优先级最高，不利于复用。
② 适用于邮件模板、CMS 编辑区等特殊场景。
③ 代码示例：<h1 style="color:red;">标题</h1>。
3.创建步骤（可视化）
（1）打开 CSS 设计器
① 菜单“窗口→CSS 设计器”或 Shift+F11。
② 面板分四格：源、@媒体、选择器、属性，上下文高亮关联。
③ 支持实时输入、即时预览，无需记忆全部代码。
（2）指定“源”
① 点击“+”→“创建新的 CSS 文件”，命名 style.css 并保存到站点根目录。
② 也可选“在页面中定义”生成内部样式。
③ 勾选“链接”方式而非“导入”，兼容性更佳。
（3）新建选择器
① 输入标签名（如 td、a:link）或类名（如 .bx、.copyright）→回车。
② DW 会智能提示，最多给出三条候选规则，可用上下键调整具体程度。
③ 类样式可在属性面板“类”下拉框复用，标签样式自动全局生效。
（多项选择题）关于CSS的存放位置，以下说法正确的是（ ）
A. 外部样式表存储于独立的.css文件中，通过\<link\>或\@import引入，可被多页共享
B. 内部样式表写在当前页的\<head\>的\<style\>标签内，仅作用于本文档
C. 内联样式直接写在标签的style属性里，优先级最高，利于复用
D. 内部样式表适合单页特效或测试阶段，减少HTTP请求
【答案】ABD
【解析】CSS的存放位置主要有外部样式表、内部样式表和内联样式三种。外部样式表存储于独立的.css文件中，通过\<link\>或\@import引入，可被多页共享，便于统一管理网站风格；内部样式表写在当前页的\<head\>的\<style\>标签内，仅作用于本文档，适合单页特效或测试阶段，减少HTTP请求；内联样式直接写在标签的style属性里，优先级最高，但不利于复用，适用于特殊场景。选项C中“利于复用”说法错误。
【要点】考查CSS存放位置的特点及适用场景。
1.（单项选择题）CSS的创建步骤中，以下操作用于指定“源”的是（ ）
A. 输入标签名或类名→回车
B. 点击“+”→“创建新的CSS文件”，命名style.css并保存到站点根目录
C. 在“属性”面板的“目标规则”或“类”下拉列表中选择已创建好的样式
D. 修改已有的CSS选择器属性
【答案】B
【解析】在CSS的创建步骤中，指定“源”是指确定样式文件的位置和链接方式等。选项B中的操作是点击“+”→“创建新的CSS文件”，命名style.css并保存到站点根目录，这是指定“源”的操作，用于创建新的外部样式文件并指定其存放位置。选项A是新建选择器的操作，选项C是在页面中应用样式，选项D是修改样式。
【要点】考查CSS创建步骤中指定“源”的操作。
2.（单项选择题）在Dreamweaver中，以下操作可以打开CSS设计器的是（ ）
A. 菜单“窗口→CSS设计器”或Shift+F11 B. 双击页面中的元素
C. 右键单击页面空白处选择“CSS设计器” D. 单击“文件”菜单中的“新建”
【答案】A
【解析】在Dreamweaver中，打开CSS设计器可以通过菜单“窗口→CSS设计器”或使用快捷键Shift+F11来实现。选项B双击页面中的元素通常会进入元素的编辑状态，而不是打开CSS设计器；选项C右键单击页面空白处选择“CSS设计器”并不是Dreamweaver中打开CSS设计器的正确操作；选项D单击“文件”菜单中的“新建”是用于新建文档的操作，与打开CSS设计器无关。
【要点】考查在Dreamweaver中打开CSS设计器的方法。
3.（多项选择题）关于CSS的优势，以下说法正确的是（ ）
A. 可以实现内容与表现分离，使HTML文件中只存放文本信息，外观由CSS独立管理
B. 修改一个CSS文件即可刷新全站风格，便于统一修改
C. 能在不同分辨率、浏览器、手持终端上保持版面一致，具有跨设备兼容性
D. 符合W3C标准，利于后期维护、团队协作与SEO
【答案】ABCD
【解析】CSS的优势主要包括：实现内容与表现分离，HTML文件中只存放文本信息，外观由CSS独立管理，使页面结构更清晰，便于搜索引擎抓取；修改一个CSS文件即可刷新全站风格，便于统一修改和维护；能在不同分辨率、浏览器、手持终端上保持版面一致，具有良好的跨设备兼容性；符合W3C标准，利于后期维护、团队协作与SEO。
【要点】考查CSS的优势。
1.（填空题）CSS是控制网页中内容的________、________、文字大小、宽度、边框、背景、浮动等样式来实现各种网页样式的统称。
【答案】颜色、字体
【解析】CSS是控制网页中内容的颜色、字体、文字大小、宽度、边框、背景、浮动等样式来实现各种网页样式的统称。颜色和字体是网页样式中常见的两个方面，通过CSS可以对它们进行详细的设置和控制。
【要点】考查CSS的定义及作用范围。
2.（填空题）在CSS创建步骤中，新建选择器时，DW会智能提示，最多给出______条候选规则。
【答案】三
【解析】在CSS创建步骤中，新建选择器时，Dreamweaver会智能提示，最多给出三条候选规则。这是Dreamweaver为了方便用户快速创建选择器而提供的功能，用户可以根据提示选择合适的选择器或进行进一步的修改。
【要点】考查CSS创建步骤中新建选择器时Dreamweaver的智能提示功能。
3.（判断题）CSS的创建步骤中，创建新的CSS文件并将其附加到文档中时，只能选择“链接”方式，不能选择“导入”方式（ ）
【答案】×
【解析】在CSS的创建步骤中，创建新的CSS文件并将其附加到文档中时，可以选择“链接”方式，也可以选择“导入”方式。虽然“链接”方式的兼容性更佳，但“导入”方式也是可行的，用户可以根据实际需求进行选择。
【要点】考查CSS创建步骤中附加样式表的方式。
· 作用：管外观，实现内容与表现分离，提速、SEO、易维护。
· 三位置：外部文件全站共享；内部head单页测试；内联优先级最高。
· 创建：CSS设计器→新建/附加样式表→输选择器→填属性即时预览。
知识点二 核心选择器与样式属性
1.选择器类型
（1）标签选择器
① 直接重新定义 HTML 标签，如 td{font-size:12px;color:#000;} 影响所有单元格。
② 一次性修改，全站同名标签同步更新。
③ 适合清除默认样式或统一基础文本。
（2）类选择器
① 自定义名称前加“.”，如 .bx、.copyright，可应用于任何元素。
② 一个页面可多次引用，实现模块化、差异化设计。
③ 在属性面板“类”下拉选择即可套用，支持“应用多个类”。
（3）高级/ID 选择器
① 伪类：a:hover{color:#A61717;font-style:italic;} 实现鼠标经过变色+斜体。
② ID 选择器：#myHead{width:960px;margin:0 auto;} 用于唯一头部区块。
③ 组合选择器：td h2 只针对嵌套在单元格内的二级标题生效，提高精度。
2.常用属性类别
（1）文本
① color、font-family、font-size、line-height、text-align、text-decoration。
② 建议字体大小用 px，防止浏览器缩放破坏布局。
③ text-indent、letter-spacing 可微调段落缩进与字距。
（2）背景
① background-color、background-image、background-repeat、background-position。
② 渐变背景通过“gradient”属性直接可视化设置。
③ 背景图固定 attachment 选 fixed 可实现视差滚动。
（3）边框与布局
① border-width、border-style、border-color 支持分边设置。
② margin（外边距）、padding（内边距）可一键链接四边或单独禁用。
③ width/height、float、clear、position 实现块级元素精准定位与环绕。
3.层叠与优先级
（1）层级顺序
① 浏览器默认 < 外部文件 < 内部 < 内联。
② 同一源下，后写规则覆盖先写；特殊性高的选择器（如 ID）优先于类。
③ 被覆盖的属性在 CSS 设计器中以删除线显示，直观可视。
（2）继承性
① 文字颜色、字号等可自动向下传递给子元素。
② margin、padding、border 不继承，需显式声明。
③ 可用 *{box-sizing:border-box;} 统一计算方式，减少误差。
（3）调试技巧
① 实时视图下修改立即呈现，无需刷新。
② 利用“显示集合”复选框仅列出已设值，避免干扰。
③ 多浏览器预览，确认外链、渐变、圆角等兼容效果。
（多项选择题）以下关于CSS选择器的说法，正确的是（ ）
A.类选择器以“.”开头，可应用于页面中的任何元素，实现模块化设计
B.标签选择器是直接对HTML标签进行样式定义，影响页面中所有该标签元素
C.ID选择器以“#”开头，一个页面中可以有多个相同ID的元素
D.伪类选择器如a:hover，用于定义链接在鼠标悬停时的样式
【答案】ABD
【解析】类选择器、标签选择器、伪类选择器的说法都是正确的。ID选择器以“#”开头，且一个页面中ID应该是唯一的，不能有多个相同ID的元素，因此C选项错误。
【要点】考查CSS选择器的基本概念及特点。
1.（单项选择题）在CSS中，以下哪个属性用于设置文本的颜色（ ）
A.color B.font-family C.font-size D.text-align
【答案】A
【解析】color属性用于设置文本的颜色，font-family设置字体类型，font-size设置字体大小，text-align设置文本的对齐方式。
【要点】考查CSS文本属性的基本应用。
2.（单项选择题）若要使一个元素的背景图像在页面滚动时不滚动，应将background-attachment属性设置为（ ）
A.fixed B.scroll C.local D.auto
【答案】A
【解析】background-attachment属性设置为fixed时，背景图像固定在视口中，不会随页面滚动而滚动；设置为scroll时，背景图像会随页面滚动而滚动。
【要点】考查CSS背景属性的设置及效果。
3.（多项选择题）以下关于CSS样式的说法，正确的是（ ）
A.内部样式表写在当前页的\<head\>的\<style\>标签内，仅作用于本文档
B.外部样式表存储于独立的.css文件，用\<link\>或\@import引入，可被多页共享
C.内联样式直接写在标签的style属性里，优先级最高，利于复用
D.修改外部样式表文件后，所有链接该文件的页面样式都会自动更新
【答案】ABD
【解析】内部样式表、外部样式表的说法都是正确的，外部样式表修改后所有链接页面样式会更新也是正确的。内联样式虽然优先级最高，但不利于复用，因此C选项错误。
【要点】考查CSS样式存放位置及特点。
1.（填空题）在CSS中，设置元素边框宽度的属性是______。
【答案】border-width
【解析】border-width属性用于设置元素边框的粗细，可以分别设置元素各边的边框宽度，也可以设置一个统一的宽度值。
【要点】考查CSS边框属性的基本应用。
2.（填空题）使用CSS设置文本的行高时，应使用______属性。
【答案】line-height
【解析】line-height属性用于设置文本的行高，通过设置该属性可以调整文本的行间距，使文本显示更加美观。
【要点】考查CSS文本属性的基本应用。
3.（判断题）在CSS中，背景颜色background-color属性值可以使用颜色名称、十六进制颜色代码或RGB颜色值来表示（ ）
【答案】√
【解析】background-color属性值确实可以使用颜色名称（如red、blue等）、十六进制颜色代码（如#FF0000、#0000FF等）或RGB颜色值（如rgb(255,0,0)、rgb(0,0,255)等）来表示。
【要点】考查CSS背景颜色属性的设置方法。
· 选择器：标签统一改；类可复用；伪类/ID精细控制。
· 属性：文本字体颜色对齐；背景图渐变定位；边框边距布局浮动。
· 层叠：外<内<内联；后写覆盖先写；被覆盖属性显示删除线。
知识点三 外部样式表链接、维护与媒体查询
1.链接与共享
（1）附加流程
① 打开任意页面→CSS 设计器“源”+→“附加现有的 CSS 文件”→浏览选 style.css。
② 选择“链接”方式→确定，全站页面均可共用此文件。
③ 后续新增类（如 .bt、.bk）写入同一文件，所有链接页同步生效。
（2）应用场景
① 统一导航、版权、按钮风格，确保品牌一致性。
② 专题活动只需替换一套色值即可快速上线。
③ 利于 CDN 缓存，减少服务器流量。
（3）维护规范
① 文件头部注释写明作者、更新日期、版本号。
② 按“布局→组件→皮肤”顺序分组，便于检索。
③ 修改后在 DW“实时视图”检查，确认无错位或图片路径问题。
2.媒体查询与响应式
（1）创建方法
① 在“@媒体”窗格点击“+”→弹出“定义媒体查询”对话框。
② 预设 max-width、min-width、orientation 等条件，支持 And 组合。
③ 代码区实时显示 @media screen and (max-width:768px){…}。
（2）实用策略
① 桌面样式写全局，平板/手机用媒体查询覆盖字号、栏宽、隐藏侧栏。
② 图片类 .img-resp{width:100%;height:auto;} 配合查询实现自适应。
③ 测试时可用 DW 多屏预览或浏览器开发者工具切换设备尺寸。
（3）兼容注意
① 老版 IE 需添加 css3-mediaqueries.js 补丁。
② 单位兼顾 rem/em，保证缩放时比例正确。
③ 外链字体文件不宜过大，避免移动网络阻塞渲染。
3.更新与回溯
（1）一键全局改
① 修改 .copyright 颜色→保存 style.css→所有引用页实时刷新，无需逐页打开。
② 删除无用选择器前，用“搜索”确认未被调用，防止误伤。
③ 大型项目启用 Git，CSS 提交前对比 diff，回滚方便。
（2）性能优化
① 合并同类选择器，减少重复代码；使用缩写如 margin:0 auto;。
② 启用 Gzip 压缩，minify 去掉注释与空行，提高加载速度。
③ 关键 CSS 直接内嵌首屏，非关键异步加载，提升 Lighthouse 评分。
（3）文档交接
① 在 <head> 备注页面所用类名与用途，方便后续开发者快速定位。
② 建立“样式指南”页面，展示色板、字号、按钮示例，形成团队共识。
③ 定期审查过时规则，保持样式表精简、可维护、可扩展。
（多项选择题）关于外部样式表的链接和维护，以下说法正确的是（ ）
A. 外部样式表可以通过\<link\>标签或\@import规则引入网页中
B. 使用外部样式表可以实现网站风格的统一，便于维护
C. 修改外部样式表文件后，所有链接该文件的网页都会自动更新
D. 外部样式表文件的扩展名通常是.css
【答案】ABCD
【解析】外部样式表是CSS文件，可以通过\<link\>标签或\@import规则引入网页中。使用外部样式表可以实现网站风格的统一，便于维护。修改外部样式表文件后，所有链接该文件的网页都会自动更新。外部样式表文件的扩展名通常是.css。
【要点】考查外部样式表的基本概念和使用方法。
1.（单项选择题）在使用外部样式表时，推荐的引入方式是（ ）
A. 使用\<link\>标签引入 B. 使用\@import规则引入
C. 直接在HTML文件中定义 D. 使用内联样式
【答案】A
【解析】使用\<link\>标签引入外部样式表是推荐的方式，因为它具有更好的兼容性和性能。而\@import规则在某些情况下可能会导致页面加载速度变慢。
【要点】考查外部样式表的引入方式及其优缺点。
2.（单项选择题）以下关于外部样式表的维护说法错误的是（ ）
A. 修改外部样式表文件后，所有链接该文件的网页都会自动更新
B. 外部样式表文件的修改不会影响到链接该文件的网页
C. 在外部样式表文件中添加新的样式规则，所有链接该文件的网页都可以使用
D. 外部样式表文件的维护可以提高网站的可维护性
【答案】B
【解析】外部样式表文件的修改会影响到所有链接该文件的网页，这是外部样式表的一大优势，可以实现网站风格的统一和快速更新。
【要点】考查外部样式表的维护及其对网页的影响。
3.（多项选择题）关于媒体查询的应用，以下说法正确的是（ ）
A. 媒体查询可以根据不同的设备特性（如屏幕宽度）应用不同的样式
B. 媒体查询可以用于实现响应式网页设计
C. 媒体查询不支持多个条件的组合
D. 媒体查询可以提高网页在不同设备上的显示效果
【答案】ABD
【解析】媒体查询可以根据不同的设备特性（如屏幕宽度、屏幕方向等）应用不同的样式，从而实现响应式网页设计，提高网页在不同设备上的显示效果。媒体查询支持多个条件的组合，例如使用`and`来组合多个条件。
【要点】考查媒体查询的基本概念和应用。
1.（填空题）在HTML文件中，使用______标签可以引入外部样式表。
【答案】\<link\>
【解析】在HTML文件中，使用\<link\>标签可以引入外部样式表，这是推荐的方式，具有更好的兼容性和性能。
【要点】考查外部样式表的引入方式。
2.（填空题）媒体查询可以通过设置______属性来指定不同的设备特性。
【答案】媒体特性（如`max-width`、`min-width`、`orientation`等）
【解析】媒体查询可以通过设置媒体特性（如`max-width`、`min-width`、`orientation`等）来指定不同的设备特性，从而应用不同的样式。
【要点】考查媒体查询的设置方法。
3.（判断题）外部样式表文件的修改不会影响到链接该文件的网页（ ）
【答案】×
【解析】外部样式表文件的修改会影响到所有链接该文件的网页，这是外部样式表的一大优势，可以实现网站风格的统一和快速更新。
【要点】考查外部样式表的维护及其对网页的影响。
· 外链：附加style.css，全站统一，改一处即全局更新。
· 媒体查询：@media设断点，手机平板样式自动切换。
· 维护：注释+分组+Git；压缩Gzip；关键CSS内嵌首屏加速。
原创精品资源学科网独家享有版权，侵权必究！2
学科网（北京）股份有限公司
学科网（北京）股份有限公司
$
资源预览图
1
2
3
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。