前端学习打卡Day9：CSS 关系选择器、综合实战案例|古诗鉴赏网页制作

一、今日学习目标掌握 CSS四种关系选择器的语法、选择范围、使用场景能区分后代 / 子代、邻接兄弟 / 通用兄弟选择器的差异。理解古诗网页案例的布局结构能独立分析布局逻辑、读懂代码并知晓优化方向。能结合关系选择器优化网页样式实现精准元素选中与样式设置。二、CSS 关系选择器关系选择器是根据HTML 元素之间的层级、兄弟关系来选中目标元素的选择器共 4 种是 CSS 精准选元素的核心知识点。1基础概念元素关系分为两种层级关系父元素、子元素、后代元素所有嵌套在内的元素兄弟关系同一个父元素下同级的元素2四种关系选择器详解1. 后代选择器语法父选择器 后代选择器空格分隔选择范围选中父元素所有层级的后代元素不限嵌套层数子、孙、曾孙都能选中类名写法.类名 后代元素/类名2. 子代选择器语法父选择器 子选择器大于号分隔选择范围仅选中父元素第一层子元素不包含孙级及更深层级元素类名写法.类名 子元素/类名3. 邻接兄弟选择器语法元素A 元素B加号分隔选择范围选中紧跟在元素 A 后面的第一个兄弟元素 B必须紧挨着中间无其他元素类名写法.类名A .类名B4. 通用一般兄弟选择器语法元素A ~ 元素B波浪号分隔选择范围选中元素 A 后面所有同级的兄弟元素 B不需要紧挨着所有在后面的同级元素都生效类名写法.类名A ~ .类名B3核心区别对比 代码示例1. 后代选择器 VS 子代选择器!DOCTYPE html html head style /* 后代选择器.box 下所有p子孙都变红 */ .box p { color: red; } /* 子代选择器仅.box 第一层子p变蓝孙p不变 */ .box p { color: blue; } /style /head body div classbox p我是子元素p子代后代都选中最终蓝色/p div p我是孙元素p仅后代选中红色/p /div /div /body /html区别总结后代选择器全层级生效范围大子代选择器仅第一层生效范围精准。2. 邻接兄弟选择器 VS 通用兄弟选择器!DOCTYPE html html head style /* 邻接兄弟仅h3后第一个p变黄 */ h3 p { background-color: yellow; } /* 通用兄弟h3后所有p变绿 */ h3 ~ p { color: green; } /style /head body h3标题/h3 p第一个p邻接通用都选中黄底绿字/p p第二个p仅通用选中绿字/p p第三个p仅通用选中绿字/p /body /html区别总结邻接兄弟选择器只选紧跟的第一个兄弟范围最小通用兄弟选择器选后面所有同级兄弟范围更广。三、CSS 综合实战古诗网页案例1效果展示区2布局分析整体布局采用版心居中布局页面最外层容器水平居中内容区域内缩保证美观不贴边。结构分层最外层.box容器 → 定义总宽度、背景色、水平居中包裹所有内容内层.poetry-content内容区 → 宽度小于外层内边距撑开文字与图片形成留白效果内容图片、视频、文字段落、古诗模块依次垂直排列。核心布局规则全局清除默认内外边距解决浏览器默认样式差异图片、视频宽度统一跟随父容器实现自适应不超出页面。3完整源代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title枫桥夜泊 - 诗歌赏析/title style * { margin: 0; padding: 0; } .box { width: 677px; background-color: #77abe6; margin: 0 auto; } .poetry-content { width: 610px; background-color: #f8f9f9; margin: 0 auto; padding: 20px; } .poetry-content img { width: 100%; } .poetry-content video { width: 100%; } /style /head body div classbox img src./images/poetry1.png alt width677px div classpoetry-content p 《枫桥夜泊》是唐代诗人张继的诗作。唐朝安史之乱后张继途经寒山寺时写下这首羁旅诗。此诗精确而细腻地描述了一个客船夜泊者对江南深秋夜景的观察和感受勾画了月落乌啼、霜天寒夜、江枫渔火、孤舟客子等景象有景有情有声有色。此外这首诗也将作者羁旅之思、家国之忧以及身处乱世尚无归宿的顾虑充分地表现出来是写愁的代表作。全诗句句形象鲜明可感可画句与句之间逻辑关系非常清晰合理内容晓畅易解。不仅中国历代各种唐诗选本选入此诗连亚洲其他一些国家的教科书也收录此诗。 /p div classpoetry h2枫桥夜泊/h5 p[唐]张继/p p月落乌啼霜满天江枫渔火对愁眠。/p p姑苏城外寒山寺夜半钟声到客船。/p /div img src./images/poetry2.png alt p 这首七绝以一“愁”字统起。前二句意象密集落月、啼乌、满天霜、江枫、渔火、不眠人造成一种意韵浓郁的审美情境。后两句意象疏宕城、寺、船、钟声是一种空灵旷远的意境。江畔秋夜渔火点点羁旅客子卧闻静夜钟声。所有景物的挑选都独具慧眼一静一动、一明一暗、江边岸上景物的搭配与人物的心情达到了高度的默契与交融共同形成了这个成为后世典范的艺术境界。 /p img src./images/poetry3.png alt p 诗的首句写了午夜时分三种有密切关连的景象月落、乌啼、霜满天。上弦月升起得早半夜时便已沉落下去整个天宇只剩下一片灰蒙蒙的光影。树上的栖乌大约是因为月落前后光线明暗的变化被惊醒后发出几声啼鸣。月落夜深繁霜暗凝。在幽暗静谧的环境中人对夜凉的感觉变得格外锐敏。“霜满天”的描写并不符合自然景观的实际霜华在地而不在天却完全切合诗人的感受深夜侵肌砭骨的寒意从四面八方围向诗人夜泊的小舟使他感到身外的茫茫夜气中正弥漫着满天霜华。整个一句月落写所见乌啼写所闻霜满天写所感层次分明地体现出一个先后承接的时间过程和感觉过程。而这一切又都和谐地统一于水乡秋夜的幽寂清冷氛围和羁旅者的孤孑清寥感受中。从这里可以看出诗人运思的细密。 /p p 诗的第二句接着描绘“枫桥夜泊”的特征景象和旅人的感受。在朦胧夜色中江边的树只能看到一个模糊的轮廓之所以径称“江枫”也许是因枫桥这个地名引起的一种推想或者是选用“江枫”这个意象给读者以秋色秋意和离情羁思的暗示。“湛湛江水兮上有枫目极千里兮伤春心”“青枫浦上不胜愁”这些前人的诗句可以说明“江枫”这个词语中所沉积的感情内容和它给予人的联想。透过雾气茫茫的江面可以看到星星点点的几处“渔火”由于周围昏暗迷蒙背景的衬托显得特别引人注目动人遐想。“江枫”与“渔火”一静一动一暗一明一江边一江上景物的配搭组合颇见用心。写到这里才正面点出泊舟枫桥的旅人。“愁眠”当指怀着旅愁躺在船上的旅人。“对愁眠”的“对”字包含了“伴”的意蕴不过不象“伴”字外露。这里确有孤孑的旅人面对霜夜江枫渔火时萦绕的缕缕轻愁但同时又隐含着对旅途幽美风物的新鲜感受。 /p img src./images/poetry4.png alt p 诗的前幅布景密度很大十四个字写了六种景象后幅却特别疏朗两句诗只写了一件事卧闻山寺夜钟。这是因为诗人在枫桥夜泊中所得到的最鲜明深刻、最具诗意美的感觉印象就是这寒山寺的夜半钟声。月落乌啼、霜天寒夜、江枫渔火、孤舟客子等景象固然已从各方面显示出枫桥夜泊的特征但还不足以尽传它的神韵。在暗夜中人的听觉升居为对外界事物景象感受的首位。而静夜钟声给予人的印象又特别强烈。这样“夜半钟声”就不但衬托出了夜的静谧而且揭示了夜的深永和清寥而诗人卧听疏钟时的种种难以言传的感受也就尽在不言中了。 /p img src./images/poetry5.png alt p 这里似乎不能忽略“姑苏城外寒山寺”。寒山寺在枫桥西一里初建于梁代唐初诗僧寒山曾住于此因而得名。枫桥的诗意美有了这所古刹便带上了历史文化的色泽而显得更加丰富动人遐想。因此这寒山寺的“夜半钟声”也就仿佛回荡着历史的回声渗透着宗教的情思而给人以一种古雅庄严之感了。诗人之所以用一句诗来点明钟声的出处看来不为无因。有了寒山寺的夜半钟声这一笔“枫桥夜泊”之神韵才得到最完美的表现这首诗便不再停留在单纯的枫桥秋夜景物画的水平上而是创造出了情景交融的典型化艺术意境。夜半钟的风习虽早在《南史》中即有记载但把它写进诗里成为诗歌意境的点眼却是张继的创造。在张继同时或以后虽也有不少诗人描写过夜半钟却再也没有达到过张继的水平更不用说借以创造出完整的艺术意境了。 /p video src./video/poetry.mp4 controls/video p 这首诗将作者的羁旅之思家国之忧以及身处乱世尚无归宿的顾虑充分地展现出来是写愁的代表之作。全诗都被萧瑟、寂静等感情基调所包围,“月落”“乌啼”“霜”等诗中景象更是直观地表达了诗人内心深处的漂泊不定的感叹与哀愁。而此时渔船上的点点烛火在江边冷风袭来的漆黑夜里更是显得尤为落寞加重了诗人面对此时景色的愁绪。正当诗人满怀愁绪之时寂静的夜被几声由寺庙传出的钟声所打破久久挥之不去诗人此时面对此景毫无睡意无形中又给诗人增添了孤寂的惆怅。 /p /div /div /body /html4代码分析HTML 结构语义化 div 划分模块.box为总容器.poetry-content为文字图片内容区内容区包含段落、古诗子模块、图片、视频结构清晰嵌套。CSS 样式全局*选择器清除浏览器默认margin和padding统一基础样式.box固定宽度 margin:0 auto实现页面水平居中浅蓝色背景.poetry-content内边距padding:20px让文字不贴边白色背景区分内容区关系选择器应用使用后代选择器.poetry-content img/video统一设置媒体元素宽度无需单独给每个标签加样式。待优化点文字行间距、字体大小、颜色未设置可读性一般古诗模块可单独美化居中、加粗、间距可添加圆角、阴影提升页面质感可补充关系选择器优化样式。四、学习总结关系选择器核心记忆后代空格全层级后代 子代仅第一层子元素邻接兄弟紧跟的第一个兄弟 通用兄弟~后面所有兄弟。实战布局核心版心居中固定宽度 margin:0 auto内容留白padding撑开元素内间距统一样式用后代选择器批量设置子元素样式简化代码。学习重点关系选择器是 CSS 精准选中元素的基础实战中优先用子代 / 后代选择器避免样式冲突提升代码效率。