Hier habe ich 20 häufig verwendete CSS-Stile zusammengefasst. Es sind alles persönliche Erfahrungen, die ich hier mit Ihnen teile.
1 soll in einer einzigen Zeile angezeigt werden: white-space:nowrap;
2. Legen Sie fest, dass der Überlauftext als Auslassungszeichen angezeigt werden soll: text-overflow:ellipsis;
(Hinweis: text-overflow: clip |. ellipsis-word ; (neu in CSS3 hinzugefügt)
wobei „clip“ bedeutet, dass der überlaufende Text direkt abgeschnitten wird; und das Auslassungszeichen ersetzt das letzte Zeichen;
Wert ellipsis-word bedeutet, dass beim Überlaufen des Textes auch das Auslassungszeichen (...) angezeigt wird. Der Unterschied besteht darin, dass das Auslassungszeichen das letzte Wort ersetzt)
Wenn Sie auf das Bild im a-Tag klicken, wird ein gepunkteter Rahmen angezeigt, und das Bild im IE hat auch einen Rand. Wie kann ich das Problem lösen?
Lösung:
a{outline:none;}//Hauptsächlich für Browser wie Firefox, aber nicht IEimg{border:0;}
a:active{noOutline :expression (this.onFocus=this.blur());}//Lösen Sie das gepunktete Kästchen in IE6 und IE7.
Fügen Sie dem a-Tag ein js-Steuerelement hinzu. Wenn das a-Tag fokussiert ist, muss der Fokus zu diesem Zeitpunkt aufgehoben werden. Das a-Tag wird natürlich nicht angezeigt. Es wird ein gepunktetes Kästchen angezeigt.
Wenn jedoch zu viele Verbindungen vorhanden sind, fügen Sie diesen Code einzeln hinzu. Nicht praktikabel
< img />
🎜>
In diesem Fall ist es unmöglich, drei Bilder horizontal anzuzeigen, da der Wagenrücklauf eine Lücke zwischen den Bildern verursacht zwei Bilder.
Die Lösung besteht darin, das Bild
schwebend
zu machen.
Ursache:
Wenn der Stil des direkten untergeordneten Elements oder des untergeordneten untergeordneten Elements des übergeordneten Elements die Position hat :relative
Wir haben in IE 6 und 7 festgestellt, dass das untergeordnete Element die vom übergeordneten Element festgelegte Höhe überschreitet, selbst wenn für das übergeordnete Element overflow:hidden festgelegt ist.
Es ist sehr einfach, diesen Fehler zu beheben. Verwenden Sie *position:relative; im übergeordneten Element, um den Fehler zu beheben6.TabelleSyntax
Der Code ist wie folgt:
7.CSS text-transform
Die Eigenschaft text-transform steuert die Groß-/Kleinschreibung von Text.
Mögliche Werte
Wertbeschreibung
keine Standardeinstellung. Text, der Standards mit Klein- und Großbuchstaben definiert.
Großschreibung Jedes Wort im Text beginnt mit einem Großbuchstaben.
uppercase definiert nur Großbuchstaben.
Die Kleinbuchstabendefinition enthält keine Großbuchstaben, sondern nur Kleinbuchstaben.
inherit gibt an, dass der Wert des Texttransformationsattributs vom übergeordneten Element geerbt werden soll.
letter-spacing-Eigenschaft vergrößert oder verkleinert den Abstand zwischen Zeichen (Zeichenabstand).
Zum Beispiel: Buchstabenabstand: 2px;
9.textarea Entfernen Sie die Bildlaufleiste rechts und entfernen Sie das Ziehen in der unteren rechten Ecke
Code:
10. Transparenzkompatibilitätscode in CSS: filter: alpha(opacity=80);opacity:0.8;
11. Entsprechend dem Eingabetyp So steuern Sie den CSS-Stil
a. Verwenden Sie den Typselektor in CSS
input[type="text"] { background-color: #FFC; }
b. Verwenden Sie den CSS-Ausdruck, um
c. Verwenden Sie Javascript-Skript zum Implementieren (fühlen Sie sich unnötig, weglassen...)
[Textstrichbreite]: Festlegen oder Abrufen
Objekt Die Strichstärke des Texts in [text-Stroke-Color]: Legen Sie die Strichfarbe des Texts im Objekt fest oder rufen Sie sie ab
Text-Stroke ( Textstrich) und Text -fill-color (Textfüllfarbe) Hinweis:
Derzeit werden diese beiden Attribute nur von Safari und
Chreinigen Teilen des Webkit-Kernels unterstützt, zum Beispiel: -webkit-text- Strich: 3,3 Pixel #2A75BF; Textfüllfarbe: Farbwert, der fast dem Farbattribut entspricht
Textfüllfarbe und Farbattribute gleichzeitig verwenden. Farbe überschreibt den Farbwert des Farbattributs; text-fill-color kann transparente Werte verwenden, nämlich: text-fill-color: transparent
14:
text-shadow:0px 0px 0px #333333 ;Attributwerte sind: horizontale Verschiebung (unterstützt negative Werte), vertikale Verschiebung (unterstützt negative Werte), Unschärferadius, Schattenfarbe
text-shadow kann Legen Sie mehrere Schatten für denselben Text fest, und box -Shadow ist ähnlich, getrennt durch Kommas ",", der vorherige Einstellungseffekt liegt über dem letzteren Einstellungseffekt.
15. Legen Sie die Schriftart fest
Der Code lautet wie folgt:
16. Der Code lautet wie folgt:
<style> @font-face</p>
<p>{font-family: myFirstFont;</p>
<p>src: url('Sansation_Light.ttf'),</p>
<p> url('Sansation_Light.eot'); /* IE9+ */}</p>
<p>p{font-family:myFirstFont;}</p>
<p></style>:first-child
selector,:last-child selector,:nth-child (IE7,8 ist ungültig, nicht erkannt){</p>
<p>
word-break:break-all; /支持IE，chrome，FF不支持/
word-wrap:break-word;/支持IE，chrome，FF/
}:nth-child(2n) wählt gerade Tags aus, 2n kann auch gerade sein:nth-child(2n-1) Wählt ungerade Tags aus, 2n -1 kann ungerade sein:nth-child(3n+1) benutzerdefiniertes Auswahllabel, 3n+1 bedeutet „Nimm eins von zwei“
18. CSS3 implementiert Hintergrundfarbe Farbverlauf
Der Code lautet wie folgt:
background:-webkit-linear-gradient(
top,#FFF,#cb1919);
background:-o -linear-gradient(top,#FFF,#cb1919);Hintergrund:-ms-linear-gradient(top,#FFF,#cb1919);Hintergrund:-moz-linear-gradient(top,# FFF,#cb1919);background:linear-gradient(top,#FFF,#cb1919);
Der erste Parameter: Legen Sie die Startposition des Farbverlaufs fest
Der zweite Parameter : Legen Sie die Farbe der Startposition fest
Der dritte Parameter: Legen Sie die Farbe der Endposition fest
IE-BrowserIE-Browser
Der Farbverlauf kann nur erreicht werden Verwenden des IE-eigenen Filters
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);Der erste Parameter: die Farbe des Farbverlaufs Startposition
Der zweite Parameter: die Farbe der Endposition des Farbverlaufs
Der dritte Parameter: die Art des Farbverlaufs
0 stellt den vertikalen Farbverlauf dar, 1 stellt den horizontalen Farbverlauf dar
19 IE8 erkennt RGBA-Schreiben nicht 20 RGB-Farben und HSL-Farben von CSS3Das Prinzip der RGB-Farbe besteht darin, eine Farbe durch Definition verschiedener Rot-, Grün- und Blauwerte zu bilden. color:rgb(254,2,8);
HSL deklariert Farben durch Farbton-, Sättigungs- und Helligkeitsmodi. color:hsl(359,99%,40%);
Wenn Sie einen transparenten Hintergrund festlegen müssen, können Sie diese verwenden:
background-color:hsla(0,0%,100%,0.8); background-color:rgba(255,255,255,0.8);
不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不会。
20.初始化em，u的斜体
em,u{
font-style: normal;}【相关推荐】
1. CSS3免费视频教程
Das obige ist der detaillierte Inhalt vonIntegrieren Sie 20 gängige CSS/CSS3-Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
