CSS: Format
This commit is contained in:
Rico Sta. Cruz
parent
265faa2759
commit
3fc0bad912
43
css.md
43
css.md
|
|
@ -25,7 +25,7 @@ keywords:
|
|||
{: .-setup}
|
||||
|
||||
| Selector | Description |
|
||||
| --- | --- |
|
||||
| ----------------- | ----------- |
|
||||
| `div` | Element |
|
||||
| `.class` | Class |
|
||||
| `#id` | ID |
|
||||
|
|
@ -35,16 +35,16 @@ keywords:
|
|||
### Combinators
|
||||
|
||||
| Selector | Description |
|
||||
| --- | --- |
|
||||
| ------------------- | ----------------- |
|
||||
| `.parent .child` | Descendant |
|
||||
| `.parent > .child` | Direct descendant |
|
||||
| `.child + .sibling` | Adjascent sibling |
|
||||
| `.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-`) |
|
||||
|
|
@ -54,7 +54,7 @@ keywords:
|
|||
### Pseudo-classes
|
||||
|
||||
| Selector | Description |
|
||||
| --- | --- |
|
||||
| -------------------- | ------------------------ |
|
||||
| `:target` | eg, `h2#foo:target` |
|
||||
| --- | --- |
|
||||
| `:disabled` | |
|
||||
|
|
@ -72,7 +72,7 @@ keywords:
|
|||
### Pseudo-class variations
|
||||
|
||||
| Selector |
|
||||
| --- |
|
||||
| ----------------- |
|
||||
| `:first-of-type` |
|
||||
| `:last-of-type` |
|
||||
| `:nth-of-type(2)` |
|
||||
|
|
@ -84,14 +84,13 @@ keywords:
|
|||
| `:only-child` |
|
||||
{: .-left-align}
|
||||
|
||||
Fonts
|
||||
-----
|
||||
## Fonts
|
||||
{: .-left-reference}
|
||||
|
||||
### Properties
|
||||
|
||||
| Property | Description |
|
||||
| --- | --- |
|
||||
| ------------------ | ------------------------------------ |
|
||||
| `font-family:` | `<font>, <fontN>` |
|
||||
| `font-size:` | `<size>` |
|
||||
| `letter-spacing:` | `<size>` |
|
||||
|
|
@ -108,6 +107,8 @@ Fonts
|
|||
### Shorthand
|
||||
{: .-prime}
|
||||
|
||||
| | 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}
|
||||
|
|
@ -130,14 +131,13 @@ text-transform: uppercase; /* HELLO */
|
|||
text-transform: lowercase; /* hello */
|
||||
```
|
||||
|
||||
Background
|
||||
----------
|
||||
## Background
|
||||
{: .-left-reference}
|
||||
|
||||
### Properties
|
||||
|
||||
| Property | Description |
|
||||
| --- | --- |
|
||||
| ------------------------ | ---------------------------------------- |
|
||||
| `background:` | _(Shorthand)_ |
|
||||
| --- | --- |
|
||||
| `background-color:` | `<color>` |
|
||||
|
|
@ -151,26 +151,27 @@ 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
|
||||
|
||||
| Property | Value |
|
||||
| ---------------------------- | -------------------------------------------------- |
|
||||
| `animation:` | _(shorthand)_ |
|
||||
| `animation-name:` | `<name>` |
|
||||
| `animation-delay:` | `<time>ms` |
|
||||
|
|
@ -182,6 +183,8 @@ Animation
|
|||
|
||||
### Shorthand
|
||||
|
||||
| | name | duration | timing-function | delay | count | direction |
|
||||
| ------------ | -------- | -------- | --------------- | ------- | ---------- | ------------------- |
|
||||
| `animation:` | `bounce` | `300ms` | `linear` | `100ms` | `infinite` | `alternate-reverse` |
|
||||
| | name | duration | timing-function | delay | count | direction |
|
||||
{: .-css-breakdown}
|
||||
|
|
|
|||
Loading…
Reference in New Issue