任务描述

本关任务:在上一关中,我们了解了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);

代码 文件:

index.html:
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>O Captain! My Captain!</title>
     <!-- ********** BEGIN ********** -->
        
    <link rel="stylesheet" href="step2/CSS/style.css">

     <!-- ********** END ********** -->

    <style type="text/css">
      h1 {
        color:darkblue;
      }

      img {
        float: left;
        margin-right: 1em;
      }
    </style>
</head>

<body>
    <div>
        <!-- ********** BEGIN ********** -->
        
        <h1 style="color:cornflowerblue">O Captain! My Captain!</h1>

        <!-- ********** END ********** -->
            
        <img src="https://www.educoder.net/attachments/download/170157" 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 <em>steady keel</em>, the vessel grim and daring;</p>
    
        <!-- ********** BEGIN ********** -->
    
        <p ><small style="color:lightslategray;font-size:10px;">
            &copy; Walt Whitman</small></p>

            
        <!-- ********** END ********** -->
    </div>
</body>

</html>

step2/CSS/style.css

body {
    font-family: 'Times New Roman', Times, serif;
}

div {
    border: 1px solid #000;
    overflow: hidden;
    padding: 0 1em .25em;
}

h1 {
    color: green;
}

p {
    /* ********** BEGIN ********** */
font-weight: bold;
    /* ********** END ********** */
}

试错是一种方法,但没有目的的试错只不过是瞎折腾,只能越试越错;很多人把挣扎当成努力,殊不知努力首先要面对现实,承认弱点。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