Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Modifier le comportement par défaut du CSS

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à modifier légèrement le comportement par défaut du CSS. Vous allez faciliter l'intégration de votre maquette Photoshop. Travaillez notamment avec la propriété Box-sizing du CSS et des images responsives.

Transcription

Considérez le style CSS que vous avez devant les yeux. Il définit une largeur de 200 pixels pour un élément, mais il définit également un padding de 20 pixels tout autour, et une bordure d'un pixel tout autour de cette bordure également. Autrement dit, la largeur totale de cet élément, sera de 1 pixel de bordure à gauche, plus 20 pixels de padding à gauche, plus les 200 pixels de large, plus 20 pixels de padding à droite, plus 1 pixel de bordure à droite. Autrement dit, une largeur totale pour cet élément de 242 pixels. Au niveau de la hauteur, c'est exactement la même histoire, je définis une hauteur de 80 pixels, mais je dois ajouter un padding de 20 pixels en dessus et en dessous. Et puis, une bordure de 1 pixel au dessous et en dessous, soit une hauteur totale, pour cet élément, de 122 pixels. Alors, ce comportement par défaut de CSS, ne facilite pas du tout ma vie de développeur CSS, puisque c'est à moi de calculer les compensations, et de réduire la hauteur et la largeur de mes éléments, pour acomoder les paddings et les bordures, vous connaissez très certainement ce problème. Alors, j'aimerai bien que le CSS se comporte différement. Pour ça, j'ai une nouvelle propriété dans CSS 3, qui s'appelle box-sizing, et qui me permet de modifier la base de calcul de ces largeurs et de ces hauteurs. Donc je vais dire ici box-sizing, border box. Et grâce à ceci, j'inclus les paddings et les bordures, dans la largeur et la hauteur totale de l'élément, donc ici, grâce à cette simple ligne de code, eh bien, la largeur total de mon élément est de 200 pixels, la hauteur totale de mon élément est de 80 pixels, et le laisse le soin au navigateur de faire les compensations de lui-même. Alors j'aimerai bien que le CSS se comporte comme ceci, par défaut, pour tous les éléments de mon site. Puisqu'ici, vous voyez que j'ai défini cette propriété, uniquement au niveau de ce sélecteur particulier, et donc uniquement au niveau de cet élément particulier de ma page web. Alors pour ça, je vais retourner au niveau de la feuille de style resec.CSS, qui est la première feuille de style que j'applique à mon site. Et ici, dans le fond, je vais lui ajouter quelques propriétés, donc d'abord un petit commentaire, pour me rappeler de ce que je fais. Donc, modifier le comportement par défaut, de box-sizing. Je vais d'abord m'adresser à l'élément racine, c'est-à-dire à l'élément HTML. Et je vais lui dire à cet élément, eh bien, je vais lui dire, box-sizing = border box, comme ceci. Ensuite, j'aimerais bien que les éléments enfants de l'élément HTML, c'est-à-dire tous les éléments tout court, puisque l'élément HTML est l'élément racine. Eh bien, j'aimerai bien que tous ces éléments héritent de cette propriété, box-sizing, border box. Malheureusement, cette propriété n'est pas une propriété héritée. Autrement dit, je vais devoir m'adresser à tout le monde, c'est-à-dire à étoile. Je vais également m'adresser à tout ce qui se passe avant tout le monde, donc la pseudo classe before. Je vais également m'adresser à tout ce qui se passe après tout le monde, donc la pseudo classe after. Et je vais définir, pour ces sélecteurs-là, eh bien, je vais leur dire tout simplement box-sizing inherit, ce qui signifie, hériter votre propriété box-sizing de votre élément parent, c'est-à-dire de manière ultime. de l'élément HTML pour lequel je viens de modifier, justement, le comportement par défaut de cette propriété. Eh bien, voici la dernière phase de la préparation de notre travail en CSS. Nous pourrons donc, maintenant, quand nous définirons la taille de nos éléments, ne pas nous soucier des paddings et des bordures.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !