The example explains the behavior in CSS: expression and behavior (with demo download)

ArticleDirectory

• Resource and demo download list

This article will explainExpressionAndBehavior. However, it should be noted that a large amount of CSS operations will greatly consume client resources. This affects the rendering speed of webpages. Therefore, it is not recommended to use CSS in a wide range.

Structure, performance, behavior, separation and Connection

Three elements of a web page: structure, performance, and behavior. Everyone knows this. (If you are not familiar with this, you can do this here.Narrow SenseUnderstanding-the structure is HTML, the performance is CSS, and the behavior is JavaScript ). In order to write highly cohesive, low coupling, and reusable webpages that comply with web standards, separating these three layers is essential, therefore, in the HTML structure, write "style = "...... "" Is not recommended. However, separation does not mean "one-size-fits-all". As the three components of a Web page, they must still be in touch. For example, the structure and performance are associated with CSS delimiters, while the structure and behavior are linked with events. What is the connection between performance and behavior? In fact, the bond between them is the behavior in CSS that we are going to talk about today.

Connection between performance and Behavior

It seems that many of my friends feel: What is the relationship between CSS and JavaScript? It seems that there is no need to maintain any contact? Indeed, in many cases, they are rarely directly associated, and even if necessary, they can be indirectly converted to the relationship between structures and behaviors. Moreover, as the support of the latest browsers for css2 and CSS 3 continues to improve, the connection between structures and behaviors is also weakening. However, the relationship between performance and behavior, in some special processing, especially in the special effect of IE5-IE6 compatibility, but has a very large application.

Let's look at a simple example --

<Ul >
 

 
 <Li>I'm a list item from http://justinyoung.cnblogs.com/</Li>
 

 
 <Li>I'm a list item from http://justinyoung.cnblogs.com/</Li>
 

 
 <Li>I'm a list item from http://justinyoung.cnblogs.com/</Li>
 

 <Li>I'm a list item from http://justinyoung.cnblogs.com/</Li>
 

 
 <Li>I'm a list item from http://justinyoung.cnblogs.com/</Li>
 

 
</Ul>
 

It's easy, just a list. Now we want to make a better change to the user experience on these lists: When you move the cursor over each list item, the background color of this list is highlighted. Yes, it's just a practical change. If I did not guess correctly, the first thing you think of should be the following:Code--

 
<Ul >
 

 <Li Onmouseover= "This. style. backgroundcolor = 'pink '" Onmouseout= "This. style. backgroundcolor = '';">I'm a list item from http://justinyoung.cnblogs.com/</Li>
 

 
 <Li Onmouseover= "This. style. backgroundcolor = 'pink '" Onmouseout= "This. style. backgroundcolor = '';">I'm a list item from http://justinyoung.cnblogs.com/</Li>
 

 <Li Onmouseover= "This. style. backgroundcolor = 'pink '" Onmouseout= "This. style. backgroundcolor = '';">I'm a list item from http://justinyoung.cnblogs.com/</Li>
 

 
 <Li Onmouseover= "This. style. backgroundcolor = 'pink '" Onmouseout= "This. style. backgroundcolor = '';">I'm a list item from http://justinyoung.cnblogs.com/</Li>
 

 <Li Onmouseover= "This. style. backgroundcolor = 'pink '" Onmouseout= "This. style. backgroundcolor = '';">I'm a list item from http://justinyoung.cnblogs.com/</Li>
 

 
</Ul>
 

There is no need to feel shy. There is nothing wrong with it and it achieves the effect completely. However, when the boss says, "Please make all the lists on other pages achieve this effect", you will be crazy. After all, finding all the Li tags on all pages of the project and copying the above two pieces of code is definitely not a comfortable job.

Why not try expression in CSS. In the common CSS style sheet file, add the following style to immediately implement the effect on all Li labels --

<!Doctype Html Public "-// W3C // dtd xhtml 1.0 transitional // en" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

 
<Html Xmlns= "Http://www.w3.org/1999/xhtml">
 

 
<Head>
 

 
<Meta HTTP-equiv= "Content-Type" Content= "Text/html; charsets = UTF-8" />
 

<Meta Name= "Keywords" Content= "Yes! B/S !, Web standard, Yang Zhengyi, blog Park, instance code" />
 

 
<Meta Name= "Description" Content= "This is a simple yes! B/S! Article Example page, from Yang Zhengyi's blog, http://justinyoung.cnblogs.com /" />
 

 
<Title>Yes! B/S! Article example Page</Title>
 

<Style Type= "Text/CSS">
 

 
/*** Put the style on the foreground page for ease of demonstration ***/
 

 
Li {
 

 
Star: expression (onmouseover = function () {This. style. backgroundcolor = "pink"}, onmouseout = function () {This. style. backgroundcolor = "";})
 

 
}
 

 
</Style>
 

 
</Head>
 

 
<Body>
 

