Приглашаем посетить
Брюсов (bryusov.lit-info.ru)

2.5 Other design techniques using the CSS style

Table of Contents

Previous Next

2.5 Other design techniques using the CSS style

2.5.1 Changing the cursor shape with CSS

It is sometimes useful to alter the browser's environment. For example, you may want to change the browser's cursor when the mouse passes over a given element. To change the shape of a cursor with CSS is easy: all you need is to define the style attribute with the cursor keyword. The following are the 16 frequently used cursor shapes defined in CSS1:



cursor:auto        cursor:n-resize     cursor:crossbar    cursor:se-resize
cursor:default     cursor:sw-resize    cursor:hand        cursor:s-resize
cursor:move        cursor:w-resize     cursor:e-resize    cursor:text
cursor:ne-resize   cursor:wait         cursor:nw-resize   cursor:help

Consider the following example page ex02-21.htm:



Example: ex02-21.htm - Changing Cursor Shape With CSS

 1: <?xml version="1.0" encoding="UTF-8"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title>Changing Cursor Shape  ex02-21.htm</title></head>
 6: <body style="font-family:arial;font-size:18pt;background:#eeeeee">
 7:
 8: <div style="font-size:24pt;font-weight:bold;color:#00aa00;
 9:      text-align:center"><br />
10: Move the mouse over the words <br />to see the cursor change<br /><br />
11:
12: <table style="font-size:18pt;font-family:arial;color:#000000">
13: <tr>
14:   <td style="width:200px"><span style="cursor:auto">Auto</span></td>
15:   <td><span style="cursor:crosshair">Crosshair</span></td></tr>
16: <tr>
17:   <td><span style="cursor:default">Default</span></td>
18:   <td><span style="cursor:hand">Hand</span></td></tr>
19: <tr>
20:   <td><span style="cursor:move">Move</span></td>
21:   <td><span style="cursor:e-resize">e-resize</span></td></tr>
22: <tr>
23:   <td><span style="cursor:ne-resize">ne-resize</span></td>
24:   <td><span style="cursor:nw-resize">nw-resize</span></td></tr>
25: <tr>
26:   <td><span style="cursor:n-resize">n-resize</span></td>
27:   <td><span style="cursor:se-resize">se-resize</span></td></tr>
28: <tr>
29:   <td><span style="cursor:sw-resize">sw-resize</span></td>
30:   <td><span style="cursor:s-resize">s-resize</span></td></tr>
31: <tr>
32:   <td><span style="cursor:w-resize">w-resize</span></td>
33:   <td><span style="cursor:text">text</span></td></tr>
34: <tr>
35:   <td><span style="cursor:wait">wait</span></td>
36:   <td><span style="cursor:help">help</span></td></tr>
37: </table>
38: </div>
39: </body>
40: </html>

The 16 frequently used cursor shapes are defined in lines 1436. The cursor shape is defined by the keyword cursor followed by its attribute. For example, line 35 defines a "wait" cursor and it changes to an hourglass when the mouse passes over the word "wait." This page has the screen shot shown in Fig. 2.22.

Figure 2.22. ex02-21.htm

graphics/02fig22.gif


2.5.2 Displaying XML pages with CSS

Extensible Markup Language (XML) is a meta programming language that can be used to create a data format for structured document interchange. How to display an XML page on the Web is a big issue a whole book or more could be written on this subject alone. We will cover XML and XSLT in more detail in Chapter 5.

Consider the following example ex02-22.xml:



Example: ex02-22.xml - Display XML Document With CSS

1: <?xml version="1.0"?>
2: <?xml-stylesheet type="text/css" href="ex02-22.css" ?>
3:
4: <page>
5:    <contents>
6:     <myPar>Display XML Document with CSS.</myPar>
7:     <myPar>www.pwt-ex.com</myPar>
8:    </contents>
9: </page>

This is a simple XML page with one root element, <page>. Inside this page element, there will be a content element <contents> and one child element called myPar. By defining the XML style sheet in line 2



<?xml-stylesheet type="text/css" href="ex02-22.css" ?>

the external CSS file ex02-22.css will be called to display the XML page. The style file is shown below:



Example: ex02-22.css - External CSS File For ex02-22.xml

 1: myPar
 2: {
 3:    display: inline;
 4:    display: block;
 5:    margin-left: 40pt;
 6:    font-family:arial;
 7:    font-size: 22pt;
 8:    font-weight: bold;
 9:    color: #000088;
10:
11:    margin-bottom: 30pt;
12:    text-align: left;
13:    line-height: 30px;
14:    text-indent: 0px;
15: }

This program will work on all the latest browsers including IE6+, NS6+, and Opera 6+. A screen shot of this program working in IE and NS is shown in Figs 2.23 and 2.24 respectively.

Figure 2.23. Display XML page with IE

graphics/02fig23.gif


Figure 2.24. Display XML page with NS

graphics/02fig24.gif


2.5.3 Generating a text background with scripts

The power of scripting languages has become extremely important in the development of Web technologies. It adds programming capabilities to Web pages. In fact, scripts are indispensable tools for almost all Web programmers. In this book, we have chapters dedicated to Web programming with scripts. Even at this premature stage, we would like to show you how a simple script can be used to enhance the features of your Web pages.

The next example ex02-23.htm uses a very simple script function to generate a repeated text background on the page.



Example: ex02-23.htm - Generating A Text Background

 1: <?xml version="1.0" encoding="UTF-8"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head>
 6: <title>Generating a Text Background  ex02-24.htm </title>
 7: </head>
 8: <script>
 9:  function display_string()
10:  {
11:   for (ii=0;ii<500;ii++)
12:   {
13:   document.write("P r a c t i c a l &nbsp; W e b T e c h n o l o g i e s ")
14:
15:   }
16:  }
17:
18: </script>
19:
20: <body style="background:#000088;color:#ffff00;font-weight:bold">
21: <script>display_string()</script>
22: <div style="position:absolute;left:100px;top:100px;
23:   font-size:150pt;color:#ff0000">PWT</div>
24: </body>
25: </html>

To define a script, the <script> element is used. This Web page contains two <script> elements: the first one in lines 818 defines a script (or JavaScript) with one function, display_string(). This function has a for-loop which will execute the following statements 500 times (see lines 1115):



document.write("P r a c t i c a l &nbsp; W e b T e c h n o l o g i e s ")

This statement outputs the text between the quotation marks to the Web page. The space between each character would allow the browser to have a line break at any point. You can use the non-breaking space symbol &nbsp; as illustrated in line 13 to add more space so that the text is more readable. The second <script> element in line 21 executes the defined function display_string() and therefore a background text is created. A screen shot of this page is shown in Fig. 2.25.

Figure 2.25. ex02-23.htm

graphics/02fig25.gif


    Table of Contents

    Previous Next