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

This article mainly explains "what are the special CSS tips". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what special CSS tips"!

1. Display the HTML attribute value with attr () in CSS

The attr () function has been around for a long time in the CSS 2.1standard, but it is only now becoming popular. It provides an ingenious way to use attributes on HTML tags in CSS, which in many cases can help you avoid the process that requires Javascript processing in the past.

To use this feature, you need to use three elements: before or: after CSS pseudo-class style, .content attribute, and an attr () expression with the name of the HTML attribute you want to use. For example, to display the value of the data-prefix attribute on the title, you could write something like this:

The code is as follows:

H4:before {

Content: attr (data-prefix) ""

}

This is a heading

Obviously, this example doesn't show how useful it is, it just shows its basic usage. Let's try a more useful example. A great use of attr () is to display the page link when the user prints the page. To achieve this, you can write:

The code is as follows:

@ media print {

A:after {

Content: "(link to" attr (href) ")"

}

}

Http://example.com">Visit our home page

Once you know this technique, you will be surprised at the convenience it brings to your work many times!

Tip: in the new version of the CSS3 standard, the attr () function is extended to be used in a variety of CSS tags.

two。 Use counter () to automatically add sequence numbers to the list

Another feature already supported in CSS 2.1is counter (), which makes it easy to add serial numbers to page titles, blocks, and other consecutive page content. With it, you don't have to be limited to use to achieve this effect, you can use custom number sequences on the page more flexibly.

The point is that it's really simple: add counter () to the content attribute in the before pseudo class:

The code is as follows:

Body {

Counter-reset: heading

}

H5:before {

Counter-increment: heading

Content: "Heading #" counter (heading) "."

}

If you want to know more about this counter zeroing and self-increasing method, please refer to the Mozilla Developer Network page on this topic. There is an excellent example of how to use nested counter.

3. Use calc () to do arithmetic

Last but not least, let's talk about the calc () function. This function allows you to perform simple arithmetic calculations, such as calculating the length and width of elements, eliminating the need for you to write Javascript code that is difficult to maintain. This function supports all simple basic arithmetic operations, including addition, subtraction, multiplication and division.

For example, you want to create an element whose width is full of its parent element, but also set aside some pixel width for other purposes:

The code is as follows:

.parent {

Width: 100%

Border: solid black 1px

Position: relative

}

.child {

Position: absolute

Left: 100px

Width: calc (90%-100px)

Background-color: # ff8

Text-align: center

}

Thank you for your reading, the above is the content of "what are the special CSS tips". After the study of this article, I believe you have a deeper understanding of what special CSS tips there are, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.