发布日期: 2024-02-05

Part.2 进入CSS

第一部分中，我们谈完了html的一些基本标签，但是它们的样式多少还有些简朴，要想加点花里胡哨的玩意，就还得看css的内容

样式表

读者如果进行了一些尝试的话，可以发现HTML的表格，表单都十分的简朴，甚至简陋， ~~不够花里胡哨~~ ，这在前端设计中是不可接受的，因此我们这里引出CSS的样式表。

CSS，cascading style sheets，译为层叠样式表，是web中的表现标准语言，可以达成修改网页显示信息的样式的目的，目前遵循CSS3.0的标准

CSS的组成部分

CSS的基本组成部分有 选择符 和声明，而每条声名内又由属性与 属性值 组成

选择符{
    属性: 属性值;
}

需要说明的是，css的书写是和html同时存在的，但显然直接把css的玩意扔到body中，显得就有些突兀，也很杂乱，因此，我们通常利用html中的 style 标签框住css的内容。

<!DOCTYPE html>
<html>
    <head>
        这是个例子
        <style>
            h1:{
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>第一级标题</h1>
    </body>
</html>

我们通过上述的例子实现了将所有的第一级标题都更改为红色。

这里有个众人一块规定的事情，因为文中出现太多style有点影响观感，也不方便阅读，因此我们一般将style写到head中。

内部样式 & 外部样式

内部样式 ，即 将对当前html文件起作用的css直接通过style标签写在html内部 ，也就是上方咱们进行css引入的方法。

但这种方式对于html结构很复杂，内容很繁多的情况就不是很友好，每次想要修改标签还需要翻到文件最上方，不方便。

因此 外部样式 是更常用的一种方法，即在文件外单独写一个css，在需要使用这个css的html中利用链接来告知html文件需要套用的css内容。

关于外部样式的链接方式，通常有以下两种：

<!-- 第一种 -->
<link rel = "stylesheet" type = "text/css" herf = "Css文件路径">

<!-- 第二种 -->
<style type = "text/css">
    @import url()  
    /* 括号里是Css文件的路径 */
</style>

这两种方式还是有一定的区别的：

link标签是XHTML提供的标签，而@import是css提供的方式
当一个页面被加载时，link引用的css会被同时加载，但@import引用的css会等待页面加载完成后再进行加载，这会导致使用@import引用的css在网速比较慢时页面会出现闪烁
@import在较老的浏览器（IE5以下）是不兼容的

因此，在引入标签时，还是建议更多的使用link标签的方式。

行内样式

行内样式 ，即在html中的某一行单独运用style属性对该标签的样式进行个性化编辑

像这样：

<h1 style = "color:red;">11111111</h1>

这玩意尽量不要用太多，因为这东西还是会影响文件可读性的。

样式表的优先级

上面讲了三种样式：内部样式、外部样式、行内样式，如果这仨全都存在，则它们总归会有一个顺序优先级的问题。

这里给出明确结论，内部样式和外部样式的作用取决于谁在head标签更靠下的位置（即谁最后加载），但一般html的书写习惯是将link标签写在style标签上方。

同理，外部标签与内部标签的优先级都不如行内标签高。

因此基本上可以说：行内样式 > 内部样式 > 外部样式

当然，还有一种特殊情况，即 !important 标签的存在会使当前指向的样式优先生效。

总结一下：!important > 行内样式 > 内部样式 > 外部样式

这里推荐以代码的自上而下的执行顺序来对优先级进行理解。

选择器

选择器 的存在是为了实现对html内元素的一对一，一对多的控制。

存在以下几种类别：

元素选择器
类选择器
id选择器
通配符选择器
群组选择器
包含选择器
伪类选择器

元素选择器

元素选择器就是之前咱们css的写法，即通过选择某一类的元素并添加相应的样式。

类选择器

元素选择器的范围有些太广了，因此我们还需要进行进一步的细分，这就催生了 类选择器

<style>
    /* 在指定样式时需要前方加. */
    .type1{
        background-color:red;
    }
    .type2{
        color:blue;
    }
</style>

<!-- 一个标签可以有多个类，中间用空格分隔 -->
<div class = "type1 type2"></div>

可以理解为，类选择器就是人工将各种标签重新进行了分类。

id选择器

id选择器与类选择器有些相似，但是id选择器是一对一的，相当于对一个单独的玩意起一个单独的id，在css文件中单独开一片区域来对其进行单独的样式设置。（有点类似身份证号）

<style>
    /* 在指定id之前加# */
    #box1{
        background-color: red;
    }
</style>

<!-- 一个标签相应的只能有一个id -->
<div id = "box1">111111</div>

通配符选择器

通配符 顾名思义，即选择所有元素的意义，在html中用 * 进行表示。

这种选择器会直接选择到一个html中所有的标签，通常用于对所有标签的属性进行整体调试，比如间距等。

<style>
    *{
        /* 外边距 */
        margin: 0;
        padding: 0;
        /* 内边距 */
    }
</style>

群组选择器 & 包含选择器

其实群组选择器这玩意就是偷懒用的，如果一个html中存在多个不同的标签，但是想要设置成一个样式，一方面可以用类，但更方便的方法则是利用群组选择器：

<style>
    div, p, h1{
        background-color: red;
    }

    /* 当然，也可以直接把类也写进去 */
    div, .class1, h1{
        background-color: red;
        /* 相当于所有的class1类也都设置了背景颜色 */
    }
</style>

如上，我们可以直接将不同的标签一块写，用逗号隔开即可。

由此，我们又衍生出了一个叫做包含选择器的玩意（也叫后代选择器），其意义在于选择一个包含在一个标签内的标签。

<style>
    div p {
        background-color:blue;
        /* 在div内的p都会受到影响 */
    }
</style>

<div>2222222222
    <p>This is first paragraph.</p>
</div>