Heim  >  Artikel  >  Web-Frontend  >  Wenig bekannte Tipps zur CSS-Nutzung

Wenig bekannte Tipps zur CSS-Nutzung

巴扎黑
巴扎黑Original
2017-08-09 15:50:341198Durchsuche
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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:CSS-CodeformatierungNächster Artikel:CSS-Codeformatierung