XXX

Stylisation de la page web

Designer avec des mots

Le CSS pour Cascading Style Sheets sert à styliser les différentes balises HTML.

Toutes les balises sont stylisables, qu’il s’agisse d’une balise de structure comme le header, footer ou la nav, des balises de contenu comme les h1, h2, p ou encore la balise img ou le br.

Il y a effectivement peut d’intérêt à styliser un br, mis à part pour le faire disparaitre en fonction d’une largeur d’écran déterminer, par contre pour une balise img cela nous permet de définir la taille de celle-ci, de lui ajouter ou non une bordure, etc.

    
@charset "UTF-8";
/* CSS Document */

Balises de structure

reporter les balises

La première chose à faire avant de vouloir designer les éléments est de les reporter dans la feuille de style.

Pour toutes les balises nommées comme le header, la nav, le footer, un h1, un h2, un p, un button, on a juste a reporter l’élément.

Très important en css : Lorsque l’on reporte une balise, il faut directement lui accoler des accolades que l’on va ouvrir et fermer. Il faut que cette notion d’ouverture/fermeture en css devienne un automatisme tout comme cela l’est devenu en HTML avec cette même notion concernant les balises.

On va structurer notre CSS comme l’est le HTML en mettant les balises qui concerne le header dans le haut de la feuille de style et celle qui sont en relation dans le bas de la feuille de style

    		
header{}

h1{}

nav{}

main{}

p{}

footer{}

Balise générique

Identifier et différencier les div

    		
/*ICI JE PARLE DE TOUTES LES DIV SANS DISTINCTION*/
div{}

/*DIV CLASS*/
.nomdelaclass{}

/*DIV ID*/
#nomdelid{}

En ce qui concerne les balises de structure, c’est simple, on doit juste reporter le nom de l’élément.
En ce qui concerne les balises génériques, il faut se reporter à deux éléments
En 1 : Déterminer si c’est une div class ou une div id
En 2 : Utiliser le nom de l’élément

En CSS pour différencier la class de l id on utilise deux signes typographiques
Une class est identifiée par un point : .
Un id est identifié par un dièse : #

Une fois cette différencciation réalisée on a juste à reporté le nom donné à l’élément.
Si ma class s’appelle nomdelaclass on ajoute son nom après le point dans le css
Si mon id s’appelle nomdelid on ajoute son nom après le dièse dans le css

Moyen mnémotechnique pour se souvenir du signe typographique à utiliser
Dans id il y a un d comme dièse donc c’est un #

propriétés et valeurs

stylisation des balises

Une fois la structure reportée il est possible de commencer à styliser les balises.

Pour ce faire, entre les accolades on utilise des propriétés et des valeurs.

Exemple de propriétés : width, height, color
Exemple de valeurs : 1200px, 10 %, #FF6600

Lorsque l’on écrit entre les accolades, chaque propriété est succédé de deux points : et après chaque valeur on ajoute un point-virgule ; pour dire que l’on passe aux propriétés et valeurs suivantes.

Beaucoup de choses sont réalisables en css.
On peut donc déterminer et paramétrer :
– Une typo ou famille de typo en choisissant une graisse, taille et couleur
– Un bloc en lui donnant une hauteur et largeur, fixe ou relative, en le positionnant et en lui affectant une couleur de fond
– Jouer sur des effets comme des ombres portées, des contours, des bords arrondis
– Attribuer à des blocs ou images des modifications colorées comme passer une image en noir et blanc directement via le code
– Effectuer des transitions de couleurs, de formes, de positionnement
– Déterminer un ordre ou une vision logiques des choses en affectant une couleur sur un élément déjà consulté ou en lui attribuant un numéro de manière automatique.
– Créer des formes complexes comme des triangles, des cœurs
– Intervenir sur un élément spécifique d’un bloc donnant une propriété et valeur spécifique à la partie haute et droite d’un bloc par exemple
…

Il faut partir du principe que tout est faisable en css. Et si ça ne l’est pas, il faut regarder du côté du JS ou de JQuery.

