La structure d’une page HTML en CSS

les sélecteurs

id et class sont les deux sélecteurs : ils permettent de cibler précisément un ensemble de règles de style à un ou plusieurs élément(s).

`id`

id définit un élément de manière unique dans l’ensemble des balises :

Un document HMTL valide ne devrait ainsi pas comporter deux éléments avec le même id.
De fait, id est le sélecteur idéal dès qu’il s’agit de positionner un élément au sein de l’interface.
Il est utiliser pour créer des blocks de mise en page.

id = structure invisible de la mise en page
en HTML : “id” -> en CSS: “#”
on ne peut avoir qu’un seul élémént HTML ayant un id

C’est pour ces raisons id = structure du site

Par exemple:

Nous voulons donné une dimension précis à une div :

CSS

#taille {
width:300px;
}

HTML

<div id="taille"></p>

`class`

class de son coté, est utile

Pour définir toutes sortes de spécifications pour plusieurs/différents.
Plusieurs éléments peuvent utiliser la même class (voire même utiliser plusieurs class).
Enfin, une balise peut avoir un id unique et une (ou plusieurs) class.

class = les régles graphiques de design ( couleur de typo, taile de typo, couleur de fond…)
en HTML : “class” -> en CSS: “.”

CSS


.contour{
border: 1px solid #000;
}
.couleur {
color:#225588;
}
.couleur2 {
color:rgba(200,54,81,0.5);
}
.taille_texte{
font-size:2vw;
}

HTML

<div id="article" class="contour">
    <p class="couleur">un texte en couleur</p>
    <p class="couleur2">un texte d'une autre couleur</p>
    <p class="couleur taille_texte">un texte en couleur et d'une autre taille</p>
</div>

ON PEUT:

un SEUL id et une/plusieurs class en même temps
avoir plusieurs class: class="couleur taille_texte", il suffit d’ajouter les class avec un espace.

C’est pour ces raisons que l’on garde l’élément class pour l’apparence du site

class= apparence

synthése

id = structure du site
class= apparence du site

jeux pour comprendre le ciblage complexe en CSS

Voici un jeu, les bases en français : ici
( le même jeu en anglais pour comprendre le ciblage avancé): ici
un autre jeu ici ( niveau élevé): ici

Les balises HTML5 qui remplacent les `div`

Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document ou de l’application web, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme div qui ont un rôle totalement neutre, et ne servent qu’à regrouper d’autres éléments HTML pour leur affecter un style CSS commun, voire pour interagir avec eux. Il ne s’agit donc pas de nouveaux éléments avec des noms génériques : c’est bien plus que ça !

<section> Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d’application web
<article> Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension
<nav> Section possédant des liens de navigation principaux (au sein du document ou vers d’autres pages)
<aside> Section dont le contenu est un complément par rapport à ce qui l’entoure, qui n’est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
<header> Section d’introduction d’un article, d’une autre section ou du document entier (en-tête de page).
<footer> Section de conclusion d’une section ou d’un article, voire du document entier (pied de page).

Comprendre l’imbrication des éléments

Chaque document HTML est toujours composé de conteneurs.
Ceux-ci peuvent être:

ancêtres
parents
enfants
frères

Ces différents éléments composent une hiérarchie d’imbrications.

Un bloc Ancêtre

Un élément Ancêtre est un élément qui contient une hierarchie d’éléments

<header>
    <nav>
        <ul>
            <li><a href="#">accueil</a></li>
            <li><a href="#">travaux</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </nav>
</header>

<header></header> est ancêtre de <a></a>, <li></li>, <ul></ul>, et <nav></nav>
Dans cette exemple nous créons un menu dans la partie header

Pour comprendre un peu plus

<ul>
   <li></li>
</ul>

aller voir: ici et ici

et pour les aligner utiliser le css suivant:

Un bloc Parent

Un bloc Parent est un élément contenant directement un autre bloc.
Le Parent est donc l’Ancêtre immédiat.

<section></section> est parent des deux <article></article>:

<section>
	<article>
		<h2></h2>
		<p></p>
		<h2></h2>
		<p></p>
	</article>
	<article>
		<h2></h2>
		<p></p>
		<h2></h2>
		<p></p>
	</article>
