Intégrer une maquette sur la grille avec Flex

Intégrer une maquette sur la grille avec Flex

Vous allez apprendre à utiliser la technologie Flex pour intégrer une maquette dessiner sur une grille.

En effet pour faciliter l’intégration côté développement, le graphiste conçoit l’interface graphique en disposant les blocs de contenu sur cette grille de disposition contenant 12 colonnes et des gouttières (espaces entre les colonnes).

Le site 960 grid systeme illustre bien cette approche :

Template sur la grille de 12 colonnes
Template sur la grille de 12 colonnes

Il existe bien-sur des Frameworks, comme Bootstrap, qui vous permettent de réaliser, plus simplement, une mise en page sur la grille mais vous allez apprendre à le gérer entièrement avec le code CSS.

Travailler avec des classes CSS

Lorsqu’une caractéristique graphique (bloc de 3 colonnes, par exemple) est vouée à être utiliser plusieurs fois sur des éléments HTML différents, il faut employer les classes CSS.

L’exemple ci-dessous fait référence à un bloc occupant 50% (6 colonnes / 12) la largeur de la grille.

Code HTML

<div class="col-6">
  <!-- contenu html -->
</div>

Code CSS

.col-6{ /* pour un bloc de 50%*/
  /* instructions CSS */
}

Exemple concret:

Bloc sur 6 colonnes
Bloc sur 6 colonnes

Vous êtes libre de nommer vos classes : dans ce tutoriel, pour faire référence à la colonne nous utiliserons l’écriture col  suivi d’un nombre pour spécifier le quantité de colonnes  col-6.

Utiliser Flex pour l’alignement des colonnes

Nous voila dans le vif du sujet : comme aligner les blocs de contenu parfaitement sur la grille en tenant compte des gouttières?

Nous allons reproduire avec le CSS3 la disposition des blocs suivant :

La structure HTML est la suivante

<div class="container">
  <header></header>
  <section class="row">
    <div class="col-4"><h2>Produit 1</h2></div>
    <div class="col-4"><h2>Produit 2</h2></div>
    <div class="col-4"><h2>Produit 3</h2></div>
  </section>
</div>

Nous présentons rapidement les différents blocs :

.container{
  width: 80%;
  margin: 0 auto;
}
header{
  background-color: orange;
  height: 90px;
  margin: 16px 0;
}
h2{
  background-color: silver;
  border: 1px solid grey;
}

Résultat en image :

Nous allons maintenant aligner les blocs en utilisant le mode d’affichage display:flex sur l’élément parent. Cela signifie que les blocs enfants pourront être disposés de manière flexible.

.row{
  display: flex;
}

Ne pas oublier d’appliquer le reset d’Eric Meyer afin de nettoyer le CSS du navigateur.

Le résultat en image donne ceci :

Nous allons maintenant spécifier la taille de chaque bloc col-4. Comme 4 colonnes représente 1/3 de 12, nous définissons une taille de 33.33% pour chaque colonne avec la syntaxe flex-basis.

.col-4{
  flex-basis: 33.33%;
  box-sizing: border-box;
}

Résultat en image :

Nous avons ajouter le code box-sizing: border-box; pour ne pas ajouter la taille de la bordure au bloc. En effet, sans ce code, la taille du bloc serait augmentée de 2px : 1px pour la bordure de gauche et 1px pour celle de droite.

Le résultat ne correspond pas encore au rendu final. Nous allons maintenant gérer les gouttières.

Intégrer les gouttières de la grille

La gouttière est l’espace qui sépare les colonnes. Pour créer cette séparation, on applique la propriété padding de 15px à gauche et à droite de chaque bloc col-4.

.col-4{
  flex-basis: 33.33%;
  box-sizing: border-box;
  /* gouttière */
  padding-left: 15px;
  padding-right: 15px;
}

Les contenus sont donc ramenés vers l’intérieur du bloc et sont séparés de 15 + 15 = 30 pixels (équivaut à la gouttière de la maquette).

