-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCSS--.txt
146 lines (67 loc) · 3.15 KB
/
CSS--.txt
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
------------->> CSS web layouts
* Display----:
* property that defines teh type of box you want to use.
* it specifies the rendered box is Inline or Block.
* added flexibility and dimensionality.
* Flexbox----:
* 1 dimensional(arrange items in either column or row).
* adds responsiveness with float elements and positioning.
* suitable for small scale.
* 3 uses in HTML
1: search bar.
2: navigation bar.
3: image gallery.
* Grid-------:
* 2 dimensional(arrange items in both column & row).
* it increases dimensionality.
* suitable for large scale.
------------->> CSS selectors
* Element/ type selectors-----:
* ID selector -----: use ID attribute.
* Attribute selector ------: the value/attribute of an element is matched.
* nth-of-type selector ------:
* nth-child selector -----:
* star selectors ------: selecting all elements of web page.
* Group selectors / selector stacking -----:
---------------->> Absolute unit
* Absolute units are constant across different devices and have a fixed size. They are useful for activities like printing a page. They are not so suitable when it comes to the wide variety of devices in use today that have different viewport sizes. Because of this, absolute units are used when the size of the web page is known and will remain constant.
---------------->> Relative values.
* Relative values are defined ‘in relation’ to the other elements present inside the parent element. Additionally, they are defined ‘in relation’ to the viewport or the size of the visible web page. Given the dynamic nature of web pages today and the variable size of devices in use, relative units are the go-to option in many cases.
em Font size of the parent where present.
ex x-co-ordinate or height of the font element.
ch Width of the font character.
rem Font size of the root element.
lh Value computed for line height of parent element.
rlh Value computed for line height of root element which is <html>.
vw 1% of the viewport width.
vh 1% of the viewport height.
vmin 1% of the smaller dimension of viewport.
vmax 1% of the larger dimension of viewport.
% Denotes a percentage value in relation to its parent element.
------------------->> Block level elements
* takes entire space of parent and its total heigth.
* a blank line before and after the element.
* Example: div, form, heading.
-------------------->> Inline elements
* appears on same line and doesn't take full space of parent element.
* Example: a, img, input, label, b, i, em, and span.
--------------------->> Specificity hierarchy
CSS has a set of rules that it uses to ‘score’ or assign a certain weight to selectors and this creates a specificity hierarchy. Based on the weights, there are four categories in this hierarchy:
Inline styles
IDs
Classes, attributes, and pseudo-classes
Elements and pseudo-elements
-------------------->> Pseudo selectors
* user-action states:
1: hover
2: active
3: focus
* form-states:
1: disabled and enabled.
2: checked and indeterminate.
3: valid and invalid.
* specific position-based states:
1: first-of-type.
2: last-of-type.
3: nth-of-type()
4: nth-last-of-type()