Wie ändere ich die Schriftgröße mit CSS?-CSS-Tutorial-php.cn

Wie ändere ich die Schriftgröße mit CSS?

PHPz

Freigeben： 2023-09-23 21:05:03

nach vorne

1489 Leute haben es durchsucht

Wie ändere ich die Schriftgröße mit CSS?

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;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!