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