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

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

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

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

: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