Comment sélectionner des segments particuliers pour la programmation HTML5 et CSS3 - les nuls

Parfois, vous pouvez sélectionner uniquement des segments particuliers sur votre page Web HTML5 et CSS3. Jetez un oeil à la façon dont vous devriez vous référer à quelqu'un qui n'apprécie pas vos prouesses de développement web.

Définir plus d'un type de paragraphe

Outre son mérite culturel, cette page est intéressante car elle comporte trois styles de paragraphe différents. Le paragraphe introductif est normal. La citation est définie en caractères italiques et l'attribution est à espacement fixe et à droite.

La citation dans le code suivant a été générée par un grand site: le générateur d'insultes shakespeariens. Rien n'est plus satisfaisant que de dire à quelqu'un en pentamètre iambique.

citation. html #quote {police: gras italique 130% Garamond, Comic Sans MS, fantasy; text-align: center;} #attribution {font: 80% monospace; text-align: right;}

Littérature Citation du jour







Comment dire à quelqu'un de façon chic:
[Thou] en jersey de cuir, en cristal, en nœud papillon, en agate, en jersey, en caddis, en jarretière langue, pochette espagnole!
-William Shakespeare (Henri IV Partie I)

Mise en page des paragraphes identifiés

Jusqu'à présent, vous utilisiez le CSS pour appliquer un style particulier à un élément sur toute la page. Par exemple, vous pouvez ajouter un style à la balise et ce style s'applique à tous les paragraphes de la page.

Parfois (comme dans la page d'insulte de Shakespeare), vous voulez donner à un élément plus d'un style. Vous pouvez le faire en nommant chaque élément et en utilisant le nom dans la feuille de style CSS. Voici comment cela fonctionne:

1. Ajoutez un attribut id à chaque élément HTML que vous voulez modifier.

2. Faites un style en CSS.

   Utilisez un signe dièse suivi de l'identifiant de l'élément en CSS pour spécifier que vous ne parlez plus d'un type de tag, mais d'un élément spécifique: Par exemple, le code CSS contient le sélecteur #attribution, signifiant: style à un élément avec l'identifiant d'attribution. "

   #attribution {
   

3. Ajouter le style.

   Créez un style pour afficher votre élément nommé. Dans ce cas, vous voulez que le paragraphe avec l'ID d'attribution soit aligné à droite, monospace et un peu plus petit que la normale. Ce style sera attaché uniquement à l'élément spécifique.

   #attribution {font: 80% monospace; text-align: right;}
   

L'astuce ID fonctionne très bien sur n'importe quel élément nommé. Les ID doivent être uniques . Cette technique est donc la meilleure lorsque vous souhaitez appliquer un style à un seul élément de la page. Peu importe l'élément HTML.S'il a la citation d'ID, le style #quote lui est appliqué. Vous pouvez avoir des sélecteurs d'ID et des sélecteurs ordinaires dans la même feuille de style.