Aperçu :

Il faut cependant ramener vers la gauche le premier bloc et vers la droite le dernier.

Pour cela nous allons tirer de -15px (valeur négative) vers la gauche et vers la droite le bloc parent c’est à dire le bloc .row.avec la propriété margin.

Code CSS :

.row{
  display: flex;
  /* gouttière rectifiée */
  margin-left: -15px;
  margin-right: -15px;
}

Voici le résultat :

Pour aérer le contenu texte dans chaque titre, on va ajouter une marge interne de 8px.

h2{
  background-color: silver;
  border: 1px solid grey;
  /* contenu aéré */
  padding: 8px;
}

Et voici le résultat définitif qui correspond à la maquette dessinée :

Le code CSS complet :

.container{
  width: 80%;
  margin: 0 auto;
}
header{
  background-color: orange;
  height: 90px;
  margin: 16px 0;
}
h2{
  background-color: silver;
  border: 1px solid grey;
  padding: 8px;
}
.row{
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
}
.col-4{
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
}

Testez sur Codepen.

Diversifier les classes

Vous pouvez bien-sur prévoir d’autres classes pour les autres largeurs de bloc , comme par exemple:

  •  .col-6  pour une colonne de 50%
  •  .col-12  pour une colonne de 100%
  •  .col-3  pour une colonne de 25%
  •  .col-8  pour une colonne de 66.66%

Dans ce cas pensez à organiser votre code autrement. Rassembler avec un sélecteur multiple les propriétés communes aux différentes classes puis spécifier la taille de chaque colonne, comme dans l’exemple ci-dessous :

.row{
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
}
.col-3, .col-4, .col-6, .col-8, .col-12{
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
}
.col-3{
  flex-basis: 25%;
}
.col-4{
  flex-basis: 33.33%;
}
.col-6{
  flex-basis: 50%;
}
.col-8{
  flex-basis: 66.66%;
}
.col-12{
  flex-basis: 100%;
}

Il vous suffit ensuite, avec le même fichier CSS, de changer le nom des classes aux blocs HTML pour une mise en page différente sur la même grille de 12 colonnes, comme avec le code ci-dessous :

<div class="container">
  <header></header>
  <section class="row">
    <div class="col-3"><h2>Produit 1</h2></div>
    <div class="col-3"><h2>Produit 2</h2></div>
    <div class="col-6"><h2>Produit 3</h2></div>
  </section>
</div>

Résultat en image :

Testez sur Codepen.

Disposition des colonnes sur plusieurs lignes

Nous allons voir comment disposer les colonnes sur plusieurs lignes pour intégrer la maquette ci-dessous :

Il suffit d’abord en HTML de rajouter trois autres blocs :

<div class="container">
  <header></header>
  <section class="row">
    <div class="col-3"><h2>Produit 1</h2></div>
    <div class="col-3"><h2>Produit 2</h2></div>
    <div class="col-6"><h2>Produit 3</h2></div>
    <div class="col-3"><h2>Produit 4</h2></div>
    <div class="col-3"><h2>Produit 5</h2></div>
    <div class="col-6"><h2>Produit 6</h2></div>
  </section>
</div>

Vous remarquez cependant que les six blocs se répartissent la largeur du conteneur. Chaque bloc a donc rétréci :

En effet la propriété flex-basis signifie ‘taille de base’ et non pas ‘taille obligatoire’. Avec la technologie flexible, les blocs peut s’agrandir mais aussi … se rétrécir, si besoin, comme c’est le cas ici!

Il faut donc interdire le rétrécissement avec la propriété flex-shrink sur chaque colonne.

.container{
  width: 80%;
  margin: 0 auto;
}
header{
  background-color: orange;
  height: 90px;
  margin: 16px 0;
}
h2{
  background-color: silver;
  border: 1px solid grey;
  padding: 8px;
}
.row{
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
}
.col-3, .col-4, .col-6, .col-8, .col-12{
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  /* pas de rétrécissement */
  flex-shrink: 0;  
}
.col-3{
  flex-basis: 25%;
}
.col-4{
  flex-basis: 33.33%;
}
.col-6{
  flex-basis: 50%;
}
.col-8{
  flex-basis: 66.66%;
}
.col-12{
  flex-basis: 100%;
}

