Advanced techniques for using CSS (used in actual combat)
|
1. The ul tag has a padding value by default in Mozilla, but only a margin value in IE. 2. The same class selector can appear repeatedly in a document, but the id selector can only appear once. When using both class and id to define CSS for a tag, if there are duplicate definitions, the definition made by the id selector is valid because the id has a greater weight than the class. 3. A stupid way to adjust compatibility (IE and Mozilla): Beginners may encounter a situation like this: the same tag attribute is displayed normally in IE when it is set to A, but it must be set to B in Mozilla to be displayed normally, or vice versa. Temporary solution: The selector {attribute name: B !important; attribute name: A} may not work sometimes. You can search for more BUG solutions at 52CSS.com. 4. If a group of nested tags need some spacing, leave it to the margin attribute of the inner tag instead of defining the padding of the outer tag. 5. It is recommended to use background-image instead of list-style-image for the icon in front of the li tag. 6. IE cannot distinguish the difference between inheritance relationship and parent-child relationship, all are inheritance relationships. 7. When adding selectors to your tags crazily, don’t forget to comment the selectors in the CSS. You will understand why you do this when you modify your CSS in the future. Also, a reminder, don't go too crazy. 8. If you set a dark background image and light text effect for a label. It is recommended to set a dark background color for your label at this time. Because the image is lost, the readability of the text can also be maintained. 9. Pay attention to the order of defining the four states of the link: Link Visited Hover Active 10. Please use background for images that are not related to the content. Always remember to separate presentation from content. 11. Define the color can be abbreviated #8899FF=#89F 12. Tables are still useful in some aspects. When you encounter a data table, don't hate it. 13. <script> does not have the language attribute, it should be written like this: <script type="text/javascript"> 14. Perfect single-pixel frame line table (can be tested in IE5, IE6, IE7 and FF1.0.4 and above) Copy code The code is as follows:table{ border-collapse:collapse; } td{ border:#000 solid 1px; } 15. Negative margin values can play a role in relative positioning when the label uses absolute positioning. When the page is centered, the layer using absolute positioning is not suitable for using the left:XXpx attribute. A good approach is to place this layer next to a label that is to be relatively positioned, and then use negative margin values. 16. When positioning absolutely, using margin values can achieve positioning relative to its own position, which is different from the positioning of top, left and other attributes relative to the edge of the window. The advantage of absolute positioning is that it allows other elements to ignore its existence. 17. If the text is too long, the long part will be displayed as ellipsis: Invalid for IE5 and FF, but can be hidden, valid for IE6 <DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”> <NOBR>For example, there is a line of text that is too long to fit in one line of the table.</NOBR> 18. In IE, if there is a text duplication problem caused by comments, you can change the comments to: Copy code The code is as follows:<!–[if !IE]>Put your commentary here…<![endif]–> 19. How to call external fonts with CSS grammar: @font-face{font-family:name;src:url(url);sRules} Value: name: font name. Any possible value of the font-family property url(url): Specify the OpenType font file using an absolute or relative URL address sRules: Stylesheet definition 20. How to vertically center the text in a text box in a form? If using the line-height and height group has no effect in FF, the solution is to define the upper and lower padding to achieve the desired effect. 21. Small issues to note when defining A tags: When we define a{color:red;}, it represents the styles of the four states of A. If we want to define a state when the mouse is placed on it, we only need to define a:hover. The other three states are the styles defined in A. When only one a:link is defined, be sure to define the other three states! 22. Not all styles need to be abbreviated: When the style sheet defines p{padding:1px 2px 3px 4px}, a style with 5px padding on the top and 6px padding on the bottom is added in the subsequent project. We don't have to write p.style1{padding:5px 6px 3px 4px}. It can be written as p.style1{padding-top:5px;padding-right:6px;}. You may feel that this is not as good as the original one, but have you ever thought that your writing method repeats the style definition? In addition, you don’t have to find out the original values of the bottom and left padding! If the previous style P changes in the future, the style of p.style1 you defined must also change. 23. The larger the website, the more CSS styles there are. Before you start, please make adequate preparations and plans, including naming rules. Page block division, internal style classification, etc. 24. Fixed-width Chinese character truncation: overflow:hidden;text-overflow:ellipsis;white-space:nowrap; (However, it can only handle the truncation of text on one line, not multiple lines.) (IE5 and above) FF cannot, it only hides. |
<<: Introduction to the use of em in elastic layout in CSS3: How many pixels is 1em?
>>: How to use pdf.js to preview pdf files in Vue
Recommend
Mysql uses stored procedures to quickly add millions of data sample code
Preface In order to reflect the difference betwee...
Thinking about grid design of web pages
<br />Original address: http://andymao.com/a...
How to avoid duplication of data when inserting in MySql batch
Table of contents Preface 1. insert ignore into 2...
Implementation of MySQL index-based stress testing
1. Simulate database data 1-1 Create database and...
How to use Gitlab-ci to continuously deploy to remote machines (detailed tutorial)
Long story short, today we will talk about using ...
Detailed explanation of destructuring assignment syntax in Javascript
Preface The "destructuring assignment syntax...
Detailed explanation of Linux zabbix agent deployment and configuration methods
1. Install zabbix-agent on web01 Deploy zabbix wa...
Mysql some complex sql statements (query and delete duplicate rows)
1. Find duplicate rows SELECT * FROM blog_user_re...
Detailed explanation of Docker container data volumes
What is Let’s first look at the concept of Docker...
Example of using MySQL to count the number of different values in a column
Preface The requirement implemented in this artic...
JavaScript generates random graphics by clicking
This article shares the specific code of javascri...
Example code for CSS to achieve horizontal lines on both sides of the text
This article introduces the sample code of CSS to...
Several commonly used single-page application website sharing
CSS3Please Take a look at this website yourself, ...
Centos8.3, docker deployment springboot project actual case analysis
introduction Currently, k8s is very popular, and ...
Detailed explanation of building MySQL master-slave environment with Docker
Preface This article records how I use docker-com...