Heim >Web-Frontend >CSS-Tutorial >Wie ändere ich die Schriftgröße mit CSS?
Wie ändere ich die Schriftgröße mit CSS?
- PHPznach vorne
- 2023-09-23 21:05:031480Durchsuche
CSS (d. h. Cascading Style Sheets) ist ein leistungsstarkes Tool zur Steuerung der visuellen Darstellung von Webseiten. Ein Aspekt davon ist die Möglichkeit, die Schriftgröße von Textelementen auf der Seite anzupassen. Dies kann über die Eigenschaft „font-size“ erfolgen.
Um eine bestimmte Schriftgröße für ein bestimmtes Element festzulegen, verwenden wir einen Klassen- oder ID-Selektor mit dem Attribut „font-size“.
In diesem Artikel sehen wir mehrere Beispiele für die Änderung der Schriftgröße mithilfe von CSS -
Durch die Verwendung des Attributs „font-size“ können wir eine bestimmte Schriftgröße für ein bestimmtes Element oder eine bestimmte Klasse festlegen. Um beispielsweise die Schriftgröße des -Elements auf 18 Pixel festzulegen, würden wir den folgenden Code verwenden:
P{
font-size:18px;
}
Beispiel
<html>
<head>
<title>How to change the font size using CSS</title>
<style>
.p1{
font-size:20px;
}
</style>
</head>
<body>
<h1>Welcome to tutorialspoint</h1>
<p class="p1">Change the font size using CSS</p>
<p>This is normal paragraph</p>
</body>
</html>
Wir können das Attribut „font-size“ auch verwenden, um eine relative Schriftgröße festzulegen, z. B. größer oder kleiner, wodurch sich die Schriftgröße relativ zur Schriftgröße des übergeordneten Elements ändert. Dazu verwenden wir den folgenden Code -
P{
font-size:larger;
}
Beispiel
<html>
<head>
<title>How to change the font size using CSS</title>
<style>
.p1{
font-size:large;
}
.p2{
font-size:small;
}
</style>
</head>
<body>
<h1>Welcome to tutorialspoint</h1>
<p class="p1">Change the font size using CSS - Large font</p>
<p class="p2">Change the font size using CSS - Small font</p>
<p>This is normal paragraph</p>
</body>
</html>
Eine andere Möglichkeit, bestimmte Wörter anzusprechen, ist die Verwendung des CSS-Selektors :not. Dies ermöglicht die Ausrichtung auf alle Wörter außer dem eindeutigen Wort im Element. Zum Beispiel -
CSS
p span:not(.unique) {
font-size: 18px;
}
HTML
<p>This is a <span class="not-unique">not unique</span> word, but this <span class="not-unique">word</span> is <span class="unique">unique</span>.</p>
Beispiel
<html>
<head>
<title>How to change the font size using CSS</title>
<style>
p span:not(.unique) {
font-size: 20px;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of <span class="notunique">not unique</span> the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span class="not-unique">not unique</span> when an unknown printer took a galley of type and scrambledg,</p>
</body>
</html>
Die Eigenschaft „font-size“ in CSS ermöglicht eine präzise Steuerung der Größe von Textelementen auf einer Webseite. Unabhängig davon, ob wir eine bestimmte Schriftgröße für ein bestimmtes Element festlegen, die Schriftgröße basierend auf der Schriftgröße des übergeordneten Elements anpassen oder auf ein bestimmtes Wort abzielen möchten, stellt CSS die dafür erforderlichen Tools bereit.
Das obige ist der detaillierte Inhalt vonWie ändere ich die Schriftgröße mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!