In CSS häufig verwendete Schriftstile zum Festlegen verschiedener Schriftartänderungen (Beispiel mit ausführlicher Erläuterung)
|
CSS-Schrifteigenschaften definieren die Schriftfamilie, Größe, Fettschrift, Stil (z. B. Kursivschrift) und Variante (z. B. Kapitälchen) des Textes. Die Schriftfamilie steuert die Schriftart. Da die auf jedem Computersystem installierten Schriftarten unterschiedlich sind, sind die drei grundlegenden Schriftarten Heiti, Songti und Microsoft YaHei. Die Schriftfamilie wird normalerweise folgendermaßen geschrieben: „Heiti“, „Songti“, „Microsoft YaHei“ Font-size steuert die Schriftgröße. Wir legen die Schriftgröße fest, indem wir ihre Breite festlegen. Die Höhe beträgt auf Computersystemen standardmäßig im Allgemeinen 16px, daher sollte die Schriftgröße nicht kleiner als 16px sein, 1em=16px; font-weight: bold;/*Die Schriftstärke beträgt im Allgemeinen 100-900, häufig werden leichter, normal und fett verwendet*/Was den Schriftstil betrifft, ist der Standardwert normal, was normal bedeutet. Wenn Sie font-style: italic; festlegen, hat dies denselben Effekt wie <em></em>; Wenn die für den Abstand zwischen Wörtern verwendete Zeilenhöhe der Höhe entspricht, wird vertikal zentriert. Normalerweise lautet die Abkürzung für Schriftart: Schriftart: Stil Gewicht Größe/Zeilenhöhe Schriftfamilie /*Die beiden erforderlichen sind Größe und Schriftfamilie*/
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Mehrere Transformationen häufig verwendeter CSS-Schriftstile</title>
<Stil>
div{
Schriftfamilie: „Microsoft YaHei“;/*Microsoft YaHei*/
/* Schriftfamilie: „Lucida Sans“, „Lucida Sans Regular“, „Lucida Grande“, „Lucida Sans Unicode“, Geneva, Verdana, serifenlos; */
/*Fügen Sie der Schriftart doppelte oder einfache Anführungszeichen hinzu. Wenn mehrere Schriftarten vorhanden sind, trennen Sie diese durch Kommas.*/
Farbe: #f90;
font-size: 24px;/*Schriftgröße steuern*/
font-weight: bold;/*Schriftstärke steuern: lighter (leicht), normal (normal), fett*/
Schriftstil: kursiv;/*dasselbe wie em*/
Zeilenhöhe: 30px;
}
/*Schriftart Schriftartabkürzung: Schriftart: Stil Stärke Größe/Zeilenhöhe Schriftfamilie*/
/*Die beiden erforderlichen sind size font-family*/
P{
Schriftart: 24px/1,5em „Lucida Sans“, „Lucida Sans Regular“, „Lucida Grande“, „Lucida Sans Unicode“, Geneva, Verdana, serifenlos;
letter-spacing: 1px;/*Englischer Buchstabenabstand*/
Wortabstand: 10px;/*Englischer Wortabstand*/
}
P::erster-Buchstabe{
Texttransformation: Großschreiben;
}/*Erster Buchstabe::erster-Buchstabe*/
p::erste-Zeile{
Farbe: rot;
}/*Erste Zeile::erste-Zeile*/
</Stil>
</Kopf>
<Text>
<div>Technologie ist König in dieser Welt. Wenn Sie wissen möchten, ob die Aussicht vom Gipfel des Qingtian-Bergs die beste ist, müssen Sie fragen. Technologie ...
Wenn Sie wissen möchten, ob die Aussicht vom Gipfel des Qingtian-Bergs die beste ist, in einer Welt, in der Technologie König ist, Wenn Sie wissen möchten, ob die Aussicht vom Gipfel des Qingtian-Bergs die beste ist, in einer Welt, in der Technologie König ist, Wenn Sie wissen möchten, ob die Aussicht vom Gipfel des Qingtian-Bergs die beste ist, in einer Welt, in der Technologie König ist,
Ich möchte fragen, ob die Aussicht vom Gipfel des Qingtian-Bergs die beste ist. In einer Welt, in der Technologie König ist, möchte ich fragen, ob die Aussicht vom Gipfel des Qingtian-Bergs die beste ist.</div>
<p>Technologie ist König der Welt. Ich möchte fragen, ob die Landschaft auf dem Gipfel des Qingtian-Bergs der König der Technologie ist.
Ich möchte fragen, ob die Landschaft des Qingtian Peak der König der Technologie ist. Wenn die Technologie der König der Welt ist,
Ich möchte fragen, ob die Landschaft auf dem Gipfel des Qingtian-Berges die Königslandschaft der Welt ist. Ist die Landschaft schön?</p>
</body>
</html>Zusammenfassen Oben sind die verschiedenen Änderungen der Schrifteinstellungen in den häufig verwendeten CSS-Stilen aufgeführt, die vom Editor eingeführt wurden. Ich hoffe, dass dies für alle hilfreich sein wird. Vielen Dank für Ihre Unterstützung der Website 123WORDPRESS.COM! |
<<: Erstellen von Befehlszeilen-Anwendungen mit JavaScript
>>: 3 verschiedene Möglichkeiten zum Löschen der Optionsoptionen im Auswahltag
Artikel empfehlen
Detaillierte Erläuterung der praktischen Anwendung der Centos7 ESXi6.7-Vorlage
1. Erstellen Sie ein Centos7.6-System und optimie...
VMware-Installation der virtuellen CentOS-Maschine und grafisches Tutorial zur Netzwerkkonfiguration
1. Laden Sie das CentOS-Image herunter 1.1 Downlo...
Navicat importiert CSV-Daten in MySQL
In diesem Artikel erfahren Sie, wie Sie mit Navic...
Lösen Sie das Problem der unsicheren Docker x509-Registrierung
Nach der Installation von Docker trat beim Versuc...
Dinge, die Sie nicht über die CSS-Pseudoelemente ::before und ::after wissen
CSS hat zwei Pseudoklassen, die nicht häufig verw...
Das Problem, dass beim Verbinden mit der MySQL-Datenbank in Idea chinesische Zeichen verstümmelt erscheinen
Problem: Bei Verwendung von JDBC zur Verbindung m...
HTML-Tabellen-Markup-Tutorial (39): Das helle Rahmenfarbattribut der Kopfzeile BORDERCOLORLIGHT
Im Tabellenkopf können Sie die Farbe der hellen U...
Verwenden Sie CSS, um einen 3D-Fotowandeffekt zu erstellen
Verwenden Sie CSS, um eine 3D-Fotowand zu erstell...
So aktivieren Sie den Fernzugriff in Docker
Docker-Daemon-Socket Der Docker-Daemon kann über ...
Anweisungen zur Verwendung des Datenbankverbindungspools Druid
Ersetzen Sie ihn durch den optimalen Datenbankver...
Tutorial zum Anpassen der Größe der logischen LVM-Volume-Partition in Linux (für verschiedene Dateisysteme wie xfs und ext4)
Vorwort Bei der Installation des Systems haben wi...
Vue verwendet GraphVis, um einen unendlich erweiterten Beziehungsgraphen zu entwickeln
1. Gehen Sie zur offiziellen GraphVis-Website, um...
Detaillierte Erläuterung der Installation, Bereitstellung und Verwendung von Nginx unter Linux
Inhaltsverzeichnis 1. Herunterladen 2. Bereitstel...
Vorgang zur Zeitzonenanpassung im Docker-Container
Wie kann ich überprüfen, ob die Zeitzone des Dock...
Installieren Sie JDK1.8 in einer Linux-Umgebung
Inhaltsverzeichnis 1. Installationsumgebung 2. In...