（八）CSS引入方式

最新推荐文章于 2024-10-02 15:35:50 发布

cdxsc2015

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量71

点赞数

分类专栏： 0基础学前端文章标签： css

本文链接：https://blog.csdn.net/cdxsc2015/article/details/119295022

版权

0基础学前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

CSS（二）

CSS规则

1.书写时由两部分组成：选择器+样式声明（可以有一条或者多条，属性：属性值）

span {
font-size:'16px'； 
color:#ccc；
}

2.书写位置可以分为：内联式（行内式）外联式内嵌式导入

内联式（行内式）

<span style='font-size:"16px"; clolor:"red"'></span>

1.优点：权重高
2.缺点：
（1）必须写在标签上，没有做到样式与结构的完全分离
（2）CSS样式代码让标签结构繁重，不利于HTML结构的解读，加载速度变慢
（3）一个内联式的CSS代码，只能给一个标签使用，如果多个标签有相同的样式，同样的CSS的代码需要书写多次，没有实现样式代码的重用

内嵌式

写在head标签内部，添加一个style标签包裹CSS样式代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        a {
            font-style: normal;
            text-decoration: none;
        }
    </style>
</head>

1.优点：
（1）实现了结构与样式的初步分离
（2）多个标签可以利用一段代码设置相同的样式，代码重用，节省代码量
2.缺点
（1）结构和样式没有完全分离，代码依旧写在HTML文件内部
（2）如果有多个文件需要相同的样式，没有办法共用样式

外联式

书写在一个单独的css文件中，扩展名为.css 直接书写即可不需要添加style标签

p,
div {
    font-size: 20px;
}

需要在HTML文件中，引入样式文件
rel属性：表示引入的外部文件与HTML文件之间的关系 stylesheet（样式表）
href属性：用来指定CSS文件的路径
type属性：表示加载引入的代码时按照什么类型加载 HTML5中可以省略type属性不写

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <link rel="stylesheet" type="text/css" href="css01.css">
</head>

1.优点
（1）实现了结构和样式的完全分离
（2）减少代码量，代码可被自由多次复用
（3）若多个文件样式一致，那么只需要修改一个样式文件，减少工作量
（4）一个HTML文件可以引入多个CSS文件，可以实现同一个文件中不同的元素使用不同的样式

导入

需要在html文件中添加一对style标签，在标签中使用@import url();

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        @import url(css01.css);
        h2 {
        font-size:'14px'
        }
    </style>
</head>