Heim > Web-Frontend > CSS-Tutorial > Hauptteil

[CSS Note 9] Einheiten und Werte

黄舟
Freigeben: 2016-12-29 13:57:39
Original
1243 Leute haben es durchsucht

1. Farbwert
Farbeinstellungen auf Webseiten sind sehr wichtig, einschließlich Schriftfarbe (Farbe), Hintergrundfarbe (Hintergrundfarbe), Rahmenfarbe (Rahmen) usw. Es gibt auch viele Möglichkeiten, Farben festzulegen :

1. Englische Befehlsfarbe

Diese Einstellungsmethode wird häufig in den vorherigen Abschnitten verwendet:

p{color:red;}
Nach dem Login kopieren

2. RGB-Farbe

Dies stimmt mit der RGB-Farbe in Photoshop überein und wird durch das Verhältnis der drei Farben R (Rot), G (Grün) und B (Blau) angepasst.

p{color:rgb(133,45,200);}
Nach dem Login kopieren

Der Wert jedes Elements kann eine Ganzzahl zwischen 0 und 255 oder ein Prozentsatz zwischen 0 % und 100 % sein. Wie zum Beispiel:

p{color:rgb(20%,33%,25%);}
Nach dem Login kopieren

3. Hexadezimale Farbe

Diese Farbeinstellungsmethode ist jetzt eine häufiger verwendete Methode und ihr Prinzip ist eigentlich die RGB-Einstellung Der Wert jedes Elements hat sich von 0-255 in hexadezimal 00-ff geändert.

p{color:#00ffff;}
Nach dem Login kopieren

2. Längenwert
Zusammenfassend lässt sich sagen, dass die Längeneinheiten derzeit häufiger verwendet werden: px (Pixel), em und %-Prozentsatz. Es ist zu beachten, dass diese drei Einheiten tatsächlich relativ sind Einheiten.

1. Pixel

Warum ist Pixel eine relative Einheit? Denn Pixel beziehen sich auf kleine Punkte auf dem Display (die CSS-Spezifikation geht von „90 Pixel = 1 Zoll“ aus). Die tatsächliche Situation ist, dass der Browser den tatsächlichen Pixelwert der Anzeige verwendet. Derzeit neigen die meisten Designer dazu, Pixel (px) als Einheit zu verwenden.

2. em

ist der Schriftgrößenwert der angegebenen Schriftart dieses Elements. Wenn die Schriftgröße des Elements 14 Pixel beträgt, ist 1em = 14 Pixel ist 18px, dann ist 1em =18px. Der folgende Code:

p{font-size:12px;text-indent:2em;}
Nach dem Login kopieren

Der obige Code kann die Einrückung der ersten Zeile des Absatzes um 24 Pixel (dh den Abstand zwischen den beiden Schriftgrößen) realisieren.

Beachten Sie unten einen Sonderfall:

Wenn Sie jedoch die Einheit für die Schriftgröße auf em festlegen, basiert der Berechnungsstandard zu diesem Zeitpunkt auf der Schriftgröße des übergeordneten Elements von p. Der folgende Code:

html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px} span{font-size:0.8em;}
Nach dem Login kopieren

Infolgedessen beträgt die Schriftgröße der Schriftart „Beispiel“ in Spannweite 11,2 Pixel (14 * 0,8 = 11,2 Pixel).

3. Prozent

p{font-size:12px;line-height:130%}
Nach dem Login kopieren

Stellen Sie die Zeilenhöhe (Zeilenabstand) auf 130 % der Schriftart ein (12 * 1,3 = 15,6 Pixel).

Das Obige ist der Inhalt der Einheiten und Werte in [CSS-Hinweis 9]. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!


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