Cette fois-ci les tailles sont conservées mais nous remarquons que toutes les colonnes restent sur la même ligne :

Nous allons fournir l’instruction flex-wrap pour autoriser les blocs à retourner à la ligne. Il faut appliquer la propriété flex-wrap: wrap; sur le bloc parent .row.

.container{
  width: 80%;
  margin: 0 auto;
}
header{
  background-color: orange;
  height: 90px;
  margin: 16px 0;
}
h2{
  background-color: silver;
  border: 1px solid grey;
  padding: 8px;
}
.row{
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
  /* autoriser le retour à la ligne */
  flex-wrap: wrap;
}
.col-3, .col-4, .col-6, .col-8, .col-12{
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  flex-shrink: 0;  
}
.col-3{
  flex-basis: 25%;
}
.col-4{
  flex-basis: 33.33%;
}
.col-6{
  flex-basis: 50%;
}
.col-8{
  flex-basis: 66.66%;
}
.col-12{
  flex-basis: 100%;
}

Voici le résultat :

Il suffit de rajouter un margin-bottom de 30px sur chaque colonne pour créer la gouttière horizontale :

.col-3, .col-4, .col-6, .col-8, .col-12{
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  flex-shrink: 0;
  /* gouttière horizontale */
  margin-bottom: 30px;
}

Voici l’aperçu final :

Le code CSS complet :

.container{
  width: 80%;
  margin: 0 auto;
}
header{
  background-color: orange;
  height: 90px;
  margin: 16px 0;
}
h2{
  background-color: silver;
  border: 1px solid grey;
  padding: 8px;
}
.row{
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
  flex-wrap: wrap;
}
.col-3, .col-4, .col-6, .col-8, .col-12{
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  flex-shrink: 0;
  margin-bottom: 30px;
}
.col-3{
  flex-basis: 25%;
}
.col-4{
  flex-basis: 33.33%;
}
.col-6{
  flex-basis: 50%;
}
.col-8{
  flex-basis: 66.66%;
}
.col-12{
  flex-basis: 100%;
}

Testez sur Codepen.

 

Savoir faire du Responsive Web Design

Savoir faire du Responsive Web Design


Le Responsive Web Design (RWD) consiste à utiliser le HTML et le CSS pour redimensionner, masquer, réduire ou agrandir automatiquement un site Web, afin de lui donner une belle apparence sur tous les appareils (ordinateurs de bureau, tablettes et téléphones).

Important : une page Web doit être accessible sur n’importe quel appareil !

Remarquez, ci-dessous, les différences d’affichage du site OpenClassrooms sur différents appareils en fonction de la taille de la fenêtre.

 

On remarque que le graphisme s’adapte à la largeur de l’écran. Des différences d’affichage apparaissent au niveau :

  • de la disposition des colonnes (3 sur un grand écran, 2 sur un format tablette et sur les appareils mobile),
  • du format du menu principal (menu sous forme d’icône à droite sur un mobile, liens classiques sur un ordinateur de bureau).

Approche Mobile First

Il s’agit de commencer la conception du produit d’abord pour une version mobile qui inclut les fonctions les plus élémentaires puis nous passons ensuite à la version avancée pour tablette ou PC.

Mobile First
Mobile First

Cette approche Mobile First permet d’éviter des pertes de contenu quand on passe d’un écran plus grand vers un écran plus petit.

En effet, si nous prenons la conception du produit final mobile comme point de départ, sous des restrictions telles que la bande passante, la taille de l’écran, etc., les concepteurs s’empareront naturellement des points clés d’un produit pour se tourner vers un produit sobre et soigné doté de fonctionnalités prioritaires.