<Ul >
 

 
 <Li>I'm a list item from http://justinyoung.cnblogs.com/</Li>
 

 
 <Li>I'm a list item from http://justinyoung.cnblogs.com/</Li>
 

 
 <Li>I'm a list item from http://justinyoung.cnblogs.com/</Li>
 

 <Li>I'm a list item from http://justinyoung.cnblogs.com/</Li>
 

 
 <Li>I'm a list item from http://justinyoung.cnblogs.com/</Li>
 

 
</Ul>
 

 
</Body>
 

 
</Html>
 

Yes, that is, "Star: expression (onmouseover = function () {This. style. backgroundcolor = "pink"}, onmouseout = function () {This. style. backgroundcolor = "" ;}) "to achieve the effect just now, without any changes to the foreground structure.

This is the role of expression, a lightweight Implementation of style behavior.

Hell! Changed again!

The above effect is really good, and the effect of floating the Mouse onto the background highlighted has been well received by the customer. So that the customer said: "This effect is really good. Can you add this effect to all table cells, reference tags, and hyperlinks ." There is no way to satisfy customers' besties. So you add this to tags like TD, BLOCKQUOTE, and. You have an extra eye. To prevent customers from setting different backgrounds for Li, TD, BLOCKQUOTE, and a, you have separated them. The following code is very spectacular in the style sheet --

 
Li{
 

 
Star: expression (onmouseover = function () {This. Style. Backgroundcolor= "Pink"}, onmouseout = function () {This. Style. Backgroundcolor= "";})
 

 
}
 

TD{
 

 
Star: expression (onmouseover = function () {This. Style. Backgroundcolor= "Pink"}, onmouseout = function () {This. Style. Backgroundcolor= "";})
 

 
}
 

 
BLOCKQUOTE{
 

 
Star: expression (onmouseover = function () {This. Style. Backgroundcolor= "Pink"}, onmouseout = function () {This. Style. Backgroundcolor= "";})
 

 
}
 

 
A {
 

Star: expression (onmouseover = function () {This. Style. Backgroundcolor= "Pink"}, onmouseout = function () {This. Style. Backgroundcolor= "";})
 

 
}
 

The customer is very satisfied with your response speed, but unfortunately: This customer is only a small role, and what is really needed is not him, but his superior boss nodded and the project can be accepted. Fortunately, the superior customer did not ask too much, but simply said, "I want the highlighted color to turn green, and the highlighted text should be red, and the mouse looks like a finger!"

Although the customer with the small role slapped his chest at the beginning, "it will never change. This is our effect ". But what really pays for is the "superior boss customer ". So there is no way, and we can only change it. For the scalability and maintainability of the system, we recommend that you use behavior. As a lightweight expression solution, it is no longer the best choice.

Behavior behavior in CSS

Behavior in CSS is also the bond between performance and behavior. Only behavior is better at solving some heavyweight tasks than expression (for example, we will talk about transparent PNG support in IE6 in future ).

Therefore, if the above requirements are implemented using behavior, it will be very easy.

Create an HTC file first. Although it is named, it is named "changecolor. HTC". The content is very simple and can be understood by JavaScript --

<Public: AttachEvent="Onmouseover"Onevent ="Befor ()"/>
 

 
<Public: AttachEvent="Onmouseout"Onevent ="After ()"/>
 

 
<SCRIPT type ="Text/JavaScript">
 

 
FunctionBefor (){
 

 
This. Style. backgroundcolor ="#7 fffaa";
 

 
This. Style. Color ="Red";
 

This. Style. cursor ="Pointer";
 

 
}
 

 
FunctionAfter (){
 

 
This. Style. backgroundcolor ="";
 

 
This. Style. Color ="";
 

 
This. Style. cursor ="";
 

 
}
 

 
</SCRIPT>
 

Then add the following style to the general CSS file to introduce the HTC file --

 
Li, TD, BLOCKQUOTE, A {behavior: URL ("Changecolor. HTC")}
 

In this way, the style and behavior are completely separated. In the future, what should the damn customers change? You only need to make corresponding modifications in the general CSS or HTC file.

Description 1: Only Ie can use expression and behavior.

In CSS, expression and behavior are valid only for IE, Firefox is invalid, and IE is only supported by ie5 or a later version.

2: expression and behavior are not recommended.

In the page rendering process, expression and behavior require a lot of computing, which will consume a lot of client resources. Therefore, do not use expression and behavior.

3: Practical Significance of expression and Behavior

The above two points seem to have sentenced expression and behavior to death. In fact, they do not. They still have a practical significance-it is to solve the compatibility problem of IE6 in another way (ie5 has basically exited the market, so you don't have to consider it ). For example, IE7 and later versions, Firefox, opera, and Safari all support transparent PNG images, but IE6 does not. This is the inherent defect of IE6, but to make IE6 compatible with our design results, behavior will be useful at this time.

In general, expression and behavior are gradually declining, but as long as IE6 still has a place in the browser market, expression and behavior still have vigorous vitality.

Resource and demo download resource and demo download list

• A complete and runable instance page
• Download a complete runable instance demo
• More about expressions in CSS