WIDTH AND HEIGHT: LARGEUR ET HAUTEUR D'UN BLOC



1. Cliquer-ici pour regarder la vidéo sur les "dimensions"


2. Régler dans votre fichier "mystyle.css" les dimensions d'un de vos éléments de type bloc ( <p> ou <h1> ou <h2>, etc..).


3. Comme montré dans la vidéo, régler dans votre fichier "mystyle.css" un fond de couleur dégradé pour un de vos éléments de type bloc ( <p> ou <h1> ou <h2>, etc..).


4. Passer ensuite à la partie "styled links-liens décorés". Les personnes intéressées peuvent lire ce qui est en dessous de ce texte avant de passer au chapitre suivant.



Résumé du chapitre:


Un élément de type block ( paragraphe: p , titres: h , image: img , division: div )  a des dimensions réglables. Il possède une largeur et une hauteur réglables, on dispose de deux propriétés CSS pour spécifier les dimensions dans le code:


    - width : c'est la largeur du bloc, exprimée en pixels (px) ou en pourcentage (%) par rapport à son conteneur ( le body ou un autre block si l'élément est dans un autre élément, un paragraphe dans une division par exemple)


    - height : c'est la hauteur du bloc, exprimée en pixels (px) ou en pourcentage (%) par rapport à son conteneur ( le body ou un autre block)


Exemple: code qui règle les dimensions d'un bloc de type paragraphe:


p {

    width: 500px; /* signifie: largeur du bloc */

    height: 80px; /* signifie: hauteur du bloc */

    padding-top: 10px; /* signifie: marge intérieure par rapport au sommet du bloc */

    padding-left: 10px; /* signifie: marge intérieure par rapport au côté gauche du bloc */

    padding-right: 10px; /* signifie: marge intérieure par rapport au côté droit du bloc */

    color: red; /* signifie:couleur du texte en rouge */

    background-color:black; /* signifie: couleur de fond du bloc en noir */

    border: 3px solid red; /* signifie: bordure de 3 pixels en ligne pleine de couleur rouge */

}



Créé avec HelpNDoc Personal Edition: Générer des livres électroniques EPub facilement