En outre depuis 2016, nous savons que l’utilisation de l’Internet mobile a dépassé celle des ordinateurs de bureau en 2016.

Evolution de l'internet mobile
Evolution de l’internet mobile

C’est une raison supplémentaire pour adopter l’approche Mobile First.

Utiliser les média-queries

C’est la technologie CSS reposant sur les media-queries qui permet cette adaptation.

Le principe est simple : à partir d’une certaine taille d’écran, on applique un CSS spécifique pour faire basculer la présentation : c’est ce qu’on appelle un point de rupture. Avec le code ci-dessous, du code CSS sera exécuté dès que la taille de l’écran est supérieure ou égale à 576px :

@media screen and (min-width: 576px) {
  /* css à éxécuter */
}

Par exemple on va changer la couleur de fond de la page (orange) dès que la taille d’écran est supérieur à 576px :

@media screen and (min-width:576px{
  body{
    background-color: orange;
  }
})

Le résultat en image :

Média-queries
Média-queries

Media-queries et Mobile First

Dans une approche Mobile First, on doit d’abord réaliser le CSS pour les formats mobiles puis ensuite utiliser les média-queries pour les écran plus grand (desktop). D’ou l’utilisation de l’instruction  min-width qui signifie supérieur ou égale.

Pour reprendre l’exemple ci dessus, nous allons changer le contenu de la page par rapport à la taille. Nous utiliserons display : none pour cacher le contenu inapproprié.

Code HTML :

<!-- contenu pour mobile -->
<p id="mobile">Contenu pour mobile</p>

<!-- contenu pour ordinateur de bureau -->
<p id="bureau">Contenu pour ordinateur de bureau</p>

Code CSS :

/* CSS pour le format mobile */
#bureau{
  display: none;
}
#mobile{
  display: block;
}

/* CSS pour les grands écrans */
@media screen and (min-width:576px){
  #mobile{
    display: none;
  }
  #bureau{
    display: block;
  }
})

Vous remarquez que le CSS pour mobile est fait en premier.

Important : le code média-queries est toujours placé après le CSS général.

Le résultat en image :

Média-queries et Mobile first
Média-queries et Mobile first

Ajouter la balise meta viewport

Si vous voulez donner au navigateur des instructions sur la manière de contrôler les dimensions et la mise à l’échelle de la page, vous devez ajouter en HTML dans la partie <head> la balise méta suivante :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Adapter la taille des images

On parle d’ image réactive lorsqu’elle s’adapte à la taille des écrans. Pour permettre à une image de conserver sa taille d’origine sur un grand écran mais de la réduire automatiquement sur petit écran, on utilise l’attribut  max-width : 100%

Code HTML

<img width="500" src="https://images.unsplash.com/photo-1518950957614-73ac0a001408?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=6c859637d2eb66855ca891674fb6bd45" alt="">

Code CSS

/* CSS pour mobile */
img{
  max-width: 100%;
}

Le résultat en image :

Image réactive
Image réactive

Afficher différentes images en fonction de la taille de l’écran

La balise HTML <picture>  vous permet de définir différentes images pour différentes tailles d’écran. Dans l’exemple ci dessous le contenu de l’image change lorsqu’on est sur un grand écran.

<picture >
<!-- image sur grand écran -->
  <source width="500" srcset="https://images.unsplash.com/photo-1515481985834-b7ecb46b8e2b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e9fc5f4733da9d7137ad138bb6354ccc" media="(min-width: 576px)">

<!-- image sur mobile -->
  <img width="500" src="https://images.unsplash.com/photo-1526854497059-89ac894e3168?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=fe27db8eecddf5603525c50e463f68c3" alt="">
</picture>

Remarquez la syntaxe media="(min-width: 576px) qui définit le point de rupture à 576px.

On ajoute en plus, comme vu précédemment,  le CSS pour adapter l’image selon la taille de l’écran :

/* CSS pour mobile */
img{
  max-width: 100%;
}

Le résultat en image :

Picture image
Picture image

 

media queries css

