Little-known CSS usage tips

1.                                                                                                                                                                 

url(

url address) repeat-x left top}1) You can see that the first definition of background is a color value, which means that the color will take effect when the background image is disabled. 2) The quotation marks in the url brackets are not necessary, we can not write the quotation marks 2.                             Regarding the way to write Border, if you want to define div The four sides of have different colors but the same thickness and style. You can write like this:

DIV.special

{

border

:1px

solid

; border-color:color1 color2 color3 color4}The four colors are the top, right, bottom and left colors at one time 3.           In order to be compatible with all browsers The writing method of translucent effect can be displayed on all devices.

.tranparent

{

progid:DXImageTransform.Microsoft.Alpha(opacity=50)

;

##            -moz-opacity:

0.5

;                                                                                                                                                                     #50%;

##          position:absolute;/*

Note Must be absolute*/##                                                                                           :100px;

}

4.

         _height, The role of _widthUse _height to solve the problem of float div not closing. You can remove the _height attribute to achieve the effect. #wrap{ border:

6px

#ccc solid; overflow:

auto

; _height:1%;}

.column_left {

float

:

left

; width:

20%

;

padding

:10px;}

.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}

div id="wrap ">

##div class="column_left">

##h1>Float lefth1>

div>

div class="column_right">

h1>Float righth1>

##

div>

div>

5.

Use min-height min -width solves the problem of fixed height of div or span

Sometimes we need to set a fixed height of an element, but only the height is set under firefox or opera. When the content is not enough, it does not meet expectations. At this time, we can use min-height

6.

Use !important to change the priority of the style

The so-called style priority It means that the browser always applies the style based on the proximity principle when applying styles. Suppose we have a definition of a certain element in three places on a page, one is in an external css file, and the other is in the file. Inline css is defined in the head tag, and the other is within the tag of this element. Then according to the proximity principle, the final style used by this element is the style defined in the tag. If we need to break this rule, we can use it! important directive

a.test

{color:red!important}This way even If color is defined in the A element, it will not be applied, but the above definition will be applied. and screen display css

link type="text/css" rel ="stylesheet" href="url " media="screen" charset="utf-8" />

link type ="text/css" rel="stylesheet" href="url" media="print" charset="utf-8" />

8.      > symbol (currently not supported by IE)

We can use DIV A to define the styles of all A tags inside the div, including those below the div div in span; if we only want to define the A tag of the one-level child node below the DIV, we can use the ">" symbol, for example:

DIV>A{color:red}

Now only the color of the label A that is the direct child node of DIV is red

9. :first-child :last-child In non-IE browsers, you can use these two indicators to get the first element or the last element of the parent element

20070412 21:05 Added
10. :Hover and other pseudo-classes can be used like this

##h1>Buy widgetsh1>

16. In order to prevent different browsers from interpreting different tags Different interpretations of padding and margin can be defined in front of the style sheet

*{}{ margin:0px;padding:0px;}

Added at 20070422 12:00

17. Turn off the input method state so that users can only enter characters in English state, similar to entering passwords

input {}{ime-mode: disabled ; }

20070423 09:08
18. Excerpt (author)
1) white-space:nowrap; overflow: hidden; width: 17em !important ; width: 18em;
Note: white-space does not support td, th, etc.
2) Use .fixTable{ table-layout: fixed; overflow:hidden; } and add the nobr tag to hide
The nobr tag is non-standard.
20070426 0848
19. Change the image size year-on-year
img.style.zoom = 0.5;

    {}{}
    .menu ul{}{display:none}
    .menu:hover{}{}
    .menu:hover ul{}{display:block}
    

 

ul>
​ li class="menu">
##                                                                                                                                                             #ul>##           
li>firstli>##               ##li
>lastli>        ul
> ​ li
>##ul>
In this way we can make a menu controlled only by css and pass the test under ie6, ie7, firefox1.5, opera9.0 11. We can use page-break-after, page-break-

before to control paging during printing

20070413 12:1312. * The function of html{} is to be compatible with IE versions below 6.0. For the selection of html nodes, other browsers consider the html tag to be the root node of the document, while ie6 The following IE version thinks that there is a root node above the html tag---Thankscalmzeal

for the explanation

13. The css class can have multiple values, we Just separate multiple values ​​​​with spaces

14. For the abbreviation of color, we can abbreviate #ff0033 to #f03

15. Use text-indent to display the picture and hide it Text (this practice is said to help SEO)

h1 {}{ background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

The above is the detailed content of Little-known CSS usage tips. For more information, please follow other related articles on the PHP Chinese website!