Sams Teach Yourself CSS in 24 Hours- P8

Sams Teach Yourself CSS in 24 Hours- P8: Times have changed, thankfully, since those Dark Ages of CSS. All major browsers aswell as some minor ones have increased support for Cascading Style Sheets in the latestversions. Web developers are aware of CSS and the vital role they play in designing greatWeb pages, and presumably you’ve got some idea of how important they are if you’vebought this book.
Nội dung trích xuất từ tài liệu:
Sams Teach Yourself CSS in 24 Hours- P8332 Hour 18 LISTING 18.1 Continued .urhc { color: black; vertical-align: top; } A:active { color: black; font-weight: bold; } .menubar a:hover { color: white; } body { font-family: Garamond, Georgia, Times, “Times New Roman”, serif; } .inter { } .lhs { color: black; } h1, h2, h3, h4. h5, h6, dt, .heading { color: black; font-variant: small-caps; } .lhrc a:link, .lrhc a:visited { text-decoration: none; font-weight: bolder; color: black; } .urhc H1 { color: white; text-align: center; border: none; padding: 0% 5%; margin: 0px; line-height: 75px; } A:link { font-weight: bold; color: #000066; text-decoration: none; } .lrhc { color: black; } .ulhc img { border: 2px solid white; padding-left: 15px; padding-right: 15px; } .llhc { color: black; } h1, h2, h3, h4, h5, h6, .heading { border-bottom: 1px solid white; } body { background-color: #cca580; background-image: url(“/photos/feb2002/arizona/painted-desert_sm.jpg”); background-position: top right; background-repeat: no-repeat; } .vert { } A:visited { font-weight: bold; color: #006600; text-decoration: none; } If that was a bit hard to follow, don’t feel bad; that was intentional. On the Kynn.com site, I use tables to divide the page into six content cells that can each be styled indepen- dently. Vertical and horizontal bars separate these cells, and the bars, as well as their intersections, can also have styles applied to them. The layout is shown in Figure 18.1, which indicates the class attribute for each cell. The classes have names like urhc for “upper right hand corner” and lhs for “left hand side.” Web Design with CSS 333FIGURE 18.1The layout ofcssin24hours.com,done with tables. The current style sheet, as given in Listing 18.1, actually eliminates the bars between the content cells by not giving them a distinct background color, but you can’t tell that by 18 skimming the style sheet. The style sheet in Listing 18.2 is really the same as before; both produce the same results when applied to the Web page, but the second one is easier to understand. Comments make clearer what each section of the style sheet does, and the order is much easier to understand.LISTING 18.2 A Better-organized Style Sheet /* k-orderly-18.2.css */ /* For kynn.com */ /* By Kynn, 6-22-1999 */ /* Last tweaked 02-20-2002 */ /* Default styles */ body { background-color: #cca580; background-image: url(“/photos/feb2002/arizona/painted-desert_sm.jpg”); background-position: top right; background-repeat: no-repeat; } /* Styled cells */ .ulhc { color: black; vertical-align: top; } .urhc { color: black; vertical-align: top; } continues334 Hour 18 LISTING 18.2 Continued .vert { } .horiz { } .inter { } .lhs { color: black; } .rhs { color: black; } .llhc { color: black; } .lrhc { color: black; } /* lower right hand corner */ .lhrc a:link, .lrhc a:visited { text-decoration: none; font-weight: bolder; color: black; } /* upper right hand corner */ .urhc h1 { color: white; text-align: center; border: none; padding: 0% 5%; margin: 0px; line-height: 75px; } /* upper left hand corner */ .ulhc img { border: 2px solid white; padding-left: 15px; padding-right: 15px; } /* fonts */ body { font-family: Garamond, Georgia, Times, “Times New Roman”, serif; } /* Distinct headings */ h1, h2, h3, h4. h5, h6, dt, .heading { color: black; font-variant: small-caps; } h1, h2, h3, h4, h5, h6, .heading { border-bottom: 1px solid white; } /* Link styles */ a:link { font-weight: bold; color: #000066; ...