L'essentiel des CSS

Mettre en place des CSS

Testez gratuitement nos 1252 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Explorez les diverses possibilités pour apporter des déclarations et des règles à vos pages. Qu'il s'agisse de styles imbriqués ou de feuilles externes, toutes ont leur intérêts et leur avantages.
05:41

Transcription

Reprenons l'exemple de nos trois paragraphes qui est toujours constitué du même code, donc trois paragraphes dont deux sont inclus dans une section et voyons comment on va pouvoir venir, grâce aux feuilles de style apporter des déclarations de manières différentes à la même page. Ici, la première chose à faire, ça se passe au niveau des balises HTML. C'est ce qu'on appelle le style en ligne. On va pouvoir directement utiliser l'attribut style et placer une déclaration Attention, c'est à utiliser de manière parcimonieuse, à dose homéopathique, parce que ça nous demande de venir directement toucher le code. Ici, si je viens dans cette partie et que je place une balise SPAN avec un attribut style fontwait 7,5 ça correspond à du Bold donc du gras. Si je viens dans mon navigateur et que j'actualise, on voit bien que cette partie-là est en gras. Faites attention parce que là maintenant c'est en dur dans le code, et justement on utilise les CSS pour ne pas venir polluer le HTML par ce genre d'information. Seulement parfois, on n'a pas trop le choix, et ça peut être un petit élément qu'il faut garder sous le coude et à utiliser encore une fois de manière homéopathique. La manière la plus simple qu'on a vue, c'est celle qu'on a utilisée toute à l'heure, c'est à dire une balise style qu'on va placer dans l'en-tête head du l'HTML, donc on va venir à l'intérieur du head placer une balise style à l'intérieur de cette balise style on va pouvoir placer un certain nombre de règles et de déclarations. Ici, je le place exactement la même règle, la même déclaration que tout à l'heure. Quand je viens ici, j'actualise, on voit bien que tout a été affecté. Cette fois-ci, il n'y a que la balise p, section p n'est pas utilisée. Revenons ici sur notre présentation. Ça va être le deuxième élément qu'on va pouvoir utiliser c'est un style embarqué qui va se placer entre deux balises HTML <style. Le troisième élément est un style externe, c'est celui qui est préférable. Pourquoi ? Parce qu'en fait, maintenant cette feuille de style n'est accessible que par la page en cours de consultation. Si j'ai un site composé de deux pages, il va falloir que je clone cet élément-là. La meilleure façon de le cloner, c'est de le placer sur un style extérieur Pour le placer sur un style extérieur, on a plusieurs possibilités. Une possibilité qui aujourd'hui est incontournable c'est la balise <link qu'on va utiliser toujours dans l'en-tête du document et qui va être pointée vers un href hyperlink référence ici, vers une feuille de style CSS. Ici, dans cette feuille de style CSS, qu'est-ce que j'ai placé ? J'ai placé une règle avec une série de déclarations. Ici, c'est une section. J'affecte uniquement la section, je vais lui mettre un padding, une marge intérieure, une bordure et une couleur d'arrière-plan. Si j'enregistre, j'enregistre tous mes éléments. Je passe dans le navigateur. J'actualise et on voit bien que maintenant la section est affectée par cette feuille de style. Je vous disais juste avant qu'il y avait deux manières d'utiliser une balise link. Aujourd'hui, on n'a plus trop le choix, c'est presque un incontournable, mais il fut un temps, c'était important d'utiliser la balise import la requête at import avait la particularité de ne pas être comprise par certains vieux navigateurs. De ce fait, on pouvait apporter de l'enrichissement visuel, sur les navigateurs contemporains en utilisant ce subterfuge. Aujourd'hui, on va essayer d'éviter pour des raisons de performance et de cohérence on va éviter de l'utiliser. Sachez que vous pouvez toujours faire un at import et vous pointez simplement un URL qui va pointer vers la feuille de style en question. Cette feuille de style est là et elle va simplement apporter des coins arrondis de 1.5 em à notre page. Si je rebascule maintenant dans le navigateur, j'actualise. On voit bien que les coins arrondis sont apportés. Troisième manière de pouvoir importer des éléments. Il en existe une quatrième qui, en fait, commence à disparaître maintenant puisque le nouveau navigateur de Microsoft, Edge, n'intègre plus les commentaires conditionnels mais qui étaient utilisés par l'intégralité des navigateurs de type Internet Explorer. Donc, ici, ces commentaires conditionnels sont des purs commentaires HTML qui commencent par du commentaire HTML et qui se terminent par du commentaire HTML classique. Sauf qu'à l'intérieur on a une condition qui est placée par if boîte de condition et un fameux end if ici. Cette 'balise ouvrante balise fermante' n'est interpretée que par les navigateurs de type Internet Explorer. Ici, je lui dis « if < IE9 » SI tu es une version plus petite que 9, tu vas utiliser cette partie-là. Cette partie-là n'est pas masquée par le commentaire. IE est capable de venir la lire et donc on va pouvoir apporte à tous les titres H2, un texte de décoration. SI je regarde bien, j'ai un titre H2, je n'en ai pas. Il va falloir que j'en pointe un. Je vais rajouter un titre H2 et je vais dire «Titre de la page » J'enregistre cette partie-là. Si je passe dans un navigateur classique ici. On voit bien que le titre est arrivé. Il n'est pas du tout stylé. Mais il n'a pas non plus de underline Si je passe dans un navigateur de type IE vieille version ici je vais actualiser ma page et on voit bien que le titre de ma page est souligné. Par contre, un grand nombre de choses n'apparait pas comme les couleurs HSL, les bordures, les couleurs de fond. Pourquoi ? Parce que tout ça c'est du HSL et c'est une nomenclature qu'IE - ici je suis dans une version 8, attention, c'est quand même un ancêtre - n'était pas capable d'interpréter et donc ce n'est pas lu. Mais vous avez vu que là, le commentaire conditionnel est bien pris en compte par IE et donc la feuille de style est liée au travers de cette possibilité.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

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 !