Skip to content

Latest commit

 

History

History
215 lines (178 loc) · 8.14 KB

css.md

File metadata and controls

215 lines (178 loc) · 8.14 KB
title category layout weight keywords
CSS
CSS
2017/sheet
-1
margin, padding, border
div, .class, #id, [attr]
font, background
display: block, inline, flex
Selectors
Properties

Basics

{: .-three-column}

Selectors

.class {
  font-weight: bold;
}

{: .-setup}

Selector Description
* All elements
div Element
.class Class
#id ID
[disabled] Attribute
[role="dialog"] Attribute

Combinators

Selector Description
.parent .child Descendant
.parent > .child Direct descendant
.child + .sibling Adjacent sibling
.child ~ .sibling Far sibling
.class1.class2 Have both classes

Attribute selectors

Selector Description
[role="dialog"] = Exact
[class~="box"] ~= Has word
`[class ="box"]`
[href$=".doc"] $= Ends in
[href^="/index"] ^= Begins with
[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)
--- ---
:checked Checked inputs
:disabled Disabled elements
:default Default element in a group
--- ---
:empty Elements without children

Pseudo-class variations

Selector
:first-of-type
:last-of-type
:nth-of-type(2)
:only-of-type
---
:first-child
:last-child
:nth-child(2)
:only-child
{: .-left-align}

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
{: .-key-values}

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}

Example

font-family: Arial;
font-size: 12pt;
line-height: 1.5;
letter-spacing: 0.02em;
color: #aa3322;

Case

text-transform: capitalize; /* Hello */
text-transform: uppercase; /* HELLO */
text-transform: lowercase; /* hello */

Background

{: .-left-reference}

Properties

Property Description
background: (Shorthand)
--- ---
background-color: <color>
background-image: url(...)
background-position: left/center/right top/center/bottom
background-size: cover X Y
background-clip: border-box padding-box content-box
background-repeat: no-repeat repeat-x repeat-y
background-attachment: scroll fixed local
{: .-key-values}

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;
color image positionX positionY size repeat attachment
{: .-css-breakdown}

Multiple backgrounds

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

Property Value
animation: (shorthand)
animation-name: <name>
animation-duration: <time>ms
animation-timing-function: ease linear ease-in ease-out ease-in-out
animation-delay: <time>ms
animation-iteration-count: infinite <number>
animation-direction: normal reverse alternate alternate-reverse
animation-fill-mode: none forwards backwards both initial inherit
animation-play-state: normal reverse alternate alternate-reverse
{: .-key-values}

Shorthand

name duration timing-function delay count direction fill-mode play-state
animation: bounce 300ms linear 100ms infinite alternate-reverse both reverse
name duration timing-function delay count direction fill-mode play-state
{: .-css-breakdown}

Example

animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;

Event

.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')