css引入方式

最新推荐文章于 2024-06-14 14:36:26 发布

娃哈哈哈哈呀

最新推荐文章于 2024-06-14 14:36:26 发布

阅读量63

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/karlaofsky/article/details/118724605

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS的三种样式表

1.内部样式表

意思是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。

优点：部分结构和样式相分离

缺点：没有彻底分离

使用情况：较多

控制范围：控制一个页面

操作如下：

<!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>内部样式表</title>
    <style>
        div {
            color:red;
        }
    </style>
</head>
<body>
    <div>所谓内部样式表，就是HTML页面内部写样式，但是是单独写到style标签内部。</div>
</body>
</html>

2.行内样式表

意思是在元素标签内部的style属性中设定CS。适合于修改简单样式

优点：书写方便，权重高

缺点：结构样式混乱

使用情况：较少

控制范围：控制一个标签

操作如下：

<!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>行内样式表</title>

</head>

<body>
    <p> 夏天夏天悄悄过去留下小秘密，</p>
    <p>压心底 压心底 不能告诉你，</p>
    <p>晚风吹过温暖我心底 我又想起你，</p>
    <p>多甜蜜 多甜蜜 怎能忘记，</p>
    <p>不能忘记你 把你写在日记里，</p>
    <p style="color: darkred; font-size: 20px;">不能忘记你 心里想的还是你，</p>
    <P>浪漫的夏季 还有浪漫的一个你，</P>
</body>

</html>

3.外部样式表

核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用

优点：完全实现结构和样式相分离

缺点：需要引入

使用情况：最多

控制范围：控制多个页面

引入外部样式表分为两步；
1新建一个后缀名为css的样式文件，把所有CSS代码都放入此文件中
2在HTML页面中使用<link>标签引入这个文件

操作如下：

<!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>外部样式表</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <div>晚风吹过温暖我心底 我又想起你</div>
</body>

</html>

娃哈哈哈哈呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css引入方式

CSS的三种样式表1.内部样式表意思是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。优点：部分结构和样式相分离缺点：没有彻底分离使用情况：较多控制范围：控制一个页面操作如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa
复制链接

扫一扫