Eight tips for sharing CSS

CSS has many functions. Here, the editor will share with you eight tips in CSS.

1. A method that is compatible with all browsers to display translucent effects

<div class="transparent"></div>
.transparent {
    filter: progid:DXImageTrans
for
m.Microsoft.Alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: .5;
    
width
: 200px;
    
height
: 200px;
    
margin
: 0 auto;
    
background
: url("../img/pic.jpg");
}

2. The role of _height, _width

Use _height to solve the problem of float For the problem that the div is not closed, you can remove the _height attribute to achieve the effect.

<div id="wrap">
    <div class="column_
left
">
        <h1>Float left</h1>
    </div>
    <div class="column_
right
">
        <h1>Float right</h1>
    </div>
</div>
#wrap {
    b
ord
er: 6px solid #ccc;
    
overflow
: auto;
    _height: 1%;
}
.column_left {
    width: 20%;
    
padding
: 10px;
    float: left;
}
.column_right {
    float: right;
    width: 75%;
    padding: 10px;
    border-left: 6px solid #ccc;
}

3. Use min-height min-width to solve the fixed height problem of div or span

Sometimes we need to set a fixed height of an element, but under firefox or opera only Set the height. When the content is not enough, the expected effect cannot be achieved. At this time, we can use min-height

4. Use the media directive to introduce two types of css: the printing version of css and the 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">

5. Use .fixTable{ table-layout: fixed; overflow:hidden; } and add the nobr tag to hide

6. You can use page-break-after, page-break- before controls paging during printing

7. The function of *html{} is to be compatible with IE versions below 6.0. When selecting html nodes, other browsers consider the html tag to be the root node of the document. IE versions below ie6 think that there is a root node above the html tag

8. Use text-indent to display pictures and hide text

h1 {    background: url(../img/pic.jpg) no-repeat;    width: 200px;    height: 200px;    text-indent: -2000px}

[Related recommendations]

1. Special recommendation: "php Programmer Toolbox" V0.1 version download

2. Freecssonlinevideotutorial

3. php.cnDugujiujian (2)-css video tutorial

The above is the detailed content of Eight tips for sharing CSS. For more information, please follow other related articles on the PHP Chinese website!