COMPED9 Module 6 HTML and CSS The Complete Reference

Download COMPED9 Module 6 HTML and CSS The Complete Reference

Post on 19-Aug-2015

12 views

Category:

Education

1 download

Embed Size (px)

TRANSCRIPT

<p> (Document Body) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 <br> (Line Break) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 (Form Button) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 (Canvas for Drawing) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 (Table Caption) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 </p> <div> (Center Alignment) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 (Citation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 (Code Listing) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 (Table Column) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 (Table Column Group) . . . . . . . . . . . . . . . . . . . . . . . . . . 216 (Command) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 (Comment Information) . . . . . . . . . . . . . . . . . . . . . . . . . 220 (List of Prell Data) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 (Denition Description in a Denition List or Content in Details or Figure) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 (Deleted Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 (Additional Details) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 (Denition) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 <ul><li> (Directory List) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 </li></ul><div> (Division) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 (Denition List) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 (Term in a Denition List or Caption in Figure or Details) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 (Emphasis) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 (Embedded Object) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 (Form Field Grouping) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 (Figure) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 (Font Denition) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 (Footer) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 (Form for User Input) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 (Window Region) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 (Frameset Denition) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 through (Headings) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 (Document Head) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 (Header) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 (Header Group) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 11. (Horizontal Rule) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 (HTML Document) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 <i> (Italic) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 (Inline Frame) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 (Inow Layer) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 (Image) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 (Input Form Control) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 (Inserted Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 (Index Prompt) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 (Keyboard Input) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 (Key Pair Generation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 (Form Control Label) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 (Positioned Layer) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 (Descriptive Legend) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 (List Item) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 (Link to External Files or Set Relationships) . . . . . . . . . . . . . 303 (Code Listing) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 (Client-Side Image Map) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 (Marked Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 (Marquee Display) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 </i><i> (Menu List or Command Menu) . . . . . . . . . . . . . . . . . . . . . 318 (Meta-Information) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 (Scalar Gauge) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 (Multiple Column Text) . . . . . . . . . . . . . . . . . . . . . . . . . . 325 (Navigation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326 (No Line Breaks) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327 (No Embedded Media Support) . . . . . . . . . . . . . . . . . . 328 (No Frame Support Content) . . . . . . . . . . . . . . . . . . . . 329 (No Script Support Content) . . . . . . . . . . . . . . . . . . . . . . 330 (Embedded Object) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 </i><i> (Ordered List) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 (Option Grouping) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 (Option in Selection List) . . . . . . . . . . . . . . . . . . . . . . . . . . 339 (Form Output) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341 </i><p><i> (Paragraph) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343 (Object Parameter) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345 (Plain Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347 (Preformatted Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348 (Progress Indicator) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350 (Quote) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351 (Ruby Parentheses) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353 (Ruby Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355 (Ruby Annotation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357 (Strikethrough) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 (Sample Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360 </i></p><i> 12. xii HTML &amp; CSS: The Complete Referencexii HTML &amp; CSS: The Complete Reference (Extra Space) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 (Text Span) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374 (Strikeout Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376 (Strong Emphasis) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377 13. Document Structure and CSS Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 !important Override . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470 Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470 Element Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471 id Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471 class Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 Contextual Selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476 Attribute Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479 Pseudo-Element Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484 Pseudo-Class Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487 CSS Properties Preview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500 Measurements and Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502 CSS and (X)HTML Elements Fundamentals . . . . . . . . . . . . . . . . . . . . . . . . . . 506 Physical Markup and Overriding Expected Results . . . . . . . . . . . . . . 506 Are </i><div><i> and the Most Popular Tags? . . . . . . . . . . . . . . . . . 507 Changing Element Types with display . . . . . . . . . . . . . . . . . . . . . . . . . 508 Controlling White Space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512 Major Themes of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513 Separation of Structure and Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514 CSS: More Appropriate and Powerful for Presentation . . . . . . . . . . . 516 Cross-Browser CSS Madness . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517 Myths and Misconceptions Related to CSS . . . . . . . . . . . . . . . . . . . . . 517 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519 5 CSS Syntax and Property Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521 CSS Versions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521 CSS Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521 Style Inclusion Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524 Linked Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524 Embedded Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526 Imported Styles@import . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526 Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527 CSS Measurements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527 CSS Strings and Keywords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529 Counters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530 CSS Color Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530 CSS Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533 Miscellaneous CSS Constructs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539 /* comments */ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539 @charset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540 @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540 @media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541 @page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541 !important . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542 CSS1 and CSS 2.1 Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542 background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543 background-attachment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543 background-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544 background-image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544 background-position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545 C o n t e n t s xiii 14. xiv HTML &amp; CSS: The Complete Referencexiv HTML &amp; CSS: The Complete Reference background-repeat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546 border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547 border-bottom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547 border-bottom-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548 border-bottom-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548 border-bottom-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548 border-collapse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549 border-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549 border-left . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550 border-left-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551 border-left-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551 border-left-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552 border-right . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552 border-right-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552 border-right-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553 border-right-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553 border-spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553 border-style . . . . . . . . . . . . . . . . . . . . . . . ....</i></div></div></div>