Day 04：专案01 - 超简单个人履历03 | CSS简介

CSS是什麽?

CSS，全名为Cascading Style Sheets，中文为阶层式样式表。跟HTML一样，CSS既非标准程序语言，也不是标记语言，而是一种风格页面语言，它能为你的HTML文件中的元素套用不同的样式(ex: 颜色、字体...等)。CSS也分为好几代，目前主流使用的是CSS3，而CSS3可以相容於多数的浏览器。

就像前面提到的，CSS就像HTML的衣服，决定了网页的颜色以及图案。

CSS基本语法

  • Selector：选择器，用於定位HTML元素，通常为标签名称、class名称或id名称。
  • Declaration：宣告区域，用於宣告元素的属性，包含了 属性(Property) 和 属性值(Value) 两个区块。用两个大括号包围，宣告间用分号分隔。
  • Property：属性，搭配属性值使用，属性和属性值间用冒号区隔。
  • Value：属性值，设定前方属性的值。

简单讲，上面那段范例所代表的意思就是：

HTML文件中所有的h1元素，将文字颜色设为蓝色，字体大小设为12px，

CSS套用方式

CSS有三种套用的方法，分别是行内载入、内部载入和外部载入。

行内载入

直接写在元素标签的後面，优点是相当直觉，缺点则是较不易更改和维护。

<p style="color: red; font-size: 20px;">Hello, CSS!</p>

你可能已经发现了，这不是我们学HTML时就已经用过了吗?

没错! 其实你早就已经偷学到一点点CSS的语法了，只不过我会讲其他更好的载入方式。

内部载入

将CSS写在<head>的<style>中，语法如同上面的CSS语法。优点是可以大量套用格式，而且方便管理和维护，但缺点是如果CSS数量一多，整个HTML文件会显得很冗长。

<head>
    <style>
        p {
            color: red; 
            font-size: 20px;
        }
    </style>
</head>

外部载入

将CSS格式独立写成.css档，并从HTML中载入.css档。写法是在<head>中加上<link>。

除了好维护外，HTML和CSS也可以清楚的分开，甚至可以多的HTML共用一个CSS档，因此我比较推荐使用这个方法，范例程序我也都是用这个方法。

/* demo.css */
p {
    color: red; 
    font-size: 20px;
}

// demo.html
<head>
    <link rel="stylesheet" href="demo.css">
</head>

三种写法的显示结果都为：

CSS选择器

选择器用於定位元素，决定哪些元素要被设定格式。

CSS有很多种选择器，常见的有标签选择器、class选择器或id选择器...等等。

标签选择器

使用标签名称来定位，所有该标签的元素都会设定格式。

像上面范例就是将所有<p>设定格式。

p {
    color: red; 
    font-size: 20px;
}

class选择器

还记得第一天提过的class属性吗? class选择器可以将所有符合class属性值的元素设定格式。语法为.+class属性值。

将所有class="title"的元素设定样式。

.title {
    color: red; 
    font-size: 20px;
}

id选择器

这麽说来，我好像还没说过id属性。其实id属性和class属性类似，也是用於定位HTML元素，但差别在於id属性值是唯一的，只能定位在一个元素上，不同於class属性可以同时设定好几个元素。

虽然id用於定位单一特定元素很好用，但我不建议你使用id来设定CSS格式。原因有两个，第一个是因为id属性值是唯一的，所以你可能在没注意到的情况下设定两个相同的id，结果可能导致非预期的错误。第二个是因为JavaScript或JQuery经常使用id当作定位点，称之为锚点，如果使用和他们相同的id也可能导致非预期的错误。总之就是尽量多使用class，少使用id就对了!

id选择器的语法是 #+id属性值。

#title {
    color: red; 
    font-size: 20px;
}

群组选择器

也可以一次选择多的选择器，选择器之间使用逗号隔开。

h1, p {
    color: red;
}

後代选择器

我们在Day02讲过DOM tree的概念，CSS也可以使用树状结构来定位。

後代选择器可以选择特定节点下所有子节点(包含子节点的子节点...)，语法为父节点+空格+子节点。

// demo.html
<div class="container">
    <p>子节点</p>
    <div>
        <p>子节点的子节点</p>
    </div>
</div>

// demo.css
.container p {
    color: red;
}

显示结果为：

子选择器

和後代选择器类似，差别在於子选择器只影响该节点下一层的子节点，语法为父节点+>+子节点。

.container>p {
    color: red;
}

显示结果为：

优先度

事实上，CSS在决定样式时，是依照优先度去决定的，优先度大的样式会强制盖过优先度小的样式。

优先度的配置大致如下：

套用方式：行内载入 > 内部载入 > 外部载入

CSS选择器：id > class > 标签

CSS选择器：id > class > 标签

另外，在属性宣告後方加上 !important 後，直接晋升为最大优先度，盖过其他所有的样式。

例如范例中，我们使用标签、class和id选择器设定同一个元素的颜色，猜猜看，文字会是什麽颜色呢?。

// demo.html
<h1 class="h1" id="h1">What's color?</h1>

h1 {
    color: red;
}
.h1 {
    color: blue;
}
#h1 {
    color: purple;
}

结果为紫色，因为id选择器的优先度最大。

但是如果改成这样：

h1 {
    color:red !important;
}
.h1 {
    color:blue;
}
#h1 {
    color: purple;
}

因为我在红色格式後方加上 !important 的关系，结果就变成红色了。

小结

今天我们开始接触了CSS，知道CSS的基本语法以及套用方式，并学习了好几个CSS选择器的用法，最後，还了解了CSS如何决定格式优先度。

明天我会介绍几个常见的属性值，让你的网页变得更加缤纷! 别忘了按下订阅开启小铃铛，我们明天准时见面~

如果喜欢这系列文章麻烦帮我按Like加订阅，你的支持是我创作最大的动力~

本系列文章以及范例程序码都同步更新在GitHub上，後续会持续的更新，如果喜欢也麻烦帮我按个星星吧~

有任何问题或建议，都欢迎在底下留言区提出，还请大家多多指教。


<<:  Flutter体验 Day 1-前言

>>:  [CSS] Flex/Grid Layout Modules, part 4

[Day14] LDAP Injection

前言 Injection +1 ↑ 正文 概念 LDAP全称Lightweight Director...

经济部工业局 2021 通讯大赛 !

https://mobilehero.com/zh-Hant ...

[区块链&DAPP介绍 Day13] Solidity 教学 - contracts-2

今天来聊聊关於 contracts 的继承 关於 contracts 其实它是支援多重继承，在这方面...

小工厂大经验

工作桌会随着行业别的不同，而有不同的设置和摆放，最多的摆设就是个人电脑周边，以及电话机，还有可卸式Ｏ...

[Golang] Go Installation and Basic Toolchain Introduction

Installation Download the package from https://gol...