O captain my captain

新闻提及金球奖终生成就奖得主Robin Williams,让人想起他主演的《死亡诗社》。片中古怪老师鼓励学生追求自我与艺术,给人留下深刻印象。推荐没看过的人去观看,体验别样教育、品味英诗,感受师生情与浪漫情怀。
今天想起这首诗的名句,是看新浪网的新闻,忽然发现今年的金球奖之终生成就奖给了Robin Williams,一个和蔼可亲的老头儿。他演的片子看得不多,也可能是我没记住多少,不过 死亡诗社(Dead Poet Society)的记忆还是难以磨灭的。那个第一节课就教学生撕掉课本绪论的古怪老师,那个整天挎着个烂砖头张口闭口一句浪漫主义诗歌的自由诗人,那个鼓励学生追求自我追求艺术的不羁灵魂……
    没看过的,赶快去买碟、下载吧,没啥好说的啦,去体验一下另一种教育,去品尝一下原汁原味的英诗,更去体味一下醇醇的师生情和与岁月无关的浪漫情怀吧。
任务描述 本关任务:在上一关中,我们了解了CSS的基础概念。这一关中,我们将要理解CSS继承和多种样式引入方式。 本关任务完成之后的效果图如下: 为了完成本关任务,请大家认真阅读相关知识。 相关知识 样式引入方式 CSS样式有三种引入方式: 内部样式表:如同之前实例中所示,在文档头部中引入; 外部样式表:通过外部文件引入; 内联样式:直接在特定元素中引入。 下面,我们将为大家一一介绍这三种引入方式。 内部样式表 首先,对于内部样式表,书写的方式是直接在HTML文件的头部,添加<style type="text/css"> </style>元素。 具体举例如下: <head> <meta charset="utf-8"> <title>Hello World</title> <style type="text/css"> /*样式添加在这里*/ </style> </head> 在之前的实例中,为了方便大家同时看到HTML和CSS代码,我们都是使用的这一种方式。 外部样式表 第二种方式,是将CSS单独书写在文件后缀名为.css的文件中。然后在HTML的<head>中添加CSS文件链接。 <head> <meta charset="utf-8"> <title>Hello World</title> /* 引入外部的CSS文件 */ <link rel="stylesheet" href="style.css" /> </head> 属性rel的值stylesheet代表样式表,通常不变。href属性值,代表文件的位置。与图像路径的链接方式类似,href属性值的书写方式要根据具体的CSS文件位置。 例如,当HTML文件与要引入的CSS文件不在同一文件夹时: 可以如下书写: <link rel="stylesheet" href="CSS/style.css" /> 在实际的项目中,推荐将样式表统一放在CSS文件夹中,使得项目结构更清晰,资源管理更容易。 内联样式 内联样式是指直接在标签内添加样式属性。 举例如下: <p style="color: Red; margin-left: 24px; font-size:20px;">内联样式CSS表格<p> 显示如下: 通用的书写格式: <tag style="样式表"> <tag style="样式表"></tag> 使用哪一种样式表? 在实际开发过程中,通常建议使用第二种外联样式表的方式。 主要优点如下: 内容与样式分离; 易于开发和维护样式。 样式易于复用; 可在多个HTML文件中引入相同的样式文件。 加载更快。 如果在不同的页面中引入相同的样式文件。通常浏览器会直接从缓存中读取,而不再需要再一次访问服务器资源。 样式的优先级顺序 三种样式引入的优先级顺序是: 外部样式< 内部样式 < 内联样式 也就是说,如果同时有三种样式的方式作用于同一元素,会优先的使用内联样式。 编程要求 选择index.html文件,完成: 引入外部样式表 style.css, 引入的路径为step2/CSS/style.css;(注意路径中CSS是大写) 设置 h1 元素内联样式的字体颜色(color)为cornflowerblue; 修改 samll 元素内联样式:设置字体大小(font-size)为10px; 颜色(color)为lightslategray。 选择style.css 文件,完成: 设置 p 元素的 font-weight 为 粗体(bold); 测试说明 在右侧编辑器左上方,点击代码文件,就可以在多个文件直接进行切换。例如,在关卡中含有实例 example.html,你可以点击 example.html 切换到该文件。然后在编辑器中修改任意内容,效果显示便会更新。 具体演示如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>O Captain! My Captain!</title> <!-- ********** BEGIN ********** --> <link rel="stylesheet" href=""> <!-- ********** END ********** --> <style type="text/css"> h1 { color:darkblue; } img { float: left; margin-right: 1em; } </style> </head> <body> <div> <!-- ********** BEGIN ********** --> <h1 >O Captain! My Captain!</h1> <!-- ********** END ********** --> <img src="https://www.educoder.net/attachments/download/STA3MUpmWjg4VHgwaFVIS0J4U1kyQT09" width="300" height="175" alt="Blue Flax (Linum lewisii)" /> <p>O Captain! my Captain! our fearful trip is done, The ship has weather’d every rack, the prize we sought is won, The port is near, the bells I hear, the people all exulting, While follow eyes the steady keel, the vessel grim and daring;</p> <!-- ********** BEGIN ********** --> <p><small >© Walt Whitman</small></p> <!-- ********** END ********** --> </div> </body> </html>
最新发布
11-25
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值