See also links usability reviews, 250 user feedback and beta launches, 204 and dynamic pseudo-classes, 84, 170... See also Web sitesadding structure to, 50 core components of, 1–3 creati
Trang 1Dynamic HTML, 12
dynamic pseudo-classes, 80, 84, 170, 323
dynamic styles, 80
E
element boxes, 140, 141 See also boxes
Em Calculator, 285
Emastic, 278
embedded styles, 90–91, 94–95, 283
emphasis tag, 76, 78
ems, 236, 285
European mobile devices, 21
Exljbris Font Foundry, 237
external style sheets, 96–103
creating, 98–99
and CSS best practices, 282
importing, 102–103
linking to, 100–101
modular approach to adding, 214
purpose of, 96
strategies for combining, 202
external styles, 90–91, 96
F
feedback
and beta launches, 204
and dynamic pseudo-classes, 84, 170
and link pseudo-classes, 80
making changes based on, 180
and mood boards, 188
fi lter:alpha property, 144, 145
Firebug, 24, 25
Firefox
add-ons, 24–27
and border-radius property, 254
and CSS, 20
as development browser, 24
and downloadable fonts, 230
layout engine, 23
and rounded corners, 174 and shadows, 172 Fireworks, 32, 258
fi xed position type, 160, 161
fi xed vs fl uid layouts, 184–185, 186, 218
.fl a fi les, 4 Flash
as core Web technology, 4 and CSS, 14
delivering video with, 14 and embedded fonts, 230
fl oat property, 146, 147
fl oating elements, 146–147, 322 Flock, 23
fl ourishes, 270
fl uid typography, 232–237
fl uid vs fi xed layouts, 184–185, 186, 218
focus, 84, 170 fold line, 186
font families, 32, 126, 128 See also fonts font-family property, 128, 129, 198, 226
<font-name> variable, 125
font properties, 126–129
font property, 126–127 font-size property, 128, 129 font-style property, 128, 129 font-variant property, 128, 129 font-weight property, 128, 129 fonts See also font families; typography
browser-synthesized, 126 choosing, 234–235 core Web, 226–227 creating faux versions of, 126 downloadable, 230–231, 237
vs font family or typeface, 228
iLife, 228 importance of, 225 Microsoft Offi ce, 228 operating system, 228 setting sizes for, 236, 281, 285 testing, 234
Web-safe, 32, 228–229, 234, 306–308 footers, 160, 268, 281
forms, 266 frameworks, 212–213, 278–279
Trang 2Gecko, 23 gel effect, 252 Georgia font, 226, 227 GIF image format, 168, 258 global navigation menus, 248, 252 Good magazine, 272, 274 Google Chrome, 23 gradients, 136, 260, 264, 266 graph paper, 182
greek text, 196
grid-based layouts, 40, 209, 218–223 See also grids
Grid System, The, 208, 210 grid.css, 219, 221, 223 grids, 190, 209, 210, 218–223, 262–265 guides, 190
H
handheld devices, 118, 282 hard launch, 204
hash mark, 68
<head> tag, 210, 283, 292
header cap image, 268 header tags, 6 headers basic style rule for, 54–55 combining style rules for, 58–59 creating with fi xed elements, 160 declaring multiple styles for, 56–57
for sidebars vs main body, 70
tips for styling, 238–239 headlines, 234
height, fl uid vs fi xed, 184–185, 186 height property, 148–151
Helvetica font, 226 hex color values, 24, 54, 194, 310–315 hiding elements, 144–145
hip hop magazine, 50 horizontal menus, 248, 250
HTML code, for voxLibris, 291–301
as core Web technology, 1, 2 and CSS, 6–9
developer of, 8 and DOM, 4 dynamic, 12 meaning of acronym, 6 purpose of, 2, 6
tags See HTML tags
validating, 275 HTML framework, 212–213 HTML selector, 60–61 HTML tables, 40 HTML tags adding multiple classes to, 66–67 binding styles to, 50
creating basic style for, 50 how CSS acts on, 50 inline styles for, 92–93 purpose of, 6, 50 styling, 60–61 weight of, 114 hypertext links creating, 243 purpose of, 243 styling, 80, 243, 246 underlining, 246
Hypertext Markup Language, 6 See also HTML
I
i love typography, 224, 226 iCab, 23
ID names, 4, 66, 270, 283, 286
ID selector, 68–69, 114
IE See Internet Explorer
ie6.css, 320 iLife fonts, 228 Illustrator, 32 ilovetypography.com, 224, 226 image editors, 32, 258 image fl ashing, 244, 284
Trang 3image swapping, 244
image tiling, 136–137, 190
ImageReady, 192
images
background See background images
embedding directly in page, 257
fl oating, 146–147
transparent, 192, 258–261
<img> tag, 257, 284
Impact font, 226, 227
import rule See @import rule
importance, 120
indents, 130, 132, 200
index.html, 213, 292–294
inherit display type, 142
inherit keyword, 124
inherit position type, 160
inheritance, 106–109
how it works, 106–107
overriding, 108–109
inline-block display type, 142
inline boxes, 140
inline display type, 142
inline elements, 6
inline styles, 90, 91, 92–93, 120, 283
Internet Channel, 23
Internet Explorer (IE) See also specifi c IE
versions
and CSS, 20
and downloadable fonts, 230
and font sizes, 236
and @import rule, 203, 295
layout engine, 23
market share, 18, 20
and opacity, 144
quirks/fi xes, 317–323
version considerations, 19
and Web standards, 44, 317
Internet Explorer 5 (IE5), 318
Internet Explorer 6 (IE6)
and caption-side property, 166
and child/sibling selectors, 76, 86
and conditional styles, 320, 323
and CSS, 20
322 and Doctype switching, 319, 322 and dynamic pseudo-classes, 84, 323 and fi xed elements, 160
fl aws, 20
and inline-block display type, 142 and max/min-height properties, 150, 323 and max/min-width properties, 150, 323
and padding/borders, 158 and PNG image format, 260, 323 and pseudo-elements, 86 and quirks mode, 318, 319, 321 and stair-stepped elements, 322 testing on Macintosh, 22–23 and underscore hack, 158, 260, 321, 323 and Web standards, 44, 317
Internet Explorer 7 (IE7), 20, 44, 76, 84, 166, 317
Internet Explorer 8 (IE8), 20, 44, 166, 254, 317 invisible elements, 144
italic font, 128 italics tags, 8 iteration, 206–207
J
Java, 23 JavaScript
as core Web technology, 1, 2 and CSS, 10–13
and DOM, 4, 10 libraries, 12 purpose of, 2 JavaScript Object Notation, 12 jigsaw.w3.org/css-validator, 274, 276 josbuivenga.demon.nl, 237 JPEGs, 168, 192
jQuery, 12 JSON, 12
Trang 4keywords, 124, 310 KHTML, 23 Koch, Peter-Paul, 318 Konquerer, 23 Krista’s Creations, 13 Kuler, 30, 31
L
launch, site, 204 layout engines, 23
layout grids, 209, 218–223, 297 See also
grids layout.css, 214, 297 layouts, 209–223 adding CSS to, 214–215 default styles for, 216–217 grid-based, 40, 209, 218–223 structure for, 210–215
left position property, 138, 162, 163, 220
legacy browsers, 18
<length> value, 125, 138
Letter-Photo, 13
letter-spacing property, 130, 131
<li> tag, 248
libraries, JavaScript, 12 Lie, Håkon Wium, 8
line-height property, 130, 131
link actions, 82–83 link colors, 82–83 link pseudo-classes, 80, 82 link states, 80–83, 244–245, 246, 298
<link> tag, 90, 96, 100, 102, 282
links creating, 243
in printed Web pages, 281 purpose of, 243
styling, 80, 243, 246 underlining, 246 Linux, 20
list element tags, 6
list-item display type, 142 list-style-image property, 168, 169 list-style-position property, 168, 169 list-style property, 168, 169 list-style-type property, 168, 169
list tags, 248 lists, 168–169, 240 Lobo, 23
logos, 214, 260, 266–267, 270, 284 Lorem Ipsum text, 196
M
Macintosh code editors, 28, 29 core Web fonts, 226 operating system fonts, 228 testing IE6 on, 22–23 text editor, 98 Web browsers, 18, 20–21 Web-safe fonts, 306 MacRabbit, 29 main.css, 215, 295
margin-bottom property, 156 margin-left property, 156 margin property, 156, 157 margin-right property, 156 margin-top property, 156
margins, 154, 156–157, 186, 322
max-height property, 150, 151, 323 max-width property, 150, 151, 323
media types, 94, 118–119, 120 menus, 160, 240, 248–251 meta information, 210 Microsoft
Internet Explorer See Internet Explorer
Offi ce, 228 Visio, 182 and Web standards, 44 Word, 98
min-height property, 150, 151, 323 min-width property, 150, 151, 323
Trang 5modules, 222, 268
mood boards, 188–189
MooTools, 12
Mosaic, 8
mouse pointer, 170
-moz-border-radius property, 174, 175
-moz-box-shadow property, 172, 173
Mozilla
and CSS standards, 44
Firefox add-ons, 24–27
MSN Explorer, 23
myths, CSS, 35–45
N
navigation, 243–255
and anchor tags, 244
buttons, 252–254
and CSS sprites, 244, 284
hiding in printed Web page, 281
links, 246–247
menus, 248–251
navigation.css, 214, 298–299
Netscape, 23
NewsGator, 28
Nintendo DS Browser, 23
no-repeat property, 136, 137
none display type, 142
normal keyword, 124
NotePad, 98
notes, 104–105
<number> variable, 125
numbered lists, 168
O
object IDs, 4
OmniGraffl e, 182
OmniWeb, 23
opacity, color, 310
opacity value, 144, 145
Opera and CSS, 21 and downloadable fonts, 230 layout engine, 23
popularity of, 21 and Web standards, 44 Opera Mini, 23
operating system fonts, 228 optimizing, 286
order, style, 110, 120 ordered lists, 168
outline-color property, 174 outline property, 174, 175 outline-style property, 174 outline-width property, 174
outlines, 174, 175, 223
overfl ow property, 148, 149
P
padding, 154–155, 186, 218, 284
padding-bottom property, 154 padding-left property, 154 padding property, 154, 155 padding-right property, 154 padding-top property, 154
page fl ow, 184–185 page framework, 212
page header tags, 6 See also headers
Palette Grabber, 26 Panic Software, 16, 18, 28 paragraph tags, 6 paragraphs, styling, 86–87, 240 parent-inherited styles, 106, 120
<percentage-box-width+padding> value, 138
<percentage> variable, 125
Photoshop and chrome, 192 color considerations, 190 creating color palette for, 26 low-cost alternative to, 32 Proof Setup options, 190 and transparent PNGs, 192, 258
Trang 6pixels, 285 placeholder content, 196 planning process, 182–191 mood boards, 188–189 page fl ow, 184–185 sketches, 182–183 visual comps, 190–191 wire frames, 186–187 PlayStation, 21
PNG image format, 168, 192, 258–261, 323 point sizes, 281
Portfolio CSS Gallery, 38 position properties, 138, 220 position type, 160–161 Presto, 23
print, adapting designs for, 118, 281, 282 print process, 36
printer-friendly Web pages, 118 programming languages, 36 properties, style rule, 52 property shortcuts, 200, 286 prototypes, 180, 196–203 pseudo-classes, 80, 82, 170, 323 pseudo-elements, 80, 86 public domain books, 292 pull quotes, 146
Q
quirks mode, 318, 319, 321 Quirks Mode site, 318 quotes, 78–79, 146, 240
R
readmore class, 246
RealPlayer, 23
relative position type, 160, 161
relative URLs, 309 rendering engines, 23
repeat property, 136, 137
repeat-y property, 136, 137
RGB Alpha color format, 310 RGB proof setup, 190 RGB values, 24, 54, 194, 285, 310–315
right position property, 138, 220 right property, 162, 163
Rijksmuseum Web site, 242, 244 rounded corners, 174, 175, 190, 254, 258 rows, 212, 218–219, 264–265, 297 rules of style, 50–59
basic style rules, 54–55 combining rules, 58–59 declaring styles, 56–57 how they work, 50 limiting scope of, 285 parts of style rules, 52–53
S
Safari and CSS, 21 and design enhancements, 254
as development tool, 21 and downloadable fonts, 230 layout engine, 23
and rounded corners, 174 and shadows, 172 and Web standards, 44 screen media type, 118 scroll lines, 186
search engine optimization, 283 See also SEO
sections, 212, 222–223, 268–271, 297 selector declarations, 54
selectors, 60–75 adjacent, 78 child, 76 class, 62–67 defi ned, 52 descendent, 72–75 HTML, 60–61 sibling, 76, 78
semantics, 89–121 See also CSS vocabulary
adding notes to CSS, 104–105
Trang 7determining CSS rule’s weight, 114–115
embedding styles in Web page, 94–95
external styles in Web site, 96–103
importance, 116–117
inheritance, 106–109
inline styles for HTML tag, 92–93
media types, 118–119
order of style rules, 110–111
specifi city in style rules, 112–113
where to put style rules, 90–103
semicolon, in selector declarations, 56, 92,
285
SEO, 283, 284
server-side technologies, 2
shadows, 172–173, 190
Shiira, 23
shorthand properties, 200, 286
sibling selectors, 76, 78
sidebars, 70, 146
site navigation, 243–255
and anchor tags, 244
buttons, 252–254
and CSS sprites, 244, 284
hiding in printed Web page, 281
links, 246–247
menus, 248–251
site-planning process, 182–191
mood boards, 188–189
page fl ow, 184–185
sketches, 182–183
visual comps, 190–191
wire frames, 186–187
site plans, 180 See also site-planning process
sketches, 182–183
soft launches, 204
Sony PlayStation, 21
Speaking In Styles Web site, 2, 172, 228, 291
specifi city, 112–113, 120
sprites, CSS, 168, 192, 244–245, 284
stacking order, 164
stair-stepped elements, 322
states, link, 80–83, 244–245, 246
static position type, 160, 161
strike-through effect, 130
style guides, 194–195 style rules, 50–59 basic, 54–55 combining, 58–59 determining weight of, 114–115 how they work, 50
parts of, 52–53 specifi city in, 112–113 where to put, 90–103 style sheet languages, 36
style sheets See also CSS
combining, 202–203 creating, 98–99
external See external style sheets
genesis of, 8 importing, 102–103 linking to, 100–101 for mobile devices, 280 tailoring for specifi c media types, 118–119
<style> tag, 90, 94
styles applying to entire Web site, 96 based on where something is, 72–73 browser-default, 106, 110, 120, 216–217, 296
browser-inherent, 6 for children, 76–77 conditional, 320, 323
in context, 70–79 declaring, 56–57 default, 106, 110, 120, 194, 216–217 dynamic, 80, 84–85
embedded, 90–91, 94–95, 283 external, 90–91, 96–103 forcing application of, 116 framework, 279
inherited, 106 inline, 90, 91, 92–93, 120, 283 for link actions, 82–83 order of priority for, 120–121 organizing, 200–201 overriding, 108, 110, 116 parent-inherited, 106, 120 for parts of paragraph, 86–87
Trang 8for siblings, 78–79 for special cases, 80–87 text, 130–133
SUMO Paint, 32
syntax, 49 See also CSS syntax
T
T-shirt company, 88, 90 table-based layouts, 40 table tags, 6
tables, 166–167 tags
adding multiple classes to, 66–67 binding styles to, 50
creating basic style for, 50 how CSS acts on, 50 inline styles for, 92–93 purpose of, 6, 50 styling, 60–61 weight of, 114 text
aligning, 130, 132, 133 capitalizing, 130 editing, 98 replacement, 266 sizing, 236 styling, 130–133, 238–241 underlining, 8, 130, 133, 216, 246 using placeholder, 196
text-align property, 132, 133 text-decoration property, 132, 133
text editors, 98
text-indent property, 132, 133
text replacement, 266
text-shadow property, 172, 173
text-spacing properties, 130 text styles, 130–133, 238–241
text-transform property, 132, 133
TextEdit, 98 thegridsystem.org, 210 Threadless, 88, 90 tiling, image, 136–137, 190
Times New Roman font, 226, 227 top-level navigation menus, 248, 280
top position property, 138, 162, 163, 220
TopStyle, 28 transparent images, 192, 258–261
transparent keyword, 124
Trebuchet MS font, 226, 227 Trident, 23
True Type fonts, 230 tutorials, Web design, 34 Twistori, 251
typefaces, 228, 234–235 See also fonts;
typography TypeTester, 32, 33 Typographic Desk Reference, The, 224 typography, 225–241
as component of style guide, 194 core Web fonts, 226–227 downloadable fonts, 230–231
fl uid, 232–237 improvements in Web, 32 previewing, 32
styling text, 238–241 Web-safe fonts, 32, 228–229, 234, 306–
308 Typogridphy, 278
U
UGSMAG, 50, 71 underlining, 8, 130, 133, 216, 246 underscore hack, 158, 260, 276, 321, 323
Uniform Resource Locators, 309 See also
URLs Unix, 20, 21 unordered lists, 168 Urban Dictionary, 122, 124
<url> variable, 125 URLs, 125, 281, 309 See also links
usability reviews, 250 user feedback and beta launches, 204 and dynamic pseudo-classes, 84, 170
Trang 9making changes based on, 180
and mood boards, 188
user interface, 192
UXBooth, 250
V
Validation Service, W3C CSS, 274, 276, 277,
321
validator.w3.org, 275
values
as component of style rules, 52
types of, 124–125
variables, 125
Verdana font, 226, 227
vertical-align property, 132, 133
vertical menus, 248, 251
video, 14
visibility, 144–145
visibility value, 144, 145
visited state, 80, 81, 82, 244, 298
visual comps
adjusting margins/padding in, 186
comparing with actual Web site, 26
cutting chrome from, 192
and fl uid typography, 232
purpose of, 190
and site-planning process, 180
static vs dynamic, 82
tips for creating, 190
voxLibris
code for, 291–301
inspiration for, 292
as model for design process, 180
W
W3C
and CSS, 44
CSS Validation Service, 274, 276, 277, 321
CSS Work Group, 158
meaning of acronym, 44 Web applications, 30–33
Web browsers, 18–23 See also specifi c
browsers alternatives to leading, 22, 23 and CSS, 18, 20–21, 44, 317 and design enhancements, 172, 254 and downloadable fonts, 230 and font sizes, 236
graphics-based, 8 layout engines for, 23 legacy, 18
Macintosh, 18, 20–21 most commonly used, 18 and outlines, 174 and rounded corners, 174 and shadows, 172 viewing Web page on different, 19 Windows, 20–21
Web design, 179–207 adapting for print, 281 best practices, 284 and browser viewport, 150 building site, 192–203 choosing tools for, 17 deploying site, 204–205
vs designing for other media, 150, 180
dynamic nature of, 180
as iterative process, 180, 206–207 making CSS central part of, 179 overview of process, 180–181 page-fl ow considerations, 184–185 planning phase, 182–191 source of news and updates on, 2 standards, 275
testing, 196
tools See Web designer’s toolbox
Web Designer Wall, 34, 36 Web designer’s toolbox, 17–34 code editors, 28–29 design ideas, 34 Firefox add-ons, 24–27 online tools, 30–33 tutorials, 34
Trang 10Web pages See also Web sites
adding structure to, 50 core components of, 1–3 creating printer-friendly version of, 118 embedding styles in, 94–95
fl uid vs fi xed, 184–185, 218
meta information for, 210 planning structure of, 186 setting default styles for, 210, 216–217
“skin” of, 257 See also chrome
structural elements, 210 tailoring for specifi c media, 118–119 viewing on different browsers, 19 viewing on mobile devices, 280 viewing printed, 281
Web-safe fonts, 32, 228–229, 234, 306–308
Web sites See also Web pages
analyzing CSS for, 29 applying styles to entire, 96 choosing color palette for, 30
choosing fonts for, 225, 234–235 See also
fonts deploying, 180
designing See Web design getting user feedback on See feedback navigation for See navigation
planning, 180, 182–191 testing, 180, 196
vs Web applications, 30
Web standards, 275 Web technologies, 2, 4 Web typography, 225–241
as component of style guide, 194 core Web fonts, 226–227 downloadable fonts, 230–231
fl uid, 232–237 improvements in, 32 previewing, 32 styling text, 238–241 Web-safe fonts, 32, 228–229, 234, 306–
308 Webdings font, 226, 227 WebKit, 23
-webkit-border-radius property, 174, 175
weight, rule, 112, 114–115
white-space property, 130, 131 width, fl uid vs fi xed, 184–185, 186, 218 width property, 148–151
Wii, 23 Windows code editors, 28, 29 core Web fonts, 226 operating system fonts, 228 text editor, 98
Web browsers, 20–21 Web-safe fonts, 306 wire frames, 182, 186–187 Word, Microsoft, 98 word processors, 98
word-spacing property, 130, 131
WordPress, 39
World Wide Web Consortium, 44 See also W3C
X
XML, 12, 14
Y
YAML, 278 YUI Grids, 278
Z
z-index property, 164–165
Zen Garden, CSS, 40, 42–43