Heim >Web-Frontend >CSS-Tutorial >Integrieren Sie 20 gängige CSS/CSS3-Eigenschaften

Integrieren Sie 20 gängige CSS/CSS3-Eigenschaften

Y2J
Y2JOriginal
2017-05-23 11:03:002179Durchsuche

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

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.

024db780eb8416657e62fa483f255092Test5db79b134e9f6b82c0b36e0489ee08ed

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:

e388a4556c0f65e1904146cc1a846bee

1eaaf10debc01a4318506e0d001e42db53faedac456a1536a2726f80512ef6d06ed09268cbdd0015bce8dcbbdfa9bfe4
94b3e26ee717c64999d7867364b1b4a3
//Die obige Situation zeigt genau drei Bilder94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beee388a4556c0f65e1904146cc1a846bee
                                                               🎜>
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:

97d6082b45e67eec93444cd4ba00111e...f16b1740fad44fb09bfe928bcc527e08Tischposition, links97aaabdc3e1ae66003636b0a55f0177f...< ;/table> Tabellenposition, zentriert db5bffb492956b8216468fc195f93a0b...f16b1740fad44fb09bfe928bcc527e08Die URL des Hintergrundbilds=ist die Pfad-URL

595fbdba6efc01af42878d7c67f4bef3...f16b1740fad44fb09bfe928bcc527e08Legen Sie die Hintergrundfarbe der Tabelle festca1a58b2f5f24af1f07ae09c10743762...f16b1740fad44fb09bfe928bcc527e08Legen Sie die Farbe des Tabellenrandes fest25730c6ef9f609a1d2673dea08f1fcf7...f16b1740fad44fb09bfe928bcc527e08Legen Sie die Farbe des dunklen Randes fest der Tabelle
b4b74260c4119ac9907237fab87d9339...f16b1740fad44fb09bfe928bcc527e08Legen Sie die Farbe des hellen Randes der Tabelle fest
0ec0f518b0a0e76ba17ab9c49ed5f2b8. ..f16b1740fad44fb09bfe928bcc527e08 Geben Sie den Abstand zwischen dem Inhalt und dem Raster an (verwenden Sie Zahlen)
67b51f3adf81152a9eb58c3915913a97...f16b1740fad44fb09bfe928bcc527e08 Geben Sie den Abstand zwischen dem Raster und dem Raster an (verwenden Sie Zahlen). )
< ;table cols=parameters>...f16b1740fad44fb09bfe928bcc527e08Geben Sie die Anzahl der Spalten in der Tabelle an
ca7a2072c5cdea6f1e9234b5c7820827...f16b1740fad44fb09bfe928bcc527e08Legen Sie die Anzeigemethode fest der Tabellenumriss
63c556b2a18eb48763ebdf99ca9fdd25...f16b1740fad44fb09bfe928bcc527e08Geben Sie die Breite der Tabelle an (verwenden Sie Zahlen)1cbc9c22ea9a07fa1a9aaa36a12138de. ..f16b1740fad44fb09bfe928bcc527e08Geben Sie die Höhe der Tabelle an (verwenden Sie Zahlen)
e33b5ade3a6ac21f238a29bd370df005...b90dd5946f0946207856a8a37f441edfGeben Sie die Anzahl der Spalten in der Zellzusammenführungsspalte an (Zahlen verwenden)
b901786a6377c9b8e80942735d640559...b90dd5946f0946207856a8a37f441edfGeben 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: 90d745d2c50cb8b1d9bd0212f35ff180 fee6a593242f1bb4d528b906132ca264

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!

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