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 direction css

Attribut DIRECTION

Rôle

L’attribut direction permet de gérer la drirection du texte par rapport à la page (gauche-droite ou droite-gauche).

Version : CSS2

Héritage (inherit) : oui

Propriété Javascript : element.style.direction

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

.droite{
  direction : rtl;
}

– Le code HTML

<p>Direction par défaut</p>
<p class="droite">Direction inversée</p>

Résultat

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

L’attribut direction est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut direction sont:

ltr
De gauche à droite (left to right) : valeur par défaut
Syntaxe :
direction : ltr
rtl
De droite à droite (right to left)
Syntaxe :
direction : -rtl
initial
La direction 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 élément peut ignorer la direction imposée par une feuille de style qui cible aussi cet élément.
Syntaxe :
direction : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
direction : inherit

A voir aussi

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

attribut content css

Attribut CONTENT

Rôle

L’attribut content permet d’insérer du contenu avec les pseudo-éléments :before et :after

Version : CSS2

Héritage (inherit) : non

Propriété Javascript : element.style.content

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

p:after{ /* apres le paragraphe */
  content: " --@Dany";
  color: red;
}

– Le code HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ab at voluptatibus
 numquam reiciendis placeat quasi ducimus facilis quo natus alias fuga vitae debitis tenetur corporis
 tempore labore obcaecati nam!</p>

Résultat

La mention « tweet » (en rouge) a été rajoutée par le CSS à la fin du paragraphe

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

L’attribut content est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut content sont:

normal
Valeur par défaut : souvent rien
Syntaxe :
content : normal
none
Aucun contenu
Syntaxe :
content : none
counter()
Définit un compteur. Doit s’utiliser avec l’attribut counter-increment 
Exemple :

string
Définit une chaine de caractères entre guillemets
Syntaxe :
content : "david"
attr()
Le contenu correspond à l’un des attributs de l’élément HTML

<a href="//tutowebdesign.com">Votre site : </a>
a:after {
content : attr(href)" ";
}

Exemple :

url()
Le contenu correspond à une ressource externe (image, ou autre média)
Syntaxe :
content : url(monimage.jpg)Exemple :

open-quote
Ajoute un guillemet de début
Syntaxe :
content : open-quoteExemple :

close-quote
Ajoute un guillemet de fin si un guillemet de début a été ajouté
Syntaxe :
content : close-quoteExemple :

no-open-quote
Supprime le guillemet de début si spécifié
Syntaxe :
content : no-open-quoteExemple :

no-close-quote
Supprime le guillemet de fin si spécifié
Syntaxe :
content : no-close-quoteExemple

initial
Le contenu à ajouter 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 paragraphe peut ignorer le rajout de contenu imposée par une feuille de style qui cible aussi cet élément.
Syntaxe :
content : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
content : inherit

A voir aussi

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

attribut color css

Attribut COLOR

Rôle

L’attribut color définit la couleur du texte.

La valeur de L’attribut <color> peut être soit exprimé en hexadécimal (#ff00ab), en rgb ou en toute lettre (red,blue..)

Version : CSS1

Héritage (inherit) : oui

Propriété Javascript : element.style.color

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

p{
  color: green;
}

– Le code HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus,
unde velit sed quasi sequi accusantium dicta itaque rerum. Voluptates voluptas repellat libero.
Inventore nam provident quam eos non,unde eaque!</p>

Résultat

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

L’attribut color est pris en charge par tous les principaux navigateurs

Valeurs

Il existe plusieurs solutions pour définir une couleur :

Couleur en hexadécimal
Composer votre couleur en utilisant des nombres (0 à 9) et les lettres de l’alphabet (de A à F). Les deux premières valeurs sont consacrés à la teinte primaire rouge, les deux suivantes sont consacrés à la teinte primaire verte, les deux dernières sont consacrés à la teinte primaire bleu ;
Syntaxe :
color : #ff0022
Couleur en RGB
Permet de représenter le codage d’une couleur en définissant le taux de saturation en rouge, en vert, en bleu sur une échelle de 0 à 255 inclus pour chaque teinte
Syntaxe :
color : rgba(210,255,128)
Couleur en RGBA
Permet de représenter le codage d’une couleur avec gestion de l’opacité. Ce codage définit le taux de saturation en rouge, en vert, en bleu sur une échelle de 0 à 255 inclus puis le taux d’opacité entre 0 et 1 (exemple 0.5 pour 50%)
Syntaxe :
rgba(210,255,128,0.6)
Couleur nommée
Les navigateurs peuvent prendre en charge des noms de couleur (140) en anglais (exemple : red)
Syntaxe :
color: grey

A voir aussi

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

attribut text-align css

Attribut TEXT-ALIGN

Rôle

L’attribut text-align définit l’alignement du contenu dans un conteneur.

Version : CSS1

Héritage (inherit) : oui

Propriété Javascript : element.style.textAlign

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

p{
  text-align: center;
}

– Le code HTML

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

Résultat

Le contenu texte est centé dans la paragraphe

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

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

Valeurs

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

left
Le contenu est aligné à gauche
Syntaxe :
text-align : left
right
Le contenu est aligné à droite
Syntaxe :
text-align : right
center
Le contenu est aligné au centre
Syntaxe :
text-align : left
justify
Le contenu texte est justifié, chaque ligne est à égale largeur
Syntaxe :
text-align : justify
initial
Le contenu texte 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 noir même si pour son élément parent la couleur du texte est défini à rouge.
Syntaxe :
text-align : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
text-align : inherit

A voir aussi

color– text-decorationtext-transform– text-indent– line-height– word-spacing– letter-spacing– 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