Tài liệu Pro CSS Techniques- P9 ppt

font-style property, 327
font-variant property, 327
font-weight property, 328
generated content
content property, 345–346
counter-increment property, 346
counter-reset property, 346
cursor property, 347
overview, 345
quotes property, 346
lists
list-style property, 343
list-style-image property, 344
list-style-position property, 343
list-style-type property, 343
overview, 342
overview, 326
positioning
clear property, 340
display property, 338
float property, 339
overview, 338
position property, 339
top, right, bottom, left property, 339
visibility property, 340
z-index property, 340
printing
orphans property, 349
overview, 347
page-break-after property, 348
page-break-before property, 347

page-break-inside property, 349
widows property, 349
shorthand properties, 77–78
tables
border-collapse property, 344
border-spacing property, 344
caption-side property, 345
empty-cells property, 344–345
overview, 344
table-layout property, 345
text-decoration property, 328
text-transform property, 328
type spacing and alignment
direction property, 330
letter-spacing property, 330
line-height property, 329
overview, 328
text-align property, 329
text-indent property, 329
unicode-bidi property, 330
vertical-align property, 330
white-space property, 328–329
word-spacing property, 329
property index, 355
property values
colors
color name, 324
hexadecimal value, 323
overview, 323
RGB value, 324

factors and integers, 323
fonts, 324
inherit keyword, 325
length
absolute units, 324
overview, 324
relative units, 325
overview, 323
percentages, 325
position keywords, 325
properties that accept multiple
instances, 325
URLs, 325
property/value pairing, 123
pseudo-class selectors, 31–32, 353
pseudo-classes, 38, 360
pseudo-elements, 38, 353, 360
:before and :after pseudo-element,
35–36
:first-letter pseudo-element, 33–35
:first-line pseudo-element, 32–33
overview, 32
Python language, 75
■
Q
q element, 4
quotation marks, 194
quotations, 211, 346
quotes property, 346
■

R
radio buttons, 248, 252
red, green, and blue (RGB) value, 323
reduction, 299
reflection images, 167
reformatting algorithms, 70
rel attribute, 13
Related Links list, 266
relative units, 324–325
■
INDEX372
732XchIDXb.qxd 11/1/06 4:00 PM Page 372
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
relative-size keywords, 203–204
remote image swaps, 180–183
rendering engine, 61, 87
replacement image, 212
reset style sheet, 237
reset.css file, 83
resize fonts, 203
resolution-dependent layouts, 132–133
RGB (red, green, and blue) value, 323
RGB value, 324
Richard Rutter's 62.5 percent hack, 204
right property, 339, 359
right-aligned bullets, 262
root-relative paths, 301
Rubin, Dan, 49
Rundle image replacement, 212–213
■

S
Safari, 295
Safari browser, 61, 86
Safari Tidy plug-in, 296
samp element, 4
sans serif typefaces, 193, 208
scaling factor, 203
scope, 222–223
scores, 47
scoring, 47–48
and !important declaration, 49
and inline styles, 48–49
and matching selectors, 48
screen magnification tool, 160
screen media type, 278
screen type, 12, CSS Media
search box, positioning, 170–171
search engines, 155
section entry page, 143–144
selector targets, 351
selectors, 14, 301
adjacent sibling selectors, 20, 31
attribute selectors
overview, 20–21
particular attribute selector, 22
presence of, 21
values, 21–22
child selectors, 19–20, 30–31
class selectors, 15–16
combined selectors, 28–29

descendant selectors, 18–19, 30
element selectors, 15, 30
ID selectors, 17
overview, 14, 27
pseudo-class selectors, 31–32
pseudo-elements
:before and :after pseudo-element,
35–36
:first-letter pseudo-element, 33–35
:first-line pseudo-element, 32–33
overview, 32
simple selectors, 28
universal “star” selector, 29
semantic markup, 2. See also (X)HTML
semantic table code, 225
separate table borders, 229
serif fonts, 285
serif typeface, 192, 208
set solid typeface, 201
Shift key, 75
shorthand properties, 77–78
sibling combinators, 28
sibling selectors, 210
simple selectors, 28
site hierarchy, 175
site search, 168–169
sitewide header links, 168–169
sizing type
absolute-size keywords, 202
overview, 201–202

relative-size keywords, 203
Richard Rutter's 62.5 percent hack,
204
using percentages and ems, 204
using pixels, 203
slash (/), 78
slash-star, star-slash syntax, 78
Small Screen Rendering (SSR), 69
small-caps style, 327
Source Code/Download section, 39, 100
source order, 88, 300
span element, 5, 180, 288
specificity, 27, 300–301
specificity chart
attribute selectors, 352
descendant, child, and adjacent sibling
selectors, 352
element selectors, 351
overview, 351
pseudo-class selectors, 353
pseudo-elements, 353
splash page, 141–143
sprites, 179–183
■
INDEX 373
Find it faster at />732XchIDXb.qxd 11/1/06 4:00 PM Page 373
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
square brackets ([ ]), 20
src attribute, 21
SSR (Small Screen Rendering), 69

standards compliance mode, 202
standards-compliant browser, 69
Star HTML hack, 91–92
static state, 265
storage, style
overview, 74
path to CSS, 74
using multiple files as one style sheet,
74–75
strokes, 192
strong element, 4, 19, 203, 351
structure layer, 9
style attribute, 48
style element, 13–14
style switcher tool, 160
styles.css file, 11
subheadings. See headings
and subheadings
submit button, 248
subnav, adding, 318–320
summary attribute, 225
syntax validators, 76
system font keywords, 324
■
T
tabbed navigation, CSS–based
creating markup, 172
overview, 172
positioning links, 172
styling links, 173–174

