Tài liệu Sams Teach Yourself CSS in 24 Hours- P5 pptx

50 917 0
  • Loading ...
1/50 trang
Tải xuống

Thông tin tài liệu

Ngày đăng: 21/01/2014, 16:20

The background Shorthand PropertyLike 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 thebackground-attachment. Simply list the values you want (in any order) as the valuefor 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-xfixed top left gray; }SummaryThe 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 colorsyou’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,andbackground-attachment properties. Allof the background properties can be set at once using the background shorthand property.Browser Support Report CardCSS Feature Grade Notesbackground-color Abackground-image Abackground-repeat Abackground-position BWorkaround needed for Netscape 4background-attachment B- Workaround needed for Netscape 4, plus IE quirksbackgroundB- Workaround needed for Netscape 4, plus IE quirks182 Hour 10Fixed backgrounds are supposed to be placed relative to the page evenwhen set on boxes within the page; however, Internet Explorer positionsthem relative to the box of the element being styled. This is most clearlyillustrated in Eric Meyer’s css/edge spiral, which was used as an example inHour 3, “Browser Support for CSS.”15 0672324091 ch10 6/13/02 10:33 AM Page 182Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.Note that because the background shorthand property sets background-position andbackground-attachment properties, it has the same problems as those other properties.Q&AQWhat 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 <div> tag just inside the <body>of your page; have it contain all the content you’d normally put in <body> and giveit 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")center repeat-y;color: white;padding: 0.5em; }This will make a T-shaped star background. The padding and margin adjustmentsare necessary to remove the default padding and margin the browsers put on<body> and add it back in for the <div>.QWhy doesn’t the order matter for the background shorthand property? Thatseems 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 abrowser to figure out that, for example, the value green must go with background-color and the value url("stars.gif") with background-image.WorkshopThe workshop contains quiz questions and activities to help reinforce what you’ve learnedin this hour. If you get stuck, the answers to the quiz can be found after the questions.Quiz1. Which of these values for background-position places the background image atthe middle and bottom of the styled element’s display box?(a.)bottom center(b.) center bottom(c.) bottom(d.) 50% 100%Backgrounds and Background Colors 1831015 0672324091 ch10 6/13/02 10:33 AM Page 183Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.2. You have an image named skyblue.jpg; it’s a graphic that looks like a blue skywith a few wispy clouds. The color is closest to rgb(75%, 75%, 100%). You wantit to tile down the right hand side of the page, and the background image shouldn’tscroll when the page scrolls. The rest of the page will be white; all of your text willbe black or other colors that contrast against the background. What CSS rule wouldyou write, using the background shorthand property?Answers1. Trick question! They all do; they’re all the same value.2. Because you want the rest of the page to be white, the RGB values of the sky don’tmatter that much; your black text will contrast nicely with either white or lightblue. Therefore, the rule can be written like this:body { background: url("skyblue.jpg") whiteright top repeat-y fixed; }ActivityThe best way to understand background colors and images is to get some hands-on prac-tice. Create yourself a test page, an image or two, and a style sheet. Try the following:1. Position the graphic in each corner of the page.2. Tile the graphic along each edge of the page.3. Create a faded-color watermark in the very middle of the page that doesn’t scrollwith the page.4. Set backgrounds on inline and block elements besides just <body>. Make themscroll or tile!184 Hour 1015 0672324091 ch10 6/13/02 10:33 AM Page 184Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.HOUR11Styling LinksThe capability to make hyperlinks is what enables the interconnectedness ofthe Web; HTML itself is named for the hypertext links. Cascading StyleSheets can be used to style these links beyond the default blue-underlinedtext. You’ve already learned how to use :link and :visited pseudo-classesto create CSS rules for link presentation.In this hour, you’ll learn• What pseudo-selectors let you designate effects for active links,mouseovers, and an element focus•Which order pseudo-classes follow for link styling and inheritance•How do to some of the most common link effects, including replacingthe attributes on the <body> tag, removing underlines, and creatingdynamic mouseoversCSS for Link StylingThe style rules you write to affect hypertext links are much the same asother CSS rules; you identify the elements to be styled by using a selector,16 0672324091 ch11 6/13/02 10:42 AM Page 185Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.and you write property declarations describing how you want the elements to appear. Sowhy spend a whole hour on links?One reason is that rules for hypertext links require extensive use of pseudo-selectors,whereas most other rules don’t. You can’t just use the element name alone and get fullfunctionality; you need to write your rules with a:link and a:visited selectors. In thishour, you’ll learn about three more pseudo-classes, as well—:active, :hover,and:focus.Link styles are very dependent upon the state of the user interface; what the user is doingand has done is at least as important as the content. That’s not the case with most styles.You don’t have to worry about your paragraph text changing state once the styles havebeen applied to it. Links require dynamic reapplication of the cascade and inheritancerules as the page is used.One more reason that links are set off with their own hour is that it’s one of the mostcommon questions asked by people learning CSS. Underlines, mouseovers, and specialeffects on links are some of the coolest simple style effects you can add to a site, alongwith colors and fonts. Links are active styles, and the pseudo-classes used with them canadd unexpected pleasant touches to a page, if done right.The :link and :visited Pseudo-classesAlthough you learned about a:link and a:visited selectors in Hour 5, “Selectors,”we’ll briefly revisit them here. The :link state and the :visited state are mutuallyexclusive, which means that either one or the other applies, but not both. Neither inheritsproperty values from the other; if you set a style property on a:link,the same propertywon’t be set on a:visited. You’d need to write two rules (or one rule with a combinedselector).A rule based on the <a> tag will be applied to <a> links, visited or unvisited. They’llalso be used on anchors set with the <a name=”anchor”> syntax. So if you want yourlinks to all have a yellow background, you’re better off with a rule based on a:link anda:visited instead of a by itself, or else your anchor points will be yellow, too.Other styles set on the box holding the <a> tag will be inherited normally if those proper-ties usually inherit. So the font-family and font-size properties, for example, will beinherited from whatever element contains the link tag.One exception is the default styling on links. Unless explicitly set by a CSS rule to some-thing else, your links will look like whatever the browser thinks they should look like. Atleast, that’s true when it comes to two specific properties:color and text-decoration.The accepted practice is to make unvisited links blue, visited links purple, and both kinds186 Hour 1116 0672324091 ch11 6/13/02 10:42 AM Page 186Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.of links underlined. Effectively, browsers have a built-in set of style rules that look likethis (although user preferences can change the specifics):a:link { color: blue; }a:visited { color: purple; }a:link, a:visited { font-decoration: underline; }To change these default styles, you’ll need to explicitly override these style rules with morespecific ones of your own. Remember that the cascade counts pseudo-classes as classes, andit gives priority to author styles over browser default styles; that means that your a:link rulewill win out.The :active Pseudo-classAn active link is a link that’s in the process of being activated by the user in some way.How this activation occurs is dependent on the type of input and output media used.Usually this means that a mouse pointer has clicked on the link, and the page is about tobe replaced by a new one reached by following the link. This corresponds to the HTMLattribute alink,which can be set on the <body> tag (although alink can change only thecolor, whereas a CSS rule can do far more). Browsers usually display this as if the fol-lowing rule were in its default style sheet:a:active { color: red; }The :active state is not mutually exclusive with :link or :visited. In fact, any linkthat is :active is undoubtedly going to be one or the other: visited or unvisited. Propertyvalues set on the :link or :visited state will be inherited by the :active element, asappropriate for each value. For example, if you’ve already declared that there should beno underlines in your a:link and a:visited rules, you don’t need to worry aboutincluding it in the a:active rule if you want active links to continue to be underlined.Cascading is also a consideration. If there’s a property value conflict between an a:linkand a:active rule, which one wins according to the cascade order? Well, they have thesame origin (your style sheet), the same number of id attributes (none, presumably),the same number of classes or pseudo-classes, and the same number of elements, whichmeans it’s a tie. Therefore, the winner will be whichever one is declared last, accordingto the source code. In practice, this means that you’ll want to put your a:active ruleafter your a:link and a:visited links.You can combine together two or more pseudo-class selectors by simply chaining themtogether without spaces, like this:a:link { color: blue;background-color: white; }a:link:active { color: white;background-color: blue; }Styling Links 1871116 0672324091 ch11 6/13/02 10:42 AM Page 187Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.a:visited { color: purple;background-color: white; }a:visited:active { color: white;background-color: purple; }These rules display unvisited and visited links in blue or purple as usual, but when thelink is clicked, the colors will invert while the page is loading. Combined selectors let usmake sure the colors are kept straight. If we didn’t write a rule with two pseudo-classes,we’d have to choose either blue or purple as the color we’d use, like this:a:active { color: white; background-color: purple; }188 Hour 11Warning for Netscape 4Netscape 4 doesn’t support the :active pseudo-class. Although this is unfor-tunate, it’s probably not that bad, as the cost of failure is pretty small.Netscape 4 will simply turn your text red (or the browser’s default active linkcolor) when the link is clicked, but because this is displayed only for a veryshort time, it’s probably not worth worrying about.The :hover Pseudo-classHovering means that the mouse pointer has been positioned over a particular element,but the user has not necessarily clicked a button to activate it. In HTML, this state trig-gers a mouseover event, which can invoke JavaScript functions set on the onMouseOverattribute; when the mouse is no longer hovering, that’s an onMouseOut event.The CSS approach is to add the state of :hover to any other states currently on the element(such as :link or :visited) and apply an appropriate style. You can change the color, ofcourse, but you can also change the background properties, border, font-family, font-size,or anything else you like. Some of these changes may cause the dimensions of displayed boxesto change, which can be distracting as the page has to redraw itself and shift about as someonemoves the mouse, so you probably should avoid major changes such as padding or display.Warning for Netscape 4Netscape 4 doesn’t support the :hover selector. CSS rules that depend onmouseovers can’t count on Netscape 4 to display them. If your audienceincludes Netscape 4 users, you may want to use :hover effects only for eye-candy and not for essential site tasks. This is probably a good rule of thumbanyway, as some people (such as visually impaired users or Lynx users) maynever see your fancy styles. Use CSS to enhance your page, but still allowaccess to those with older browsers.16 0672324091 ch11 6/13/02 10:42 AM Page 188Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.Here’s an example of the :hover rule in action. I want to make my links change colorand background-color when the user moves the mouse. This will point out which linkwill be followed if the user clicks—a typical mouseover function. Listing 11.1 has anembedded style sheet in the HTML for this example.LISTING 11.1 A Simple Question That Hovers Ominously<! game-11.1.html ><html><head><title>Want to play a game?</title><style type=”text/css”>body {background-color: black;color: lime;font: xx-large “Boost SSI”,monospace; }a:link, a:visited {color: lime;text-decoration: none; }a:hover {background-color: white;color: black; }</style></head><body><h1>Want to play a game?</h1><h1><a href=”yes.html”>yes</a> /<a href=”no.html”>no</a></h1></body></html>Figure 11.1 shows what this looks like in a browser; unlike most of the screenshots inthis book, I’ve included the mouse pointer so you can see where it is. The no option is inblack-on-white text when the mouse is over it, and when the mouse is elsewhere, it turnsback to lime-on-black.The CSS specifications are very vague on which HTML tags must be able to take on the:hover state. Can you set a rule with a selector like h1:hover and then change the stylingon the <h1> tag whenever the mouse is moved over it? Good question. At the present time,you can’t; only items that can be clicked on can enter the :hover state in current browsers.Styling Links 1891116 0672324091 ch11 6/13/02 10:42 AM Page 189Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.190 Hour 11FIGURE 11.1How about a nicegame of chess? Pageshown in Netscape 6.Workaround for Internet Explorer, Opera, Mozilla, NetscapeIf you want to add mouseover effects to other items, you can use the HTMLevent attributes and JavaScript. For example, the following bit of HTML codecreates an <h1> tag that changes color when the mouse moves over it:<h1 onmouseover=”style.color = ‘blue’;”onmouseout=”style.color = ‘red’;”style=”color: red; background-color: white;”>Superman</h1>You’ll learn more in Hour 23, “CSS and JavaScript,” about using JavaScriptwith CSS to create dynamic effects.The :focus Pseudo-classIf you can type something into an HTML element, that element is said to have the focus.Focus is an indication of something that’s been selected but not necessarily activated.The focus is often indicated by a light dashed line or by a colored glow around part ofthe page.16 0672324091 ch11 6/13/02 10:42 AM Page 190Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.Being able to identify the current focus is important for keyboard access to the Web. Websurfers who aren’t able to use a mouse will use the tab key to move from link to link orto <form> field tags, such as <input> and <textarea>. The HTML tabindex attributecan affect the order of tabbing.When an element receives the focus, it enters the :focus state and applicable styles areapplied. In our previous example from Listing 11.1, the background and foreground col-ors don’t change if someone tabs through the links; they change only if the mouse isused. Because we want to provide access to all users—not just those with mice!—we’lladd the following rules to our style sheet:a:focus {background-color: white;color: black; }Styling Links 19111Workaround for Internet Explorer (Windows), OperaNetscape 6, Mozilla, and Internet Explorer 5 (Macintosh) support the :focuspseudo-class, but other browsers don’t. You can use the same JavaScripttechniques as described for the :hover workaround, but you should use theonFocus attribute when the element comes into focus and the onBlurattribute when it loses focus.It’s possible for an element to be in a state of :active, :hover and :focus all at the sametime; none of them are mutually exclusive. An <a> link will be either :link or :visited aswell. You should put your :active, :hover, and :focus rules after the :link and :visitedrules because of the order of the cascade and inheritance.Common Link-styling TechniquesThe rest of this hour, I’ll show you how to do some of the most common tasks related tostyling links. Think of this section as a small cookbook with some key recipes. Armedwith these and with your growing knowledge of CSS, you can improvise on your ownsites, creating your own style sheet culinary masterpieces.Replacing HTML <body> AttributesThe <body> tag in HTML lets you set a number of attributes that affect the appearance ofthe entire page. Now you can replace those with CSS rules and go further than the capabilities16 0672324091 ch11 6/13/02 10:42 AM Page 191Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.[...]... different kinds of links; for example, style offsite links differently from local links Likewise, use different styles for inline links in the body of your text and for navigation links located in a sidebar Mouseover Effects A mouseover effect can be as simple as swapping the colors, as we’ve seen earlier in this hour, or as subtle as adding back in the underline on a mouseover, as follows: a:link, a:visited... Sets an indent negative measurement Sets a hanging indent percentage Sets an indent based on a fraction of the containing box inherit Uses the value of text-indent from the containing box The simplest indentations are the most straightforward; here’s a rule to indent all paragraphs by 3 ems: p { text-indent: 3em; } It gets a little trickier if you want to make a hanging indent—one where the first line... -0.5em; } Applying the style sheet in Listing 12.3 to the sample paragraph text gives us the styles shown in Figure 12.4 FIGURE 12.4 Letter and word spacing in Netscape 6 word spacing letter spacing (kerning) letter spacing (leading) Warning for Netscape 4 The Netscape 4 browser does not support the letter-spacing or word-spacing properties Because these properties are used for fine-tuning, the cost... Doesn’t insert extra spacing between words measurement Inserts extra word spacing negative measurement Reduces spacing between words inherit Uses the value of word-spacing from the containing box Keep in mind that both letter-spacing and word-spacing add or subtract from the default browser spacing; they don’t set it to that value So if a browser normally has a space of 0.5 em between words, a word-spacing... letter-spacing and word-spacing rules are shown in Listing 12.3 12 208 Hour 12 LISTING 12.3 Styles Affecting Letter and Word Spacing /* twain-12.3 .css */ body { font-family: Arial, sans-serif; font-size: smaller; } h1 { font-family: Verdana, sans-serif; letter-spacing: 0.2em; word-spacing: 0.5em; } #a #b #c #d { { { { word-spacing: 1em; } letter-spacing: 5px; } letter-spacing: -0.1em; } word-spacing: -0.5em;... sample paragraph text in it; you can download it from http://www.CSSin24hours.com/12/twain.html This HTML file is used in this hour’s examples; applying the style sheet above results in the effects shown in Figure 12.1 FIGURE 12.1 Lining up text using CSS justify 12 centered right aligned 202 Hour 12 The text-indent Property Although it’s most commonly used on tags, the text-indent property can be... property, include a slash after the font-size and indicate the desired line-height value For example, to set a paragraph font that’s 12 point Verdana with a line height of 200%, you’d write the following rule: p { font: 12pt/200% Verdana, sans-serif; } Alignment and Spacing FIGURE 12.6 Line spacing in Internet Explorer 6 80% Line Height 213 2.5 Line Height 2 em Line Height Summary Several CSS properties... to control line breaks and duplicate the HTML and tags • How to adjust the spacing between lines Aligning and Indenting Text The alignment of text defines the way in which the text lines up with the left or right margins Most things you read (including this book) are left aligned; 200 Hour 12 left-aligned text is generally easier to read Centered text is often used on headlines, but it... Superscripts are bits of text with the baseline above the surrounding text; subscripts have baselines lower than the surrounding text Except for table cells, only inline elements use the vertical-align property The use of vertical-align with table cells is covered in Hour 15 12 204 Hour 12 FIGURE 12.2 Internet Explorer 6 (Windows) indents our page Hanging Indent 15% Indent 25px Indent The types of values that... remove underlines by using the text-decoration property with a value of none Here’s an example: Styling Links 193 navbar a:link, navbar a:visited { text-decoration: none; } Several important cautions were mentioned in Hour 9 about the effects on usability if you remove link underlines; you may want to go back and read that section if it’s not fresh in your mind Removing underlines from links can be . for link styling and inheritance•How do to some of the most common link effects, including replacingthe attributes on the <body> tag, removing underlines,. a:link and a:visited rules, you don’t need to worry aboutincluding it in the a:active rule if you want active links to continue to be underlined.Cascading
- Xem thêm -

Xem thêm: Tài liệu Sams Teach Yourself CSS in 24 Hours- P5 pptx, Tài liệu Sams Teach Yourself CSS in 24 Hours- P5 pptx, Tài liệu Sams Teach Yourself CSS in 24 Hours- P5 pptx

Từ khóa liên quan

Mục lục

Xem thêm

Gợi ý tài liệu liên quan cho bạn