Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et commentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

LES BORDURES EN CSS

Définir des bordures en CSS

Nous allons pouvoir définir des bordures de couleurs, épaisseurs ou types différents autour de nos éléments HTML en CSS.

L’espace pris par la bordure va se trouver entre la marge intérieure et la marge extérieure d’un élément HTML.

Nous pouvons définir les bordures d’un élément de différentes manières en CSS : soit en utilisant les trois propriétés border-style, border-width et border-color, soit un utilisant directement la notation courte border.

Voyons immédiatement un premier exemple illustrant cela.

Présentation de la propriété CSS border

On peut définir les bordures de différentes façons en CSS

Les bordures définies en CSS s’affichent bien

Essayer ce code

Comme vous pouvez le voir, il est identique d’utiliser les trois propriétés de type border- ou directement la propriété border avec les trois valeurs requises.

Evidemment, border-width va prendre comme valeur une taille correspondant à l'épaisseur de la bordure en pixels et border-color va prendre une couleur. Notez qu’en utilisant la propriété border on doit préciser dans l’ordre les valeurs associées à border-width, border-style et enfin border-color.

Concernant border-style, cette propriété peut prendre différentes valeurs que nous allons voir immédiatement.

Les styles de bordures

La propriété border-style peut prendre huit valeurs différentes qui vont définir l’allure générale (le style) de notre bordure.

Vous pouvez voir dans l’image ci-dessous les différentes valeurs possibles ainsi que l’apparence donnée à la bordure.

Les styles de bordures

Les valeurs les plus couramment utilisées sont solid, dotted et dashed. Faîtes attention avec les valeurs groove, ridge, inset et outset qui restent parfois encore mal supportées par certains navigateurs. Ces quatre dernières valeurs sont censées ajouter un effet 3D à nos bordures.

Voici un exemple utilisant différentes valeurs pour border-style :

Les styles de bordures CSS

On définit différents styles pour nos bordures

Nous avons des bordures en pointillé, effet 3D, double, etc.

Essayer ce code

Bordures haute, droite, basse et gauche

Le CSS nous permet également de définir des bordures différentes au dessus, à droite, en dessous et à gauche de nos éléments HTML.

Pour cela, nous allons devoir ajouter les mots clefs top (haut), right (droit), bottom (bas) et left (gauche) dans le nom de nos propriétés.

Regardez plutôt l’exemple suivant pour bien comprendre :

On peut définir des bordures différentes de chaque côté de nos éléments HTML en CSS

On utilise border-top, border-bottom, left et right

Les bordures sont différentes de chaque côté de nos éléments

Essayer ce code

Les bordures arrondies

L’une des fonctionnalités nouvelles apportées par le CSS3 qui figure sans conteste parmi les plus attendues par les développeurs a été la possibilité de créer des bordures arrondies.

Nous allons pouvoir créer des bordures arrondies avec la propriété border-radius. Cette propriété va prendre une valeur en pixels qui va correspondre à la valeur du radius de la bordure, et nous allons donc devoir l'utiliser de concert avec la propriété border.

Encore une fois, on va pouvoir définir des bordures plus ou moins arrondies de chaque côté d’un élément HTML, cette fois-ci en utilisant les mots clefs top-right, bottom-right, bottom-left, top-left.

Création de bordures arrondies en CSS

On utilise la propriété border-radius

Nos bordures ont des côtés plus ou moins arrondis selon les valeurs données

Essayer ce code

Chapitre précédent

Chapitre suivant