@ MEDIA-QUERIES

Rôle

Les media-queries vont vous permettre d’adapter vos feuilles de style en fonction du type de média (affichage écran, impression..). Une des fonctionnalités des médias-queries est l’utilisation des requêtes qui permettent d’écrire des expressions qui vérifient des conditions particulières des médias, comme la largeurla hauteur ou la couleur, l’orientation (portrait, landscape), la résolution et plus encore..

L’utilisation des requêtes permet de faire du responsive design c’est à dire adapter le design d’un template en fonction des dimensions de l’écran. Une requête des médias se compose d’un type de support et de zéro ou plusieurs expressions qui vérifient les conditions particulières de fonctions multimédia.

Exemple de syntaxe : 

@media screen and (max-width: 300px) {
    h2{
        color:pink;
    }
}

Dans cet exemple, les titres de niveau 2 (sous-titre) seront colorés en rose sur les écrans d’appareil dont la largeur est compris entre 0 et maximum 300px

Type de média

Vous pouvez contrôler plusieurs types de support :

screen
Utilisé pour les écrans d’ordinateur, les tablettes, les smartphones, etc.

@media screen {
    
}
speech
Utilisé pour les lecteurs d’écran qui « lit » la page à haute voix

@media speech {

}
all
Utilisé pour tous les types de support

@media all {

}
print
Utilisé pour les imprimantes

@media print {

}

Syntaxe

Les médias-quéries définissent des expressions logiques dont la réponse est soit « vrai » soit « fausse ». Les feuilles de style seront appliquées si la condition est vérifiée. Vous pouvez donc utiliser des opérateurs :

and
Equivalent du ‘ET’. Le plus souvent utilisé : dans ce cas toutes les conditions doivent être vérifiées

@media screen and (min-width:640px) {

}
only
Signifie ‘UNIQUEMENT’

@media only screen {

}
not
Equivalent du ‘NON’

@media not screen {

}

Il est possible de reproduire le comportement du ‘OU’ en appelant différents media-queries à la suite, séparées par des virgules

@media screen, print {

}

Les caractéristiques

Les caractéristiques des médias ressemblent aux propriétés CSS: ils ont des noms et acceptent certaines valeurs. Il y a, cependant, plusieurs différences importantes entre les propriétés et les caractéristiques des médias

  • Les propriétés sont utilisés dans les expressions pour décrire les critères
  • On évite les caractères « < » et « > » qui peuvent entrer en conflit avec HTML et XML. On fait usage des préfixes min- et max- pour définir des valeurs minimales ou maximales à respecter
  • Les propriétés exigent toujours une valeur pour former une déclaration. Ex: max-width: 300px. Par contre les fonctionnalitées de média (comme ‘color’) peuvent former des expressions sans valeur

Vous pouvez adapter vos feuilles de styles selon plusieurs critères liés aux médias.

aspect-ratio
Valeur : ratio
S’applique à : visuel, tactile
Préfixes min/max : ouiIndique le rapport entre la largeur et la hauteur de la zone d’affichage
device-aspect-ratio
Valeur : ratio
S’applique à : visuel, tactile
Préfixes min/max : ouiIndique le rapport entre la largeur et la hauteur du dispositif

@media all and (device-aspect-ratio: 16/9) {
    
}
color
Valeur : entier
S’applique à : visuel
Préfixes min/max : ouiIndique le nombre de bits par composante de couleur pour le périphérique de sortie

@media all and (min-color: 2) {
    
}
color-index
Valeur : entier
S’applique à : visuel
Préfixes min/max : ouiIndique le nombre de couleurs que le périphérique peut afficher

@media all and (min-color-index: 256) {
    
}

 

device-height
Valeur : longueur
S’applique à : visuel, tactile
Préfixes min/max : ouiIndique la hauteur de l’appareil, comme un écran d’ordinateur. Cette valeur ne peut pas être négative

