Discover the benefits of CSS controls

css| Control

For a long time, web developers have developed interactive controls by using pictures and JavaScript scripting code. However, in many cases using CSS rules to define the format of text hyperlinks is a good choice for developing interactive controls. Using CSS technology to develop faster and more efficient, so it's no surprise to see this technology on many websites now.

Disadvantages of developing controls using traditional methods

Using traditional techniques to develop a control is often started with a small icon that contains a rectangle or other shape text input box. The control may be decorated with shading, light effects, skew, or other effects, but it is essentially a frame that contains text.

First, you need to create a separate icon for each state of the control. For example, you need to create an icon for the control by default, and create an icon for it when the mouse pointer is pointing to the control. Just such a simple effect, you need at least two icons (default and mouse pointing to two states), if you want to add the click and Access state, each control requires three or four icons.

Adding a basic icon to your Web page for hyperlinks is easy, but just remember to enter the right location to meet your access needs

To make your control interactive, you need to add JavaScript scripting code to enable the control icon to react when a mouse event occurs, such as when the mouse points to an icon. Development software like Dreamweaver can automatically add code using a simple mouse operation, but the code contains the size of the page.

To make a dynamic effect, you need to download the picture beforehand so that the browser can change immediately when the user points to the control. Downloading a picture in advance will make the page load longer, and it's inconvenient that even if the user doesn't need to use all the controls, it loads all the pictures.

What makes CSS technology superior?
With CSS, you can create a complete interactive control from a simple text hyperlink. Proper formatting can change a paragraph or break it into a rectangular box that surrounds a text hyperlink. Adding a dynamic effect to the hyperlink text requires a few more simple CSS code to make the control interactive. This control has several advantages over an icon-based space:

1, do not need any icon. CSS creates control effects by formatting text, so you don't need to create any separate icon files.

2, you do not need to type any text attributes, because the text of the CSS control is already fully accessible.

3, more effective code. CSS rules and classification code is smaller than the JavaScript script code it replaces, so the browser executes faster.

4, no icon need to preload. Web pages that contain CSS controls have a significantly faster loading speed.

5. CSS rules can be easily used and maintained on all Web sites. You can change all the control forms on your Web page by modifying your CSS style.

By formatting a rule for a hyperlink's control, you can make the control look and feel different by using a hyperlink format in another file.
Example of parsing a CSS control

The following is an example of a referenced CSS style form. The format rule creates a. Button class with 80 pixel widths, a black background, a white border, and a white text box.

. button {

.... border:1px solid white;

.... padding:5px;

.... width:80px;

.... color:white;

.... font-family:arial, Helvetica, Sans-serif;

.... font-size:1.1em;

.... font-weight:normal;

.... text-align:center;

.... height:1.25em;

.... background-color:black;

}

Next, the style form includes rules that describe how the format changes with the state of the hyperlink. These rules are interrelated and affect only within the scope of the class. button. The default link state does not change; the state of the mouse overlay is a white text border on a blue background; the visited state is a light gray text box in a dark gray background.

. button A:link {

Text-decoration:none;

Color:white;

}

. button A:hover {

Text-decoration:none;

Color:white;

Font-weight:bold;

Background:blue;

}

. button a:visited {

Text-decoration:none;

Color: #BBBBBB;

Background: #333333;

}

The following code shows a simple operation that uses a CSS control on a Web page. All you need to do is add the appropriate attributes of the class to the module tag (for example, a paragraph or a section), and the tag contains a simple hyperlink. In this case, the result will be three rectangular controls: Home,gallery and about Us.

<div class= "button" ><a href= "default.htm" >Home</a></div>

<div class= "button" ><a href= "gallery.htm" >Gallery</a></div>

<div class= "button" ><a href= "about_us.htm" >about us</a></div>

Creating a control in a text hyperlink using CSS formatting is fast and efficient, and the results are sufficient for most users. The advantages of this technology can create a new standard for the development of icons based controls.