【自学CSS笔记第1篇】——CSS引入方式

南斋孤鹤

已于 2022-11-08 20:25:44 修改

阅读量457

点赞数 1

分类专栏： CSS笔记文章标签： css 前端 javascript 1024程序员节

于 2022-10-15 10:02:34 首次发布

本文链接：https://blog.csdn.net/m0_64231944/article/details/127331307

版权

CSS笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

什么是CSS?

CSS也叫层叠样式表，也就是CSS，是你在HTML之后应该学习的第二门技术。HTML 用于定义内容的结构和语义，CSS 用于设计风格和布局。比如，您可以使用 CSS 来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。

CSS引入方式

CSS的引入方式有三种；在项目中我们最常用、也最推荐的是外联式；优点：方便后期的项目维修；下面我们逐一介绍：

内嵌式：

将CSS 写在style标签中
提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签里面，与title标签是同级标；这种方法和外联式比起来更加低效。在一个站点里，你不得不在每个页面里重复添加相同的 CSS，并且在需要更改 CSS 时修改每个页面文件。

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

效果对比：

外联式：

CSS 写在一个单独的.css文件中
提示：需要通过link标签在网页中引入，在项目中常用；

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

效果对比：

行内式：

CSS 写在标签的style属性中
提示：之后会配合JS使用

这种写法使得代码变得难以阅读和理解。除非必要要求否则不建议使用，将不同类型的代码分开存放在不同的文档中，会让我们的工作更加清晰

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>