Recherche pour :
Panier 0
  • Qui sommes-nous
    • Portfolio
    • Develop4fun.com
  • Tutoriel
    • Guide C#
    • Tuto HTML 5
    • Créer des jeux HTML5, le guide
  • Articles
    • Jeux Vidéo
      • Curiosité
      • Programmation
    • Programmation
      • HTML & CSS
      • C++
      • Java
      • Javascript
      • PHP
      • Python
      • Smarty
      • SQL
      • Swift
    • Web
      • CMS
  • Espace Membre
  • Formation en ligne

Se connecter

Mot de passe perdu ?

Vous n'êtes pas encore membre? inscrivez-vous
  • phone +33766664691
  • email contact@develop4fun.com
  • Tech & Gadget
  • Unity
  • Forums
  • Contact
0
Develop4fun
  • Qui sommes-nous
    • Portfolio
    • Develop4fun.com
  • Tutoriel
    • Guide C#
    • Tuto HTML 5
    • Créer des jeux HTML5, le guide
  • Articles
    • Jeux Vidéo
      • Curiosité
      • Programmation
    • Programmation
      • HTML & CSS
      • C++
      • Java
      • Javascript
      • PHP
      • Python
      • Smarty
      • SQL
      • Swift
    • Web
      • CMS
  • Espace Membre
  • Formation en ligne
perm_identity Commencer

Blog

Develop4fun > Programmation > HTML & CSS > Les div CSS3 n’auront plus de secret pour vous !

Les div CSS3 n’auront plus de secret pour vous !

access_time11 mai 2020
perm_identity Publié par Antonella "Lythande"
folder_open HTML & CSS, Programmation, Tuto CSS 3, Tutoriel
Les sélecteurs CSS d’attributs
(Dernière mise à jour: 6 avril 2020)

Voici la suite de l’article précédent sur les blocs div. Dans cette partie, vous allez en apprendre encore plus sur la personnalisation de vos blocs div grâce à CSS3. Commençons par les bordures.

La couleur de la bordure

Vous avez une bordure sur tous vos blocs. Vous avez déjà utilisé plusieurs exemples de code source. Vous allez (re)découvrir la propriété border-color qui permet de définir la couleur de la bordure d’un bloc.

Vous pouvez définir :

border-top-color la couleur de la bordure supérieure,

border-right-color la couleur de la bordure droite,

border-bottom-color la couleur de la bordure basse,

et border-left-color la couleur de la bordure gauche.

Vous avez même la valeur transparent, la couleur de la bordure est transparente donc vous ne la voyez pas, mais elle existe quand même.

Exemple :

div {
   border-style: solid;
   border-width: 10px;
   border-height: 5px;
   border-top-color: #ccc;
   border-bottom-color: #ccc;
   border-left-color: #eee;
   border-right-color: #eee;
}

Voici un exemple de code source pour une div encadrée avec des couleurs différentes :

top et bottom en gris, left et right en bleu.

L’épaisseur de la bordure

Vous pouvez définir l’épaisseur de la bordure d’un bloc, avec :

border-width, border-top-width, border-right-width, border-bottom-width et border-left-width.

Il s’agit de la largeur de la bordure, et ses dérivés pour les largeurs haute, droite, basse et gauche.

La valeur thin vous permet d’avoir une bordure très fine, medium pour une bordure moyenne et thick pour une bordure épaisse. Ces valeurs pourront cependant donner un rendu des bordures différent suivant les navigateurs.

Exemple :

p {
   border-width: thick;
   border-height: thin;
}

Le style de la bordure

Vous pouvez définir le style de la bordure : en pointillé, en trait plein, avec des points.

Utilisez la propriété border-style et bien évidemment, border-top-style pour la bordure haute, border-bottom-style pour la bordure basse, border-right-style pour la bordure droite, border-left-style pour la bordure gauche.

Vous avez compris le principe maintenant.

Vous pouvez définir des traits pleins avec solid, des tirets avec dashed, des pointillés avec dotted, des doubles traits pleins avec double.

Avec groove, vous obtenez un effet 3D, ridge un autre effet 3D, inset des bordures rentrantes incrustées, outset des bordures sortant de la page.

Avec ces propriétés, vous pouvez ajouter des effets sur les boutons.

Les propriétés inset, outset donnent des effets de profondeur sur le bouton. Avec hidden pas de bordure, cela influe sur la bordure adjacente, et none pour supprimer la bordure.

Exemple :

span { border-style: dotted solid dashed double; }

Conclusion

L’utilisation des blocs est fondamentale avec HTML 5 et CSS 3. Que ce soit une div, un span, un paragraphe p, les blocs vous seront très utiles et sont personnalisables à souhait. Dans cet article, vous avez vu comment ajouter une bordure et les mettre en valeur sur votre page.


