进击のpython

前端学习——CSS基础

CSS的样式可以写在哪呢？其实CSS的样式插入式十分灵活的

按照插入的形势来看，可以分为三种情况

而接下来就对这三种情况进行简单的讨论

内嵌式

CSS样式表是可以直接把代码放在现有的标签里面去的

这种方法就称为内嵌式：

<p style='color:red;'>文字颜色为红色</p>

把对应的style属性，写在p标签的开始标签中

CSS样式代码要写在style=“”双引号中，如果有多条CSS样式代码设置可以写在一起，中间用分号隔开

<p style='color:red;font-size:12px;'>文字颜色为红色</p>

嵌入式

有个新的任务百因必有果！你的报应就是我！，我想把百因必有果，你，我这三个变成红色

要是用内嵌式的话，那可就太难了（每一个<span>标签加入style=”color:red;”语句，如果有多个span呢？）

那么嵌入式CSS样式的编写就能让我们很快的解决这个问题

嵌入式样式就是把CSS样式代码写在<style type='text/CSS'></style>标签之间

统一设置span标签的样式：

<style type='text/CSS'>
    span{
        color:red;
    }
</style>

嵌入式的CSS样式必须写在<style></style>之间

并且一般情况下嵌入式CSS样式写在<head></head>之间

外部式

大家试想一下，如果我们做一个类似淘宝那样的商城网站

那么随着项目需求的增多，我们的CSS代码量也会更庞大，越发到了后期

我们上述的内联式和嵌入式CSS样式的方式肯定是不行的，那我们应该怎么办?

这个时候，我们可以使用将我们的CSS代码编写到另一个单独的文件中，以为了后期方便维护我们的代码

那么这就是外部式CSS样式

外部式CSS样式(也可称为外链式)就是把CSS代码写一个单独的外部文件中，这个CSS样式文件以”.CSS”为扩展名

在<head>内（不是在style标签内）使用<link>标签将样式文件链接到HTML文件内，如下代码：

<link rel="stylesheet" href="index.CSS" type="text/CSS">

CSS样式文件名称以有意义的英文字母命名，如main.css、index.css、base.css等
rel=”stylesheet”
- rel:relationship的缩写，rel属性用于定义链接的文件和HTML文档之间的关系
- stylesheet：文档的外部样式表
href：是指定超链接(之前学习a标签的时候)目标的URL,href属性的值为样式表文件的地址
<link>标签位置一般写在<head>标签之内

优先级

这么多方式，要是叠加使用，应该用谁的样式呢？？？这就是我们现在要考虑的问题

我们做个测试：

使用内联css设置”百因必有果“文字为红色。
然后使用嵌入式css设置文字为绿色
最后使用外部式设置文字为蓝色(index.css文件中设置)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <style>
        span {
            color: green;
        }
    </style>
</head>
<body>
<p><span style="color: red">百因必有果！</span>你的报应就是我！</p>

</body>
</html>

span{
    color: pink;
}

我们发现，颜色是红色，为什么呢？因为这三种引入方式是优先级的，谁的优先级高浏览器就会显示谁的样式属性

内联式>嵌入式>外部式

重点来了！！嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面！

绿色：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <style>
        span {
            color: green;
        }
    </style>
</head>
<body>
<p><span>百因必有果！</span>你的报应就是我！</p>

</body>
</html>

粉色：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span {
            color: green;
        }
    </style>
        <link rel="stylesheet" href="index.css">

</head>
<body>
<p><span>百因必有果！</span>你的报应就是我！</p>

</body>
</html>

所以根本的优先级其实是就近原则！，哪个离被修饰的元素近，用哪个样式！

这也就是为什么CSS叫层叠样式表！

***** *****

前端学习（九）：CSS基础

进击のpython

前端学习——CSS基础

内嵌式

嵌入式

外部式

优先级

猜你喜欢