Integrieren Sie 20 gängige CSS/CSS3-Eigenschaften

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) ​​

3. Zum Beispiel ein Code:

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ür das a-Tag lautet die im Allgemeinen einfache Lösung:

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.

Test

Wenn jedoch zu viele Verbindungen vorhanden sind, fügen Sie diesen Code einzeln hinzu. Nicht praktikabel

Der horizontale Wagenrücklauf in den beiden Bildern in 4.html verursacht eine Lücke. Wie kann ich ihn entfernen und dafür sorgen, dass keine Lücke entsteht?

Zum Beispiel: p width 300px; img width 100px;

Der Code lautet wie folgt:

< img />

//Die obige Situation zeigt genau drei Bilder

                                                               🎜>
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.

5. Überlauf: versteckte ungültige Lösung in CSS ie6 und ie7

Ursache:
Wenn der Stil des direkten untergeordneten Elements oder des untergeordneten untergeordneten Elements des übergeordneten Elements die Position hat :relative

verwendet wird, ist das Attribut overflow:hidden des übergeordneten Elements ungültig.

Lösung:

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:

left

>...

Tischposition, links...< ;/table> Tabellenposition, zentriert Hintergrund

=Bildpfad>...

Die URL des Hintergrundbilds=ist die Pfad-URL

Legen Sie die Tabellenrandgröße fest (verwenden Sie Zahlen)

...Legen Sie die Hintergrundfarbe der Tabelle fest...Legen Sie die Farbe des Tabellenrandes fest...Legen Sie die Farbe des dunklen Randes fest der Tabelle
...Legen Sie die Farbe des hellen Randes der Tabelle fest
padding=Parameters>. .. Geben Sie den Abstand zwischen dem Inhalt und dem Raster an (verwenden Sie Zahlen)
... Geben Sie den Abstand zwischen dem Raster und dem Raster an (verwenden Sie Zahlen). )
< ;table cols=parameters>...Geben Sie die Anzahl der Spalten in der Tabelle an
...Legen Sie die Anzeigemethode fest der Tabellenumriss
width
=width>...Geben Sie die Breite der Tabelle an (verwenden Sie Zahlen)height
=height>. ..Geben Sie die Höhe der Tabelle an (verwenden Sie Zahlen)
...Geben Sie die Anzahl der Spalten in der Zellzusammenführungsspalte an (Zahlen verwenden)
...Geben Sie die Anzahl der Spalten an, in denen die Zellen zusammengeführt werden sollen (mittels Zahlen)

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.

8. letter-spacing

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

input{ background-color:expression(this.type=="text"?'#FFC':' '); }

c. Verwenden Sie Javascript-Skript zum Implementieren (fühlen Sie sich unnötig, weglassen...)

12: Textstrich

[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

13: Text-Stroke

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

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(&#39;Sansation_Light.ttf&#39;),</p>
<p>    url(&#39;Sansation_Light.eot&#39;); /* IE9+ */}</p>
<p>p{font-family:myFirstFont;}</p>
<p></style>

17.CSS

: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(2) wählt die ersten Mehrere Tags aus, „2 kann die gewünschte Zahl sein“

: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-Browser

IE-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 CSS3

Das 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免费视频教程

2. h5和css3制作带提示文字的输入框

3. 分享几个常用的最新的css3属性

4. 用CSS制作聊天框小尖角、气泡效果

5. 浏览器实现移动端高性能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!