[Day 04 - CSS] 网页长这样能看吗，CSS魔术Show

CSS (Cascading Style Sheets，阶层样式表)，用来描述 HTML 外观的样式表，含有各式各样的样式属性，能够让你在元素上面套用样式美化网站。

语法规则

直接来看看 CSS 如何套用样式在元素上。比如，要让 <h1> 里的文字内容变成蓝色：

h1 {
    color:blue;
}

是不是简单易懂，这就是 CSS 的语法组成：

选择器 (Selector) - h1：选择要套用样式的元素
样式内容区块 - {...}：可以包含许多样式属性
样式属性 - color:blue;：包含属性 (Properties) 和属性值 (Property value)。

认识选择器

前面所举例的选择器 (Selector)— h1，就是所谓的元素选择器 (Element selector)，它会选取所有 HTML 元素中的 <h1> 标签。

那我想要单独套用样式该怎麽做？别担心，CSS还提供了其他选择器，比如：

ID 选择器 (ID selector)：在 ID 属性值前面加上 #，就能选择含有指定 ID 属性的特定元素。
```
#id {
    color:blue;
}
```
Class 选择器 (Class selector)：在 class 属性值前面加上 . ，就能选择含有指定class属性的所有元素。
```
.class {
    color:blue;
}
```

特殊的选择器 - 虚拟类别选择器

如果你还想为你的网页加上更多变化，CSS 还提供了虚拟类别选择器 (Pseudo-classes selector)，可以在指定的情况发生时，套用样式到元素上，比如：

:link   //连结平常的样式
:hover   //滑鼠滑入的样式
:active   //滑鼠按下的样式

在 ID 属性值後面加上指定的样式 :hover

#id:hover {
    color:blue;
}

当然CSS还有提供其他好用的选择器，如果你还想了解更多，可以参考这篇

三种套用方法

已经大致了解了 CSS 的使用後，在介绍各种样式属性之前，我们必须先知道如何将 CSS 的档案连结套用到 HTML 上，总共会有三种方法：外部样式表、内部样式表和行内样式

外部样式表 (External stylesheet)

在 <head> 里使用 <link> 连结 CSS 档案，是最常见的 CSS 引入方法：

<link rel="stylesheet" href="档名.css" />

内部样式表 (Internal stylesheet)

在 <head> 里使用 <style></style> 直接创立 CSS 样式：

<style>
    h1 {
        color:red;
    }
</style>

行内样式 (Inline styles)

直接在元素里新增 style 属性，对单个元素套用 CSS 样式：

<h1 style="样式表">示范 inline styles</h1>

CSS Cascading

认识更多样式属性之前，不能不提到 CSS (Cascading Style Sheets) 里的 Cascading 概念，是 CSS 用来处理规则冲突的机制。指的是当你对同一个元素建立重复的样式属性，会优先使用後面的样式，如下图：

如果你想要深入了解更多CSS在处理规则冲突的机制，可以参考这篇

小结

这个章节我们提到运用 CSS 的选择器建立样式，以及套用样式表到 HTML 的方法，让原本枯燥的内容文字多了点变化，下一篇我们就会来说明更多样式属性，让 CSS 真正发挥他的功力，一起期待明天的 CSS Showtime 吧！

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️

参考资料

MDN Web Docs - CSS

<<: DAY 5 Big Data 5Vs – Volume(容量) - RedShift

>>: Day.9 Add Two Numbers

[Day 04 - CSS] 网页长这样能看吗，CSS魔术Show

语法规则

认识选择器

特殊的选择器 - 虚拟类别选择器

三种套用方法

外部样式表 (External stylesheet)

内部样式表 (Internal stylesheet)

行内样式 (Inline styles)

CSS Cascading

小结

参考资料

Day 11 : 用於生产的机械学习 - Data Labeling 资料标注

Day11｜【Git】档案管理 - 重新命名档案 git mv

Spring boot 配置 Fluent bit 传递 Log

Elastic Stack第二十七重

D-3.Line_pay_api 串接(二) V3 Request API

iOS APP 开发 OC 第十七天，内存管理＆引用计数器(重要观念)

【Side Project】 (老板)订单清单UX功能实作2-ChcekBox

用React刻自己的投资Dashboard Day23 - 非同步呼叫API，完成首页资料串接

Day00 前言与目录

D14 - 转移资料到TiDB工具介绍(一)