小白学习html&css一些笔记——4.css和html结合样式

NiaYoop

于 2021-03-22 08:57:37 发布

阅读量92

点赞数

分类专栏：自学分享小白编程文章标签： html css

本文链接：https://blog.csdn.net/NiaYooop/article/details/115062103

版权

自学分享同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

小白编程

24 篇文章 0 订阅

订阅专栏

本文介绍了CSS样式的三种应用方式：内联样式（在HTML标签内使用`style`属性）、内部样式（在`head`标签内的`style`标签中定义）和外部样式（通过`link`标签引入外部CSS文件）。通过实例展示了每种方式的使用方法，帮助理解CSS在网页设计中的不同应用场景。

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

内联样式:在标签内使用style属性指定css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 内联样式
            *在标签内使用style属性指定css代码
-->
<div style="color: red">hello css</div>

</body>
</html>

在这里插入图片描述
内部样式:在head标签内，定义style标签，style标签的标签体就是css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>
<!-- 内部样式
            *在head标签内，定义style标签，style标签的标签体就是css代码
-->
<div>hello css</div>
<div>hello css</div>
</body>
</html>

在这里插入图片描述

内部样式:
1.定义css资源文件
2.在head标签内，定义link标签，引入外部的资源文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <link rel="stylesheet" href="css/a.css">-->

    <style>
        @import "css/a.css";
    </style>
</head>
<body>
<!--
        内部样式
            1.定义css资源文件
            2.在head标签内，定义link标签，引入外部的资源文件
-->
<div>hello css</div>
<div>hello css</div>

<p>你是猪</p>
</body>
</html>

css资源文件

div{
    color: green;
}

p{
    color: red;
    font-size: 28px;
}

在这里插入图片描述

NiaYoop

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录