级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。
Table of Contents
The Missing Credits ................................................................................. xiii
Introduction................................................................................................. 1
Part One: CSS Basics
Chapter 1: Rethinking HTML for CSS...................................................... 17
HTML: Past and Present .......................................................................................................................... 17
HTML Past: Whatever Looked Good ............................................................................................... 18
HTML Present: Scaffolding for CSS ................................................................................................. 19
Writing HTML for CSS .............................................................................................................................. 20
Think Structure ................................................................................................................................... 20
Two New HTML Tags to Learn ......................................................................................................... 20
HTML to Forget .................................................................................................................................. 22
Tips to Guide Your Way .................................................................................................................... 23
The Importance of the Doctype ............................................................................................................. 26
Getting the Most out of Internet Explorer 8 ......................................................................................... 28
Chapter 2: Creating Styles and Style Sheets .......................................... 31
Anatomy of a Style ................................................................................................................................... 31
Understanding Style Sheets .................................................................................................................... 34
Internal or External—How to Choose .............................................................................................. 34
Internal Style Sheets ................................................................................................................................ 35
External Style Sheets ................................................................................................................................ 36
Linking a Style Sheet Using HTML ................................................................................................... 37
Linking a Style Sheet Using CSS ...................................................................................................... 38
Download at Boykma.Com
vi CSS: The Missing Manual
Tutorial: Creating Your First Styles ........................................................................................................ 39
Creating an Inline Style ..................................................................................................................... 39
Creating an Internal Style Sheet ...................................................................................................... 40
Creating an External Style Sheet ...................................................................................................... 43
Chapter 3: Selectors: Identifying What to Style.....................................49
Tag Selectors: Page-Wide Styling ........................................................................................................... 50
Class Selectors: Pinpoint Control ........................................................................................................... 51
ID Selectors: Specific Page Elements ..................................................................................................... 53
Styling Groups of Tags ............................................................................................................................. 55
Constructing Group Selectors .......................................................................................................... 56
The Universal Selector (Asterisk) ..................................................................................................... 56
Styling Tags Within Tags .......................................................................................................................... 57
The HTML Family Tree ...................................................................................................................... 57
Building Descendent Selectors ......................................................................................................... 58
Pseudo-Classes and Pseudo-Elements .................................................................................................. 61
Styles for Links ................................................................................................................................... 61
Styling Paragraph Parts ..................................................................................................................... 62
More Pseudo-Classes and -Elements .............................................................................................. 62
Advanced Selectors .................................................................................................................................. 65
Child Selectors .................................................................................................................................... 66
Adjacent Siblings ................................................................................................................................ 66
Attribute Selectors .............................................................................................................................. 67
Tutorial: Selector Sampler ....................................................................................................................... 70
Creating a Group Selector ................................................................................................................ 72
Creating and Applying a Class Selector .......................................................................................... 73
Creating a Descendent Selector ....................................................................................................... 76
Creating and Applying an ID Selector ............................................................................................. 77
Finishing Touches .............................................................................................................................. 79
Chapter 4: Saving Time with Style Inheritance...................................... 81
What Is Inheritance? ................................................................................................................................ 81
How Inheritance Streamlines Style Sheets ........................................................................................... 83
The Limits of Inheritance ......................................................................................................................... 83
Tutorial: Inheritance ................................................................................................................................. 85
A Basic Example: One Level of Inheritance .................................................................................... 85
Using Inheritance to Restyle an Entire Page .................................................................................. 86
Inheritance Inaction ........................................................................................................................... 89
Chapter 5: Managing Multiple Styles: The Cascade .............................. 91
How Styles Cascade ................................................................................................................................. 92
Inherited Styles Accumulate ............................................................................................................. 92
Nearest Ancestor Wins ...................................................................................................................... 93
The Directly Applied Style Wins ....................................................................................................... 93
One Tag, Many Styles ........................................................................................................................ 94
Download at Boykma.Com
Table of Contents vii
Specificity: Which Style Wins .................................................................................................................. 96
The Tiebreaker: Last Style Wins ....................................................................................................... 97
Controlling the Cascade .......................................................................................................................... 99
Changing the Specificity ................................................................................................................... 99
Selective Overriding ........................................................................................................................ 100
Starting with a Clean Slate ............................................................................................................. 101
Tutorial: The Cascade in Action ........................................................................................................... 103
Resetting CSS and Styling from Scratch ........................................................................................ 103
Creating a Hybrid Style ................................................................................................................... 105
Overcoming Conflicts ...................................................................................................................... 106
Part Two: Applied CSS
Chapter 6: Formatting Text .....................................................................113
Formatting Text ...................................................................................................................................... 113
Choosing a Font ............................................................................................................................... 115
Adding Color to Text ....................................................................................................................... 118
Changing Font Size ................................................................................................................................ 119
Using Pixels ....................................................................................................................................... 120
Using Keywords, Percentages, and Ems ....................................................................................... 121
Formatting Words and Letters ............................................................................................................. 124
Italicizing and Bolding ..................................................................................................................... 124
Capitalizing ....................................................................................................................................... 125
Decorating ........................................................................................................................................ 125
Letter and Word Spacing ................................................................................................................ 127
Formatting Entire Paragraphs .............................................................................................................. 128
Adjusting the Space Between Lines .............................................................................................. 128
Aligning Text ..................................................................................................................................... 130
Indenting the First Line and Removing Margins ......................................................................... 130
Formatting the First Letter or First Line of a Paragraph ............................................................. 132
Styling Lists .............................................................................................................................................. 134
Types of Lists .................................................................................................................................... 134
Positioning Bullets and Numbers .................................................................................................. 135
Graphic Bullets ................................................................................................................................. 137
Tutorial: Text Formatting in Action ...................................................................................................... 138
Setting Up the Page ......................................................................................................................... 138
Formatting the Headings and Paragraphs ................................................................................... 140
Formatting Lists ................................................................................................................................ 143
Fine-Tuning with Classes ................................................................................................................ 144
Adding the Finishing Touches ........................................................................................................ 146
Download at Boykma.Com
viii CSS: The Missing Manual
Chapter 7: Margins, Padding, and Borders .......................................... 151
Understanding the Box Model .............................................................................................................. 151
Control Space with Margins and Padding .......................................................................................... 153
Margin and Padding Shorthand .................................................................................................... 155
Colliding Margins ............................................................................................................................. 155
Removing Space with Negative Margins ...................................................................................... 156
Displaying Inline and Block-Level Boxes ...................................................................................... 158
Adding Borders ....................................................................................................................................... 160
Border Property Shorthand ............................................................................................................ 161
Formatting Individual Borders ....................................................................................................... 162
Coloring the Background ...................................................................................................................... 164
Determining Height and Width ............................................................................................................ 164
Calculating a Box’s Actual Width and Height ............................................................................... 165
Controlling the Tap with the Overflow Property ......................................................................... 167
Wrap Content with Floating Elements ................................................................................................. 169
Backgrounds, Borders, and Floats ................................................................................................. 172
Stopping the Float ............................................................................................................................ 172
Tutorial: Margins, Backgrounds, and Borders .................................................................................... 175
Controlling Page Margins and Backgrounds ................................................................................ 175
Adjusting the Space Around Tags .................................................................................................. 178
Building a Sidebar ............................................................................................................................ 181
Fixing the Browser Bugs .................................................................................................................. 184
Going Further ................................................................................................................................... 186
Chapter 8: Adding Graphics to Web Pages .......................................... 187
CSS and the <img> Tag ......................................................................................................................... 187
Background Images ............................................................................................................................... 188
Controlling Repetition ............................................................................................................................ 193
Positioning a Background Image ......................................................................................................... 194
Keywords .......................................................................................................................................... 194
Precise Values ................................................................................................................................... 196
Percentage Values ............................................................................................................................ 197
Fixing an Image in Place ................................................................................................................. 199
Using Background Property Shorthand .............................................................................................. 199
Tutorial: Enhancing Images .................................................................................................................. 201
Framing an Image ............................................................................................................................ 202
Adding a Caption ............................................................................................................................. 203
Tutorial: Creating a Photo Gallery ....................................................................................................... 206
Adding Drop Shadows .................................................................................................................... 210
Tutorial: Using Background Images ..................................................................................................... 213
Adding an Image to the Page Background ................................................................................... 214
Replacing Borders with Graphics ................................................................................................... 216
Using Graphics for Bulleted Lists ................................................................................................... 218
Giving the Sidebar Personality ....................................................................................................... 219
Going Further ................................................................................................................................... 223
Download at Boykma.Com
Table of Contents ix
Chapter 9: Sprucing Up Your Site’s Navigation....................................225
Selecting Which Links to Style .............................................................................................................. 225
Understanding Link States .............................................................................................................. 226
Targeting Particular Links ............................................................................................................... 227
Styling Links ............................................................................................................................................ 228
Underlining Links ............................................................................................................................. 229
Creating a Button ............................................................................................................................. 231
Using Graphics ................................................................................................................................. 233
Building Navigation Bars ....................................................................................................................... 235
Using Unordered Lists ..................................................................................................................... 235
Vertical Navigation Bars .................................................................................................................. 236
Horizontal Navigation Bars ............................................................................................................ 238
Advanced Link Techniques ................................................................................................................... 244
Big Clickable Buttons ....................................................................................................................... 244
CSS-Style Preloading Rollovers ...................................................................................................... 246
Sliding Doors .................................................................................................................................... 248
Styling Particular Types of Links .................................................................................................... 250
Tutorial: Styling Links ............................................................................................................................ 252
Basic Link Formatting ...................................................................................................................... 252
Adding a Background Image to a Link ......................................................................................... 255
Highlighting Different Links ............................................................................................................ 256
Tutorial: Creating a Navigation Bar ..................................................................................................... 258
Adding Rollovers and Creating “You Are Here” Links ................................................................ 262
Fixing the IE Bugs ............................................................................................................................. 265
From Vertical to Horizontal ............................................................................................................ 266
Chapter 10: Formatting Tables
and Forms ......................................................................................... 271
Using Tables the Right Way .................................................................................................................. 271
Styling Tables .......................................................................................................................................... 273
Adding Padding ................................................................................................................................ 274
Adjusting Vertical and Horizontal Alignment ............................................................................... 274
Creating Borders .............................................................................................................................. 276
Styling Rows and Columns ............................................................................................................. 277
Styling Forms .......................................................................................................................................... 279
HTML Form Elements ...................................................................................................................... 280
Laying Out Forms Using CSS ......................................................................................................... 283
Tutorial: Styling a Table ......................................................................................................................... 284
Tutorial: Styling a Form ......................................................................................................................... 290
Download at Boykma.Com
x CSS: The Missing Manual
Part Three: CSS Page Layout
Chapter 11: Introducing CSS Layout .....................................................299
Types of Web Page Layouts .................................................................................................................. 299
How CSS Layout Works ......................................................................................................................... 301
The Mighty <div> Tag ...................................................................................................................... 302
Techniques for CSS Layout ............................................................................................................. 303
Layout Strategies .................................................................................................................................... 304
Start with Your Content ................................................................................................................... 304
Mock Up Your Design ..................................................................................................................... 305
Identify the Boxes ............................................................................................................................ 305
Go with the Flow .............................................................................................................................. 306
Remember Background Images .................................................................................................... 306
Pieces of a Puzzle ............................................................................................................................. 308
Layering Elements ............................................................................................................................ 308
Don’t Forget Margins and Padding ............................................................................................... 309
Chapter 12: Building Float-Based Layouts ........................................... 311
Applying Floats to Your Layouts .......................................................................................................... 315
Floating All Columns ....................................................................................................................... 315
Floats Within Floats ......................................................................................................................... 317
Using Negative Margins to Position Elements ............................................................................. 318
Overcoming Float Problems ................................................................................................................. 323
Clearing and Containing Floats ...................................................................................................... 323
Creating Full-Height Columns ........................................................................................................ 328
Preventing Float Drops .................................................................................................................... 330
Handling Internet Explorer 6 Bugs ....................................................................................................... 333
Double-Margin Bug ......................................................................................................................... 333
3-Pixel Gaps ...................................................................................................................................... 335
Other IE Problems ............................................................................................................................ 337
Tutorial: Multiple-Column Layouts ...................................................................................................... 338
Structuring the HTML ...................................................................................................................... 338
Creating the Layout Styles .............................................................................................................. 339
Adding Another Column ................................................................................................................. 340
Adding a “Faux Column” ................................................................................................................ 342
Fixing the Width ............................................................................................................................... 344
Tutorial: Negative Margin Layout ........................................................................................................ 345
Centering a Layout .......................................................................................................................... 345
Floating the Columns ...................................................................................................................... 349
Final Adjustments ............................................................................................................................ 352
Download at Boykma.Com
Table of Contents xi
Chapter 13: Positioning Elements on a Web Page...............................355
How Positioning Properties Work ........................................................................................................ 356
Setting Positioning Values .............................................................................................................. 358
When Absolute Positioning Is Relative ......................................................................................... 360
When (and Where) to Use Relative Positioning .......................................................................... 363
Stacking Elements ............................................................................................................................ 365
Hiding Parts of a Page ..................................................................................................................... 367
Powerful Positioning Strategies ............................................................................................................ 367
Positioning Within an Element ....................................................................................................... 369
Breaking an Element Out of the Box ............................................................................................. 370
Using CSS Positioning for Page Layout ......................................................................................... 371
Creating CSS-Style Frames Using Fixed Positioning ................................................................... 375
Tutorial: Positioning Page Elements .................................................................................................... 380
Enhancing a Page Banner ............................................................................................................... 380
Adding a Caption to a Photo .......................................................................................................... 384
Laying Out the Page ........................................................................................................................ 387
Part Four: Advanced CSS
Chapter 14: CSS for the Printed Page ...................................................395
How Media Style Sheets Work ............................................................................................................. 395
How to Add Media Style Sheets ........................................................................................................... 398
Specifying the Media Type for an External Style Sheet .............................................................. 398
Specifying the Media Type Within a Style Sheet ......................................................................... 398
Creating Print Style Sheets .................................................................................................................... 399
Using !important to Override Onscreen Styling .......................................................................... 400
Reworking Text Styles ..................................................................................................................... 400
Styling Backgrounds for Print ........................................................................................................ 402
Hiding Unwanted Page Areas ........................................................................................................ 403
Adding Page Breaks for Printing .................................................................................................... 405
Tutorial: Building a Print Style Sheet ................................................................................................... 406
Remove Unneeded Page Elements ............................................................................................... 406
Adjusting the Layout ....................................................................................................................... 409
Reformatting the Text ...................................................................................................................... 411
Displaying URLs ............................................................................................................................... 412
Chapter 15: Improving Your
CSS Habits..........................................................................................415
Adding Comments ................................................................................................................................. 415
Organizing Styles and Style Sheets ...................................................................................................... 416
Name Styles Clearly ........................................................................................................................ 417
Use Multiple Classes to Save Time ................................................................................................ 418
Organize Styles by Grouping ......................................................................................................... 420
Using Multiple Style Sheets ............................................................................................................ 421
Download at Boykma.Com
xii CSS: The Missing Manual
Eliminating Browser Style Interference ............................................................................................... 423
Using Descendent Selectors .................................................................................................................. 427
Compartmentalize Your Pages ...................................................................................................... 428
Identify the Body .............................................................................................................................. 429
Managing Internet Explorer Hacks ...................................................................................................... 432
Design for Contemporary Browsers First ..................................................................................... 433
Isolate CSS for IE with Conditional Comments ............................................................................ 433
Chapter 16: CSS 3: CSS on the Edge......................................................437
An Overview of CSS 3 ............................................................................................................................ 438
CSS 3 Selectors ....................................................................................................................................... 439
Child Selectors .................................................................................................................................. 439
Type Selectors .................................................................................................................................. 441
Opacity ..................................................................................................................................................... 443
RGBA Color ............................................................................................................................................. 445
Simulating RGBA in Internet Explorer ........................................................................................... 446
Text Shadow ............................................................................................................................................ 448
Font Freedom ......................................................................................................................................... 450
Generated Content ................................................................................................................................. 452
Part Five: Appendixes
Appendix A: CSS Property Reference ...................................................459
Appendix B: CSS in Dreamweaver CS4 ................................................487
Appendix C: CSS Resources ....................................................................517
Index ........................................................................................................525