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

Today, I will talk to you about CSS skills, which may not be well understood by many people. In order to let you know more, Xiaobian summarized the following contents for you. I hope you can gain something according to this article.

The white-hot competition among browsers means that more and more people are now using devices that support the latest, most advanced W3C Web standards to access the Internet in a more interactive way. This means we can finally leverage more powerful and flexible CSS to create cleaner, better-maintained browser front-end code. Now let's take a look at some exciting CSS features you may not know about.

Display HTML attribute values in CSS with attr()

The attr() feature has been around since CSS 2.1, but it's only now becoming popular. It provides a clever way to use HTML tag attributes in CSS, and in many cases saves you the need for Javascript.

To use this feature, you need three elements: a:before or:after CSS pseudo-class style, the.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:

CSS Code Copy content to clipboard

h3:before { content: attr(data-prefix) " "; } This is a heading Obviously, this example doesn't show how useful it is, just how it is used. Let's try a more useful example. A great application of attr() is to display page links when users print pages. To do this, you can write CSS Code copy content to clipboard @media print { a:after { content: " (link to " attr(href) ") "; } } Visit our home page

Once you know this technique, you'll be amazed at how convenient it can be for your work!

Tip: In the new version of the CSS3 standard, the attr() function has been extended to be used in various CSS tags.

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

Another feature already supported in CSS 2.1 is counter(), which allows you to easily add sequence numbers to page titles, blocks, and other sequential page content. With it, you don't have to be limited to using only to achieve this effect, you can have more flexibility in using custom number sequences on the page.

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

CSS Code Copy content to clipboard

body { countercounter-reset: heading; } h4:before { countercounter-increment: heading; content: "Heading #" counter(heading) ". "; }

If you want to know more about this counter zeroing and self-incrementing method, please refer to Mozilla on this topic.

Developer Network page. There's an excellent example of how to use nested counters.

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 an element, eliminating the need to write unmaintainable Javascript code. This function supports all simple basic arithmetic operations, including addition, subtraction, multiplication and division.

Let's say you want to create an element whose width is full of its parent element, but set aside some pixel width for other uses:

CSS Code Copy content to clipboard

.parent { width: 100%; border: solid black 1px; position: relative; } .child { position: absolute; left: 100px; width: calc(90% - 100px); background-color: #ff8; text-align: center; }

It is becoming increasingly clear that CSS has matured to the point where it can replace JavaScript in some ways, greatly simplifying the work of web developers.

Take advantage of these skills, there will be no certain effect.

After reading the above, do you have any further understanding of CSS techniques? If you still want to know more knowledge or related content, please pay attention to the industry information channel, thank you for your support.

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.