[ Pobierz całość w formacie PDF ]
.Listing12-16 is a slightly revised party invitation with an empty IMAGEelement.Listing12-17 is a style sheet that sets the party.gif file as the background for IMAGE.It alsosets the width and height properties of IMAGE.Finally, it sets floatto left.Figure12-33 shows the result. 3236-7 ch12.F.qc 6/29/99 1:08 PM Page 386Part III &' Style Languages386Listing 12-16: A party invitation with an empty IMAGEelementYou re invited to a party on December 31, 1999 to celebratethe new millennium! You re invited to a party on December 31,1999 to celebrate the new millennium! You re invited to aparty on December 31, 1999 to celebrate the new millennium!You re invited to a party on December 31, 1999 to celebratethe new millennium! You re invited to a party on December 31,1999 to celebrate the new millennium! You re invited to aparty on December 31, 1999 to celebrate the new millennium!You re invited to a party on December 31, 1999 to celebratethe new millennium! You re invited to a party on December 31,1999 to celebrate the new millennium! You re invited to aparty on December 31, 1999 to celebrate the new millennium!You re invited to a party on December 31, 1999 to celebratethe new millennium! You re invited to a party on December 31,1999 to celebrate the new millennium!Listing 12-17: A style sheet that loads an IMAGEINVITATION { display:block; }IMAGE { background: url(party.gif) no-repeat center center;width: 134px;height: 196px;float: left; }TEXT { display: block }The clear PropertyThe clearproperty specifies whether an element can have floating elements on itssides.If it cannot, the element will be moved below any floating elements thatprecede it.It s related to the HTML element.The possiblevalues are:nonerightleft both 3236-7 ch12.F.qc 6/29/99 1:08 PM Page 387Chapter 12 &' Cascading Style Sheets Level 1387Figure 12-33: The party invitation image floating on the leftThe default value, none, causes floating elements to appear on both sides of theelement.The value leftbans floating elements on the left-hand side of the element.The value right bans floating elements on the right-hand side of the element.Thevalue bothbans floating elements on the both sides of the element.For example,suppose you add this rule to the style sheet of Listing 12-17:TEXT { clear: left }Now, although the IMAGEelement wants to float on the left of TEXT, TEXTdoesn tallow that as is shown in Figure 12-34.IMAGEis still on the left, but now TEXTispushed down below the image.Figure 12-34: The party invitation image with the clear propertyset to left 3236-7 ch12.F.qc 6/29/99 1:08 PM Page 388Part III &' Style Languages388SummaryIn this chapter, you learned:&' CSS is a straightforward language for applying styles to the contents ofelements that works well with HTML and even better with XML.&' Selectors are a comma-separated list of the elements a rule applies to.&' CSS can apply rules to elements of a given type or elements with particularCLASSor IDattributes.&' Many (though not all) CSS properties are inherited by the children of theelements they apply to.&' If multiple rules apply to a single element, then the formatting propertiescascade in a sensible way.&' You can include C-like /* */comments in a CSS style sheet.&' Lengths can be specified in relative or absolute units.Relative units arepreferred.&' The displayproperty determines whether an element is block, inline, or alist item.&' Font properties determine the font face, style, size, and weight of text.&' Color of elements is given in a 24-bit RGB space in either decimal,hexadecimal, or as percentages.&' Background properties include color, image, image position, and image tiling.&' Text properties let you adjust line height, word spacing, letter spacing,vertical and horizontal alignment, decoration, and capitalization.&' Box properties let you adjust the relative positions and spacing of elementson the page, as well as wrapping borders around elements.There are some limits to what CSS Level 1 can achieve.First, CSS1 can only attachstyles to content that already appears in the document.It cannot add content tothe document, even simple content like punctuation marks.Furthermore, it cannottransform the content in any way such as sorting or reordering it.These needs areaddressed by XSL, the Extensible Style Language.Even from the perspective ofmerely formatting content, CSS1 offers less than what you want.Most glaringly,there s no support for tables.And there are other, less-obvious deficiencies.CSS1cannot handle right-to-left text like Hebrew and Arabic or vertical text such astraditional Chinese.In the next chapter, we ll delve into CSS Level 2, whichaddresses these and other limitations of CSS1.&' &' &'
[ Pobierz całość w formacie PDF ]