Les blocs div font partie intégrantes des sites web. Avec CSS3, vous pouvez les personnaliser complètement !
Il y a énormément de possibilités avec les blocs, d’autres cours arrivent pour compléter celui-là 😉
Tout est dans le cours vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Connaissez tout des div avec CSS3 partie 1
Bonjour à tous et bienvenu sur Développement Facile.
Encore un nouveau cours sur CSS 3, et là on s’attaque ensemble à un gros morceau des feuilles de styles CSS, il s’agit des blocs div. Pour que ce soit plus facilement assimilable pour vous, j’ai divisé en plusieurs cours toujours de 5 à 10 minutes. On va commencer ensemble dans ce premier cours comment utiliser les blocs div en CSS.
Notion de bloc
Comme je vous le disais, les blocs div sont une notion très importante en CSS pour positionner des éléments, dans un site internet vous avez un bloc div pour l’entête, un header, un bloc div pour le menu, un bloc div pour le contenu de l’article, un bloc div pour la barre avec les widgets sur le côté, et un bloc div pour le pied de page en principe. Et à l’intérieur de ces blocs div, vient encore d’autres div pour positionner les différents éléments. Un bloc div, c’est, en principe, une zone rectangulaire avec du contenu, une marge intérieure (padding), une bordure (border) et une marge extérieure (margin).
Voici un exemple, feuille de style CSS pour définir un bloc div, tous les div auront par défaut width, la largeur à 300 pixels, height la hauteur à 300 pixels, border la bordure à 5 pixels bleu en ligne avec une couleur de fond #CC c’est le gris, avec un padding marge intérieur de 20 pixels, et un margin marge extérieure de 20 pixels. Reprenez le code source, amusez-vous à personnaliser largeur, hauteur, background, en mettant background image par exemple, amusez-vous à bien implémenter la notion de bloc div.
Vous avez la propriété de style display qui permet de définir un élément bloc, inline en ligne et bloc de type bloc comme ça. Je vous ai mis un exemple de code source, avec la propriété display ligne, donc sur une liste a plus d’éléments, je vous invite à le reprendre, à le copier-coller dans votre document HTML, et tester les deux propriétés, enfin les deux valeurs, les plusieurs valeurs de display pour voir les différents affichages possibles.
Largeur et hauteur d’un bloc
Vous avez également les propriétés width et height qui permettes de fixer la hauteur, la largeur d’un bloc, ça vous connaissez surement, par contre vous avez des valeurs complémentaires comme max-height pour la hauteur maximum, min-height pour la hauteur minimale, max-width pour la largeur maximale et min-width pour la largeur minimale.
Ca permet de définir des blocs avec une largeur par défaut max-width 150 pixels, une largeur minimum min-width 150 pixels et une largeur maximum max-width, à là dans l’exemple, 100 pixels.
Vous avez un exemple de code source, reprenez-le amusez-vous avec ces nouvelles propriétés pour mieux les apppréhender et savoir comment vous pouvez les utiliser dans vos sites internet.
Les marges externes
Comme je vous l’ai dit vous avez la propriété margin, qui permet de définir la marge extérieure d’un boc, et avec des valeurs complémentaires qui permet de définir la marge de chaque côté.
Margin-top pour la marge haute, margin-right pour la marge droite, margin-bottom pour la marge basse et margin-left pour la marge gauche.
Suivant le montage de la vidéo que je vais faire, moi je suis avec ma gauche mais peut être que vous vous verrez du côté droit, je parle de mon côté. Vous pouvez raccourcir l’écriture des propriétés marges, à la suite, margin-top, margin-right, margin-bottom et margin-left, et en donnant une, deux, trois ou quatre valeurs à la propriété margin d’un seul coup.
Pour une meilleure lisibilité, je vous conseille d’utiliser les mots clé margin-top, margin-right, margin-bottom, margin-left, parce que l’écriture raccourcis, si vous ne connaissez pas que c’est top, right, bottom, left dans votre code vous risquez de vous perdre.
Voici un exemple de code source avec un div qui a une marge, des marges gauches, droites, différentes des marges hautes, 10 et 28 pixels, avec une marge intérieure un padding de 1 pixel. Reprenez le code source, le but c’est que vous vous amusiez : margin, padding, width, height, max-height, min-height, pour bien comprendre ce que vous pouvez faire avec les blocs div. C’est très important que vous maitrisiez l’utilisation des blocs div avec le CSS, vous allez vous en servir tout le temps.
Les marges intérieures
Même principe, padding marge intérieure, vous avez les mêmes valeurs, padding-top, padding-right, padding-bottom, padding-left, pour respectivement marge haute, marge droite, marge basse, marge gauche. Vous pouvez écrire une valeur raccourcis, top, right, bottom, left, donc haut, droite, bas, gauche, vous faites le tour de padding ou de margin.
J’ai mis un exemple de code source, avec padding, à vous de l’utilisez de vous amuser avec comme je vous l’ai dit.
Votre plan d’actions !
L’utilisation des blocs div est vraiment fondamentale avec HTML 5 et CSS 3, donc revoyez ce cours plusieurs fois, il y a un cours qui va arriver sur les blocs div pour vous aider. Téléchargez un code source sous ce cours vidéo, si vous avez des questions posez-les directement sous le cours et je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez le code source CSS3
Voici un exemple de code CSS3 pour utiliser les blocs div.
Téléchargement du code source Exemple CSS3 avec les blocs div
