[ Pobierz całość w formacie PDF ]
.EM.color="red";tags.B.color="rgb(255, 0, 0)";tags.I.color="rgb(100%, 0%, 0%)";tags.CODE.color="#FF0000";Background ImageCSS syntax name: background-image74 Javascript-Accessible Style SheetsStyle Sheet PropertiesJavaScript syntax name: backgroundImagePossible values: urlInitial value: emptyApplies to: all elementsInherited: noPercentage values: N/AThis property specifies the background image of an element.Partial URLs are interpreted relative to the source of the style sheet, not relativeto the document.CSS Syntax ExampleH1.SPECIAL {background-image:url(images/glass2.gif);padding:20pt;color:yellow;}H2.SPECIAL {padding:20pt;background-color:#FFFF33;border-style:solid;border-width:1pt;border-color:black;}P.SPECIAL B {background-image:url(images/tile1a.gif); }P.SPECIAL I {background-color:cyan;}JavaScript Syntax ExampleJavascript Accessible Style Sheets 75Javascript-Accessible Style Sheetsclasses.SPECIAL.H1.backgroundImage = "images/glass2.gif";classes.SPECIAL.H1.paddings("20pt");classes.SPECIAL.H1.color="yellow";classes.SPECIAL.H2.paddings("20pt");classes.SPECIAL.H2.backgroundColor="FFFF33";classes.SPECIAL.H2.borderStyle="solid";classes.SPECIAL.H2.borderWidth="1pt";classes.SPECIAL.H2.borderColor="black";contextual(classes.SPECIAL.P, tags.B).backgroundImage="images/tile1a.gif";contextual(classes.SPECIAL.P, tags.I).backgroundColor="cyan";Style Sheet UseHeading One with Image BackgroundHello.Notice how the portion of this paragraph that has an imagebackground is promoted to being a block-level element on its ownline.Heading Two with Solid Color BackgroundHello, here is some very interestinginformation.Notice that each colored portion of this paragraphjust continues right along in its normal place.Background ColorCSS syntax name: background-colorJavaScript syntax name: backgroundColor76 Javascript-Accessible Style SheetsStyle Sheet PropertiesPossible Values: colorInitial value: emptyApplies to: all elementsInherited: noPercentage values: N/AThis property specifies a solid background color for an element.See the previous section, Background Image, for a working example.Classification PropertiesThese properties classify elements into categories more than they set specificvisual parameters.DisplayCSS syntax name: displayJavaScript syntax name: displayPossible values:,block, inline, list-itemnoneInitial value: according to HTMLApplies to: all elementsInherited: noPercentage values: N/AJavascript Accessible Style Sheets 77Javascript-Accessible Style SheetsThis property indicates whether an element is inline (for example, in HTML),block-level element (for example.in HTML), or a block-level list item (forexample, in HTML).For HTML documents, the initial value is taken from theHTML specification.A value of none turns off the display of the element, including children elements andthe surrounding box.(Thus if the value is set to none, the element is not be displayed.)Note that block-level elements do not seem to respond to having their display propertyset to inline.CSS Syntax ExampleEM.LISTEM {display:list-item;}JavaScript Syntax Exampleclasses.LISTEM.EM.display="list-item";List Style TypeCSS syntax name: list-style-typeJavaScript syntax name: listStyleTypePossible values:disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, noneInitial value:discApplies to: elements with display property value of list-itemInherited: yesPercentage values: N/AThis property describes how list items (that is, elements with a display value oflist-item) are formatted.This property can be set on any element, and its children will inherit the value.However, the list style is only displayed on elements that have a display value oflist-item.In HTML this is typically the case for the element.78 Javascript-Accessible Style SheetsStyle Sheet PropertiesCSS Syntax ExampleUL.BLUELIST {color:blue;}UL.BLUELIST LI {color:aqua;list-style-type:square;}OL.REDLIST {color:red;}OL.REDLIST LI {color:magenta; list-style-type:upper-roman;}JavaScript Syntax Exampleclasses.BLUELIST.UL.color="blue";contextual(classes.BLUELIST.UL, tags.LI).color="aqua";contextual(classes.BLUELIST.UL, tags.LI).listStyleType="square";classes.REDLIST.OL.color="red";contextual(classes.REDLIST.OL, tags.LI).color="magenta";contextual(classes.REDLIST.OL, tags.LI).listStyleType="upper-roman";Style Sheet UseConsultingDevelopmentTechnology integrationStart the program.Enter your user name and password.From the File menu, choose the Magic command.Javascript Accessible Style Sheets 79Javascript-Accessible Style SheetsWhite SpaceCSS syntax name: white-spaceJavaScript syntax name: whiteSpacePossible values:normal, preInitial value: according to HTMLApplies to: block-level elementsInherited: yesPercentage values: N/AThis property declares how white space inside the element should be handled.The choices are:" normal (white space is collapsed)," pre (behaves like the element in HTML).For example:P.KEEPSPACES {white-space:pre;} /* CSS syntax */classes.KEEPSPACES.P.whiteSpace = "pre"; /* JavaScript syntax */UnitsThis section discusses units of measurement.Length UnitsThe format of a length value is an optional sign character ('+' or '-', with '+'being the default) immediately followed by a number followed by a unit ofmeasurement.For example, 12pt, 2em, 3mm.80 Javascript-Accessible Style SheetsUnitsThere are three types of length units: relative, pixel and absolute.Relative unitsspecify a length relative to another length property.Style sheets that use relativeunits will scale more easily from one medium to another (for example, from acomputer display to a laser printer).Percentage units and keyword values (suchas x-large) offer similar advantages.Child elements inherit the computed value, not the relative value, for example:BODY {font-size:12pt; text-indent:3em;}H1 {font-size:15pt;}In the example above, the text indent value of H1 elements will be 36pt, not45pt [ Pobierz całość w formacie PDF ]