Benefits of CSS controls

For a long time, Web developers have used images and JavaScript scriptsCodeTo develop interactive controls. However, in many cases, using CSS rules to define the format of text hyperlinks is a good choice for developing interactive controls. CSS technology is faster and more effective, so it is not a strange thing to see this technology on many websites.

Disadvantages of using traditional methods to develop controls
 
Developing a control using traditional technologies often starts with a small icon that contains a rectangle or other shape text input boxes. This control may be decorated with shadows, light effects, skews, or other effects, but it is essentially a framework that contains text.

First, you need to create an independent icon for each status of the control. For example, you need to create an icon for the control by default, and create an icon for the control when the mouse pointer points to the control. For this simple effect, you need at least two icons (default and mouse pointing to two statuses). If you want to add the clicked and accessed statuses, each control requires three or four icons.

Adding a BASIC icon to Your webpage for hyperlink is simple, but you only need to remember to enter a proper location to meet the access needs.

To make your controls interactive, you need to add Javascript script code to make the control icons respond to mouse events, such as when you point to the icon. Development software such as Dreamweaver can automatically add code with a simple mouse operation, but the Code contains the page size information.

To make the dynamic effect, you need to download the image in advance so that the browser can change immediately when the user points to this control. Downloading images in advance will increase the webpage loading time, and the inconvenience lies in that even if you do not need to use all the controls, it also needs to load all the images.

What makes CSS technology superior?
With CSS, you can create a complete interactive control from a simple text hyperlink. Appropriate formatting can change a paragraph or break it into a rectangle around a text hyperlink. Adding dynamic effects to hyperlink text requires only a few simple CSS codes to make the control interactive. Compared with the icon-based space, this control has the following advantages:

1. No icons are required. CSS creates control effects by formatting text, so no independent icon files need to be created.

2. You do not need to enter any text attributes, because the text of the CSS control is completely accessible.

3. More effective code. The CSS rule and classification code is smaller than the Javascript script code it replaces, so the Browser executes faster.

4. No icons need to be loaded in advance. Webpage loading with CSS controls is faster.

5. CSS rules can be easily used and maintained on all websites. You can change the form of all controls on your webpage by modifying your CSS style.

By creating rules for the control formatting of hyperlinks, you can use hyperjoin formatting in other files to make the control look and use different from others.
Example of parsing a CSS Control

The following is an example of a referenced CSS style form. The. Button class created by the formatting rule has a width of 80 pixels, 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 specifically describe how the format changes with the status of the hyperlink. These rules are interrelated and are only affected within the scope of class. Button. The default link status does not change; the mouse overwrites the white text border in the blue background; the accessed status is the light gray text box in the 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 how to use CSS controls on a webpage. All you need to do is add the attributes of the appropriate class to the module tag (for example, segmentation or paragraph), which 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 controls in CSS format in text hyperlinks is fast and efficient, and the results are sufficient for most users. The advantage of this technology can create a new standard for the development of icon-based controls.