Web前端开发 CSS样式表引入方式_web style怎么用-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_52841254/article/details/117573437

本文详细介绍了CSS样式表的四种引入方式：行内样式、内嵌样式、外链样式和导入样式。行内样式直接在标签内使用style属性；内嵌样式通过在<head>标签内的<style>标签设置；外链样式则使用<link>标签引用外部CSS文件；导入样式使用@import在<style>标签中引入外部样式，但不推荐。每种方式的适用场景和特点都有所不同，理解这些可以帮助优化网页的样式管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、行内样式

使用标签的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>