Shulou(Shulou.com)06/03 Report--

This article mainly introduces "content in css: what is the role". In daily operation, I believe that many people have doubts about the role of content: in css. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "content in css: what is the role of content?" Next, please follow the editor to study!

The code is as follows:

.clearfix: after {

Clear: both

Content: ".

Display: block

Height: 0

Visibility: hidden

}

1While-

When writing HTML code, it is found that in browsers such as Firefox that conform to W3C standards, if there is an DIV as an external container, and if the internal DIV is set to float style, then the external container DIV cannot be opened because there is no clear inside.

The CSS of this clearfix uses the pseudo-object after, which adds the contents of the content at the end of the element that applies the clearfix. Add a full stop "." here, and set its display to block; height to 0 position clear to both;visibility to hide. In this way, the purpose of opening the container is achieved.

2muri-

The grammar of content is rarely used. I just looked it up:

Syntax:

The code is as follows:

Content: attr (alt) | counter (name) |

Counter (name, list-style-type) |

Counters (name, string) |

Counters (name, string, list-style-type) |

No-close-quote | no-open-quote | close-quote |

Open-quote | string | url (url)

Value:

The code is as follows:

Attr (alt)

:

Text that uses the alt attribute of an object

The code is as follows:

Counter (name)

:

Use named counters

The code is as follows:

Counter (name, list-style-type)

:

Use the named counter and follow the specified list-style-type property

The code is as follows:

Counters (name, string)

:

Use all named counters

The code is as follows:

Counters (name, string

List-style-type)

:

Use all named counters and follow the specified list-style-type property

The code is as follows:

No-close-quote

:

The trailing tag of the quotes attribute is not inserted. But increase its nesting level

The code is as follows:

No-open-quote

:

The pre-tag of the quotes attribute is not inserted. But reduce its nesting level

The code is as follows:

Close-quote

:

Insert the trailing tag of the quotes attribute

The code is as follows:

Open-quote

:

Insert the front tag of the quotes attribute

The code is as follows:

String

:

Use strings enclosed in quotation marks

The code is as follows:

Url (url)

:

Use the specified absolute or relative url address description: used with: after and: before pseudo elements to display content before or after the object. The corresponding script feature is content. Example:

The code is as follows:

P:after {content: url ("http:www.devguru.com")

Text-decoration: none;}

P:before {content: url ("beep.wav")}

At this point, the study of "what is the role of content in css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.