web-dev-qa-db-fra.com

Comment changer la taille de la police en html?

J'essaie de créer un site Web et je veux savoir comment changer la taille du texte d'un paragraphe. Je veux que le paragraphe 1 soit plus grand que le paragraphe 2. Peu importe sa taille, tant qu'il est grand Comment puis-je faire cela?

Mon code est ci-dessous:

<html>
<head>
<style>
  p {
    color: red;
  }
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>
htmlfontssize
16
Pancake_Senpai

Donnez-leur une classe et ajoutez votre style à la classe.

<style>
  p {
    color: red;
  }
  .paragraph1 {
    font-size: 18px;
  }
  .paragraph2 {
    font-size: 13px;
  }
</style>

<p class="paragraph1">Paragraph 1</p>
<p class="paragraph2">Paragraph 2</p>

Vérifiez cet exemple

18
Thanos

Ou ajoutez des styles en ligne:

<p style="font-size:18px">Paragraph 1</p>
<p style="font-size:16px">Paragraph 2</p>
12
Roel Magdaleno

Si vous souhaitez uniquement augmenter la taille de la police du premier paragraphe d'un document, effet utilisé par les publications en ligne, vous pouvez utiliser la pseudo-classe du premier enfant pour obtenir l'effet souhaité. 

p:first-child
{
   font-size:   115%; // Will set the font size to be 115% of the original font-size for the p element.
}

Toutefois, cela modifiera la taille de la police de chaque élément p constituant le premier enfant de tout autre élément. Si vous souhaitez définir la taille du premier élément p de l'élément body, utilisez les éléments suivants:

body > p:first-child
{
   font-size:   115%;
}

Le code ci-dessus fonctionnera uniquement avec l'élément p qui est un enfant de l'élément body. 

7
DisinterestedObserver

Si vous voulez faire cela sans ajouter de classes ...

p:first-child {
    font-size: 16px;
}

p:last-child {
    font-size: 12px;
}

ou

p:nth-child(1) {
    font-size: 16px;
}

p:nth-child(2) {
    font-size: 12px;
}
1
doitlikejustin

Vous ne pouvez pas le faire en HTML. Vous pouvez en CSS. Créez un nouveau fichier CSS et écrivez:

p {
 font-size: (some number);
}

Si cela ne fonctionne pas, assurez-vous de ne pas avoir de balises "pre", ce qui réduira votre code.

0
AwesomePicassom