Experts share 25 practical tips for CSS web page layout

This article brings you practical tips about CSS web page layout. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. The ul tag has a padding value by default in Mozilla, but in IE only the margin has a value.

2. The same class selector can appear repeatedly in a document, but the id selector can only appear once; use both class and id for a label in CSS definition. If the definition is repeated, the id The definition of the selector is valid because the weight of ID is greater than CLASS.

3. A stupid way to adjust compatibility (IE and Mozilla): Beginners may encounter such a situation: it is normal for the same label attribute to be displayed as A in IE, but it must be displayed in Mozilla. It must be set to B to display normally, or the two are reversed.

Temporary solution: Selector {Attribute name: B !important; Attribute name: A}

4. If there is some spacing between a group of tags to be nested, then Leave it to the margin attribute of the label located inside, instead of defining the padding

of the label located outside. 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. They are all inheritance relationships.

7. When adding selectors to your tags, don’t forget to add comments to the selectors in CSS. You'll know why you do this when you modify your CSS later.

8. If you set a dark background image and bright text effect for a label. It is recommended to set a darker background color for your label at this time.

9. Pay attention to the order when defining the four states of a link: Link Visited Hover Active

10. Please use background for pictures that have nothing to do with the content

11. You can define colors Abbreviation #8899FF=#89F

12. Table performs much better than other tags in some aspects. Please use it where column alignment is required.

13. <script> does not have the language attribute. It should be written like this: </script>

The following is a quotation fragment:

<script type=”text/javascript”>

14. The title is the title, and the text of the title is the title. Text. Sometimes the title does not necessarily need to display text, so the following is a quotation fragment:

Title content

Change to

Title content< ;/h1>

15. Perfect single-pixel outline table (can pass the test in IE5, IE6, IE7 and FF1.0.4 or above) The following is a quoted fragment:

table{border-collapse:collapse;}
td{border:#000 solid 1px;}

16. Negative margin values ​​can play a role in relative positioning when the label uses absolute positioning. When the page is centered, the left:XXpx attribute is not suitable for layers using absolute positioning. It's a good idea to place this layer next to a label that needs to be positioned relatively, and then use negative values ​​for margin.

17. When using absolute positioning, using margin value positioning can achieve positioning relative to its own position, which is different from the positioning of attributes such as top and left relative to the edge of the window. The advantage of absolute positioning is that it allows other elements to ignore its existence.

18. If the text is too long, change the long part into an ellipsis and display it: IE5, FF are invalid, but can be hidden, IE6 is valid

<DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”>

For example, there is a line The text is very long and cannot be displayed on one line in the table.

19. When there may be text duplication problems caused by comments in IE, you can change the comments to:

Put your commentary in here…

20. How to use CSS to call external fonts

Syntax:

@font-face{font-family :name;src:url(url);sRules} Value:

name: font name. Any possible value of the font-family attribute

url (url): Specify the OpenType font file using an absolute or relative url address

sRules: Style sheet definition

21. How Center text vertically in a text box in a form?

If using row height and height grouping has no effect in FF, the way is to define upper and lower padding to achieve the desired effect.

22. Small issues to pay attention to when defining the A tag:

When we define a{color:red;}, it represents the four states of A. If you want to To define a mouse-over state, just define a:hover. The other three states are the styles defined in A.

When only one a:link is defined, be sure to remember to define the other three states!

23. Not all styles need to be abbreviated:

When p{padding:1px 2px 3px 4px} is defined before the style sheet,

In subsequent projects Another style has been added with 5px upper padding and 6px lower padding.

We don’t necessarily have to write p.style1{padding:5px 6px 3px 4px}.

can be written as p.style1{padding-top:5px;padding-right:6px;},

You may feel that writing this way is not as good as the original, but have you ever thought about it? ,

Your writing method repeatedly defines the style, and you don’t have to find the original values ​​of the bottom padding and left padding!

如果以后前一个样式P变了话，你定义的p.style1的样式也要变。

24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。

25、几个常用到的CSS样式：

1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;

2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;（不过只能处理文字在一行上的截断，不能处理多行。）（IE5以上）FF不能，它只隐藏。

3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。

4）文字用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。

5）图片设为半透明：。halfalpha { background-color:#000000;filter:Alpha（Opacity=50）}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；

6）FLASH透明：选中swf,打开原代码窗口，在前输入 以上是针对IE的代码。

针对FIREFOX 给 标签也增加类似参数wmode=”transparent”

7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：

.pictures img {
filter: alpha（opacity=45）； }
.pictures a:hover img {
filter: alpha（opacity=90）； }

以上就是对CSS网页布局实用小技巧的全部介绍，如果您想了解更多有关CSS3教程，请关注PHP中文网。

The above is the detailed content of Experts share 25 practical tips for CSS web page layout. For more information, please follow other related articles on the PHP Chinese website!