CSS入门基础之三种引用方式

最新推荐文章于 2024-05-02 20:30:37 发布

wshwsh_

最新推荐文章于 2024-05-02 20:30:37 发布

阅读量526

点赞数

文章标签： css 前端 vscode 学习方法面试

本文链接：https://blog.csdn.net/wshwsh_/article/details/131805987

版权

CSS入门基础之三种引用方式

一、CSS引入规则

1.1、CSS语法

CSS 规则由两个主要的部分构成：选择器[核心]，以及一条或多条声明[规则]：

在这里插入图片描述

选择器通常是您需要改变样式的 HTML 元素(我们可以通过各种选择器灵性的选择页面的各种元素)。

每条样式声明由一个属性[样式属性]和一个值[样式值]组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号(;)结束，声明总以大括号({})括起来。

为了让CSS可读性更强，你可以每行只描述一个属性；

1.2、三种CSS 样式引入规则

插入样式表的方法有三种：

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联(行内)样式(Inline style)

1.2.1、内联样式(Inline style)

行内样式(内联样式)引入规则：样式写在标签的style属性中行内样式的语法规则:

  <!-- 内联(行内)样式：<标签 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;...">内容</标签> -->
    <p style="font-size: 20px;color: hotpink;">我是内联(行内)样式</p>

在这里插入图片描述

该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内样式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用(部分样式)。

行内式也是通过标记的属性来控制样式的，由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法。只有在样式规则较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。

1.2.2、内部样式表(Internal style sheet)

内嵌[内部]样式引入规则：样式放在head或body标签的style标签中:

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表；

内嵌样式的语法规则:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三种引入方式</title>
<style>
         /* 内部样式：
       选择器 {
            属性1: 属性值1;
            属性2: 属性值2;
            ...
        } */
        div {
            font-size: 30px;
            color: aqua;
        }
</style>
</head>
<body>
    <div>我是内部样式</div>
</body>
</html>

在这里插入图片描述

该语法中， <style>标记一般位于<head>标记中的<title>标记之后，也可以把它放在HTML文档的任何地方。但是由于浏览器是从上到下解析代码的，把CSS代码放在head便于提前被下载和解析，以避免网页内容下载后没有样式修饰带来的尴尬。

同时最好设置type的属性值为“text/css“，这样浏览器才知道<style>标记包含的是CSS代码，因为<style>标记还可以包含其他代码，如JavaScript代码。

内嵌式CSS样式只对其所在的HTML页面有效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果在一个网站，不建议使用这中方式，因为它不能充分发挥CSS代码的重用优势。

1.2.3、外部样式表(External style sheet)

外部样式[链入式]引入规则：一个单独的样式文件,存放我们的样式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标记将外部样式表文件链接到HTML文档中。

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

链入式的语法规则:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三种引入方式</title>
      <!-- 外部样式：<link rel="stylesheet" href="css文件的路径"> -->
      <!-- 外部样式要单独创建一个CSS文件然后通过link的href填写正确的CSS文件的路径，
      否则外部样式没有效果 -->
    <link rel="stylesheet" href="../CSS/myCss.css">
</head>

<body>
    <section>我是外部样式</section>
</body>

</html>

在这里插入图片描述

该语法中，<link/>标记需要放在<head>头部标记中，并且必须指定<link/>标记的三个属性。如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要制定为”text/css“，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet“，表示被链接的文档是一个样式表文件。

注：不要在属性值与单位之间留有空格（如：“margin-left: 20 px” ），正确的写法是 “margin-left: 20px” 。

1.2.4、样式引入优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

(内联样式）Inline style > （内部样式）Internal style sheet =（外部样式）External style sheet > 浏览器默认样式

内部样式和外部样式都是通过选择器来选择元素的，所以他们的优先级和文件顺序、选择器优先级有关；

**注意：**如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS初体验</title>
    <link rel="stylesheet" href="../CSS/myCss.css">
    <style>

        p{
            font-size: 30px;
            color: orange;
        }
        div{
            font-size: 30px;
            color: orange;
        }
    </style>
</head>


<!-- 简单记忆：谁距离body最近 应用谁的样式(内联样式在body里面所以优先级最高) -->
<body>
    <!-- 此时内联为红色 内部为橙色 外部为黄色 因为内联样式的优先级最高，所以最终为红色 -->
    <p style="font-size: 20px;color: red;">我的颜色为红色</p>

    <!-- 此时没有内联样式 内部为橙色 外部为黄色 因为内部与外部优先级想到等 
    浏览器从上到下解析 后面解析的会把前面解析的样式覆盖 所以最终为橙色 -->
    <div>我的颜色为橙色</div>


</body>

</html>