CSS – Règles élémentaires

Le code CSS est un langage dit descriptif. Non obligatoire bien qu’essentiel sur une page web, il a pour but de mettre en forme et d’animer des balises HTML. Son but est uniquement visuel, à contrario du HTML qui a un but sémantique.

Voyons dans cet article comment mettre en forme une balise HTML particulière, notamment à l’aide de ses attributs class et id

Règles de base

Les propriétés

Il existe plus de 200 propriétés CSS. Pour appliquer une propriété CSS à une balise HTML, on indique :

  • La balise HTML
  • La propriété CSS
  • La valeur associée
  • Le point-virgule
Un point virgule ( ; ) oublié et le code CSS a peu de chances de marcher !
Représentationexemple
balise1
{
    propriete1: valeur1;
}

balise2
{
    propriete1: valeur1;
    propriete2: valeur2;
    propriete3: valeur3;
}
/*exemple de code CSS - ceci est un commentaire*/
p {
    color: blue;
}

Les sélecteurs de balise, class et id

Comme vous vous en doutez, le code CSS p {color: blue;} sélectionne toutes les balises ˂p˃, puis met leur contenu en bleu. Cependant, il est aussi possible de sélectionner les balises via leur class ou leur id :

/*Pour sélectionner une balise <balise> en CSS*/
balise {propriete1: valeur1;}

/*Pour sélectionner une balise par son id <balise id="nom_id"> en CSS*/
#nom_id {propriete1: valeur1;}

/*Pour sélectionner une balise par sa class <balise classe="nom_classe"> en CSS*/
.nom_class {propriete1: valeur1;}

Les sélecteurs particuliers

Les 3 règles de sélection (balise, #id, .class) ne sont pas les seules. On peut aussi sélectionner des éléments (balises, nom d’id, nom de class) en fonction de situations particulières. Par exemple, on peut souhaiter sélectionner dans une page html :

  1. Tous les éléments
  2. Plusieurs éléments
  3. Un élément inclus dans un autre
  4. Chaque premier élément suivant un autre
  5. Un élément avec une valeur d’attribut particulière
  6. Un élément avec un morceau de valeur d’attribut particulière
Cas 1Cas 2Cas 3Cas 4Cas 5Cas 6
/*appliquer un même style à tous les éléments d'une page html*/

*
{
    color: blue;
}
/*appliquer un même style à plusieurs éléments d'une page html*/
/*(ici p et div)*/

p, div
{
    color: blue;
}
/*appliquer un même style à toutes les éléments dans un autre élément*/
/*(ici p dans div)*/

div p
{
    color: blue;
}
/*appliquer un même style au premier élément après un autre*/
/*(ici le premier p après chaque div rencontré)*/

div + p
{
    color: blue;
}
/*appliquer un même style aux éléments dont leur attribut vaut valeur*/
/*(ici tous les p de la forme : <p attribut="valeur">)*/

p[attribut="valeur"]
{
    color: blue;
}
/*appliquer un même style aux éléments dont leur attribut contient valeur*/
/*(ici tous les p de la forme : <p attribut="...val...">)*/

p[attribut*="val"]
{
    color: blue;
}

Les unités de valeurs

Certaines propriétés CSS acceptent des nombres comme valeurs. C’est par exemple le cas pour les propriétés demandant :

  • Une couleur
  • Une taille de police
  • Une distance
  • Une durée
  • Un angle
  • …
Dans certains cas, ne pas indiquer l’unité ou en choisir une mauvaise rend la propriété CSS inutilisable. Si votre code CSS ne semble pas fonctionner, changez d’unité même si elle vous paraît correct.
CouleursTaille de policedistances

Une couleur se définit à partir des 3 couleurs primaires RGB (red, green, blue). Chacune est associée à une intensité de 0 (éteinte) à 255 (intensité maximale). Pour indiquer une couleur, on rentre :

  • un raccourci (red, green, blue, yellow, magenta, cyan, grey, black, white, …)
  • 3 valeurs hexadécimales collées (de 00 à FF),
  • 3 valeurs décimales (de 0 à 255)
Il existe une 4e valeur appelée « alpha ». Elle définit le niveau de transparence de 0 à 1 en décimal et de 00 à FF en hexadécimal).
/* les 3 valeurs ci-dessous effectuent la même action */
/* Ici elles affichent du vert */

div {
     background-color: green;
     background-color: #00FF00;
     background-color: #rgb(0, 255, 0);
}

Une taille de police se définit à partir d’une notation comme :

  • un raccourci (xx-small, x-small, small, medium, large, x-large, xx-large)
  • la taille de police : em,
  • le nombre de pixels : px
  • le pourcentage : %
Il existe d’autres unités, mais étant plus rares, on ne les abordera pas.
/* les 4 valeurs ci-dessous effectuent la même action */
/* Notons que 16px = 100% = 1em et que les unités sont proportionnelles */

div {
     font-size: 1em;
     font-size: 16px;
     font-size: 100%;
     font-size: medium;
}

