CSS简介-1.3-CSS的引入方式-4种

say hi.

于 2020-08-17 11:13:59 发布

阅读量110

点赞数

本文链接：https://blog.csdn.net/qq_44280574/article/details/108050017

版权

CSS的引入-4种方式
1.内联样式

 <h1 style="color:red;">华为手机发布会</h1>

将CSS样式直接写在HTML元素的style属性中。
2.内部样式

<style type="text/css">
        h1{
            color:green;
        }
    </style>

将CSS样式写到

 <link rel="stylesheet" href="demo.css" type="text/css"/>

(企业级项目开发常用的引入外部样式的方式)
精确通过元素引入外部的一个CSS文件
4.导入外部样式

<style type="text/css">
        @import 'demo.css';
</style>

通过在

练习例子：
demo.css

h1{
    /* color: blue; */
    color: pink;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS的引入</title>
    <!-- 方式2 -->
    <!-- type加不加都可以，只是要规范一些就加上吧 -->
    <!-- <style type="text/css">
        h1{
            color:green;
        }
    </style> -->
    <!-- 方式3 -->
    <!-- link是单标签,不要忘记加 / 让其自闭和 -->
    <!-- <link rel="stylesheet" href="demo.css" type="text/css"/> -->
    <!-- 方式4 -->
    <style type="text/css">
        @import 'demo.css';
    </style>
</head>
<body>
    <!-- 方式1 -->
    <!-- <h1 style="color:red;">华为手机发布会</h1> -->
    <h1>华为手机发布会</h1>
</body>
</html>

HTML人的骨架
CSS人的面貌
JS人的行为

say hi.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS简介-1.3-CSS的引入方式-4种

CSS的引入-4种方式1.内联样式华为手机发布会将CSS样式直接写在HTML元素的style属性中。2.内部样式通过在练习例子：demo.cssh1{/* color: blue; */color: pink;} CSS的引入华为手机发布会HTML人的骨架CSS人的面貌JS人的行为...
复制链接

扫一扫