ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

CSS: Format

This commit is contained in:
Rico Sta. Cruz 2018-05-02 09:59:07 +08:00
parent 265faa2759
commit 3fc0bad912
No known key found for this signature in database
GPG Key ID: CAAD38AE2962619A
1 changed files with 86 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
css.md
View File

@ -25,7 +25,7 @@ keywords:
{: .-setup} {: .-setup}
| Selector | Description | | Selector | Description |
| --- | --- | | ----------------- | ----------- |
| `div` | Element | | `div` | Element |
| `.class` | Class | | `.class` | Class |
| `#id` | ID | | `#id` | ID |
@ -35,16 +35,16 @@ keywords:
### Combinators ### Combinators
| Selector | Description | | Selector | Description |
| --- | --- | | ------------------- | ----------------- |
| `.parent .child` | Descendant | | `.parent .child` | Descendant |
| `.parent > .child` | Direct descendant | | `.parent > .child` | Direct descendant |
| `.child + .sibling` | Adjascent sibling | | `.child + .sibling` | Adjacent sibling |
| `.child ~ .sibling` | Far sibling | | `.child ~ .sibling` | Far sibling |
### Attribute selectors ### Attribute selectors
| Selector | Description | | Selector | Description |
| --- | --- | | ----------------- | ----------------------------------- |
| `[role="dialog"]` | `=` Exact | | `[role="dialog"]` | `=` Exact |
| `[class~="box"]` | `~=` Has word | | `[class~="box"]` | `~=` Has word |
| `[class|="box"]` | `|=` Exact or prefix (eg, `value-`) | | `[class|="box"]` | `|=` Exact or prefix (eg, `value-`) |
@ -54,7 +54,7 @@ keywords:
### Pseudo-classes ### Pseudo-classes
| Selector | Description | | Selector | Description |
| --- | --- | | -------------------- | ------------------------ |
| `:target` | eg, `h2#foo:target` | | `:target` | eg, `h2#foo:target` |
| --- | --- | | --- | --- |
| `:disabled` | | | `:disabled` | |
@ -72,7 +72,7 @@ keywords:
### Pseudo-class variations ### Pseudo-class variations
| Selector | | Selector |
| --- | | ----------------- |
| `:first-of-type` | | `:first-of-type` |
| `:last-of-type` | | `:last-of-type` |
| `:nth-of-type(2)` | | `:nth-of-type(2)` |
@ -84,14 +84,13 @@ keywords:
| `:only-child` | | `:only-child` |
{: .-left-align} {: .-left-align}
Fonts ## Fonts
-----
{: .-left-reference} {: .-left-reference}
### Properties ### Properties
| Property | Description | | Property | Description |
| --- | --- | | ------------------ | ------------------------------------ |
| `font-family:` | `<font>, <fontN>` | | `font-family:` | `<font>, <fontN>` |
| `font-size:` | `<size>` | | `font-size:` | `<size>` |
| `letter-spacing:` | `<size>` | | `letter-spacing:` | `<size>` |
@ -108,6 +107,8 @@ Fonts
### Shorthand ### Shorthand
{: .-prime} {: .-prime}
| | style | weight | size (required) | | line-height | family |
| ------- | -------- | ------ | --------------- | --- | ----------- | ----------------- |
| `font:` | `italic` | `400` | `14px` | `/` | `1.5` | `sans-serif` | | `font:` | `italic` | `400` | `14px` | `/` | `1.5` | `sans-serif` |
| | style | weight | size (required) | | line-height | family (required) | | | style | weight | size (required) | | line-height | family (required) |
{: .-css-breakdown} {: .-css-breakdown}
@ -130,14 +131,13 @@ text-transform: uppercase; /* HELLO */
text-transform: lowercase; /* hello */ text-transform: lowercase; /* hello */
``` ```
Background ## Background
----------
{: .-left-reference} {: .-left-reference}
### Properties ### Properties
| Property | Description | | Property | Description |
| --- | --- | | ------------------------ | ---------------------------------------- |
| `background:` | _(Shorthand)_ | | `background:` | _(Shorthand)_ |
| --- | --- | | --- | --- |
| `background-color:` | `<color>` | | `background-color:` | `<color>` |
@ -151,26 +151,27 @@ Background
### Shorthand ### Shorthand
| | color | image | positionX | positionY | | size | repeat | attachment |
| ------------- | ------ | ------------- | --------- | --------- | --- | -------------- | ----------- | ---------- |
| `background:` | `#ff0` | `url(bg.jpg)` | `left` | `top` | `/` | `100px` `auto` | `no-repeat` | `fixed;` | | `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 | | | color | image | positionX | positionY | | size | repeat | attachment |
{: .-css-breakdown} {: .-css-breakdown}
### Multiple backgrounds ### Multiple backgrounds
```css ```css
background: background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('background.jpg') center center / cover, #333;
url('background.jpg') center center / cover, ```
#333;
```
Animation ## Animation
---------
{: .-left-reference} {: .-left-reference}
### Properties ### Properties
| Property | Value |
| ---------------------------- | -------------------------------------------------- |
| `animation:` | _(shorthand)_ | | `animation:` | _(shorthand)_ |
| `animation-name:` | `<name>` | | `animation-name:` | `<name>` |
| `animation-delay:` | `<time>ms` | | `animation-delay:` | `<time>ms` |
@ -182,6 +183,8 @@ Animation
### Shorthand ### Shorthand
| | name | duration | timing-function | delay | count | direction |
| ------------ | -------- | -------- | --------------- | ------- | ---------- | ------------------- |
| `animation:` | `bounce` | `300ms` | `linear` | `100ms` | `infinite` | `alternate-reverse` | | `animation:` | `bounce` | `300ms` | `linear` | `100ms` | `infinite` | `alternate-reverse` |
| | name | duration | timing-function | delay | count | direction | | | name | duration | timing-function | delay | count | direction |
{: .-css-breakdown} {: .-css-breakdown}