# CSS

{% tabs %}
{% tab title="🔴 主題" %}
* [CSS Rules](css/rules)
  * [CSS Selectors](css/selectors)
  * [CSS Properties](css/properties)
  * [CSS Values](css/values)
* [Stacking Context](css/stacking-context)
* [css-events](browser/event/type/css-events "mention")
{% endtab %}

{% tab title="🛠 工具" %}
* [Flexbox Froggy](https://flexboxfroggy.com/) :star:&#x20;
* [Grid Garden](https://cssgridgarden.com/) :star:&#x20;
* CSSWizardry ⟩ [ct.css](https://csswizardry.com/ct/) - diagnostic CSS snippet&#x20;
{% endtab %}

{% tab title="📘 手冊" %}
* [CSS basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)
* [CSSReference.io](https://cssreference.io/)
* DevDocs: [CSS](https://devdocs.io/css/)
* MDN: [CSS reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
* [CSS Selectors & Properties](https://css-tricks.com/almanac/) (CSS-Tricks)
{% endtab %}

{% tab title="📗 參考" %}
* [ ] [CSS Tricks](https://css-tricks.com/)
* [ ] [Learn CSS](https://web.dev/learn/css/)
* [ ] Every Layout (2021) ⭐️ ⟩ [Relearn CSS layout](https://every-layout.dev/)
* [ ] JavaScript: The Definitive Guide (15.4)
* [ ] [What I Wish I Knew About CSS When Starting Out As A Frontender](https://engineering.kablamo.com.au/posts/2021/my-first-css)
* [ ] [Minding the “gap”](https://css-tricks.com/minding-the-gap/)
{% endtab %}

{% tab title="👥 相關" %}
* DOM ⟩ [element](browser/dom/type/element "mention") ⟩ [attribute](browser/dom/type/element/attribute "mention")
* [hide](component/use/hide "mention")
{% endtab %}
{% endtabs %}

## Cheat Sheet

{% tabs %}
{% tab title="Formatting" %}
* \<dl> - definition list
  * [CSS: Formatting a Definition List](https://www.the-art-of-web.com/css/format-dl/)
{% endtab %}

{% tab title="Second Tab" %}

{% endtab %}
{% endtabs %}
