Comment changer la taille de la police en utilisant CSS ?-tutoriel CSS-php.cn

Comment changer la taille de la police en utilisant CSS ?

PHPz

Libérer： 2023-09-23 21:05:03

avant

1450 Les gens l'ont consulté

Comment changer la taille de la police en utilisant CSS ?

CSS (ie Cascading Style Sheets) est un outil puissant pour contrôler la présentation visuelle des pages Web. L'un des aspects de ceci est la possibilité d'ajuster la taille de la police des éléments de texte sur la page. Cela peut être fait en utilisant la propriété font-size.

Pour définir une taille de police spécifique pour un élément spécifique, nous utilisons un sélecteur de classe ou d'ID avec l'attribut font-size.

Dans cet article, nous verrons plusieurs exemples de modification de la taille de la police à l'aide de CSS -

En utilisant l'attribut font-size, nous pouvons définir une taille de police spécifique pour un élément ou une classe spécifique. Par exemple, pour définir la taille de police de l'élément sur 18 pixels, nous utiliserions le code suivant -

P{
   font-size:18px;
}

Copier après la connexion

Exemple

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

Copier après la connexion

Nous pouvons également utiliser l'attribut font-size pour définir une taille de police relative, par exemple plus grande ou plus petite, ce qui modifiera la taille de police par rapport à la taille de police de l'élément parent. Pour cela nous utiliserons le code suivant -

P{
   font-size:larger;
}

Copier après la connexion

Exemple

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

Copier après la connexion

Une autre façon de cibler des mots spécifiques est d'utiliser le sélecteur :not css. Cela permet de cibler tout sauf le mot unique dans l'élément. Par exemple -

CSS

p span:not(.unique) {
   font-size: 18px;
}

Copier après la connexion

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>

Copier après la connexion

Exemple

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

Copier après la connexion

La propriété font-size en CSS permet un contrôle précis de la taille des éléments de texte sur une page Web. Que nous souhaitions définir une taille de police spécifique pour un élément spécifique, ajuster la taille de police en fonction de la taille de police de l'élément parent ou cibler un mot spécifique, CSS fournit les outils nécessaires pour le faire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!