table element, 5, 219, 230
table elements, 250
table properties
border-collapse property, 344
border-spacing property, 344
caption-side property, 345
empty-cells property, 344–345
overview, 344
table-layout property, 345
<table> tag, 220
table-layout property, 345, 360
table-related elements, 219
tables
adding style
overview, 227–229
styling caption, 233
table borders, 229–231
zebra tables, 232–233
markup
abbr attribute, 221
assigning scope, 222–223
caption element, 220
columns, 224–225
example of, 225–226
overview, 219–220
scope attribute, 221–222
summary attribute, 225
th element, 221
thead, tfoot, and tbody elements,
223–224

overview, 219
tabular data, 219
tag selectors, 15, 30
tagline, positioning, 165–166
target elements, 38
tbody element, 223–224
td element, 220–221
text. See typography
text-align property, 208, 329, 358
text-align value, 116
text-decoration property, 264, 328, 358
text-indent property, 209, 329, CSS
text-intent property, 213, 358
text-shadow property, 358
text-transform property, 205, 328, 358,
CSS
tfoot element, 4, 223–224
th element, 4, 221
thead element, 4, 223–224
three-column layout method, 309
three-pixel jog, 304–306, 317
tilde-equal (~=) indicator, 22
title attribute, 13
titling groups of links, 268–270
top property, 339, 359
tr element, 220, 224
translating spec, 38
transparent elements, 340
transparent value, 334
“trigger” point, 132, 279

tty type, 12, 278
tv type, 12, 278
type attribute, 11, 248
type selectors, 30
type spacing and alignment properties
direction property, 330
letter-spacing property, 330
line-height property, 329
overview, 328
■
INDEX374
732XchIDXb.qxd 11/1/06 4:00 PM Page 374
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
text-align property, 329
text-indent property, 329
unicode-bidi property, 330
vertical-align property, 330
white-space property, 328–329
word-spacing property, 329
type styling, 227
typeface selection
Microsoft Vista Fonts, 198
overview, 194
typeface problem on web, 195, 197–198
using generic font families, 194
using specific typeface, 194–195
typography
font property values
generic font families, 324
overview, 324

system font keywords, 324
font styles, 204–205
font variants, 205–206
font weights
assigning with keywords, 200
assigning with numerical values,
200–201
bolder and lighter values, 201
overview, 200
headings and subheadings
example, 213–216
header margins, 211
image replacement, 212–213
overview, 211
overview, 191–192
setting blocks of text
block paragraphs vs. traditional
paragraphs, 209
indicating new paragraphs, 209–211
kerning, 208
leading (or line-height), 207–208
line length, 206–207
overview, 206
setting quotations, 211
text alignment and justification,
208–209
sizing type
absolute-size keywords, 202
overview, 201–202
relative-size keywords, 203

Richard Rutter's 62.5 percent hack,
204
using percentages and ems, 204
using pixels, 203
transforming text, 205
typeface classification
cursive, 193
fantasy, 193–194
monospace, 193
overview, 192
sans serif, 193
serif, 192
typeface selection with CSS
Microsoft Vista Fonts, 198
overview, 194
typeface problem on web, 195,
197–198
using generic font families, 194
using specific typeface, 194–195
typography.css style sheet, 75
■
U
ul element, 17, 19, 187, 310
ul li#description p:first-letter pseudo-
element, 353
uls element, 54
underscore (_) character, 75
Unicode standard bidirectional rendering
algorithm, 330
unicode-bidi property, 330

Universal Child Replacement technique,
29
universal selector (*), 29, 47, 91, 351
URLS
inserting in printed pages, 287–289
using JavaScript and DOM to write out,
288–289
user agent, 194, 277
■
V
validating
markup, 297
styles, 297
validator script, 3
values, 14
vertical navigation links
complete page, 266–267
link hover behavior, 265–266
overview, 262–264
padding out links, 264
titling and hiding groups of links,
268–270
vertical-align property, 170, 330, 359
visibility property, 340, 359
VisiBone, 197
■
INDEX 375
Find it faster at />732XchIDXb.qxd 11/1/06 4:00 PM Page 375
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
:visited class, 23

:visited property, 360
Vista Fonts, Microsoft, 198
visual presentation, 1
■
W
warning class, 15
.warning selector, 16
.warning.help selector, 16
Web Developer Extension (Firefox)
add-on, 294–295
Web Developer Toolbar (Internet Explorer
or IE) add-on, 296
web_typography.html file, 213
WebKit, 61
whitespace, 30
whitespace bug, 307–308, 319
white-space property, 328–329, 358
widows property, 349
width of pages. See page width
width property, 206–207, 336, 357
Windows Update, 87
word-spacing property, 329, 358
World Wide Web Consortium
(W3C), 2
wrapper container, 123
wrapper element, 95
writing direction, 330
■
X
X-grade, 68

(X)HTML, 69
applying, 3
avoiding <div>[..1], 5
avoiding class attribute, 6–7
avoiding nonstructural tags, 5
creating markup, 4–5
for forms
fieldset and legend elements, 238
label element, 239
our example form, 239–241
overview, 238
overview, 2–3
tables, 1
XHTML 1.0 Strict, 9
XHTML 1.0 Transitional, 9
XSLT (Extensible Stylesheet Language
Transformations), 7
■
Y
Yahoo! Developer Network, 66
Yahoo! User Interface library, 83, 237
■
Z
zebra tables, 232–233
z-index property, 340, 359
zoom layout, 160
■
INDEX376
732XchIDXb.qxd 11/1/06 4:00 PM Page 376
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.