From 3fc0bad912edcfb5d02dae2b6884cc35470501da Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Wed, 2 May 2018 09:59:07 +0800 Subject: [PATCH] CSS: Format --- css.md | 169 +++++++++++++++++++++++++++++---------------------------- 1 file changed, 86 insertions(+), 83 deletions(-) diff --git a/css.md b/css.md index fc9969061..ed3c19880 100644 --- a/css.md +++ b/css.md @@ -24,92 +24,93 @@ keywords: ``` {: .-setup} -| Selector | Description | -| --- | --- | -| `div` | Element | -| `.class` | Class | -| `#id` | ID | -| `[disabled]` | Attribute | -| `[role="dialog"]` | Attribute | +| Selector | Description | +| ----------------- | ----------- | +| `div` | Element | +| `.class` | Class | +| `#id` | ID | +| `[disabled]` | Attribute | +| `[role="dialog"]` | Attribute | ### Combinators -| Selector | Description | -| --- | --- | -| `.parent .child` | Descendant | -| `.parent > .child` | Direct descendant | -| `.child + .sibling` | Adjascent sibling | -| `.child ~ .sibling` | Far sibling | +| Selector | Description | +| ------------------- | ----------------- | +| `.parent .child` | Descendant | +| `.parent > .child` | Direct descendant | +| `.child + .sibling` | Adjacent sibling | +| `.child ~ .sibling` | Far sibling | ### Attribute selectors -| Selector | Description | -| --- | --- | -| `[role="dialog"]` | `=` Exact | -| `[class~="box"]` | `~=` Has word | -| `[class|="box"]` | `|=` Exact or prefix (eg, `value-`) | -| `[href$=".doc"]` | `$=` Ends in | -| `[class*="-is-"]` | `*=` Contains | +| Selector | Description | +| ----------------- | ----------------------------------- | +| `[role="dialog"]` | `=` Exact | +| `[class~="box"]` | `~=` Has word | +| `[class|="box"]` | `|=` Exact or prefix (eg, `value-`) | +| `[href$=".doc"]` | `$=` Ends in | +| `[class*="-is-"]` | `*=` Contains | ### Pseudo-classes -| Selector | Description | -| --- | --- | -| `:target` | eg, `h2#foo:target` | -| --- | --- | -| `:disabled` | | -| `:focus` | | -| `:active` | | -| --- | --- | -| `:nth-child(3)` | 3rd child | -| `:nth-child(3n+2)` | 2nd child in groups of 3 | -| `:nth-child(-n+4)` | | -| --- | --- | -| `:nth-last-child(2)` | | -| `:nth-of-type(2)` | | -| --- | --- | +| Selector | Description | +| -------------------- | ------------------------ | +| `:target` | eg, `h2#foo:target` | +| --- | --- | +| `:disabled` | | +| `:focus` | | +| `:active` | | +| --- | --- | +| `:nth-child(3)` | 3rd child | +| `:nth-child(3n+2)` | 2nd child in groups of 3 | +| `:nth-child(-n+4)` | | +| --- | --- | +| `:nth-last-child(2)` | | +| `:nth-of-type(2)` | | +| --- | --- | ### Pseudo-class variations -| Selector | -| --- | -| `:first-of-type` | -| `:last-of-type` | +| Selector | +| ----------------- | +| `:first-of-type` | +| `:last-of-type` | | `:nth-of-type(2)` | -| `:only-of-type` | -| --- | -| `:first-child` | -| `:last-child` | -| `:nth-child(2)` | -| `:only-child` | +| `:only-of-type` | +| --- | +| `:first-child` | +| `:last-child` | +| `:nth-child(2)` | +| `:only-child` | {: .-left-align} -Fonts ------ +## Fonts {: .-left-reference} ### Properties -| Property | Description | -| --- | --- | -| `font-family:` | `, ` | -| `font-size:` | `` | -| `letter-spacing:` | `` | -| `line-height:` | `` | -| --- | --- | -| `font-weight:` | `bold` `normal` | -| `font-style:` | `italic` `normal` | -| `text-decoration:` | `underline` `none` | -| --- | --- | -| `text-align:` | `left` `right` `center` `justify` | -| `text-transform:` | `capitalize` `uppercase` `lowercase` | +| Property | Description | +| ------------------ | ------------------------------------ | +| `font-family:` | `, ` | +| `font-size:` | `` | +| `letter-spacing:` | `` | +| `line-height:` | `` | +| --- | --- | +| `font-weight:` | `bold` `normal` | +| `font-style:` | `italic` `normal` | +| `text-decoration:` | `underline` `none` | +| --- | --- | +| `text-align:` | `left` `right` `center` `justify` | +| `text-transform:` | `capitalize` `uppercase` `lowercase` | {: .-key-values} ### Shorthand {: .-prime} -| `font:` | `italic` | `400` | `14px` | `/` | `1.5` | `sans-serif` | -| | style | weight | size (required) | | line-height | family (required) | +| | style | weight | size (required) | | line-height | family | +| ------- | -------- | ------ | --------------- | --- | ----------- | ----------------- | +| `font:` | `italic` | `400` | `14px` | `/` | `1.5` | `sans-serif` | +| | style | weight | size (required) | | line-height | family (required) | {: .-css-breakdown} ### Example @@ -126,18 +127,17 @@ color: #aa3322; ```css text-transform: capitalize; /* Hello */ -text-transform: uppercase; /* HELLO */ -text-transform: lowercase; /* hello */ +text-transform: uppercase; /* HELLO */ +text-transform: lowercase; /* hello */ ``` -Background ----------- +## Background {: .-left-reference} ### Properties | Property | Description | -| --- | --- | +| ------------------------ | ---------------------------------------- | | `background:` | _(Shorthand)_ | | --- | --- | | `background-color:` | `` | @@ -151,39 +151,42 @@ Background ### Shorthand +| | color | image | positionX | positionY | | size | repeat | attachment | +| ------------- | ------ | ------------- | --------- | --------- | --- | -------------- | ----------- | ---------- | | `background:` | `#ff0` | `url(bg.jpg)` | `left` | `top` | `/` | `100px` `auto` | `no-repeat` | `fixed;` | -| `background:` | `#abc` | `url(bg.png)` | `center` | `center` | `/` | `cover` | `repeat-x` | `local; ` | +| `background:` | `#abc` | `url(bg.png)` | `center` | `center` | `/` | `cover` | `repeat-x` | `local;` | | | color | image | positionX | positionY | | size | repeat | attachment | {: .-css-breakdown} ### Multiple backgrounds ```css -background: - linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), - url('background.jpg') center center / cover, - #333; - ``` +background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), + url('background.jpg') center center / cover, #333; +``` -Animation ---------- +## Animation {: .-left-reference} ### Properties -| `animation:` | _(shorthand)_ | -| `animation-name:` | `` | -| `animation-delay:` | `