前段初学7 | CSS样式表介绍及优先级

最新推荐文章于 2024-07-26 08:00:00 发布

printfbaozw

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量358

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/printfbaozw/article/details/128505227

版权

文章目录

前言
一、什么是CSS？
二、CSS语法规则及样式表
三、样式表的优先级
总结

前言

接下来我们进行CSS的学习阶段，并有时会补充一些标签。

一、什么是CSS？

CSS英文全名：cascading style sheets 层叠样式表，WEB标准中的表现标准语言，表现标准语言在网页中主要对网页信息的显示进行控制，简单地说就是如何修改网页信息的显示样式。
目前推荐遵循的是W3C发布的CSS3.0，用来表现XHTML或者XML等样式文件的计算机语言。

二、CSS语法规则及样式表

每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值:
属性必须放在花括号中，属性与属性值用冒号连接。
每条声明用分号结束。
当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开。
在书写样式过程中，空格、换行等操作不影响属性显示。

1.内部样式

我们在head部分中加入style标签，代表我们要使用css，并在其内部进行颜色（或者其他属性）修改。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01</title>
    <style>
        h1{
            color: aquamarine;
        }
        h2{
            color: bisque;
        }
        h3{
            color: red;
        }
    </style>
</head>
<body>
    <h1>1111111111</h1>
    <h2>2222222222</h2>
    <h3>3333333333</h3>
</body>
</html>

接着我们查看运行结果：
在这里插入图片描述
我们的标题变成了不同的颜色。

2.外部样式

外部样式的创建为以下两种形式

1. <link rel="stylesheet" type="text/css" href="路径"
2. @import url(路径);

我们先在vscode中，创建一个.css后缀的文件，并在其中写入属性

在这里插入图片描述
然后我们修改代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01</title>
    <link rel="stylesheet" type="text/css" href="test02.css">
    <!-- <style>
        @import url(test02.css);
    </style> -->
</head>
<body>
    <h1>1111111111</h1>
    <h2>2222222222</h2>
    <h3>3333333333</h3>
</body>
</html>

运行后查看结果，发现与之前的方式达成的效果一致（注释部分也可以实现，这里仅使用了link）

link和import之间的区别

差别1: 本质的差别: link属于XHTML标签，而@import完全是CSS提供的一种方式。
差别2:加载顺序的差别:当一个页面被加载的时候 (就是被浏览者浏览的时候)，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式 (就是闪烁)，网速慢的时候明显。
差别3: 兼容性的差别: @import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

3.行内样式

写在标签的内部，即将style放在想要修改的标签内，具体操作如下：

<body>
    <h1 style="color: aqua;">1111111111</h1>
    <h2 style="color: #00ffc8;">2222222222</h2>
    <h3 style="color: #d900ff;">3333333333</h3>
</body>

运行代码，查看结果：

在这里插入图片描述

三、样式表的优先级

在以上代码的基础上，我们进行修改：

test02部分

div{
    color: blueviolet;
}

test01部分（主函数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01</title>

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

    <style>
        div{
            color: blue;
        }
    </style>
    
</head>
<body>
    <div style="color: beige;">111111111</div>
</body>
</html>