Web前端开发 CSS样式表引入方式

最新推荐文章于 2024-04-19 12:52:58 发布

LinksXX

最新推荐文章于 2024-04-19 12:52:58 发布

阅读量1.1k

点赞数

分类专栏：学习笔记总结Web前端开发文章标签： css html

本文链接：https://blog.csdn.net/m0_52841254/article/details/117573437

版权

学习笔记总结Web前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、行内样式

使用标签的style属性进行设置样式

<p style="font-size:30px;color:red;">在标签内用style属性来添加css样式<br>style="font-size:30px;color:red;"</p>

二、内嵌样式

在head标签中使用style标签，在style标签中使用选择器进行样式设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本属性</title>
    <style type="text/css">
        p{
            text-indent:2em;
            text-align:center;
            text-transform:capitalize;
        }
    </style>
</head>
<body>
    <p>我是kuai le xing qiu的居民</p>
</body>
</html>

三、外链样式

在head标签中使用link标签引入外部.css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>link实例</title>
    <link rel="stylesheet" type="text/css" href="..\..\css\第一次课1.css">
</head>
<body>
    <p id="p2">引入外部样式</p>
</body>
</html>

四、导入样式

在style标签中使用@import url();进行引入外部样式，不推荐使用！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>import实例</title>
    <style type="text/css">
        @import url("..\\..\\css\\第一次课1.css");
    </style>
</head>
<body>
    <p id="p2">这是import实例</p>
</body>
</html>

五、注意

在CSS中，优先级由就近原则决定，哪个引入方式离使用样式的标签越近，就由哪个引入方式产生作用。
在style标签中使用@import引入外部css文件,使用时一定要在定义页面样式之前，否则无效！

以上便是对于CSS样式表引入方式的总结，希望能够对您有所帮助。

LinksXX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发 CSS样式表引入方式

一、行内样式使用标签的style属性进行设置样式<p style="font-size:30px;color:red;">在标签内用style属性来添加css样式<br>style="font-size:30px;color:red;"</p>二、内嵌样式在head标签中使用style标签，在style标签中使用选择器进行样式设置<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