-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathnotes.txt
109 lines (86 loc) · 3.02 KB
/
notes.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
Block elements:
h1-h6, p, div, blockquote, pre, br
<div> is a generic box. they stack vertically on the page.
<pre> is preformatted text. lines are not wrapped.
probably <code> as well
<br> doesn't need a closing tag anymore.
<p> autocloses, too.
<img> tags autoclose.
Inline elements
span, b, i, s, u, cite
<s> (strikethrough)
<cite> - citation
these tags all have special meaning for speech readers.
<em> is emphasized when it's spoken out loud.
<b>, <i>, et al are ignored by assistive tech.
Lists
ul, ol, dl; li, dt, dd
<ul> - bulleted list
<ol> - ordered/numbered list
<dl> - list of definitions
closing </li>'s are no longer needed.
Links
a
CSS - Cascading Style Sheets
selectors match parts of HTML pages.
properties change how what is selected is drawn by the browser.
p { font: 12px/14px sans-serif }
"p" is the selector (the tag)
"font: 12px/14px sans-serif" is a set of properties that set a font and
a font size on all instances of that selector.
means:
font-style: normal
font-size: 12px
line-height: 14px
font-family: sans-serif
value/value: height of text/height of line
always assumes 96 pixels/inch (thank you, Microsoft)
out of two dozen selectors, you really only need to know 3.
classes are ways of grouping kinds of blocks of HTML.
body {
font-family: Ariel;
font-size: 12pt;
color: black;
}
h1 { color: blue }
.intro { font-style: italic }
<body>
<h1>Hello, world.</h1>
<p class="intro">This is my first paragraph.</p>
<p class="intro" id="part2">This is my second paragraph.</p>
</body>
If the browser encounters a CSS selector that it doesn't understand (like IE9
running into an rgba(x, y, z, alpha) directive) it silently ignores it.
Web-safe colors are no longer a thing.
They were from a time when 8-bit colour depth was the most common limit, and
you had to pick from a color palette that was guaranteed to render on
everything.
Classes (like intro) are specified in CSS with dots:
.intro { color: blue }
<section id="intro">
Stuff...
</section>
#intro p { font-style: italic }
"For every <p> inside the section #intro..."
Style elements cascade - they stack from first to most recently applied.
Browser style sheet -> user style sheet -> author style sheet -> inline styles
Users can supply default style sheets in their browsers.
Specificity - Most specific rule gets applied. If two or more rules are
equally specific, the last one wins.
local style attribute: weight == 1000
ID seletor: weight == 100
attributes and pseudo-classes: weight == 10
element names and pseudo-elements: weight == 1
Twitter Bootstrap
Library of CSS and Javascript to give you a basic framework.
Responsiveness built in.
grid system for positioning blocks
Defaults to 12 columns across, like a newspaper.
<p class="col-lg-4">
<p class="col-lg-10 cold-md-10 col-xs-12">
lg == large screen
md == mobile device (tablet)
sm == small (phone in landscape mode)
xs == very small (phone in vertical mode)
# is the number of columns
div's inside of a Bootstrap page get subdivided into 12 columns themselves.