@media all and (device-height: 600px) {
    
}
device-width
Valeur : longueur
S’applique à : visuel, tactile
Préfixes min/max : ouiIndique la largeur de l’appareil, comme un écran d’ordinateur. Cette valeur ne peut pas être négative

@media all and (device-width: 800px) {
    
}
grid
Valeur : entier
S’applique à : tous
Préfixes min/max : nonIndique si le dispositif est un dispositif de grille (terminal ou petit téléphone avec une seule police) ou bitmap.

@media handheld and (grid) and (max-width: 12em) {
    
}

Pour les petits appareils, le em correspond à la largeur ou hauteur d’une cellule de la grille

height
Valeur : longueur
S’applique à : visuel, tactile
Préfixes min/max : ouiSpécifie la hauteur de la zone d’affichage, comme une fenêtre de navigateur. Cette valeur ne peut pas être négative
width
Valeur : longueur
S’applique à : visuel, tactile
Préfixes min/max : ouiSpécifie la largeur de la zone d’affichage, comme une fenêtre de navigateur. Cette valeur ne peut pas être négative
monochrome
Valeur : entier
S’applique à : visuel
Préfixes min/max : ouiIndique le nombre de bits par «couleur» sur un monochrome (échelle de gris)

@media screen and (min-monochrome: 2) {
    
}

Le CSS s’aplique aux dispositifs monochromes avec au moins 2 bits par pixels

orientation
Valeur : entier
S’applique à : landscape | portrait
Préfixes min/max : nonIndique si l’affichage est en mode paysage ou en mode portrait

@media screen and (orientation:portrait) {
    
}
resolution
Valeur : résolution
S’applique à : bitmap
Préfixes min/max : ouiIndique la résolution de l’appareil, en dpi ou dpcm

@media screen and (min-resolution: 300dpi) {
    
}
scan
Valeur : progressive | interlace
S’applique à : tv
Préfixes min/max : non
Indique le type de balayage d’un téléviseur

@media screen and (scan: progressive) {
    
}

Exemple de gabarit responsive

Utilisez Codepen.

– Le code CSS

– Le code HTML

Résultat

Tester le résultat sur une nouvelle page. Réduisez la taille de la fenêtre pour tester le responsive design

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera
La commande @media est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 9

attribut min height css

Attribut MIN-HEIGHT

Rôle

L’attribut min-height permet de spécifier la hauteur minimum d’une boite

Version : CSS2

Héritage (inherit) : non

Propriété Javascript : element.style.minHeight

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

section{
  height: 105px;
  background-color: rgb(220,220,220);
}
div{
  width: 30%;
  height: 50%;
  float: left;
  background-color: pink;
}
div.minWidth{
  min-height: 80px;
  height: 50%;
  background-color: orange;
}

– Le code HTML

<section>
  <div>Texte</div>
  <div class="minHeight">min-hidth:600px </div>
</section>

Résultat

Les boites orange et rose ont une hauteur fixée à 50% pourcentage de la hauteur du conteneur gris. Mais la boite orange à une hauteur minimum de 80px

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera
L’attribut min-height est pris en charge par tous les principaux navigateurs
A partir d’ Internet Explorer 7

Valeurs

Les différentes valeurs de l’attribut min-height sont:

length
Définit une valeur en px, pt, cm, em.
Syntaxe :
min-height : 20px
pourcentage
Définit une valeur en pourcentage par rapport à l’élément parent.
Syntaxe :
min-height : 30%
initial
Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
min-height : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
min-height : inherit

A voir aussi

border clip width margin padding overflow min-height min-heightoutline resize

attribut word spacing css

Attribut WORD-SPACING

Rôle

L’attribut word-spacing permet de spécifier l’espace entre les mots.

Version : CSS1

Héritage (inherit) : oui

Propriété Javascript : element.style.wordSpacing

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

p{
  word-spacing: 30px;
}

– Le code HTML

<p>L'espace entre les mots a été augmenté</p>

Résultat

L’espace a été augmenté par le CSS

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera
L’attribut word-spacing est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut word-spacing sont:

