CSS样式的4种引入方法

东方翱翔

已于 2024-09-25 23:01:34 修改

阅读量1.8k

点赞数 11

分类专栏：前端HTML/CSS/JS 文章标签： css java 前端

于 2024-09-25 00:51:11 首次发布

本文链接：https://blog.csdn.net/qq_74861982/article/details/142503052

版权

前端HTML/CSS/JS 专栏收录该内容

17 篇文章

订阅专栏

1.行内样式

1.只能影响标签内的样式

2.行内样式可以应用在<body>标记内的所有子标记包括<body>标记在内，但是不能用在<head><title><meta>中

3，行内样式的标记优先级最高

语法：直接再标记内写style属性

<html style="属性1:属性值1;属性2:属性值2;属性3:属性值4;"></html>

样例：

为字体颜色位置为红色，和对齐方式为居中

<p style="color:red; text-align: center;">My aunt Jennifer is an actress.</p>

效果：

2.内嵌式

1，用<style>标记设置样式的方法称为内嵌式样式

2.<style>标记用来声明样式

3.type属性表示CSS的MIME编码

4.注意是奖<style>标记放到head中

语法：

<style>
        选择器{
            属性1:属性值1;
            属性2:属性值2;
            属性3:属性值3;
        }
</style>

样例：

效果：

3.链接式

1.链接式：是指引用外部独立的CSS文件，定义了外部样式之后，网站中的所有网页都可以应用次样式，这个方法最为常用

2.href:表示外部样式表文件的路径

rel:表示浏览器应用的CSS文件

type:属性表示CSS的MIME编码

语法：注意这个是写到head中

<link rel="stylesheet" href="路径名" type="text/css">

样例：

先建一个css文件，为class选择器写一个样式

然后直接用类选择器，为其设置属性值为p2

效果：

4.导入式

1.与<link>标记类似，使用@import可以导入外部样式，但是@import只能放在<style>标记中使用，而且必须放在其他css样式之前

语法：

<style>
     @import url(外部样式的路径);
</style>

样例：

在建一个a.css文件，写入类选择器p3

再加上，下面箭头指向的语句

效果：

完整code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    
    <style>
        /* 导入式 */
        @import url(a.css);

        h1{
            text-align: center;
            color: red;
        }
        /* 内嵌式样式  */
        .p1{
            color: blue;
            text-align: center;
        }
    </style>

    <!-- 链接式 -->
    <link rel="stylesheet" href="CSS样式的4种引入方式.css" type="text/css">
</head>

<body>

    <h1>Always young</h1>
    <!-- 行内样式 -->
    <p style="color:red; text-align: center;">My aunt Jennifer is an actress.</p>

    <!-- 内嵌式样式 -->
    <p class="p1">She must be at least thirty-five years old.</p>

    <!-- 链接式 -->
    <!-- 直接用类选择器p2 -->
    <p class="p2">in spite of this,she often appears on the stage as a young girl. </p>

    <!-- 导入式 -->
    <!-- 直接用类选择器p3 -->
    <p class="p3">Jennifer will have to take part in a new play soon.</p>

    <!-- 后面的语句都是用的内嵌式的类选择器 -->
    <p class="p1">This time,she will be a girl of seveteen.</p>
    <p class="p1">In the play,she must appear in a bright red dress and long black stockings.</p>
    <p class="p1">Last year in another play,she had to wear short socks and a bright orange-coloured dress.</p>
    <p class="p1">If anyone ever asks her how old she is,she always answers'Darling,it must be terrible to be grown-up'</p>
    <p class="p1"></p>
    <p class="p1"></p>


</body>
</html>

效果：