CSS基本内容-CSDN博客

本文链接：https://blog.csdn.net/2302_81659011/article/details/142578503

一、CSS的定义

层叠样式表(Cascading Style Sheets)是给HTML标签添加样式的语言，可以设置HTML页面中文字大小、颜色以及元素的位置等样式。

二、CSS的意义

实现内容与样式分离，便于后期的维护以及样式的重复使用。

三、CSS应用方式

1、行内式

样式写在元素上的style属性中
这种写法的优先级最高

语法：

 <h2 style="color: red; font-size:30px; font-family: 楷体;">
        测试CSS的引入方式：行内式
    </h2>

运行结果如下：

2、内嵌式

内嵌在HTML文件中
在<head ></head> 标签中写 <style></style>标签对，然后在里边书写css语句

代码如下：

<!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>
        h3{
            color: blue; 
            font-size: 30px;
            font-family: 宋体;     
           }
    </style>
</head>
<body>
    <h3>
        测试CSS的引入方式：内嵌式
    </h3>
</body>

运行结果如下：

3、外链式

將CSS单独存在一个css 文件，然后使用 <link >标签引入到页面中
优点：多个HTML网页，可以共用一个css样式表文件

首先建立一个以css为后缀的文档，如：“style.css”

style1.css内代码如下：

h4{
    color: green ; 
    font-size: 30px;
    font-family: 宋体;     
   }

代码如下：

<!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="./CSS外链标签/style1.css">
</head>
<body>
    <h4>
        测试CSS的引入方式：外链式
    </h4>
</body>

运行结果如下：