</section>

Un bloc Enfant

Un bloc contenu directement dans un autre bloc est dit Enfant de cet élément.
Les éléments ayant le même élément Parent sont appelés Frères.

Les <div class="graph"></div> sont enfants de <section></section>
Les <div class="graph"></div> sont fréres

<section>
   <div class="graph">
   	<h2></h2>
   	<img>
   	<p></p>
   </div>
   <div class="graph">
   	<h2></h2>
   	<img>
   	<p></p>
   </div>
   <div class="graph">
   	<h2></h2>
   	<img>
   	<p></p>
   </div>
</section>

le flux

La mise en place des différents éléments de la page se fait par défaut selon le Flux courant.

Les éléments (balises) sont placés les uns après les autres dans le code HTML de la page.

L’ordre dans lequel apparaissent les balises dans le code HTML sera l’ordre dans lequel ils seront affichés et apparaîtront dans le document, c’est le Flux. Cela signifie que, par défaut, chaque élément est dépendant des éléments frères qui l’entourent.

Par défaut, les balises Bloc et les balises En-ligne ont un comportement différent dans le flux normal.

NOTE : les blocs positionnés en “absolu” ou “fixé” sortent du flux naturel et échappent quelque peu à cette règle.
Ils ne sont alors plus dépendant des éléments frères.
Pour se placer, un tel bloc se réfère non pas à son Parent direct, mais au premier Ancêtre positionné qu’il rencontre.

le positionnement dans le flux normal

C’est le placement par défaut, à l’aide des marges internes (padding) du conteneur, soit des marges externes (margin) des éléments. Le flux régit l’agencement des différents éléments Frères.

Sans définition explicite du positionnement, un bloc se place en haut à gauche de son conteneur (ce dernier pouvant être un autre bloc, une cellule de tableau, le body,…) et prend automatiquement toute la largeur de ce conteneur. Ses frères se placeront en-dessous.

A partir de là, il est simple de positionner un bloc au sein de son parent grâce à l’utilisation des propriétés de marges.

Par exemple, pour placer un bloc jaune de 100x100px à 15px à partir de la gauche et 200px à partie du haut du conteneur :

.conteneur {
 padding-top: 200px;
padding-left: 15px;
 }
 .bloc {
width: 100px;
height: 100px;
background-color: yellow;
}

utiliser les `position:` `absolute;` `fixed;` et `relative;`

`Position:asolute;`

Cette propriété est largement utilisée par défaut sur les logiciels WYSIWYG comme Dreamweaver. C’est en partie à cause de cette utilisation abusive que les “calques” ont acquis une mauvaise réputation.

En absolue, le bloc est généralement placé à l’aide des propriétés “top” et “left” par rapport au coin supérieur gauche du parent.
Si les valeurs top et left sont inexistantes, le bloc apparait là où il est déclaré ce qui peut servir pour placer correctement dans la page des éléments superposés.

Lorsqu’il est en position absolue le bloc est dit “positionné”. Il est retiré du “flux” du code html : son positionnement sera le même quelle que soit l’emplacement de la balise dans le code du conteneur parent, quel que soit sa fraternité.
Le bloc est placé par rapport à son parent s’il est lui-même positionné, ou alors par rapport au dernier Ancètre positionné (si aucun Ancètre n’est positionné, il se réfère à la page entière, balise html).

En effet, le positionnement absolu, fixe ou relatif a des désavantages du fait de sa rigidité : il ne permet pas (ou difficilement) l’adaptation du site aux différentes résolutions la plupart du temps.

ATTENTION
Sachez également que c’est le seul moyen de superposer deux blocs (avec la propriété z-index)

`Position:relative;`

A noter que le positionnement relatif est un peu le trublion du groupe : c’est une forme de positionnement qui laisse l’élément dans le flux normal (donc dépendant et influençant les éléments frères), tout en le décalant à l’aide des propriétés “top” et “left”… mais en ayant l’avantage des éléments dits “positionnés” à savoir qu’il peut servir de parent pour des éléments hors-flux (position absolue par exemple).

Retenons que le positionnement relatif est principalement employé pour appliquer un décalage d’un élément par rapport à sa position “normale”.

Exemple

