Thông tin tài liệu
Controlling Spacing with CSS A s browser support for cascading style sheets has improved, so too has the ability of Web designers to control all aspects of their pages’ appearance through Dynamic HTML. One of the aspects of the appearance of your pages that can be controlled through style sheets is the spacing used for text. For instance, you can control the following: • Use the letter-spacing style attribute to control the spacing of letters. You can specify spacing in pixels (such as 10px) or as some fraction of the width of the letter “m” in the font you are using (such as 2.0em): <div style=”letter-spacing: 20px;”> Text goes here </div> • Use the word-spacing style attribute to control the spacing between words in pixels or em units: The following text has larger word spacing: <span Æ style=”word-spacing: 3.0em;”>This has bigger word Æ spacing</span> The following task illustrates these attributes by displaying text with a variety of spacing set: 1. Create a new HTML document in your preferred editor. 2. In the body of your document, create a layer containing text. Set the letter spacing using pixels: <div style=”letter-spacing: 10px;”>These letters are 10 Æ pixels apart</div> 3. Create another layer and set the letter spacing as a fraction of the width of the letter “m”: <div style=”letter-spacing: 2em;”>These letters are Æ 2 m’s apart</div> 4. Create another layer and set the word spacing using pixels: <div style=”word-spacing: 30px;”>These words are 30 Æ pixels apart</div> notes • Dynamic HTML is the com- bination of JavaScript, cas- cading style sheets, and the Domain Object Model, which together make it pos- sible to build sophisticated interactive user interfaces and applications that run in the browser. • You only need to specify these style attributes to enforce them. For instance, if you don’t want extra letter spacing, you can normally leave out letter-spacing. 366 Part 7 Task 177 08 542419 Ch07.qxd 11/19/03 9:59 AM Page 366 5. Create another layer and set the word spacing as a fraction of the width of the letter “m.” The final page should look like Listing 177-1. <body> <div style=”letter-spacing: 10px;”>These letters are Æ 10 pixels apart</div> <div style=”letter-spacing: 2em;”>These Æ letters are 2 m’s apart</div> <div style=”word-spacing: 30px;”>These words are 30 Æ pixels apart</div> <div style=”word-spacing: 5em;”>These words are 5 m’s Æ apart</div> </body> Listing 177-1: Changing text spacing. 6. Save the file and close it. 7. Open the file in your browser, and you should see four blocks of text with different spacing, as in Figure 177-1. Figure 177-1: Changing text spacing. DHTML and Style Sheets 367 Task 177 cross-reference • In addition to spacing, you may want to control the alignment of your text. Task 176 shows how to set the alignment. 08 542419 Ch07.qxd 11/19/03 9:59 AM Page 367 Controlling Absolute Placement with CSS A s browser support for cascading style sheets has improved, so too has the ability of Web designers to control all aspects of their pages’ appearance through Dynamic HTML. One of the aspects of the appearance of your pages that can be controlled through style sheets is the placement of layers. You can place layers in an absolute fashion by using the position: absolute style setting. You then use the left and top style attribute to specify the position of a layer relative to the top left corner of the document section of the browser window. Typically, you will set these values in pixels. For instance, consider the following layer: <div style=”position: absolute; left: 100px; right: 100px;”> Text goes here </div> This results in text positioned 100 pixels below and to the right of the top left corner, as illustrated in Figure 178-1. Figure 178-1: Changing layer positioning. The following task illustrates absolute positioning by displaying two absolutely positioned layers: 1. Create a new HTML document in your preferred editor. 2. In the body of your document, create a layer containing text and place it 200 pixels in and down from the top left corner: <div style=”position: absolute; top: 200px; left: Æ 200px;”>This text is placed 200 pixels from the top and Æ 300 pixels from the left of the window</div> notes • Dynamic HTML is the com- bination of JavaScript, cas- cading style sheets, and the Domain Object Model, which together make it pos- sible to build sophisticated interactive user interfaces and applications that run in the browser. • Layers are created with div tags and can contain any valid HTML in them. They are simply containers for the HTML to which you can apply styles for the whole layer. • With absolute positioning, the order of layers really doesn’t matter. In this example, the second layer visually appears in the flow of the page as being before the first layer. 368 Part 7 Task 178 08 542419 Ch07.qxd 11/19/03 9:59 AM Page 368 3. Create another layer containing text, and place it right at the top left corner. The final page should look like Listing 178-1. <body> <div style=”position: absolute; top: 200px; left: Æ 200px;”>This text is placed 200 pixels from the top and Æ 300 pixels from the left of the window</div> <div style=”position: absolute; top: 0px; left: Æ 0px;”>This text is placed right in the top-left corner of Æ the window</div> </body> Listing 178-1: Controlling layer positioning. 4. Save the file and close it. 5. Open the file in your browser, and you should see the two layers, as in Figure 178-2. Figure 178-2: Controlling layer positioning with absolute positioning. DHTML and Style Sheets 369 Task 178 cross-reference • More information on con- trolling the order of layers can be found in Task 173. 08 542419 Ch07.qxd 11/19/03 9:59 AM Page 369 Controlling Relative Placement with CSS A s browser support for cascading style sheets has improved, so too has the ability of Web designers to control all aspects of their pages’ appearance through Dynamic HTML. One of the aspects of the appearance of your pages that can be controlled through style sheets is the placement of layers. Layers are created with div tags and can contain any valid HTML in them. They are simply containers for the HTML to which you can apply styles for the whole layer. You can place layers in a relative fashion by using the position: relative style setting. This means that any positioning you specify is relative to where you would normally have expected the layer to appear in your document given its placement in the flow of HTML in your document. You then use the left and top style attribute to specify the position of a layer relative to its normal place in the flow of the document. Typically, you will set these values in pixels. For instance, consider the following layer: <div style=”position: relative; left: 100px; right: 100px;”> Text goes here </div> The following task illustrates relative positioning by creating a document that starts with a paragraph and then follows that with a relatively positioned layer: 1. Create a new HTML document in your preferred editor. 2. In the body of your document, create a paragraph: <p> Here is some text </p> 3. Create a relatively positioned layer to follow the paragraph. The final page should look like Listing 179-1. notes • Dynamic HTML is the com- bination of JavaScript, cas- cading style sheets, and the Domain Object Model, which together make it pos- sible to build sophisticated interactive user interfaces and applications that run in the browser. • With relative positioning, the order of layers does matter. In this example, if you switched the position of the layer and the para- graph in your file, you would end up with different results. 370 Part 7 Task 179 08 542419 Ch07.qxd 11/19/03 9:59 AM Page 370 <body> <p>Here is some text</p> <div style=”position: relative; left: 50px; top: 100px;”> This text is indented 50 pixels relative to the text before it and shifted down by 100 pixels </div> </body> Listing 179-1: Controlling layer positioning. 4. Save the file and close it. 5. Open the file in your browser, and you should see the two layers, as in Figure 179-1. Figure 179-1: Controlling layer positioning with relative positioning. DHTML and Style Sheets 371 Task 179 cross-reference • Relative positioning can also be used in creating shadows. See Tasks 169 through 172 for more infor- mation on shadows. 08 542419 Ch07.qxd 11/19/03 9:59 AM Page 371 Adjusting Margins with CSS A s browser support for cascading style sheets has improved, so too has the ability for you to control all aspects of your pages’ appearance through Dynamic HTML. One of the aspects of the appearance of your pages that can be controlled through style sheets is the margin of a layer. To understand margins and their meaning in style sheets, you need to learn about the box model used in cascading style sheets. The box model defines a layer’s outer components, as shown in Figure 180-1. Figure 180-1: The CSS box model. You control the width of the margin in one of several ways: • Use the margin attribute to set the same margin width for all sides. The following creates 5-pixel margins on all sides of the layer: <div style=”margin: 5px;”> Text goes here </div> • Use the margin attribute to set different widths for the different sides: <div style=”margin: 5px 10px 15px 20px;”> Text goes here </div> • Specify distinct margins individually using the margin-top, margin-bottom, margin-right, and margin-left attributes. For instance, the following only creates margins on the top and to the right of the layer: <div style=”margin-top: 5px; margin-right: 5px;”> Text goes here </div> Outer boundary of the layer (not visible) Margin Border (may be visible) Padding (background color or image will fill padding, as well as the content) Actual content of the layer notes • Layers are created with div tags and can contain any valid HTML in them. They are simply containers for the HTML to which you can apply styles for the whole layer. • When you are specifying all four margin widths with the margin attribute,the first value is for the top margin and then the values pro- ceed clockwise, with the right margin, the bottom margin, and finally the left margin. • This outer layer with a bor- der is presented for visual purposes. It allows you to see where the margin occurs as the space between the visible edge of an inner layer and the bor- der (see Step 2). • The inner layer has a back- ground color to show where the visible part of the layer ends and the margins start (see Step 3). • By default, layers have no margins; so if you don’t need a margin, you don’t have to specify any margin- related style attributes (see Step 5). 372 Part 7 Task 180 08 542419 Ch07.qxd 11/19/03 9:59 AM Page 372 The following task illustrates how margins work by displaying the same layer with two different margin settings: 1. In the body of your document, create a layer with a border: <div style=”border-style: solid; border-width: 1px;”> </div> 2. In this layer, create another layer with a margin: <div style=”background-color: #cccccc; margin: 10px;”>Æ 10 pixel margins</div> 3. Create another layer with a border, and inside that, create a layer without a margin, so that the final page looks like Listing 180-1. <body> <div style=”border-style: solid; border-width: 1px;”> <div style=”background-color: #cccccc; margin: 10px;”Æ >10 pixel margins</div> </div> <br> <div style=”border-style: solid; border-width: 1px;”> <div style=”background-color: #cccccc;”>No margins</div> </div> </body> Listing 180-1: Using margins. 4. Save the file and close it. 5. Open the file in your browser, and you should see the two layers, as in Figure 180-2. Figure 180-2: Controlling margins. DHTML and Style Sheets 373 Task 180 08 542419 Ch07.qxd 11/19/03 9:59 AM Page 373 Applying Inline Styles W ith cascading style sheets, there are a number of ways you can apply styles to text. One way is to use inline style definitions. These allow you to spec- ify styles in the style attribute of any HTML tag. For instance, you might specify a style attribute specifically for one paragraph: <p style=”style definition”>A paragraph<p> Similarly, you might specify style settings for a layer that can contain lots of HTML: <div style=”style definition”>Lots of HTML</div> Finally, you can specify inline styles that override styles just for a given span of text, as in the following: <p> This is text and <span style=”style definition”>this is Æ inline</span> </p> The following task illustrates the use of inline style assignments: 1. Create a new HTML document in your preferred editor. 2. In the body of your document, create a level 1 heading: <h1>A Stylized Headline</h1> 3. Apply styles to the heading: <h1 style=”font-family: Arial; font-size: 18px;”>A Æ Stylized Headline</h1> 4. After the heading, create a layer with some HTML in it: <div> <h1>A Layer</h1> This layer has <strong>style</strong>. It also has Æ some inline text. </div> 5. Add a style specification to the layer: <div style=”background-color: #cccccc; color: red;”> <h1>A Layer</h1> This layer has <strong>style</strong>. It also has some inline text. </div> notes • The style definition in the div tag will apply to all contents of the layer unless overridden by a setting in the layer. Therefore, the level head will retain its normal font and size but will adopt the colors speci- fied in the style definition. • The style for the span block inside the layer will override the colors speci- fied in the div tag just for the text contained in the text span. 374 Part 7 Task 181 08 542419 Ch07.qxd 11/19/03 9:59 AM Page 374 6. Specify a style definition for some of the text in the layer, using a span tag, so that the final document looks like Listing 181-1. <body> <h1 style=”font-family: Arial; font-size: 18px;”>A Æ Stylized Headline</h1> <div style=”background-color: #cccccc; color: red;”> <h1>A Layer</h1> This layer has <strong>style</strong>. It also has Æ some <span style=”color: white; background-color: Æ black;”>inline text</span>. </div> </body> Listing 181-1: Using inline style definitions. 7. Save the file and close it. 8. Open the file in a browser to see the styles, as in Figure 181-1. Figure 181-1: Applying inline styles. DHTML and Style Sheets 375 Task 181 cross-reference • You can set a number of different style values. For example, Tasks 174 and 175 show you how to set some of the text character- istics, and Task 176 shows you how to control alignment. 08 542419 Ch07.qxd 11/19/03 9:59 AM Page 375 [...]... information presented in this task to do a number of interesting things For example, using the information in Tasks 178 or 179 , you can place items in certain locations in the Window For instance, you can determine the center of the window by dividing the width and height in half 7 Save the file and close it 8 Open the file in a browser, and you now see the window’s dimensions, as illustrated in Figure 193-1... Cascading style sheets has a range of special selectors, including selectors for when the mouse is hovering over a given HTML element, for the first letter of the element, for the first line of an element, for only links in an element, and so on The nice thing about the first-line selector is that it always affects the first line regardless of changes in the window dimensions If you have a very narrow window... browser window The way you do this depends on the browser you are using: • In Netscape 6 and higher, the window.innerHeight property indicates the height of the working area of the browser window in pixels Similarly, window.innerWidth indicates the width • In Internet Explorer, the document.body.clientHeight property indicates the height in pixels Similarly, the document.body.clientWidth property indicates... the first line of the Æ paragraph Should be interesting Listing 1 87- 1: Creating a first-line effect 7 Save the file and close it 8 Open the file in your browser, and you should see the four paragraphs, as in Figure 1 87- 1 Figure 1 87- 1: A special style on the first line 1 87 388 Task 188 notes • • • Dynamic HTML is the combination of JavaScript, cascading style sheets, and the Domain Object Model,... possible to build sophisticated interactive user interfaces and applications that run in the browser Cascading style sheets has a range of special selectors, including selectors for when the mouse is hovering over a given HTML element, for the first letter of the element, for the first line of an element, for only links in an element, and so on The link style will apply in addition to any appearance... element, for only links in an element, and so on The nice thing about the first-line selector is that it always affects the first line regardless of changes in the window dimensions If you have a very narrow window with fewer words on the first line than a wider window, then only those words are affected by the style There is no need to apply any special styling to the first line itself in the text... and then including that file in any of the documents in your site that need to use the styles To build a global style sheet file, just define the styles in a separate file You can define three types of style definitions: • HTML element definitions, which specify a default style for different HTML elements (in other words, for different HTML tags) For instance, the following defines a style for level... browser’s dimensions cross-reference • In addition to detecting the size of a window, you can also detect other information For example, see Task 195 to discover the steps for detecting the number of colors 400 Task 194 Part 7 Forcing Capitalization with Style Sheet Settings A s browser support for cascading style sheets has improved, so too has the ability for you to control all aspects of your pages’... available in newer browsers with robust support for the Domain Object Model This means this task will only work in Internet Explorer 5 and later or Netscape 6 and later • • In Step 5 notice the use of a javascript: URL in the link This URL causes the specified JavaScript code to execute when the user clicks on the link When you call the hideObject function, you pass in the object ID as a string; that... overriding them, applied to your document, as in Figure 184-1 cross-reference • Figure 184-1: Individual style attributes overridden with local style definitions See Task 182 for additional information on creating individual styles 382 Task 185 notes • • • Cascading style sheets has a range of special selectors, including selectors for when the mouse is hovering over a given HTML element, for the . spacing between words in pixels or em units: The following text has larger word spacing: <span Æ style=”word-spacing: 3.0em;”>This has bigger word Æ spacing</span> The following task. Æ apart</div> </body> Listing 177 -1: Changing text spacing. 6. Save the file and close it. 7. Open the file in your browser, and you should see four blocks of text with different spacing, as in Figure 177 -1. Figure 177 -1:. 371 Task 179 cross-reference • Relative positioning can also be used in creating shadows. See Tasks 169 through 172 for more infor- mation on shadows. 08 542419 Ch 07. qxd 11/19/03 9:59 AM Page 371 Adjusting Margins with CSS A s
Ngày đăng: 12/08/2014, 19:21
Xem thêm: JavaScript in 10 Simple Steps or Less 2007 phần 7 pot, JavaScript in 10 Simple Steps or Less 2007 phần 7 pot
