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

Today, I will talk to you about the skills of CSS, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

The fierce competition among browsers means that more and more people are now using devices that support the latest and most advanced W3C Web standards to access the Internet in a more interactive way. This means that we can finally take advantage of the more powerful and flexible CSS to create simpler, more maintainable browser front-end code.

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:

CSS Code copies content to the clipboard

H3: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:

CSS Code copies content to the clipboard

@ media print {a:after {content: "(link to" attr (href) ");}} 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.

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:

CSS Code copies content to the 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-increasing method

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:

CSS Code copies content to the 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;} after reading the above, do you have any further understanding of CSS's skills? If you want to know more knowledge or related content, please follow 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.