css.md

   1 ---
   2 title: CSS
   3 category: CSS
   4 layout: 2017/sheet
   5 weight: -1
   6 keywords:
   7   - "margin, padding, border"
   8   - "div, .class, #id, [attr]"
   9   - "font, background"
  10   - "display: block, inline, flex"
  11   - Selectors
  12   - Properties
  13 ---
  14
  15 ## Basics
  16 {: .-three-column}
  17
  18 ### Selectors
  19
  20 ```css
  21 .class {
  22   font-weight: bold;
  23 }
  24 ```
  25 {: .-setup}
  26
  27 | Selector          | Description  |
  28 | ----------------- | ------------ |
  29 | `*`               | All elements |
  30 | `div`             | Element      |
  31 | `.class`          | Class        |
  32 | `#id`             | ID           |
  33 | `[disabled]`      | Attribute    |
  34 | `[role="dialog"]` | Attribute    |
  35
  36 ### Combinators
  37
  38 | Selector            | Description       |
  39 | ------------------- | ----------------- |
  40 | `.parent .child`    | Descendant        |
  41 | `.parent > .child`  | Direct descendant |
  42 | `.child + .sibling` | Adjacent sibling  |
  43 | `.child ~ .sibling` | Far sibling       |
  44 | `.class1.class2`    | Have both classes |
  45
  46 ### Attribute selectors
  47
  48 | Selector           | Description                         |
  49 | ------------------ | ----------------------------------- |
  50 | `[role="dialog"]`  | `=` Exact                           |
  51 | `[class~="box"]`   | `~=` Has word                       |
  52 | `[class|="box"]`   | `|=` Exact or prefix (eg, `value-`) |
  53 | `[href$=".doc"]`   | `$=` Ends in                        |
  54 | `[href^="/index"]` | `^=` Begins with                    |
  55 | `[class*="-is-"]`  | `*=` Contains                       |
  56
  57 ### Pseudo-classes
  58
  59 | Selector             | Description                                |
  60 | -------------------- | ------------------------------------------ |
  61 | `:target`            | eg, `h2#foo:target`                        |
  62 | ---                  | ---                                        |
  63 | `:disabled`          |                                            |
  64 | `:focus`             |                                            |
  65 | `:active`            |                                            |
  66 | ---                  | ---                                        |
  67 | `:nth-child(3)`      | 3rd child                                  |
  68 | `:nth-child(3n+2)`   | 2nd child in groups of 3                   |
  69 | `:nth-child(-n+4)`   |                                            |
  70 | ---                  | ---                                        |
  71 | `:nth-last-child(2)` |                                            |
  72 | `:nth-of-type(2)`    |                                            |
  73 | ---                  | ---                                        |
  74 | `:checked`           | Checked inputs                             |
  75 | `:disabled`          | Disabled elements                          |
  76 | `:default`           | Default element in a group                 |
  77 | ---                  | ---                                        |
  78 | `:empty`             | Elements without children                  |
  79
  80 ### Pseudo-class variations
  81
  82 | Selector          |
  83 | ----------------- |
  84 | `:first-of-type`  |
  85 | `:last-of-type`   |
  86 | `:nth-of-type(2)` |
  87 | `:only-of-type`   |
  88 | ---               |
  89 | `:first-child`    |
  90 | `:last-child`     |
  91 | `:nth-child(2)`   |
  92 | `:only-child`     |
  93 {: .-left-align}
  94
  95 ## Fonts
  96 {: .-left-reference}
  97
  98 ### Properties
  99
 100 | Property           | Description                          |
 101 | ------------------ | ------------------------------------ |
 102 | `font-family:`     | `<font>, <fontN>`                    |
 103 | `font-size:`       | `<size>`                             |
 104 | `letter-spacing:`  | `<size>`                             |
 105 | `line-height:`     | `<number>`                           |
 106 | ---                | ---                                  |
 107 | `font-weight:`     | `bold` `normal`                      |
 108 | `font-style:`      | `italic` `normal`                    |
 109 | `text-decoration:` | `underline` `none`                   |
 110 | ---                | ---                                  |
 111 | `text-align:`      | `left` `right` `center` `justify`    |
 112 | `text-transform:`  | `capitalize` `uppercase` `lowercase` |
 113 {: .-key-values}
 114
 115 ### Shorthand
 116 {: .-prime}
 117
 118 |         | style    | weight | size (required) |     | line-height | family            |
 119 | ------- | -------- | ------ | --------------- | --- | ----------- | ----------------- |
 120 | `font:` | `italic` | `400`  | `14px`          | `/` | `1.5`       | `sans-serif`      |
 121 |         | style    | weight | size (required) |     | line-height | family (required) |
 122 {: .-css-breakdown}
 123
 124 ### Example
 125
 126 ```css
 127 font-family: Arial;
 128 font-size: 12pt;
 129 line-height: 1.5;
 130 letter-spacing: 0.02em;
 131 color: #aa3322;
 132 ```
 133
 134 ### Case
 135
 136 ```css
 137 text-transform: capitalize; /* Hello */
 138 text-transform: uppercase; /* HELLO */
 139 text-transform: lowercase; /* hello */
 140 ```
 141
 142 ## Background
 143 {: .-left-reference}
 144
 145 ### Properties
 146
 147 | Property                 | Description                              |
 148 | ------------------------ | ---------------------------------------- |
 149 | `background:`            | _(Shorthand)_                            |
 150 | ---                      | ---                                      |
 151 | `background-color:`      | `<color>`                                |
 152 | `background-image:`      | `url(...)`                               |
 153 | `background-position:`   | `left/center/right` `top/center/bottom`  |
 154 | `background-size:`       | `cover` `X Y`                            |
 155 | `background-clip:`       | `border-box` `padding-box` `content-box` |
 156 | `background-repeat:`     | `no-repeat` `repeat-x` `repeat-y`        |
 157 | `background-attachment:` | `scroll` `fixed` `local`                 |
 158 {: .-key-values}
 159
 160 ### Shorthand
 161
 162 |               | color  | image         | positionX | positionY |     | size           | repeat      | attachment |
 163 | ------------- | ------ | ------------- | --------- | --------- | --- | -------------- | ----------- | ---------- |
 164 | `background:` | `#ff0` | `url(bg.jpg)` | `left`    | `top`     | `/` | `100px` `auto` | `no-repeat` | `fixed;`   |
 165 | `background:` | `#abc` | `url(bg.png)` | `center`  | `center`  | `/` | `cover`        | `repeat-x`  | `local;`   |
 166 |               | color  | image         | positionX | positionY |     | size           | repeat      | attachment |
 167 {: .-css-breakdown}
 168
 169 ### Multiple backgrounds
 170
 171 ```css
 172 background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
 173   url('background.jpg') center center / cover, #333;
 174 ```
 175
 176 ## Animation
 177 {: .-left-reference}
 178
 179 ### Properties
 180
 181 | Property                     | Value                                                    |
 182 | ---------------------------- | -------------------------------------------------------- |
 183 | `animation:`                 | _(shorthand)_                                            |
 184 | `animation-name:`            | `<name>`                                                 |
 185 | `animation-duration:`        | `<time>ms`                                               |
 186 | `animation-timing-function:` | `ease` `linear` `ease-in` `ease-out` `ease-in-out`       |
 187 | `animation-delay:`           | `<time>ms`                                               |
 188 | `animation-iteration-count:` | `infinite` `<number>`                                    |
 189 | `animation-direction:`       | `normal` `reverse` `alternate` `alternate-reverse`       |
 190 | `animation-fill-mode:`       | `none` `forwards` `backwards` `both` `initial` `inherit` |
 191 | `animation-play-state:`      | `normal` `reverse` `alternate` `alternate-reverse`       |
 192 {: .-key-values}
 193
 194 ### Shorthand
 195
 196 |              | name     | duration | timing-function | delay   | count      | direction           | fill-mode | play-state |
 197 | ------------ | -------- | -------- | --------------- | ------- | ---------- | ------------------- | --------- | ---------- |
 198 | `animation:` | `bounce` | `300ms`  | `linear`        | `100ms` | `infinite` | `alternate-reverse` | `both`    | `reverse`  |
 199 |              | name     | duration | timing-function | delay   | count      | direction           | fill-mode | play-state |
 200 {: .-css-breakdown}
 201
 202 ### Example
 203
 204 ```css
 205 animation: bounce 300ms linear 0s infinite normal;
 206 animation: bounce 300ms linear infinite;
 207 animation: bounce 300ms linear infinite alternate-reverse;
 208 animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;
 209 ```
 210
 211 ### Event
 212
 213 ```js
 214 .one('webkitAnimationEnd oanimationend msAnimationEnd animationend')
 215 ```