PW11-CSS-HTML-6
Transcript
PW11-CSS-HTML-6
ALTROCSS ProgrammazioneWeb 1 Commen- • Ilcontenutofra/*e*/viene ignorato • Possousareicommen9inogni puntodelfile • Siusanoicommen9per – delimitarelesezionilogichedelfile – nasconderetemporaneamentedelle dichiarazioni ProgrammazioneWeb 2 l l ; t is l ed . . e> m t. You can include multiple link elements to different style sheets and they’ll Nall OTapply. E If there are conflicts, whichever one is listed last will override previouscan settings, due to rulewithout order the andurl( the cascade. You also supply thethe URL ) notation: dire1va@import @import "/path/style.css"; Importing with @import Again, absolute pathnames, beginning at the root, will ensure that the .css document will found. for attaching an external style sheet to a document is to Thealways otherbe method • @importèladireBvacssperincluderealtricss import it with an @import rule. The @import rule is another type of rule you – devofornirelaurlassolutaorela9va can add to aStyle style sheet, either in an external .css style sheet document, or Modular Sheets right in the style element, as shown in the following example. Because you can compile information from multiple external style sheets, <head> modular style sheets have become a popular technique for style manage<style> @import url("/path/stylesheet.css"); ment. Many developers keep styles they frequently reuse,Inunfilehtml such as typograp { font-face: Verdana;} phy treatments, layout rules, or form-related styles, in separate style sheets, </style> then combine themare in mix-and-match <title>Titles required.</title>fashion using @import rules. Again, </head> rules need to go before rules that use selectors. the @import In thisofexample, a relative URL is shown, but it could also be an absolute Content clientsite.css: URL (beginning with http://). The @import rule must go in the beginning /* basic typography */ of@import the style sheet before any selectors. You can import more than one style url("type.css"); sheet and they all will apply, but rules from the last style sheet listed take /* form inputs */ Inunfilecss precedence over earlier ones. @import url("forms.css"); You can try both the link and @import methods in Exercise 13-8. /* navigation */ @import url("list-nav.css"); N OT E You can also supply the URL without the url( ) notation: ProgrammazioneWeb @import "/path/style.css"; 3 vertical-align: baseline; reset.css } /* HTML5 display-role reset for older browse article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ‘’; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; N OT E } /* HTML5 display-role reset for older browsers */ is another resetfigure, made available article, aside,There details, figcaption, the developers at section Yahoo!.{ To use it, To use the reset, place these styles at the top o footer, header,byhgroup, menu, nav, display: block; simply paste the following line into the can use them exactly as you see them here or cus } head of your HTML document: body { requires. I also recommend that you read Eric’s p <link rel="stylesheet" line-height: 1; } type="text/css" href="http:// went into his settings (meyerweb.com/eric/tools/c ol, ul { eric/thoughts/2007/04/18/reset-reasoning/). yui.yahooapis.com/3.5.1/ list-style: none; build/cssreset/cssreset-min. ProgrammazioneWeb 4 } CSS resets aren’t for everyone. You may decide POSIZIONEDEGLIELEMENTI ProgrammazioneWeb 5 Posizionedeglielemen-block Inline content reflows to fit the width of the block. abcdefghijklmnopqrstuvwxyz out in the ey appear in on a new line. <p> <h1> abcdefghijkl mnopqrstuv wxyz <p> <p> <h1> <p> <p> <p> Blocks fill the available width. One more example of the normal flow behavior. the normal flow affect the layout ofProgrammazioneWeb the objects around them. This 6 Cambiareilflusso • float – clear • posi9on – top,boIom,leJ,right – z-index ProgrammazioneWeb 7 based web design, used to create multicolumn layouts, navigation too from lists, and table-like alignment without tables. Let’s start with the property itself. float float Values: left | right | none | inherit Default: none Applies to: all elements Inherits: no The best way to explain floating is to demonstrate it. In this example property is applied to an img element to float it to the right. Figure • float muoveunelementotuIoadestraotuIoa shows how the paragraph and the contained image are rendered by de sinistrapermeIendoagliatrielemen9di (top) and how it looks when the float property is applied (bottom). circondarlo The markup <p><img src="crown.gif" alt="">They went down, down,...</p> ProgrammazioneWeb 8 padding: 15px; background-color: #FFF799; border: 2px solid #6C4788; Esempio } Inline image in the normal flow space next to the image is held clear The style sheet img { float: right; } p { padding: 15px; background-color: #F border: 2px solid #6 } Inline image floated to the right. image moves over and text wraps around it ProgrammazioneWeb 9 Inline image in the normal flow ’re absolutely right. I’ll add 10 pixels g the margin property (Figure 15-3). roperties work together in page lay- Esempio Figure 15-3. Adding a 10-pixel margin around the floated image. Indicates outer margin edge (this rule would not appear in the actual web page) you would add some text? If you guessed “ of space on all sides You can begin to see out. img { float: right; margin: 10px; } Chapter 15, Floating and Positioning 343 www.it-ebooks.info Esempio:ogre-fl.html ProgrammazioneWeb 10 CaraIeris-che • Sistaccanodalflussonormalemainfluenzanoil contenutodeiblocchiintorno • Sonocontenu9nell'areadelcontenuto dell'elementochelicon9ene • Imarginisonomantenu9 ProgrammazioneWeb 11 by clearing the element that you want to start below the float. has Applying been used tothe make h2 elem clear property to an element prevents it from appearing next a floated start to below left-floated eleme Figure 15-6 shows how the h2 h ments only element and forces it to start against the next available “clear” space below ing starts at the next available the float. edge below the float. t | both | none | inherit cleardeifloat t you apply the clear property to the element you want to oatedclear element, not the floated element itself. The left value t below any elements that| both have| been Values: left | right none | floated inheritto the left. ht value makes the element clear all floats on the right edge Default: none block. If there are multiple floated elements, and you want Applies to: block-level elements only ment starts below all of them, use the both value to clear es. Inherits: no img { float: left; margin-right: 10px; } h2 { clear: left; Figure 15-6. Clearing amargin-top: left-floated 2em; element } the clear Keepproperty in mind that you apply the clear property to the element you want to h2 elements make start below the floated element, not the floated element itself. The left value floated elements. starts the element below any elements that have been floated to the left. s how the h2 headSimilarly, the right value makes the element clear all floats on the right edge next available clear oat. of the containing block. If there are multiple floated elements, and you want : to be sure an element starts below all of them, use the both value to clear floats on both sides. 10px; In this example, the clear property has been used to make h2 elements 2em; start below left-floated elements. ProgrammazioneWeb Figure 15-6 shows how the h2 head- 12 Figure elemen Figure 15-11. The container box Fortunately, there are disappears entirely when all its contents One For instance, take the example in Figure 15-10. Clearly, it would be nicer straightforward. if are floated. Contenereifloat give it a width of 100% the border stretched to contain all the content, but the floated image hangs here are few the fixesbottom. to this problem, and they are pretty righta out #container { d. One option is to float the containing element as well and of 100%. t; %; -color: #GGG; em; float: left; width: 100%; background-color: padding: 1em; } L'elementocontenitorenonsi The other common s allungapercontenereilfloat overflow property. Se or hidden will also ma mmon solution is to take advantage of the behavior of the Figure 15-10. The containing element does not stretch to accommodate the floated erty. Setting the overflow of the containing element to auto added an explicit wid image. also make it stretch to contain the floated elements. I’ve also that if your container cit width value to address bugs in old IE versions, but note border hang outside o And if you float all the elements inFigure a container element—as youaremight do Nell'elementocontenitoredevodichiarare 15-12. Our hanging floats now ntainer element has a border, the 100% width will make the contained. overflowautoohidden to create a multicolumn layout—there will be no elements remaining in the # utside of the browser window. flow to hold the containing element open. This phenomenon is illustrated #container { in Figure 15-11. overflow: auto;The #container div contains two paragraphs. The view of 100%; the width: normal flow (left) shows that the #container has a background color background-color: #GGG; andpadding: border 1em; that wraps around the content. However, when both paragraphs are }floated, the element box for the #container closes up to have a height F ofFigure zero, 15-12 leaving the floats hanging down abelow (you can still see the empty shows the result of applying containm border at the top). This clearly is not the effect we are after. ment technique to the previous examples. Either one w Esempio:float-test.html will do the trick. ProgrammazioneWeb Now it is time to spiff up that navigation section on the 13 N (technically known as the viewport in the CSS Recommendations) and it will stay put while the rest of the page scrolls. Modalitàdiposizionamento Types of positioning position Values: static | relative | absolute | fixed | inherit Default: static Applies to: all elements Inherits: no The position property indicates that an element is to be positioned and specifies which positioning method to use. I’ll introduce each keyword value briefly here, and then we’ll take a more detailed look at each method in the remainder of this chapter. • sta-c:posizionenormale • rela-ve:posizionabilerispeIoalsuoposto • static absolute:posizionabilerispeIoalsuocontenitore This is the normal positioning scheme in which elements are positioned • fixed:posizionabilerispeIoalviewport as they occur in the normal document flow. relative Relative positioning moves the box relative to its original position in the flow. The distinctive behavior ProgrammazioneWeb of relative positioning is that the space 14 Specifying position Once you’ve established the positioning method, the actual position is speciSpecificarelaposizione fied with four offset properties. top, right, bottom, left Values: length measurement | percentage | auto | inherit Default: auto Applies to: positioned elements (where position value is relative, absolute, or fixed) Inherits: no The values provided for each of the offset properties defines the distance the should be moved away from that respective edge. For example, the • element SpecificaladistanzarispeIoalcontainingblock value of top defines the distance the top outer edge of the positioned eleshould be offset from the top edge of the browser or other containing • ment Qualeèilcontainingblockdipendedal9podi element. A positive value for top results in the element box moving down by posi9onusataneiblocchiparent that amount. Similarly, a positive value for left would move the positioned element to the right (toward the center of the containing block) by that amount. Further explanations and examples of the offset properties will be provided in the discussions of each positioning method. We’ll start our exploration 15 of ProgrammazioneWeb NO Neg mov tion nega effec to relative, and then I used the to pixels down from its initial position to the right. Remember, offset prop the specified edge, so if you want som you use the left offset property. Th em { position: relative; top: 30px; left: 60px; background-color: fuchsia; } posi-on:rela-ve em { position: relative; top: 30px; left: 60px; background-color: fuchsia; } 60px 30px Figure 15-16. When an element is positioned with the relative method, the space it would have occupied is preserved. • I want Lospaziooccupatooriginariamenteè to point out a few things that are happening here. conservato The original space in the document flow is preserved. Figure 15-16. When an element is positio would have occupied is preserved. You can see that there is a blank space where the emphasized text would • have Causasovrapposizioni been if the element had not been positioned. The surrounding conI want to point out a few things tha tent is laid out as though the element were still there, and therefore we The original space in the documen say that the element still “influences” the surrounding content. Overlap happens. ProgrammazioneWeb You can see that there is a blank 16 have been if the element had no 30px; Absolute Positioning top: left: 60px; posizion:absolute Absolute positioning works a bit differently and is actually afuchsia; more flexible background-color: method for accurately placing items} on the page than relative positioning. Now that you’ve seen how relative positioning works, let’s take the same example as shown in Figure 15-l6, only this time we’ll change the value of the position property to absolute. em { position: absolute; top: 30px; left: 60px; background-color: fuchsia; } 60px 30px 30px Figure 15-17. When an element is absolutely positioned, it is removed from the flow and 60px the space is closed up. • loposizionarispeIoalprimoparentchedefinisce As you can see in Figure 15-17, the space once occupied by the em element uncontainingblock is now closed up, as is the case for all absolutely positioned elements. In its Figure 15-17. When an element is absolutely positioned, it is removed from the flow and the space is closed up. new position, the element box overlaps the surrounding content. In the end, positioned have no influence whatsoever on the layout As you can see in Figure 15-17, absolutely the space once occupied byelements the em element is now closed up, as is the case for absolutely positioned elements. In its of all surrounding elements. ProgrammazioneWeb 17 new position, the element box overlaps the surrounding content. In the end, position the element higher in the stack. position the element higher in the stack. z-index property. document, but you can change the stacking order with theThe The markup markup id="A"><img src="A.gif" alt="A" /></p> id="A"><img src="A.gif" alt="A" Picture the z-axis as a line that runs perpendicular to the<p<p<ppage, though id="B"><imgas src="B.gif" alt="B" /></p> /></p> <p id="B"><img src="B.gif" alt="B" <p id="C"><img src="C.gif" alt="C" /></p> /></p> <p id="C"><img src="C.gif" alt="C" /></p> from the tip of your nose, through this page, and out the The other side. style sheet Ges-resovrapposizioni The style sheet #A { #A z-index: { 10; z-index: position:10; absolute; position: absolute; top: 200px; top: left:200px; 200px; left: 200px; } } z-index • pp Values: #C { number | auto | inherit Default: auto z-index: 1; position: absolute; Applies to: positioned elements top: 250px; Inherits: no left: 225px; } Fixed Positioning #B { #B z-index: { 5; z-index: position:5;absolute; position: absolute; top: 225px; top: 225px; left: 175px; } left: 175px; } #C { The value of the z-index property is a number (positive or negative). z-index: 1; The position: absolute; top: 250px; higher the number, the higher the element will appear in the stack. Lower left: 225px; } z-index: 10;the element lower in the stack. numbers and negative values move Let’s look z-index: 1; at an example to make this clear (Figure 15-25). www www. z-index Here are three paragraph elements, each containing a letter image (A, B, and z-index: 5; C, respectively) that have been positioned in a way that they overlap on the z-i page. By default, paragraph “C” would appear on top because it appears Y By default, elementslast later in the document You can change the stacking order with the By default, elements later in the document stack on top of preceding elements. z on top of preceding elements. by assigning Higher values stack on values to paragraphs z-index property. z-index in thestack source. However, higher top of lower values. Figure 15-25. Changing the stacking order wit “A” and “B,” we can force them to stack in our preferred order. Figure 15-25. Changing the stacking order with the z-index property. To be honest, the z-index property is layouts, but you should know it’s there antee that a positioned element always e z-index value, such as:18 Note that the values of z-index do not need to be sequential, and they do not relate to anything in particular. that higher To be honest, the z-index property is All not oftenmatters required isforthat most page number values ProgrammazioneWeb layouts, but you should know it’s there if you need it. If you want to guar- img#essential { Blocchicontenitori • Seunelementononècontenutoinnessunblocco conposi9onnonsta9callorailBCèbody • Seunancestordefinisceunaposi9onnonsta9c quellodiventailBC Esempio:ogre-pos.html ProgrammazioneWeb 19 width: 300px; border: 1px solid; background-color: #CCC; As mentioned previously, positive offset values push the positioned element box away from the specified edge and toward the center of the containing block. If there is no value provided for a side, it is set to auto, and the browser adds enough space to make the layout work. In this example, I’ve used pixel lengths for all four offset properties to place the positioned element at a particular spot in its containing element (Figure 15-21). Dimensionieposi-on } div#b { position: absolute; top: 20px; right: 30px; bottom: 40px; left: 50px; border: 1px solid; background-color: teal; } div#a { position: relative; /* creates the containing block */ height: 120px; width: 300px; border: 1px solid; background-color: #CCC; } div#b { position: absolute; top: 20px; right: 30px; bottom: 40px; left: 50px; border: 1px solid; background-color: teal; } div#a (width: 300px; height: 120px;) top: 20px; div#a (width: 300px; height: 120px;) top: 20px; left: 50px; div#b div#b right: left: 50px; (calculated at 220 pixels wide x 60 pixels high) (calculated at 220 pixels wide x 60 pixels high) 30px; right: 30px; bottom: 40px; bottom: 40px; Figure 15-21. Setting offset values for all four sides of a positioned element. ProgrammazioneWeb 20 Menu Floating At the very least, you will want to add some padding and/or margins to the anchor elements to give the links a little breathing room, but you can add any of the styles we’ve seen so far—colors, borders, rounded corners, background images—to give the navigation the look you want. The following styles turn the earlier list example into the tab-like menu shown in Figure 15-9. Figure 15-9. The unordered list is transformed into a tab-like menu using CSS alone and no images. Containing floats • Navigazionever9caleoorizzontale • 9picamentesiapplicaunos9leadunalistaul As long as we’re talking about multiple floats, this is a good time to address another float quirk, and that’s float containment. By default, floats are designed to hang out of the element they are contained in. That’s just fine for allowing text to flow around a floated image, but sometimes this behavior can cause some unwanted behaviors. For instance, take the example in Figure 15-10. Clearly, it would be nicer if the border stretched to contain all the content, but the floated image hangs right out the bottom. Esempio:test-menu.html Esempio:test-menu-sub.html Figure 15-10. The containing element does not stretch to accommodate the floated image. And if you float all the elements in a container element—as you might do to create a multicolumn layout—there will be no elements remaining in the flow to hold the containing element open. This phenomenon is illustrated in Figure 15-11. The #container div contains two paragraphs. The view of the normal flow (left) shows that the #container has a background color and border that wraps around the content. However, when both paragraphs are floated, the element box for the #container closes up to have a height ProgrammazioneWeb of zero, leaving the floats hanging down below (you can still see the empty border at the top). This clearly is not the effect we are after. 21