Sams Teach Yourself CSS in 24 Hours- P5

Sams Teach Yourself CSS in 24 Hours- P5: 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- P5182 Hour 10 Fixed backgrounds are supposed to be placed relative to the page even when set on boxes within the page; however, Internet Explorer positions them relative to the box of the element being styled. This is most clearly illustrated in Eric Meyer’s css/edge spiral, which was used as an example in Hour 3, “Browser Support for CSS.” The background Shorthand Property Like the font property, background is a shorthand property that allows you to set several properties at once. By using background, you can set the background-color, the background-image, the background-repeat, the background-position, and the background-attachment. Simply list the values you want (in any order) as the value for background; any values you don’t set will be set to their default values. The CSS rules used to create Figure 10.9 can be rewritten like this: body { color: white; background: url(stars.gif) repeat-x fixed top left gray; } Summary The background of any element can be set using the background-color and background- image properties. When using backgrounds, make sure there is contrast between the colors you’re using (including image colors), and also ensure that you’ve set the foreground colors as well. The tiling, position, and scrolling of the background image can be set using the background-repeat, background-position, and background-attachment properties. All of the background properties can be set at once using the background shorthand property. Browser Support Report Card CSS Feature Grade Notes background-color A background-image A background-repeat A background-position B Workaround needed for Netscape 4 background-attachment B- Workaround needed for Netscape 4, plus IE quirks background B- Workaround needed for Netscape 4, plus IE quirks Backgrounds and Background Colors 183 Note that because the background shorthand property sets background-position and background-attachment properties, it has the same problems as those other properties.Q&A Q What if I want a graphic to tile across the page horizontally and vertically, form- ing a “T” or “L” shape instead of filling the whole page? Can that be done? A No. Well, okay, yes. Here’s how you do it: Add a tag just inside the of your page; have it contain all the content you’d normally put in and give it an id attribute. Then use the transparent value for background-color, like this: body { background: gray url(stars.gif) repeat-x; padding: 0px; margin: 0px; } div#mydiv { background: transparent url(stars.gif) 10 center repeat-y; color: white; padding: 0.5em; } This will make a T-shaped star background. The padding and margin adjustments are necessary to remove the default padding and margin the browsers put on and add it back in for the . Q Why doesn’t the order matter for the background shorthand property? That seems confusing. Shouldn’t they be in some specific order? A Nope; because each of the properties set by the shorthand property have com- pletely different types of values that can be assigned to them, it’s pretty easy for a browser to figure out that, for example, the value green must go with background- color and the value url(stars.gif) with background-image.Workshop The workshop contains quiz questions and activities to help reinforce what you’ve learned in this hour. If you get stuck, the answers to the quiz can be found after the questions. Quiz 1. Which of these values for background-position places the background image at the middle and bottom of the styled element’s display box? (a.) bottom center (b.) center bottom (c.) bottom (d.) 50% 100%184 Hour 10 2. You have an image named skyblue.jpg; it’s a graphic that looks like a blue sky with a few wispy clouds. The color is closest to rgb(75%, 75%, 100%). You want it to tile down the right hand side of the page, and the background image shouldn’t scroll when the page scrol ...