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. f03
15. 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!
