首页 前端知识 CSS基础:插入CSS样式的3种方法

CSS基础:插入CSS样式的3种方法

2024-06-07 12:06:10 前端知识 前端哥 900 689 我要收藏

你好,我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。大专生,2年时间从1800到月入过万,工作5年买房。 分享成长心得。

262篇原创内容-公众号

后台回复“前端工具”可获取开发工具,持续更新中

后台回复“前端基础题”可得到前端基础100题汇总,持续更新中

如题。CSS 样式表的作用就是当浏览器读到样式表时,它将根据 CSS 样式表中的信息来格式化 HTML 文件。

那今天就来说下 插入 CSS 样式 的 3 种方法以及延伸应用。

一、外部样式表(External Styles)

  • 外部样式表是将样式定义在一个独立的 CSS 文件中,然后通过 <link> 标签,href 属性指定样式地址,以.css 为后缀名,将其引入到 HTML 文档中。

  • 这种方式适用于多个 HTML 文档共享样式,能够实现样式的集中管理和维护。

来个案例吧。

html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>External Styles</title>
    <link rel="stylesheet" href="css/css03.css" />
  </head>
  <body>
    <p>This is a paragraph with external styles.</p>
  </body>
</html>

css文件

/* css03.css */
p {
  color: green;
}

图片

在这个案例中,我们是在当前 html 文件,建立一个名为 css 的文件夹,并在里面建立了 css03.css 的文件,字体变成绿色的了,说明应用成功了。

二、 内部样式表(Internal Styles)

  • 内部样式表是在 HTML 文档的 <head> 标签内使用 <style> 标签定义样式的一种方式。

  • 这种方式适用于单个 HTML 文档的样式设置,能够将样式和 HTML 结构分离,但不利于多个页面的样式共享。

在下面案例中,color: blue;指定了段落文本的颜色为蓝色。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Internal Styles</title>
    <style>
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>This is a paragraph with internal styles.</p>
  </body>
</html>

图片

当我们看到<style>标签时,就知道这是内部样式表的部分,它们是一种在 HTML 文档中定义样式的方法。

<style>标签内部,我们定义了一个样式规则,针对<p>标签进行了样式设置。

三、 内联样式(Inline Styles)

  • 内联样式是直接在 HTML 元素的 style 属性中定义样式的一种方式。

  • 不利于样式的复用管理。

下面是一个使用内联样式的案例,给 <body><h1> 和 <p> 标签分别设置不同的背景颜色。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Inline Styles</title>
  </head>
  <body style="background-color: green;">
    <h1 style="background-color: blue; color: white;">Welcome to my website</h1>
    <p style="background-color: pink;">This is a paragraph with some text.</p>
  </body>
</html>

图片

在这个案例中,我们直接在 <body><h1> 和 <p> 标签的 style 属性中设置了背景颜色。

这种方法虽然可以快速地为元素添加样式,但是对于复杂的页面结构来说,内联样式会使 HTML 文件变得臃肿,不利于维护和管理。

因此,内联样式更适合于一些简单的样式设置或临时调试,要谨慎使用。

四、延伸:多个样式表

我们在做项目的时候呢,有时候会涉及以上种表同时写入同一个 html 页面的情况。那如果都同时作用在一个元素上,有冲突的时候,应该如何取样式呢?

我们一起来看看这 3 种情况。

1、内部样式表和外部样式表同时存在

如果都给同一个元素定义了样式,最终应该取谁的?

答案就是:如果同一个选择器(元素)在不同的样式表中被定义了一些属性,那么最后被浏览器读取的样式表中的属性值将被应用。

ok,我们来举 2 个案例,一下就能看出来区别了。

MultipleCSS.html

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple Stylesheets Example</title>

    <link rel="stylesheet" href="css/multipleStylesheets01.css" />
    <link rel="stylesheet" href="css/multipleStylesheets02.css" />
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: pink; /* 粉色*/
        color: #333333;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to my website</h1>
    <div class="">
      <p>This is an example of multiple stylesheets.</p>
    </div>
  </body>
</html>

multipleStylesheets01.css

/* multipleStylesheets01.css */
body {
  background-color: #0f0; /* 绿色 */
}
h1 {
  color: #ff0000; /* 红色 */
}

multipleStylesheets02.css

/* multipleStylesheets02.css */
body {
  background-color: yellowgreen; /*草绿色*/
  color: #0000ff; /* 蓝色 */
}

效果如图。

图片

因为 style 标签在 link 样式表后面,所以主体是粉色,pink。

那如果其他 2 个.css文件不变,在 html 文件里,调换下 style 和 link 的位置呢?把 style 放前面,link 放后面。

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple Stylesheets Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: pink; /* 粉色*/
        color: #333333;
      }
    </style>
    <link rel="stylesheet" href="css/multipleStylesheets01.css" />
    <link rel="stylesheet" href="css/multipleStylesheets02.css" />
  </head>
  <body>
    <h1>Welcome to my website</h1>
    <div class="">
      <p>This is an example of multiple stylesheets.</p>
    </div>
  </body>
</html>

图片

body标签的颜色,肯定就是用样式表的草绿色的了。所以这 2 个类型的样式表如果有重合样式的元素,可以说是,后来者居上。

2、内联样式表,内部样式表和外部样式表同时存在

如果它们同时存在,则内联样式表的优先级最高。

还用以上这个案例吧,如果我们在 body 上,加一个天蓝色。

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple Stylesheets Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: pink; /* 粉色*/
        color: #333333;
      }
    </style>
    <link rel="stylesheet" href="css/multipleStylesheets01.css" />
    <link rel="stylesheet" href="css/multipleStylesheets02.css" />
  </head>
  <body style="background: #39caf7">
    <h1>Welcome to my website</h1>
    <div class="">
      <p>This is an example of multiple stylesheets.</p>
    </div>
  </body>
</html>

图片

那其他样式就被覆盖,body 就是蓝色了。

3、如果页面上没有这 3 种样式表

那默认就是浏览器默认的样式了,比如我们的页面默认是白色的,四周都有间距,这些都是浏览器默认的样式。如图。

图片

小结

以上,我们总结一下——

当一个 HTML 元素被赋予多个样式时,这些样式会按照以下规则进行“层叠”,形成一个新的“虚拟”样式表。这些规则的优先级从高到低排列如下:

1) 行内样式(直接在 HTML 元素中定义的样式)

2)外部样式表和内部样式表(在 head 部分定义的样式)

3) 浏览器默认样式

因此,行内样式拥有最高的优先级,会覆盖外部和内部样式表定义的样式,以及浏览器默认的样式。

ok,本节完。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11224.html
标签
状态模式
评论
发布的文章

1.10 Unity中的数据存储 JSON

2024-06-13 21:06:30

JSON 数据格式化方法

2024-06-13 21:06:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!