HTML

...
<body>
    <div id="conteneur">
        <div id="texte1"> <h1>un titre </h1> </div>
        <div id="image"><img src="image1.jpg"></div>
    </div>
</body>
...

on place le conteneur au milieu de la page

#conteneur{
margin-left: auto;
margin-right: auto;

}

on lui donne une largeur de la moitier de la page
width:50vw;
on lui donne une bordure pour le rendre visible
border: 1px dotted #000;
on coup tout ce qui sort
overflow: hidden;
on obtient :

#conteneur{
margin-left: auto;
margin-right: auto;
width:50vw;
border: 1px dotted #000;
overflow: hidden;
}

Maintenant on style le texte

#texte1{

    font-size: 10vw;
    -webkit-text-stroke: 2px #BB13EA;
    text-stroke: 2px #BB13EA;
    color:rgba(255,255,255,0.5);


}

Maintenant on va faire glisser l’image sous le texte:

on positionne la <div id="image"></div> en relative
position:relative;
on lui donne une position avec la valeur top negative de manière à ce qu’elle remonte de 1000px:
top:-1000px;
on lui donne une valeur en zindex:1;
z-index: 1;

#image{
position:relative;
top:-1000px;
z-index: 1;
}

Maintenant on va faire passer le texte par dessus l’image en ajoutant la propriété z-index:2 qui ne peut marcher que si la <div id="text1"></div> devient en position:relative

#texte1{
  font-size: 10vw;
  -webkit-text-stroke: 2px #BB13EA;
  text-stroke: 2px #BB13EA;
  color:rgba(255,255,255,0.5);
  position:relative;
  z-index: 2;

}

voici le code en enitier

<html>
<head>

<style>
#conteneur{
margin-left: auto;
margin-right: auto;
width:50vw;
border: 1px dotted #000;
overflow: hidden;
}
.texte1{
  font-size: 10vw;
  -webkit-text-stroke: 2px #BB13EA;
  text-stroke: 2px #BB13EA;
  color:rgba(255,255,255,0.5);
  position:relative;
  z-index: 2;

}
.image{
position:relative;
top:-1000px;
z-index: 1;
}
</style>


</head>
<body>
<div id="menu>"
</div>

    <div id="conteneur">
        <div class="texte1"> <h1>un titre </h1> </div>
        <div class="image"><img src="image1.jpg"></div>
        <div class="texte1"> <h1>un titre </h1> </div>
        <div class="image"><img src="image1.jpg"></div>
        <div class="texte1"> <h1>un titre </h1> </div>
        <div class="image"><img src="image1.jpg"></div>
    </div>
</body>
</html>

`position:fixed;`

Nous allons réaliser un portefolio avec 2 div:

une fixe qui ne bougera pas au scroll et qui sera le menu
une mobile au scroll qui proposera des productions

démo: ici

Voici la sctuture HTML:

<body>
      <div id="menu">
        <h1>Mon portefolio </h1>
        <h2><a href="#">peinture</a></h2>
        <h2><a href="#">sculpture</a></h2>
        <h2><a href="#">graphisme</a></h2>
        <h2><a href="#">contact</a></h2>
    </div>

      <div id="image">
        <div class="conteneur_image">
          <img src="image.jpg">
        </div>
        <div class="conteneur_image">
          <img src="image.jpg">
        </div>

        </div>
      </div>
</body>

Pour l’instant dans la page nous n’avons mis que deux images mais le but est d’en positionner au moins une quizaine…

Commençons le CSS:

Il faut définir la structure, voila pourquoi nous utilisons un id
#menu sera bloquée sur la page en haut à gauche : position: fixed;
elle aura une largeur de 20% de la fenêtre du navigateur: width: 20vw;
donc comme #menu fait 20vw de large DONC #image fera 80vw
display: flex;flex-wrap: wrap; nous verrons cela dans le prochain chapitre…
comme le #menu est en position:fixed; il sort du flux HTML, il laisse donc sa place. #image vient se positionner en haut à gauche . Il faut la décaller de la largeur de #menu : margin-left: 20vw;

    #menu {
      position: fixed;
      width: 20vw;
    }

    #image {
      display: flex;
      flex-wrap: wrap;
      margin-left: 20vw;
      width: 80vw;
    }

