CSS-reference-book/templ-dev.css at main · SKindij/CSS-reference-book · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/* short summary of styles */
/* positioning */
.selector {
  position: static | relative | absolute | fixed | sticky | inherit;
  float: left | right;
  z-index: ...;
}

/* block model and size */
.selector {
  width: ;| height: ;
  margin: 0 auto;
  box-sizing: content-box | border-box;
  border: ;
  border-color: ;
  border-style: solid | dotted | double | groove | ridge | inset | outset;
  padding: ;
  display: none | block | inline | inline-block | flex | grid;
}

/* flex */
.container {
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap-reverse;
  flex-flow: ;
  justify-content: ;
  align-items: ;
}

/* grid */
.container {
  display: grid;
  grid-template-columns: ;
  grid-template-rows: ;
  grid-template-columns: repeat(3, 250px);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row | column | dense ;
  grid-template-areas: ;
  justify-items: start | end | center | stretch ;

}

/* typography (text properties) */
.selector {
  color: currentColor;
  font-family: serif | sans-serif | monospace | cursive | fantasy;
  font-size: 1rem;
  line-height: 1.2;
  text-align: left | center | right | justify;
  font-weight: 100 (thin, hairline) | 200 (extra light, ultra light) | 300 (light) | 400 (normal, regular, book) | 500 (medium) |600 (semi bold, demi bold) | 700 (bold) | 800 (extra bold, ultra bold) | 900 (black, heavy);
  letter-spacing: ;
  text-decoration: none;
  text-rendering: ;
  text-shadow: Х У Р color;
  white-space: pre;
  text-overflow: ;
}

/* display (design) */
.selector {
  overflow: ...;
  opacity: ...;
  visibility: ...;
  position: absolute | fixed;
  clip: rect(0, 0, 0, 0);
  background-color: …;
  background-image: url("");
  background-position-y:   ;
  background-size:    ;
  background-repeat:   ;
  box-shadow: Х У Р Р color;
}