normal
Espace normal entre le mots : valeur par défaut
Syntaxe :
word-spacing : normal
length
Définit une valeur d’espace en px, pt, cm, em.
Syntaxe :
word-spacing : 20px
initial
L’espace est défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » l’héritage, par exemple un paragraphe peut ignorer l’espace imposé par son élément parent.
Syntaxe :
word-spacing : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
word-spacing : inherit

A voir aussi

color– text-align– text-decorationtext-transform– text-indent– word-spacing– letter-spacingline-height– white-space– vertical-align– direction– content

attribut text-decoration css

Attribut TEXT-DECORATION

Rôle

L’attribut text-decoration définit la décoration du texte (soulignement ou pas).

En CSS3, la propriété text-decoration devient l’écriture simplifiée de text-decoration-line , text-decoration-color et text-decoration-style. Cependant, ces attributs ne sont actuellement pas pris en charge par les principaux navigateurs.

Version : CSS1 renouvelé en CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.textDecoration

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

p{
  text-decoration: underline;
}

– Le code HTML

<p>Mon contenu est souligné!</p>

Résultat

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

L’attribut text-decoration est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut <text-decoration> sont:

none
Pas de soulignement : valeur par défaut
Syntaxe :
text-decoration : left
underline
Soulignement en dessous du texte
Syntaxe :
text-decoration : underline
overline
Soulignement en dessus du texte
Syntaxe :
text-decoration : overline
line-through
Soulignement à travers le texte : effet barré
Syntaxe :
text-decoration : line-through
initial
Le soulignement est défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité, par exemple un lien peut rester non souligné même si tous les liens sont définis avec un soulignement au dessus du texte.
Syntaxe :
text-decoration : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
text-decoration : inherit

A voir aussi

color– text-align– text-transform– text-indent– line-height– word-spacing– letter-spacing– white-space– vertical-align– direction– content

attribut text-transform css

Attribut TEXT-TRANSFORM

Rôle

L’attribut text-transform permet de modifier la casse du texte (majuscule, miniscule..).

Version : CSS1

Héritage (inherit) : oui

Propriété Javascript : element.style.textTransform

Testez vous-même cet attribut

Utilisez Codepen

– Le code CSS

p{
  text-transform: uppercase;
}

– Le code HTML

<p>Mon contenu est mise en majuscule</p>

Résultat

Attribut en action en Webdesign

Remarquez, ci-dessous, l’utilisation de l’attribut text-transform sur les liens du menu qui se retrouve en majuscule.

Exemple utilisation de text-transform:uppercase
Exemple d’utilisation de text-transform

En effet la majuscule est tendance en Webdesign. elle est souvent utilisée pour les contenus courts comme les titres, les liens, les logos…. On évite d’utiliser les majuscules pour les longues phases.

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

L’attribut text-transform est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut text-transform sont:

none
Le texte se présente tel quel : valeur par défaut

Syntaxe :
text-transform : none

capitalize
Transforme la première lettre de chaque mot en majuscule.

Syntaxe :

text-transform : capitalize

Résultat

uppercase
Transforme tous les caractères en majuscules

Syntaxe :

text-transform : uppercase

Résultat

lowercase
Transforme tous les caractères en miniscules (même si en HTML ils sont en majuscules)

Syntaxe :

text-transform : lowercase

Résultat

initial
La casse est défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » l’héritage, par exemple un paragraphe peut rester en minuscule même si pour son élément parent le texte est défini en majuscule.
Syntaxe :
text-transform : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
text-transform : inherit

A voir aussi

color– text-align– text-decorationtext-transform– text-indent– line-height– word-spacing– letter-spacing– white-space– vertical-align– direction– content

attribut text-indent css

Attribut TEXT-INDENT

Rôle

L’attribut text-indent permet de gérer le retrait du texte (indentation).

Version : CSS1

Héritage (inherit) : oui

Propriété Javascript : element.style.textIndent

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

p{
  text-indent: 60px;
}

– Le code HTML

