Heim > Web-Frontend > CSS-Tutorial > Was sind die CSS-Aussehenseigenschaften? Einführung in CSS-Erscheinungsbildeigenschaften

Was sind die CSS-Aussehenseigenschaften? Einführung in CSS-Erscheinungsbildeigenschaften

不言
Freigeben: 2018-08-18 16:19:37
Original
4353 Leute haben es durchsucht

In diesem Artikel erfahren Sie, was die Erscheinungsattribute von CSS sind. Die Einführung von CSS-Aussehensattributen hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

CSS-Aussehensattribut

Farbe: Textfarbe

Das Farbattribut wird verwendet, um die Farbe des Textes zu definieren. Es gibt drei Möglichkeiten, Werte zu übernehmen:

  1. Vordefinierte Farbwerte, wie Rot, Grün, Blau usw.

  2. Hexadezimal, wie #FF0000, #FF6600, #29D794 usw. In der Praxis ist Hexadezimal die gebräuchlichste Methode zur Definition von Farben.

  3. RGB-Code, wie z. B. Rot, kann als RGB(255,0,0) oder RGB(100%,0%,0%) dargestellt werden.

Es ist zu beachten, dass bei Verwendung des prozentualen Farbwerts des RGB-Codes das Prozentzeichen nicht weggelassen werden darf, wenn der Wert 0 ist, und als 0 % geschrieben werden muss.

Zeilenhöhe: Zeilenabstand

Das Attribut „Zeilenhöhe“ wird zum Festlegen des Zeilenabstands verwendet. Dies ist der Abstand zwischen Zeilen, dh der vertikale Zeichenabstand, der im Allgemeinen als Zeile bezeichnet wird Höhe. Es gibt drei häufig verwendete Attributwerteinheiten für die Zeilenhöhe: Pixel px, relativer Wert em und Prozentsatz %. Die in der tatsächlichen Arbeit am häufigsten verwendete Einheit ist Pixel px.

Im Allgemeinen ist der Zeilenabstand etwa 7,8 Pixel größer als die Schriftgröße.

text-align: Horizontale Ausrichtung

Das text-align-Attribut wird verwendet, um die horizontale Ausrichtung von Textinhalten festzulegen, was dem align-Ausrichtungsattribut in HTML entspricht. Die verfügbaren Attributwerte lauten wie folgt:

links: linksbündig (Standardwert)

rechts: rechtsbündig

Mitte: zentriert ausgerichtet

text-indent: Einzug der ersten Zeile

Das Attribut text-indent wird verwendet, um den Einzug der ersten Textzeile festzulegen. Sein Attributwert kann ein Wert in verschiedenen Einheiten sein, ein Vielfaches der Breite des Gevierts Zeichen oder ein Prozentsatz relativ zur Breite des Browserfensters, negative Werte sind zulässig und es wird empfohlen, em als Einstellungseinheit zu verwenden.

1em ist die Breite eines Zeichens. Wenn es sich um einen Absatz mit chinesischen Schriftzeichen handelt, ist 1em die Breite eines chinesischen Schriftzeichens.

p {    line-height: 25px;/*行间距*/
    text-indent: 2em;/*首行缩进*/
    }
h3 {    
    text-align: center;/*水平对齐*/
    }
Nach dem Login kopieren

Buchstabenabstand: Wortabstand

Das Attribut „letter-spacing“ wird zum Definieren des Zeichenabstands verwendet. Der sogenannte Zeichenabstand ist der Abstand zwischen den Zeichen. Seine Attributwerte können Werte in verschiedenen Einheiten sein, negative Werte sind zulässig und der Standardwert ist normal.

word-spacing: Wortabstand

Das Attribut „word-spacing“ wird verwendet, um den Abstand zwischen englischen Wörtern zu definieren und ist für chinesische Schriftzeichen ungültig. Wie beim Buchstabenabstand können seine Attributwerte Werte in verschiedenen Einheiten sein, negative Werte sind zulässig und der Standardwert ist normal.

Für Englisch können sowohl Wort- als auch Buchstabenabstände eingestellt werden. Der Unterschied besteht darin, dass „letter-spacing“ den Abstand zwischen Buchstaben definiert, während „word-spacing“ den Abstand zwischen englischen Wörtern definiert.

p {
    letter-spacing: 2px;/*字间距*/
    }
p {
    word-spacing: 5px;/*单词间距 针对英文 中文无效*/
    }
Nach dem Login kopieren

Wortumbruch: Automatischer Zeilenumbruch

normal Verwenden Sie die Standard-Zeilenumbruchregeln des Browsers.

break-all ermöglicht Zeilenumbrüche innerhalb von Wörtern.

keep-all kann nur bei Leerzeichen halber Breite oder Bindestrichen umgebrochen werden.

Farbtransparenz (CSS3)

Wenn die Textfarbe CSS3 erreicht, können wir ein durchscheinendes Format übernehmen.

color:rgba(r,g,b,a) a是alpha 透明的意思 取值范围 0~1之间 color:raba(0,0,0,0.3)
Nach dem Login kopieren

Textschatten (CSS3)

Wir können dem Text Schatten einen Schatteneffekt hinzufügen

text-overflow:水平位置 垂直位置 模糊距离 阴影颜色;
Nach dem Login kopieren
描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。参阅CSS颜色值。

Die ersten beiden Elemente sind erforderlich, und die letzten beiden Elemente sind erforderlich optionales Schreiben.

Verwandte Empfehlungen:

Verwenden Sie das Erscheinungsbild-Attribut von CSS3, um das Erscheinungsbild von elements_html/css_WEB-ITnose zu ändern

css Margin Zusammenfassung der Margin-Attribute und -Nutzung

Das obige ist der detaillierte Inhalt vonWas sind die CSS-Aussehenseigenschaften? Einführung in CSS-Erscheinungsbildeigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage