Wenig bekannte Tipps zur CSS-Nutzung

1. Über das Schreiben von Hintergrundinformationen

DIV.comment{Hintergrund:# f0f0f0 url(URL-Adresse) repeat-x links oben }

1) Sie sehen, dass die erste Definition des Hintergrunds ein Farbwert ist, was bedeutet, dass die Farbe wirksam wird, wenn das Hintergrundbild deaktiviert ist.

2) Die Anführungszeichen in den URL-Klammern sind nicht erforderlich, wir können die Anführungszeichen nicht schreiben

2 Die vier Seiten haben unterschiedliche Farben, aber die Dicke und der Stil das Gleiche, Sie können so schreiben:

DIV.special

{border:1px solid ; border-color:color1 color2 color3 color4}The vier Farben sind gleichzeitig oben, rechts, unten und links

3.

Um mit allen Browsern kompatibel zu sein, können alle Geräte den Transluzenzeffekt anzeigen

.tranparent

{

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

;    -moz-opacity:

0,5

;  -khtml-opacity:

0,5

; Deckkraft:

50 %

;  position:

absolute

;/*Hinweis Muss absolut sein*/                                                                                                    :100px

;

}

4. _height, Die Rolle von _widthVerwenden Sie _height, um das Problem zu lösen, dass float div nicht geschlossen wird. Sie können das _height-Attribut entfernen, um den Effekt zu erzielen.

#wrap

{ border

:

6px

#ccc solid

; 🎜>Überlauf

:

auto

; _height:1%;} .column_left { float:left; width:20 %; padding:

10px

;}

.column_right{ float:right; Breite:75 %; Auffüllung:10px; border-left:6px #eee solid;}

 

<div id="wrap">

 <div class="column_left">

<h1>Nach links schwebenh1>

 div>

  <div class="column_right">

 <h1>Nach rechts schwebenh1>

 div>

div >

 

5.       使用min-height min-width解决div，或者span的固定高度问题

有时候我们需要设定某个元素固定高度, 但是在firefox或者opera下面只设置高度, 在内容不够多的时候，达不到预想的效果，这时候我们可以使用min-height

 

6.       使用!important改变样式的优先级

所谓的样式优先级是指，浏览器在应用样式时总是根据就近原则来应用样式, 假定我们在一个页面中有三处都有对某个元素的定义, 一处是在外部的css文件中,一处是在文件的head标签中定义内联css, 另一处是在这个元素的标签内, 那么根据就近原则此元素最终使用的样式是在标签内定义的样式, 如果我们需要打破这种规则我们就可以使用!important指令

ein.test {Farbe:rot!important}

这样即使在A元素内定义了color也不会应用，而是应用上面的定义

 

7.       使用media指令引入两种css:打印版本的css和屏幕显示的css

<Link Typ="text/css" rel ="stylesheet" href="url " media="screen" charset="utf-8" />

<Link Typ ="text/css" rel="stylesheet" href="url" Medien="print" charset="utf-8" />

8. > Symbol (derzeit nicht vom IE unterstützt)

Wir können DIV A verwenden, um die Stile aller A-Tags innerhalb des Div zu definieren, einschließlich derer unterhalb des Div-Div in span; wenn wir nur das A-Tag einer Ebene von untergeordneten Knoten unterhalb von DIV definieren möchten, können wir das Symbol „>“ verwenden, zum Beispiel:

DIV>A{Farbe:rot}

Jetzt ist nur noch die Farbe des A-Labels, das der direkte untergeordnete Knoten von DIV ist, rot

9. :first-child :last-child In Nicht-IE-Browsern können Sie diese beiden Indikatoren verwenden, um das erste Element oder das letzte Element des übergeordneten Elements abzurufen

20070412 21 :05 Hinzugefügt
10.: Pseudoklassen wie Hover können so verwendet werden

<h1>Widgets kaufenh1>

16 Browser auf verschiedenen Tags. Vor dem Stylesheet können verschiedene Interpretationen von Abstand und Rand definiert werden

*{}{ Rand:0px;Auffüllung:0px;}

Hinzugefügt um 20070422 12:00
17. Deaktivieren Sie den Eingabemethodenstatus, sodass Benutzer nur Zeichen eingeben können Englischer Status, ähnlich der Eingabe von Passwörtern

Eingabe {}{ime-mode: deaktiviert ; }

20070423 09:08
18. Auszug (Autor)
1) weiß- space:nowrap; overflow: versteckt; width: 17em !important width: 18em;
Hinweis: Leerzeichen unterstützt td, th usw.
2) Verwenden Sie .fixTable{ Table-Layout: Fixed; Overflow: Hidden; und fügen Sie das Nobr-Tag hinzu, um es auszublenden.
Das Nobr-Tag ist nicht standardmäßig.
20070426 0848
19. Ändern Sie die Bildgröße im Vergleich zum Vorjahr
img.style.zoom = 0.5;

    
    .menu{}{} 🎜>Anzeige:
keine}    .menu:hover{}{}
    .menu:hover ul{}{Anzeige:
Blockieren}     

<ul>
 <li Klasse="menu">
Menütitel
<ul>
 <li>ersterli>
   <li>letzteli>
                                                             > 🎜>>
ul>Auf diese Weise können wir ein Menü erstellen, das nur durch CSS gesteuert wird, und das Test besteht unter IE6, IE7, Firefox1.5, Opera9.0 11. Wir können
page-break-after, page-break- verwenden vor, um das Paging beim Drucken zu steuern 20070413 12:1312. * Die Funktion von html{} soll mit IE-Versionen unter 6.0 kompatibel sein Bei HTML-Knoten betrachten andere Browser das HTML-Tag als den Stammknoten des Dokuments, und ie6 Die folgende IE-Version geht davon aus, dass sich über dem HTML-Tag ein Stammknoten befindet – dank calmzeal

für die Erklärung

13. Die CSS-Klasse kann mehrere Werte haben, wir trennen einfach mehrere Werte durch Leerzeichen

14 Für die Abkürzung von Farbe können wir #ff0033 zu # abkürzen. f0315. Verwenden Sie text-indent, um das Bild anzuzeigen und den Text auszublenden (diese Vorgehensweise soll SEO helfen)

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

Das obige ist der detaillierte Inhalt vonWenig bekannte Tipps zur CSS-Nutzung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!