<h1>titre</h1>
<p>Mon contenu est en retrait positif</p>

Résultat

Le texte est mis en retrait par le CSS

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

L’attribut text-indent est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut text-indent sont:

none
Le texte se présente tel quel : valeur par défaut
Syntaxe :
text-indent : none
length
Définit un retrait en px, pt, cm, em. Cette valeur peut être négative
Syntaxe :
text-indent : 20px
%
Définit un retrait en % de la largeur de l’élément parent
Syntaxe :
text-indent : 20%
initial
Le retrait est défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » l’héritage, par exemple un paragraphe peut ignorer le retrait imposé par son élément parent.
Syntaxe :
text-indent : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
text-indent : inherit

A voir aussi

color– text-align– text-decorationtext-transform– text-indent– line-height– word-spacing– letter-spacing– white-space– vertical-align– direction– content

attribut line-height css

Attribut LINE-HEIGHT

Rôle

L’attribut line-height permet de spécifier la hauteur de ligne (interligne).

Version : CSS1

Héritage (inherit) : oui

Propriété Javascript : element.style.lineHeight

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

div p{
  line-height: 3em;
}

– Le code HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat voluptate nobis eius consectetur eligendi. Cum harum autem quisquam, molestias corrupti deserunt itaque est veritatis deleniti eius, ducimus, cumque laboriosam veniam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus odio, eos hic recusandae consequuntur est fugit, explicabo quasi numquam in ipsa alias qui repellendus sapiente voluptate fuga quisquam enim facilis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam suscipit architecto, voluptatum reprehenderit vitae similique recusandae odit omnis velit exercitationem facere, sunt dignissimos, iste excepturi labore itaque magni earum dolorum.</p>
<div>
  <p>Pour les paragraphes de la balise div, la hauteur de ligne à été augmentée</p>
  <p>Pour les paragraphes de la balise div, la hauteur de ligne à été augmentée</p>
  <p>Pour les paragraphes de la balise div, la hauteur de ligne à été augmentée</p>
</div>

Résultat

La hauteur de ligne des paragraphes dans la balise div à été augmentée par le CSS

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

L’attribut line-height est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut line-height sont:

normal
Hauteur normal : valeur par défaut
Syntaxe :
line-height : normal
nombre
Un nombre qui sera un multiple de la valeur courante
Syntaxe :
line-height : 3
length
Définit une valeur d’interlignage en px, pt, cm, em.
Syntaxe :
line-height : 20px
pourcentage – %
Définit une valeur d’interlignage en pourcentage de la police courante.
Syntaxe :
line-height : 30%
initial
L’interligne est défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » l’héritage, par exemple un paragraphe peut ignorer l’interligne imposé par son élément parent.
Syntaxe :
line-height : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
line-height : inherit

A voir aussi

color– text-align– text-decorationtext-transform– text-indent– text-spacing– letter-spacingwhite-space– vertical-align– direction– content

attribut letter-spacing css

Attribut LETTER-SPACING

Rôle

L’attribut letter-spacing permet de spécifier l’espace entre les lettres.

Version : CSS1

Héritage (inherit) : oui

Propriété Javascript : element.style.letterSpacing

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

p{
  letter-spacing: 10px;
}

– Le code HTML

<p>Les espaces entres les lettres ont été augmentés</p>

Résultat

Les espaces entre les lettres ont été augmentés par le CSS

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

L’attribut letter-spacing est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut letter-spacing sont:

normal
Espace normal : valeur par défaut
Syntaxe :
letter-spacing : normal
length
Définit une valeur d’espace en px, pt, cm, em.
Syntaxe :
letter-spacing : 20px
initial
L’espace est défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » l’héritage, par exemple un paragraphe peut ignorer l’espace imposé par son élément parent.
Syntaxe :
letter-spacing : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
letter-spacing : inherit

A voir aussi

color– text-align– text-decorationtext-transform– text-indent– word-spacing– line-height– white-space– vertical-align– direction– content