In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-02 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
This article mainly introduces the commonly used CSS skills, the article is very detailed, has a certain reference value, interested friends must read it!
1. Black and white image
This code will make your color photos appear as black and white photos, isn't it cool?
two。 Use: not () to apply / unapply borders on menus
Add a border to each menu item first
…… And then remove an element.
…… You can directly use the: not () pseudo class to apply the element:
This makes the code clean, easy to read, and easy to understand.
Of course, if your new element has a sibling element, you can also use the general sibling selector (~):
3. Shadow at the top of the page
Here is a simple css3 snippet to add a nice top shadow to a web page:
4. Add line heights to body
You don't need to add line-height to each pMagee h tag separately, etc. Simply add to body:
This makes it easy for text elements to inherit from body.
5. Everything is vertically centered.
It's too easy to center all elements vertically:
Look, isn't it easy.
Note: beware of flexbox in IE11.
6. Comma separated list
Make the html list items look like a real, comma-separated list:
Use: not () pseudo class for a list item.
7. Select a project using a negative nth-child
Use negative nth-child in CSS to select items 1 to n.
8. Use SVG with icons
There is no reason why we should not use SVG for icons:
SVG is scalable for all resolution types and supports all browsers to return to IE9. This avoids .png, .jpg, or .gif files.
9. Optimize display of text
Sometimes, fonts cannot be displayed on all devices, so you can ask the device browser to help you:
Note: please use optimizeLegibility responsibly. In addition, IE/Edge does not have text-rendering support.
10. Use max-height for pure CSS sliders
Use max-height and overflow hiding to implement the CSS-only slider:
11. Inherit box-sizing
Let box-sizing inherit html:
This makes it easier to change the box-sizing in other components of plug-ins or other behaviors of leverage.
twelve。 Table cells are equal in width
Tables are troublesome to work with, so be sure to use table-layout:fixed as much as possible to keep cells equal in width:
13. Use Flexbox to get rid of all kinds of hack with outer margin
When you need to use column delimiters, you can get rid of the hack of nth-,first-, and last-child through the space-between property of flexbox:
The list delimiter now appears at evenly spaced locations.
14. Use the property selector for empty links
Displays a link when the an element has no text value, but the href attribute has a link:
It's quite convenient.
15. Detect mouse double click
HTML:
CSS:
16.CSS writes out triangles
Use border to write triangle code, and compatible with IE6.
Use of 17.CSS3 calc ()
The use of calc () is similar to a function, which sets a dynamic value for an element:
18. Text gradient
Text gradients are very popular, and you can easily achieve them with CSS3:
19. Disable mouse events
CSS3's new pointer-events allows you to disable mouse events for elements, for example, a connection cannot be clicked if it is set to the following style.
20. Fuzzy text
Simple but beautiful text blur effect, simple and good-looking!
The above is all the content of this article "what are the commonly used CSS techniques?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.