Balise de structure ou de contenu

    		
header{
width:100%;
height:300px;
background-color:pink;
}

footer{
width:100%;
height:auto;
background-color:#FF6600;
}

h1{
color:blue;
font-size:20px;
}

h2{
color:green;
font-size: 33px;
}

h3{
color:aqua;
font-size:28px;
}

p{
color:#000;
font-size:14px;
}

Div class et div id

    		
.nomdelaclass{
width:1200px;
height:300px;
background-color:red;
}

.autreclass{
width:20%;
height:200px;
background-color:red;
color:purple;
}

#nomdelid{
width:100%;
height:auto;
background-color:#FF6600;
}

Cibler une balise spécifique dans le css

Par ce qu’il peut y avoir plusieurs balises avec des stylisations différentes

Quand on fait un site web on utilise forcément plusieurs balises p pour les paragraphes, on peut utiliser pour la construction de la page plusieurs balises h2 etc., etc., mais il se peut que ces différentes balises n’aient pas le même design d’un bloc à un autre, il faut donc les cibler par rapport au parent et attribuer des propriétés et valeurs spécifiques.

Le parent est l’élément dans laquelle la balise se trouve
L’enfant est l’élément à l’intérieur d’une balise.

Si j’ai un header avec une nav à l’intérieur la nav est l’enfant du header et le header est le parent de la nav.

    		
header{
width:100%;
height:300px;
background-color:pink;
}

/*ICI J'INSISTE SUR LE FAIT QUE MON H1 EST DANS LE HEADER*/
header h1{
color:blue;
font-size:20px;
}

.content{
width:100%;
height:300px;
background-color:lightblue;
}

/*ICI TOUS LES H2 DE LA CLASS CONTENT AURONT CETTE STYLISATION*/
.content h2{
color:green;
font-size: 33px;
}

/*ICI TOUS LES H3 DE LA CLASS CONTENT AURONT CETTE STYLISATION*/
.content h3{
color:aqua;
font-size:28px;
}

/*ICI TOUS LES P DE LA CLASS CONTENT AURONT CETTE STYLISATION*/
.content p{
color:#000;
font-size:14px;
}

.bloc{
width:100%;
height:800px;
background-color:lightgreen;
}

/*ICI TOUS LES H2 ET H3 DE LA CLASS BLOC AURONT CETTE STYLISATION
SI DES BALISES BENEFICIENT DES MEME PROPRIETES QU'UNE AUTRE BALISE 
JE PEUX LES LISTER EN LES SEPARENT PAR UNE VIRGULE : JE PARLE DE LA BALISE UN,
VIRGULE, JE PARLE DE LA BALISE DEUX ET JE DONNE DES PROPRIETES 
ET VALEURS AUX DEUX*/
.bloc h2,
.bloc h3{
color:green;
font-size: 33px;
}

/*CE QUI NE M'EMPECHE PAS EN CAS DE BESOIN DE RE ISOLER MA BALISE 
POUR LUI ATTRIBUER UNE VALEUR SPECIFIQUE. 
ICI MON H2 DE LA CLASS BLOC A LES MEME VALEURS QUE LE H3 
EXEPTE POUR LA COULEUR DU TEXTE*/
.bloc h2{
color:orange
}

/*ICI TOUS LES P DE LA CLASS BLOC AURONT CETTE STYLISATION*/
.bloc p{
color:grey;
font-size:16px;
}

footer{
width:100%;
height:auto;
background-color:#FF6600;
}

Cibler un enfant en particulier

Chercher et trouver le bon numéro

    	
h2{
color:red;
font-size:44px;
}	
	
.bloc p{
font-size:14px;
color:#000;
}

.bloc:nth-of-type(2) p{
color:#404040;
}

.bloc:nth-of-type(3) p{
color:#808080;
}

Pulp Fiction, 1994.
Ezekiel chapitre 25 verset 10

Il se peut qu’on puisse avoir besoin ou que l’on souhaite cibler un enfant en particulier au sein d’une même div. Ceci pour changer une couleur, modifier des marges…

