Skip to content

Commit

Permalink
CSS: Format
Browse files Browse the repository at this point in the history
  • Loading branch information
@rstacruz
rstacruz committed May 2, 2018
1 parent 265faa2 commit 3fc0bad
Showing 1 changed file with 87 additions and 84 deletions.
171 changes: 87 additions & 84 deletions css.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>, <fontN>` |
| `font-size:` | `<size>` |
| `letter-spacing:` | `<size>` |
| `line-height:` | `<number>` |
| --- | --- |
| `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>, <fontN>` |
| `font-size:` | `<size>` |
| `letter-spacing:` | `<size>` |
| `line-height:` | `<number>` |
| --- | --- |
| `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
Expand All @@ -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:` | `<color>` |
Expand All @@ -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;
```

Animation
---------
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
{: .-left-reference}

### Properties

| `animation:` | _(shorthand)_ |
| `animation-name:` | `<name>` |
| `animation-delay:` | `<time>ms` |
| `animation-duration:` | `<time>ms` |
| `animation-direction:` | `normal` `reverse` `alternate` `alternate-reverse` |
| `animation-iteration-count:` | `infinite` `<number>` |
| Property | Value |
| ---------------------------- | -------------------------------------------------- |
| `animation:` | _(shorthand)_ |
| `animation-name:` | `<name>` |
| `animation-delay:` | `<time>ms` |
| `animation-duration:` | `<time>ms` |
| `animation-direction:` | `normal` `reverse` `alternate` `alternate-reverse` |
| `animation-iteration-count:` | `infinite` `<number>` |
| `animation-timing-function:` | `ease` `linear` `ease-in` `ease-out` `ease-in-out` |
{: .-key-values}

### Shorthand

| `animation:` | `bounce` | `300ms` | `linear` | `100ms` | `infinite` | `alternate-reverse` |
| | name | duration | timing-function | delay | count | direction |
| | name | duration | timing-function | delay | count | direction |
| ------------ | -------- | -------- | --------------- | ------- | ---------- | ------------------- |
| `animation:` | `bounce` | `300ms` | `linear` | `100ms` | `infinite` | `alternate-reverse` |
| | name | duration | timing-function | delay | count | direction |
{: .-css-breakdown}

### Example
Expand Down

0 comments on commit 3fc0bad

Please sign in to comment.