CSS样式引入方式

约定不等于承诺〃 2022-11-13 00:48 228阅读 0赞

### CSS样式引入方式 ###

*  任务描述
 *  相关知识
 *   *  样式引入方式
     *  内部样式表
     *  外部样式表
     *  内部样式
     *  使用哪一种样式表
     *  样式的优先级顺序

# 任务描述 #

本关任务：在上一关中，我们了解了CSS的基础概念。这一关中，我们将要理解CSS继承和多种样式引入方式。

本关任务完成之后的效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]

# 相关知识 #

## 样式引入方式 ##

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文件不在同一文件夹时：  
![在这里插入图片描述][20210324175441798.png]  
可以如下书写：

在实际的项目中，推荐将样式表统一放在CSS文件夹中，使得项目结构更清晰，资源管理更容易。

## 内部样式 ##

*  内联样式是指直接在标签内添加样式属性。

举例如下：

<p style="color: Red; margin-left: 24px; font-size:20px;">内联样式CSS表格<p>

显示如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]  
通用的书写格式：

## 使用哪一种样式表 ##

在实际开发过程中，通常建议使用第二种外联样式表的方式。

**主要优点如下：**

*  内容与样式分离；
 *  易于开发和维护样式。
 *  样式易于复用；
 *  可在多个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>
         
            
        <link rel="stylesheet" href="step2/CSS/style.css">
    
         
    
        <style type="text/css"> h1 { color:darkblue; } img { float: left; margin-right: 1em; } </style>
    </head>
    
    <body>
        <div>
            
            
            <h1 style="color:cornflowerblue">O Captain! My Captain!</h1>
    
            
                
            <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>
        
            
        
            <p ><small style="color:lightslategray;font-size:10px;">
                © Walt Whitman</small></p>
    
                
            
        </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 ********** */
    }

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20221022/880a20e8604c4f2a914b8aec720d006f.png
[20210324175441798.png]: /images/20221022/5e4a7b5420b040b4b6d6c7bcb04209fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20221022/34252197244c4ecdaa48c1f0d934900c.png