CSS基础的常用引入方式内容！！

CH040708

于 2024-10-06 22:51:55 发布

阅读量198

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/CH040708/article/details/142732773

版权

#CSS 全称 Cascading Style Sheets，CSS是为了修改HTML的样式，让HTML的界面变得更完善，如果说HTML是网页的结构，那么CSS就是网页化妆师。CSS引入方式包含了内联样式（Inline Styles）、内部样式表（Internal Stylesheet）、外部样式表（External Stylesheet）三个内容。

一、内联样式（行内式）

①前言

通过<style></style>来写
css语句写入html标签中叫做内部样式
内联样式在写法中优先级最高

②行内式语法的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css三种引入方式</title>
</head>
<body>  
    <h2 style="color: brown; font-size: 30px; font-family:楷体">
    测试CSS的引入方式：行内式
    </h2>
</body>
</html>

运行代码后如下：

二、内部样式表（内嵌式）

①前言

内部样式表是在 HTML 文件的 <style> 标签内定义 CSS 样式。
通常将 <style> 标签放在 <head> 标签内。

②内嵌式语法的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css三种引入方式</title>

   <!-- style标签里面写CSS代码 -->
   <style>
      h3{
          color: blue;
          font-size: 30px;
          font-family: 宋体;
        }
   </style>
</head>

<body>
   <h3>
        测试CSS的引入方式：内嵌式   
   </h3>
</body>
</html>

运行代码后如下：

三、外部样式表（外链式）

①前言

外部样式表常常是将 CSS 代码保存为一个独立的 .css 文件。
通过 HTML 文件中的 <link> 标签将其引入。

②外链式语法的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css三种引入方式</title>

    <link rel="stylesheet" href="./style.css"> 
    <link rel="stylesheet" href="./style2.css">

</head>
<body>
    <h4>
        测试CSS的引入方式：外链式   
    </h4>
</body>
</html>