Pour se faire on peut soit surcharger la class en attribuant une nouvelle class après la première (ou en attribuant une class à l’élément s’il n’en a pas) ou le cibler via sa donnée numérique dans le parent.

    		
<h2>La Marche des Vertueux.</h2>
<h3>Ezekiel Chapitre 25 verset 10 </h3>

<bloc>
<p>
La marche des vertueux est semée d’obstacles qui
sont les entreprises égoïstes que fait sans fin
surgir l’œuvre du Malin. 
</p>

<p>
Béni soit-il l’homme de bonne volonté qui, au nom
de la charité, se fait le berger des faibles qu’il
guide dans la vallée d’ombre, de la mort et
des larmes, car il est le gardien de son
frère et la providence des enfants égarés.
</p>

<p>

J’abattrai alors le bras d’une terrible colère,
d’une vengeance furieuse et effrayante sur
les hordes impies qui pourchassent et réduisent
à néant les brebis de Dieu. Et tu connaîtras
pourquoi mon nom est l’éternel quand sur toi
s’abattra la vengeance du Tout-Puissant.
</p>
</bloc>

Le contenu : Les textes

Différencier les types de contenus et utiliser la bonne sémantique

La gestion des titres c’est OK, maintenant, gérons les textes.
Un texte pour qu’il soit bien balisé doit être intégré dans une balise p, balise que l’on doit ouvrir et fermer.

Tout comme pour les titres, le contenu du paragraphe se place entre l’ouverture et la fermeture de la balise

    
<p></p>

    
<p>
Je suis du texte
</p>

Le contenu : Les liens

Différencier les types de contenus et utiliser la bonne sémantique

Un lien est un élément cliquable.
Ce lien peut exister en tant que tel : Je suis un lien qui renvoie quelque part et basta
Ce lien peut exister en étant un lien hypertexte : Un paragraphe et à l’intérieur un élément que l’on souhaite rendre cliquable
Ce lien peut exister autour d’un élément : je suis un bouton et je veux pouvoir être cliqué
Ce lien peut exister sur un élément : je suis une image et je veux être cliquable

Pour créer un lien on utilise la balise a qu’on ouvre et qu’on ferme à laquelle on va donner une destination, un élément à attendre comme une autre page web ou qui peut aussi être un lien mort.

Ce lien peut s’ouvrir dans le même onglet ou dans un nouvel onglet.

Présentation des différentes balises liées aux éléments mentionnés ci-dessus
balise a : le lien. Peu s’ouvrir dans la même page ou une autre page, être placé sur du texte, un bouton ou une image. Le lien de destination peut être une page web ou un lien mort.

Balise button : utilisée pour créer un bouton

Balise img : pour faire appel à une image, balise auto fermante, donc PAS BESOIN de la fermer elle le fait elle même. La balise image bénéficie d’un attribut src qui permet de déterminer la source qui peut être locale ou distante.
Local : Elle est dans un dossier sur mon ordinateur, je parle donc d’un lien en relatif
Distante : Elle est sur un autre site, je parlerai d’un lien en absolu

Balise br : balise auto fermante pour retour chariot. Un br retour à la ligne, deux br saut de ligne

Présentation de la balise lien

    
<!-- BALISE A QUI EN L'ETAT NE SERT A RIEN -->	
<a></a>

Présentation de la balise bouton

    
<!-- BALISE BUTTON QUI EN L'ETAT N'EST PAS CLIQUABLE -->	
<buttonn></button>

Présentation de la balise image

    
<!-- BALISE IMG POUR UNE IMAGE AVEC LIEN EN RELATIVE -->	
<img src="images/logo.png">


<!-- BALISE IMG POUR UNE IMAGE AVEC LIEN EN ABSOLU -->	
<img src="https://images.france.fr/zeaejvyq9bhj/
4xCOrClXErwjyEINQQHzqi/2b67be73651f785807096e38e899b4da/
Logo-Explore-France_04.png?q=70&fm=webp&fit=fill">

Exemple de lien avec destination

    
<!-- BALISE A AVEC UN LIEN MORT -->	
<a href="#">Je suis un lien</a>

