Acht Tipps zum Teilen von CSS

CSS hat viele Funktionen. Hier gibt Ihnen der Editor acht Tipps in CSS.

1. Kompatibel mit allen Browsern, um durchscheinende Effekte anzuzeigen

<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. Die Rolle von _height, _width

Verwenden Sie _height, um float zu lösen Wenn das Div nicht geschlossen ist, können Sie das _height -Attribut entfernen, um den Effekt zu erzielen.

<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. Verwenden Sie min-height min-width, um das Problem der festen Höhe von div oder span zu lösen

Manchmal müssen wir eine feste Höhe eines Elements festlegen, aber in Firefox oder opera Nur die Höhe wird unten festgelegt. Wenn nicht genügend Inhalt vorhanden ist, kann der erwartete Effekt nicht erreicht werden. Zu diesem Zeitpunkt können wir min-height verwenden. 4. Verwenden Sie die Medienanweisung, um zwei Arten von CSS einzuführen : die Druckversion von CSS und die Bildschirmanzeige-CSS

5 6. Sie können den Seitenumbruch nach und nach dem Seitenumbruch beim Drucken steuern.

<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">

7 Die Funktion von *html{} besteht darin, mit IE-Versionen unter 6.0 kompatibel zu sein Knoten, andere Browser betrachten HTML-Tags als den Stammknoten, aber IE-Versionen unter IE6 gehen davon aus, dass es einen Stammknoten

über dem HTML-Tag gibt. 8. Verwenden Sie text-indent, um Bilder anzuzeigen und Text auszublenden

[Verwandt empfohlen]

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

1.

Besondere Empfehlung

: Version V0.1 von „php Programmer Toolbox"2. Kostenloses CSS-Online-Video-Tutorial

3. php.cn Dugu Jiujian (2) - CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonAcht Tipps zum Teilen von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!