css基础-1-三种设置方式_css 123添加样式-CSDN博客

本文链接：https://blog.csdn.net/qq_42491125/article/details/106008749

本文深入讲解CSS（层叠样式表）的基本概念与设置方法，包括内部样式、外部样式及内联式样式的优缺点，强调外部样式在多页面应用与浏览器缓存上的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

css概述
css设置方法
CSS代码规范

css概述

HTML决定了网页中包含的元素和结构，类比于人体骨架，接下来就要通过CSS为网页‘骨架’填充‘肌肉’，使得网页更为结实美观。

CSS（Cascading Style Sheets），层叠式样式表，根据网页的层叠式结构，CSS可以为每层结构分别设置不同的样式。
目前常用版本为CSS3和HTML5

css设置方法

1.内部样式

内部样式，将样式设置写在head中的style中，格式为 标签/元素 {属性: 值;}
选择待设置的标签（元素）进行属性设置，例如:

<head>
	<style>
    	p {
        	color: red;
       		font-size: 50px;
        }
    </style>
</head>

属性和值之间通过:隔开
属性之间通过;隔开
设置一次各个元素都可以使用
内部样式较便于后续修改，使用较多
在style中的语法要遵循css规范，例如注释为/**/，而不是html中的

2.外部样式（推荐）

外部样式，将style单独写在style.css文件中，其他网页在head中通过link引用

好处在于一次写入，多个网页可以使用
结构更加清晰
另外，符合浏览器缓冲机制，当多个网页引用同一个样式表的时候，只要缓冲一次就可以，加速了缓冲速度
style.css写法与之前一致，例如将以下样式设置保存到style.css文件中
```
p {
	color: red;
	font-size: 100px;
}
```

然后在其他网页中引用：

<head>
    <link href="style.css" rel="stylesheet">
    /*
    href:css文件路径
    rel:指定样式表类型为stylesheet
	*/
</head>

3.内联式（不推荐）

在结构标签中直接使用style属性，通过:分割的键值对定义，通过;隔开多个属性,例如<p style="color:SkyBlue;font-size:60px">白日依山尽，黄河入海流</p>

内联式只能对单个标签进行设置，当需要更改时十分麻烦，开发时绝对不要使用
内联式更多适用与临时演示或者测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    html决定了网页中包含的元素和结构，但是其样式比较固定，因此CSS层叠样式表应运而生，用来为骨架填充肌肉，美化网页。
    网页其实是层叠式的，CSS可以在每层结构进行设置
    目前为CSS3和html5
    方法：
    1.内部样式：写在head中的style中，通过设置
        选择器 声明块
        元素{数值:值} 属性之间通过;隔开
        设置一次各个元素都可以使用
        内部样式较便于后续修改，使用较多
        在style中的语法要遵循css规范，例如注释/**/
-->
    <style>
    /*
    style中遵循css语法规范
    */
        p{
        color:red;
        font-size:50px
        }
    </style>
    <!--
    2.外部样式（推荐），将style单独写在style.css文件中，其他网页在head中通过link引用
        好处在于一次写入，多个网页可以使用
        另外，符合浏览器缓冲机制，当多个网页引用同一个样式表的时候，只要缓冲一次就可以，加速了缓冲速度

    style.css写法与之前一致：
        p{
        color:red;
        font-size:100px
      }
    -->
    <link href="style.css" rel="stylesheet">

</head>
<body>
<!--
    3.内联式（不推荐）：
    在结构标签中使用style通过:分割的键值对定义，通过;隔开多个属性
    内联式只能对单个标签进行设置，当需要更改时十分麻烦，开发时绝对不要使用
-->
    <p style="color:SkyBlue;font-size:60px">白日依山尽，黄河入海流</p>

    <p>白日依山尽，黄河入海流</p>
    <p>欲穷千里目，更上一层楼</p>

</body>
</html>