<!-- BALISE A QUI S'OUVRE DANS LA MEME FENETRE 
ET QUI ENVOIE A LA PAGE CONTACT -->	
<a href="contact.html">Contact</a>

<!-- BALISE A QUI S'OUVRE DANS UNE NOUVELLE FENETRE 
ET QUI ENVOIE SUR UN AUTRE SITE -->	
<a target="_blank" href="https://www.france.fr">Je suis le nouveau site</a>

<!-- BALISE A AUTOUR D'UN BOUTON QUI RENVOI VERS UNE PAGE CONTACT -->	
<a href="contact.html">
<button>
Contact
</button>
</a>

<!-- BALISE A SUR UN MOT D'UN PARAGRAPHE QUI RENVOI VERS UNE PAGE A PROPOS -->	
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
<a href="a-propos.html">Aenean commodo ligula eget dolor.</a> Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus.
</p>


<!-- BALISE A SUR UN MOT D'UN PARAGRAPHE QUI RENVOI VERS UNE PAGE A PROPOS
AVEC SAUT DE LIGNES DANS TEXTE-->	
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
<a href="a-propos.html">Aenean commodo ligula eget dolor.</a> Aenean massa. <br>
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus.
</p>


<!-- BALISE A AUTOUR D'UNE IMAGE 
QUI S'OUVRE UNE AUTRE FENETRE -->	
<a href="https://www.france.fr">
<img src="https://images.france.fr/zeaejvyq9bhj/
4xCOrClXErwjyEINQQHzqi/2b67be73651f785807096e38e899b4da/
Logo-Explore-France_04.png?q=70&fm=webp&fit=fill">
</a>

Exemple d’une page web

Balise de structure, génériques et contenu

Maintenant que la notion de balise de structure et de balise générique est comprise, on peut imaginer une structure de document.

Exemple visuel de structure de site

Code créé en s’appuyant sur la structure visuelle

    		
<body>

<header>
  <h1>Je suis le titre pricipal</h1>
  <nav>
  <a><button>Je suis un bouton avec un lien</button></a>
  </nav>
</header>


<main>

<div id="slide">
 <img src="images/staff.jpg">
<div>

<div class="bloc-texte">
  <div class="bloc-bleu">
   <h2>Sous titre</h2>
    <p>Lorem ipsum</p>
  <div>
  
  <div class="bloc-bleu">
   <h2>Sous titre</h2>
    <p>Lorem ipsum</p>
  <div>
  
  <div class="bloc-bleu">
   <h2>Sous titre</h2>
    <p>Lorem ipsum</p>
  <div>
<div>

<div class="bloc-texte">
  <div class="bloc-bleu">
   <h2>Sous titre</h2>
    <p>Lorem ipsum</p>
  <div>
  
  <div class="bloc-blanc">
   <h2>Element<br>avec importance</h2>
    <p>Lorem ipsum</p>
  <div>
  
  <div class="bloc-rouge">
   <img src="images/image-texte-01.jpg">
  <div>
<div>

<div class="bloc-texte">
  <div class="bloc-rouge">
   <img src="images/image-texte-02.png">
  <div>
  
  <div class="bloc-rouge">
   <img src="images/image-texte-03.svg">
  <div>
  
  <div class="bloc-rouge">
   <img src="images/image-texte-04.gif">
  <div>
<div>

</main>

<footer></footer>

</body>

Caouinche

n.f : tête.

étym : bourguignon

syn : binette, bourrichon, caboche, ciboulot, caillou, trogne, tronche…

Stylisation de la page web

Designer avec des mots

Balises de structure

reporter les balises

Balise générique

Identifier et différencier les div

propriétés et valeurs

stylisation des balises

Cibler une balise spécifique dans le css

Par ce qu’il peut y avoir plusieurs balises avec des stylisations différentes

Cibler un enfant en particulier

Chercher et trouver le bon numéro

Le contenu : Les textes

Différencier les types de contenus et utiliser la bonne sémantique

Le contenu : Les liens

Différencier les types de contenus et utiliser la bonne sémantique

Exemple d’une page web

Balise de structure, génériques et contenu