欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > CSS >内容正文

CSS

导入式CSS样式

发布时间：2025/3/15 CSS 35 豆豆
生活随笔 收集整理的这篇文章主要介绍了 导入式CSS样式 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

3  《关山月》

一、案例描述

  • 考核知识点

    • 导入式CSS样式

  • 练习目标
    • 熟练运用标记选择器控制元素。
    • 掌握CSS导入式的引用方法。
  • 需求分析

    • 通过前两个案例，我们知道了两种引入CSS样式表的方法，下面将介绍另一种引入CSS样式表的方法：导入式。同时，还将介绍一种新的基础选择器—标记选择器。本案例通过使用标记选择器来控制元素，并运用CSS导入式的方法来输出一首诗《关山月》。

  • 案例分析
  • 效果如图3-5所示。

  • 《关山月》效果
  • 具体实现步骤如下：
  • 新建两个外部样式表red.css、blue.css。
  • 使用导入式引入CSS样式表。
  • 在外部样式表red.css中，通过标记选择器分别设置标题、作者为30px字体、红色、居中效果。

    • 在外部样式表blue.css中，通过标记选择器设置段落为16px字体、蓝色、居中效果。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>关三月</title><style type="text/css">@import url("red.css");@import url("blue.css");</style> </head> <body><h1>关三月</h1><h2>李白</h2><p>花间一壶酒，独酌无相亲。</p><p>举杯邀明月，对影成三人。</p><p>月既不解饮，影徒随我身。</p><p>暂伴月将影，行乐须及春。</p><p>我歌月徘徊，我舞影零乱。</p><p>醒时同交欢，醉后各分散。</p><p>永结无情游，相期邈云汉。</p> </body> </html>

     

    创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖

    总结

    以上是生活随笔为你收集整理的导入式CSS样式的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。