CSS引入方式

最新推荐文章于 2024-07-25 15:44:34 发布

Mayenne600

最新推荐文章于 2024-07-25 15:44:34 发布

阅读量85

点赞数 2

文章标签： css 前端 html

本文链接：https://blog.csdn.net/Mayenne/article/details/127642792

版权

1.行内样式表

行内样式表是在元素标签内部的style属性中设定CSS样式，适合于修改简单样式。

例如：

<p style="color:red; font-size:12px;">我要学习</p>

效果

注意：1.style后面要用双引号。2.只有做一些简单样式修改时才要使用。

2.内部样式表

内部样式表是写到HTML页面内部，是将所有的CSS代码抽取出来，单独翻到一个<style>标签中。

例如：

<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>Document</title>
    <style>
        p {
            color: rgb(179, 40, 16);
            font-size: large;
        }
    </style>
</head>

<body>
    <p>我爱学习</p>
</body>

效果

注意：1.理论上<style>可以放在HTML文档任何地方，但一般会放在<head>里。2.这种方式便于控制整个页面中的元素样式设置，且代码结构清晰。3.这种方式常用于练习。

3.外部样式表

样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用，适用于样式比较多的情况。（实际开发都是外部样式表）

例如：

1.新建一个CSS文件，将CSS代码写进文件。（不用写标签）

2.在HTML页面中，使用<link>标签引入这个文件。

<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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p>我爱学习</p>
</body>

效果