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