Une distance se définit avec des notations similaires à celle de la taille de police. On y trouve :

  • le nombre de pixels : px
  • le pourcentage : % (par rapport à la taille de la page et/ou du bloc)
  • le mètre : mm, cm, in (pouce)
Il existe d’autres unités, mais étant plus rares, on ne les abordera pas.
div {
     height: 150px; /* la largeur du bloc div fait 150 px */
     width: 50%; /* la longueur du bloc div fait 50% du bloc dans lequel il est */
}

Exemples

Sélecteur de baliseSélecteur de classSélecteur de idSélecteur particulier
<!DOCTYPE html>
<html lang="fr"> 

	<!-- Ce bloc gère l'entête de la page web --> 
    <head> 
        <meta charset="utf-8" /> 
        <title>Je mets en forme mes blocs</title>
		
		<style>
			div{
				background-color: #0000FF80; /* bleu (FF) semi-transparent (80) */
				width:     40%;   /* Largeur du bloc de 30% du total */
				height:    2em;   /* Hauteur du bloc de 2 lignes d'écriture */
				font-size: 1em;   /* Taille de la police de 1 lignes d'écriture */
				border:    solid; /* Ajout de bordures */
			}
        </style>
    </head>
	
	<!-- Ce bloc gère le contenu de la page web --> 
    <body>
		<div id="bloc1">Ceci est un premier bloc div</div>
		<div id="bloc2" class="ens1" >Ceci est un deuxième bloc div</div>
		<div id="bloc3" class="ens1" >Ceci est un troisième bloc div</div>
		<article>Ceci est une phrase dans un bloc article</article>
		<article>Ceci est une autre phrase dans un bloc article</article>
    </body>
</html>
<!DOCTYPE html>
<html lang="fr"> 

	<!-- Ce bloc gère l'entête de la page web --> 
    <head> 
        <meta charset="utf-8" /> 
        <title>Je mets en forme mes blocs</title>
		
		<style>
			.ens1 {
				background-color: #0000FF80; /* bleu (FF) semi-transparent (80) */
				width:     40%;   /* Largeur du bloc de 30% du total */
				height:    2em;   /* Hauteur du bloc de 2 lignes d'écriture */
				font-size: 1em;   /* Taille de la police de 1 lignes d'écriture */
				border:    solid; /* Ajout de bordures */
			}
        </style>
    </head>
	
	<!-- Ce bloc gère le contenu de la page web --> 
    <body>
		<div id="bloc1">Ceci est un premier bloc div</div>
		<div id="bloc2" class="ens1" >Ceci est un deuxième bloc div</div>
		<div id="bloc3" class="ens1" >Ceci est un troisième bloc div</div>
		<article>Ceci est une phrase dans un bloc article</article>
		<article>Ceci est une autre phrase dans un bloc article</article>
    </body>
</html>
<!DOCTYPE html>
<html lang="fr"> 

	<!-- Ce bloc gère l'entête de la page web --> 
    <head> 
        <meta charset="utf-8" /> 
        <title>Je mets en forme mes blocs</title>
		
		<style>
			#bloc3 {
				background-color: #0000FF80; /* bleu (FF) semi-transparent (80) */
				width:     40%;   /* Largeur du bloc de 30% du total */
				height:    2em;   /* Hauteur du bloc de 2 lignes d'écriture */
				font-size: 1em;   /* Taille de la police de 1 lignes d'écriture */
				border:    solid; /* Ajout de bordures */
			}
        </style>
    </head>
	
	<!-- Ce bloc gère le contenu de la page web --> 
    <body>
		<div id="bloc1">Ceci est un premier bloc div</div>
		<div id="bloc2" class="ens1" >Ceci est un deuxième bloc div</div>
		<div id="bloc3" class="ens1" >Ceci est un troisième bloc div</div>
		<article>Ceci est une phrase dans un bloc article</article>
		<article>Ceci est une autre phrase dans un bloc article</article>
    </body>
</html>
<!DOCTYPE html>
<html lang="fr"> 

	<!-- Ce bloc gère l'entête de la page web --> 
    <head> 
        <meta charset="utf-8" /> 
        <title>Je mets en forme mes blocs</title>
		
		<style>
			div + article{
				background-color: #0000FF80; /* bleu (FF) semi-transparent (80) */
				width:     40%;   /* Largeur du bloc de 30% du total */
				height:    2em;   /* Hauteur du bloc de 2 lignes d'écriture */
				font-size: 1em;   /* Taille de la police de 1 lignes d'écriture */
				border:    solid; /* Ajout de bordures */
			}
        </style>
    </head>
	
	<!-- Ce bloc gère le contenu de la page web --> 
    <body>
		<div id="bloc1">Ceci est un premier bloc div</div>
		<div id="bloc2" class="ens1" >Ceci est un deuxième bloc div</div>
		<div id="bloc3" class="ens1" >Ceci est un troisième bloc div</div>
		<article>Ceci est une phrase dans un bloc article</article>
		<article>Ceci est une autre phrase dans un bloc article</article>
    </body>
</html>

Votez cet article :

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Vues : 1 145

Laisser un commentaire

Related Posts