---
title: "CSS"
path: "CSS"
---

{%hackmd @RintarouTW/About %}

# CSS

Cascading Style Sheets

:::info
Cascading
: 有兩種意義，一為層層串連，另一則是修飾 (modifier) 之意。目前主流的翻譯都僅限於結構上的描述，缺少了目的（修飾之意），對初學者而言難以顧名思義。
:::

https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics

## Syntax

style-rule ::=
    selectors-list {
      properties-list
    }

selectors-list ::=
    selector[:pseudo-class] [::pseudo-element]
    [, selectors-list]

properties-list ::= 
    [property : value] [; properties-list]

## Layout

CSS 2.1 defined four layout modes — algorithms which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes:

- block layout, designed for laying out documents
- inline layout, designed for laying out text
- table layout, designed for laying out 2D data in a tabular format
- positioned layout, designed for very explicit positioning without much regard for other elements in the document

This module introduces a new layout mode, flex layout, which is designed for laying out more complex applications and webpages.

### Box Model Layout

<center><img src="https://i.imgur.com/b7mkq0Z.png"/></center>

margin (邊界)
: 與其它 Box 之間的間隔

border (邊框)
: 邊框，可指定框粗細、顏色與 radius 等。

padding (邊距)
: 邊框與內容之間的間距，亦有填充之意。

### FlexBox Model Layout

<center><img src="https://i.imgur.com/Exledtm.png"/></center>

https://www.w3.org/TR/css-flexbox-1/#box-model

The contents of a flex container:

- can be laid out in any flow direction (leftwards, rightwards, downwards, or even upwards!)
- can have their display order reversed or rearranged at the style layer (i.e., visual order can be independent of source and speech order)
- can be laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
- can “flex” their sizes to respond to the available space
- can be aligned with respect to their container or each other on the secondary (cross)
- can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size

#### Example

<div style="display:flex">

    <!-- flex item: block child -->
    <div id="item1">block</div>

    <!-- flex item: floated element; floating is ignored -->
    <div id="item2" style="float: left;">float</div>

    <!-- flex item: anonymous block box around inline content -->
    anonymous item 3

    <!-- flex item: inline child -->
    <span>
        item 4
        <!-- flex items do not split around blocks -->
        <q style="display: block" id=not-an-item>item 4</q>
        item 4
    </span>
</div>

#### main & cross

即 container 主軸和垂直（交叉）於主軸相的 cross 軸，因為主軸可指定為水平或垂直，故以主軸代稱。如主軸為水平，自然 cross 為垂直；同理反之。

main size/cross size 則分別指定其軸長度。

#### container & item

於 container 中，依主軸順序放置的 item。

## Color

147 CSS Color Name List
http://www.colors.commutercreative.com/grid/

/* Keyword values */
color: currentcolor;

/* <named-color> values */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* <hex-color> values */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* <rgb()> values */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/* <hsl()> values */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* Global values */
color: inherit;
color: initial;
color: unset;

## Style

## Font

## Line Style

## Shadow

## Transformation

.box {
  transform: rotate(0.8turn);
}

## Function

.box {
  width: calc(90% - 30px);
}

## @rules

@import 'styles2.css';

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

@media to create a section of our stylesheet that will only be applied in browsers with a viewport wider than 30em. If the browser is wider than 30em then the background color will be blue.

## Animation

## Selector

$$
select\ by\left\{
\begin{aligned}
element\\
:psudo\_class\\
::psudo\_element\\
.class\\
\#id\\
parent\_element > target\\
.parent\_class > target\\
element + adjecent\_silbling\\
element \text{~} general\_silbling\\
\text{*} (universal selector)\\
element[attr]
\end{aligned}
\right.
$$

## Pseudo Class

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, `:hover` can be used to change a button's color when the user's pointer hovers over it.

selector:pseudo-class {
  property: value;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

## Pseudo Element

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, `::first-line` can be used to change the font of the first line of a paragraph.

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

## Attribute Selector

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors

###### tags: `css` `layout` `design`