maintenant on va styler les div des images contenues dans .conteneur_image:

  .conteneur_image {
      width: 33%;
    }
    img {
       width: 100%;
     }

Pourquoi changeons nous d’unité ?

Nous déclarions jusqu’à présent les dimesions de width en vw. Et maintenant nous sommes en %.

Parce que les % vont correspondrent aux pourcentages du conteneur le plus immédiat, c’est à dire en l’occurence :

.conteneur_image va occuper 1/3 (33%) de la place allouée par son conteneur immédiat <div id="image"> qui mesure 80vw . Conclusion, dans le conteneur <div id="image">, il pourra se loger 3 <div class="conteneur_image">
img va occuper 100%, c’est à dire, toute la place de son conteuneur immédiat .conteneur_image

Maintenant nous stylons les caratères typographiques:

h1 {
      font-size: 2vw;
      -webkit-text-stroke: 2px #BB13EA;
      text-stroke: 2px #BB13EA;
      color: rgba(255, 255, 255, 0.5);
    }

a {
      font-size: 2vw;
      -webkit-text-stroke: 0px #BB13EA;
      text-stroke: 0px #BB13EA;
      text-decoration: none;
      color: #BB13E;
      font-weight: 100;
      font-style: italic;
}

fichiers sources ici

`display = flex;`

Flexbox est une propriété CSS3, qui révolutionne les positionnments des div.
Ce CSS est déclaré chez le parent et affecte les enfants
A partir de maintenant nous utiliserons toujours l’élément flex dans tous nos CSS

liens

API
pour vous entrainez : ici
un jeu à faire absolument : ici
un autre ( gratuit si vous vous inscrivez): ici
un autre ici

Des applications ludiques en ligne pour maitriser le CSS

Profitez des CSS ( en anglais )

Profitez des CSS est un outil de conception de sites Web visuels pour apprendre la programmation CSS sur la page. L’interface glisser-déposer facilite l’ajout et l’application de styles aux éléments de la page, tels que les coins arrondis, les dégradés, les ombres de texte et les transitions.

ici

CodeAvenger ( en anglais )

CodeAvenger se rapproche plus du tutoriel interactif que du jeu. Néanmoins, il reste bien fait et peut tout à fait être utile à un quelqu’un qui a deux heures à perdre et un manque de compétence en intégration à combler…

Insciption et 7 jours gratuits d’essai: ici

Enki ( application smartphone en anglais)

Enki vous propose de sélectionner les éléments de programmation à travailler ainsi que votre niveau pour chaque module. Pour s’assurer de votre assiduité et renforcer son efficacité, l’appli vous engage à configurer un rappel quotidien. Les sessions ne durent jamais plus de cinq minutes et s’adaptent à votre profil utilisateur.

lien : ici

SoloLearn ( application smartphone/web en anglais)

SoloLearn regroupe un nombre important d’éléments de programmation, promettant d’initier rapidement les néophytes. Les langages sont présentés à travers une série de cours brassant aussi bien les généralités que les spécificités propres à chacun. Toutes les leçons sont ponctuées par de courts exercices et quiz récapitulatifs qui consolident vos nouveaux acquis.

lien : ici

La structure d’une page HTML en CSS

les sélecteurs

id

class

synthése

jeux pour comprendre le ciblage complexe en CSS

Les balises HTML5 qui remplacent les div

Comprendre l’imbrication des éléments

Un bloc Ancêtre

Un bloc Parent

Un bloc Enfant

le flux

le positionnement dans le flux normal

utiliser les position: absolute; fixed; et relative;

Position:asolute;

Position:relative;

position:fixed;

Pourquoi changeons nous d’unité ?

display = flex;

liens

Des applications ludiques en ligne pour maitriser le CSS

Profitez des CSS ( en anglais )

CodeAvenger ( en anglais )

Enki ( application smartphone en anglais)

SoloLearn ( application smartphone/web en anglais)

`id`

`class`

Les balises HTML5 qui remplacent les `div`

utiliser les `position:` `absolute;` `fixed;` et `relative;`

`Position:asolute;`

`Position:relative;`

`position:fixed;`

`display = flex;`