CSS语法使用位置：样式位置_css语法设置位置-CSDN博客

本文链接：https://blog.csdn.net/m0_63751497/article/details/137144026

本文探讨了行内样式、内部样式和外部样式在网页开发中的应用，分析了它们的优缺点，包括代码冗余、结构清晰度、加载速度和DOM操作兼容性等，并对比了link和@import两种外部样式引入方式的差异。

摘要由CSDN通过智能技术生成

行内样式

把对应的CSS基本语法使用行内修饰的形式对页面的元素进行修饰

基本语法：

<div style="属性：属性值；属性：属性值；"></div>

弊端：代码冗余，让结构变得混乱了

优点：直接

代码展示：

<!-- 
        行内修饰：行内样式表
     -->
     <div style="width: 500px;height: 100px;background-color: aqua;">我是第一个div</div>
     <div style="width: 500px;height: 100px;background-color: aqua;">我是第一个div</div>
     <div style="width: 500px;height: 100px;background-color: aqua;">我是第一个div</div>
     <p style="width: 100px;height: 100px;background-color: rgb(108, 238, 21);">我是一个p标签</p>
     <p style="width: 100px;height: 100px;background-color: rgb(108, 238, 21);">我是一个p标签</p>
     <p style="width: 100px;height: 100px;background-color: rgb(108, 238, 21);">我是一个p标签</p>

实现效果：

内部样式：

把对应的CSS修饰语句放在一个独立的style标签中,style标签一般放在head标签里面

通过CSS的基础语法查找页面中的元素进行修饰

基本语法：

<head>

<style>

选择器{样式规则}

</style>

</head>

优点：降低了行内修饰的冗余，让页面结构变得简洁

弊端：并没有完全的做到结构样式行为的分离；如果你的代码量较大，来回滚动页面很麻烦；

代码量过大，你的所有修饰都在head里面造成读取比较加载缓慢，造成头重脚轻的效果

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 100px;
            background-color: aqua;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: rgb(226, 29, 62);
        }
    </style>
</head>
<body>
    <!-- 
        1.内部样式修饰：内部样式表
            把结构和修饰独立开来
            标签选择器:通过标签名字查找页面元素
     -->
     <div>我是一个div标签</div>
     <div>我是一个div标签</div>
     <div>我是一个div标签</div>
     <p>我是一个p标签</p>
     <p>我是一个p标签</p>
     <p>我是一个p标签</p>
</body>
</html>

外部样式：

把对应的CSS的基础语法放在一个独立的以.css为后缀名的文件中

需要使用link标签进行关联

link的基本语法：

<link href="css文件的路径" rel="stylesheet" type="text/css">

优点：做到了充分的结构样式行为的分离；

扩展一个知识点：

其实外部引入样式：两种方法：

1）通过link引入

2）通过@import url(路径地址)；==导入

扩展面试题：

外部样式表通过link引入和通过@import导入二者有什么区别?

1）语法不一样

前者link属于标签语法：通过link单标签直接引入

后者@import属于css语法：必须携带style标签

2）加载顺序问题

link引入的文件，结构和样式是同时加载显示的

@import引入的文件，实现加载结构后加载样式的

3）操作dom的问题===考虑js问题

大部分操作js的时候操作页面元素的样式，通过link引入的样式可以直接完成dom操作

@import不能完成jsdom操作

4）兼容性的问题：@import兼容性是比较低的，link的兼容性是比较高的

代码展示：

<!-- link进行引入 -->
    <link rel="stylesheet" href="css/07.css">

<!-- @import url(路径) -->
    <style>
        @import url(css/07.css);
    </style>

07.css

div{
    width: 500px;
    height: 100px;
    background-color: aqua;
}
p{
    width: 100px;
    height: 100px;
    background-color: rgb(226, 29, 62);
}