Voila, vous pouvez maintenant briller en soirée …

Nous avons mis quelques cours en promo sur l’école du web de Develop4fun :
https://www.develop4fun.fr/categorie/formation/

Vous pouvez également nous retrouver sur Youtube :

Ici => https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q

Ou ici => https://www.youtube.com/channel/UCQlKs3ToaL8IKRbXtwtFnyA

0 0 voter
Évaluation de l'article
Vues : 382
Mots clés: CSSCSS3style d'une baliseTuto CSS 3
À propos de Antonella "Lythande"

Lythande, la conceptrice du site : son histoire commence grâce à Marion Bradley Zimmer et Game Republic. Experte du secteur des jeux vidéo, elle a écrit pour les magazines les plus importants de l’Italie, tels que Game Republic, PS Mania et Pokémon Mania. @LythandeLister

Plus d'articles de Antonella "Lythande"
Précédent Utiliser les div avec CSS3
Suivant La personnalisation des liens avec CSS3
S’abonner
Notifier de
guest
guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

0 Commentaires
Inline Feedbacks
Voir tous les commentaires
Articles récents
  • L’histoire des jeux vidéo : les années 2000
  • [Programmation] 2020: les évolutions techniques et technologiques
  • Dell XPS 17 : luxe et sobriété pour un PC en grand format
  • Surface Laptop GO : un produit surface à tarif serré
  • Radeon RX 6800 XT enfin au niveau de Nvidia
Le blog d’Antonella
  • Une liste d’outils, de ressources et d’applications gratuites pour développeurs

    Aujourd’hui on fait chauffer les marques-pages car je te propose une liste d’outils, de […]

  • Le travail à distance, la productivité et la pression

    Aujourd’hui on va parler de travail à distance, de productivité et de pression. Je vois les […]

  • Space Invaders avec Love2D

    Space Invaders est surement l’un des jeux qu’on code dès le début de notre parcours de […]

Commentaires récents
  • Adr dans 2. C# vs VB .NET
  • What is champ de type time en in HTML – Advertisments dans Trois techniques pour les nouveaux formulaires HTML 5
  • Etienne dans Quel avenir pour un développeur web face à l’intelligence artificielle?
  • Antonella "Lythande" dans C’est quoi un éditeur de texte ?
  • Stas dans C’est quoi un éditeur de texte ?
Game Universe
  • La mise à jour de l’inventaire de Fallout 76

    La mise à jour de l’inventaire de Fallout 76 sera publiée régulièrement le 26 janvier 2021, […]

  • Une démo console de Little Nightmares 2 sur Xbox One, PlayStation 4 et Nintendo Switch

    Bandai Namco Entertainment et Tarsier Studios ont publié aujourd’hui une démo console […]

  • Cyberpunk 2077: le nombre de joueurs sur PC a chuté de près de 80%

    Pour le lancement de Cyberpunk 2077, il y avait plus d’un million de joueurs simultanés sur […]

Comportementaliste animalier
    Étiquettes
    Aligner du texte ASCII balise HTML balises HTML classe css Concepts avancés Cours HTML 5 CSS CSS3 CSS 3 Développeur Développeur Web feuilles de styles feuilles de styles en cascades fichier CSS hexadécimal Histoire des Jeux Vidéo HTML 5 HTMLOptionElement id css IDE introduction Intégrateur JavaScript la taille du texte liste HTML Microsoft navigateur programmation orientée objet Responsive Responsive Web Design RGB smartphones Structure du langage style d'une balise texte html Tuto CSS 3 Tuto HTML 5 Unity Visual Studio Web-designer windows 10 WordPress WordPress 5 XHTML
    • Develop4fun IT
    • Création de sites web
    • Game Universe
    • Comportementaliste Animalier Grenoble
    • Luxury Costa Rica
    • Dourceurs d’aquarelle
    Sécurité du site Web
    Game Universe
    • La mise à jour de l’inventaire de Fallout 76

      La mise à jour de l’inventaire de Fallout 76 sera publiée régulièrement le 26 janvier 2021, […]

    • Une démo console de Little Nightmares 2 sur Xbox One, PlayStation 4 et Nintendo Switch

      Bandai Namco Entertainment et Tarsier Studios ont publié aujourd’hui une démo console […]

    • Cyberpunk 2077: le nombre de joueurs sur PC a chuté de près de 80%

      Pour le lancement de Cyberpunk 2077, il y avait plus d’un million de joueurs simultanés sur […]

    © 2021 Develop4fun. Tous droits réservés
    keyboard_arrow_up wpDiscuz
    0
    0
    Nous aimerions avoir votre avis, veuillez laisser un commentaire.x
    ()
    x
    | Reply