CSS est le changement le plus important que les pages Web aient connu au cours de la dernière décennie et a ouvert la voie à la séparation du style et du contenu. De manière moderne, XHTML définit la structure sémantique qu'est ce que le balisage sémantique et comment il changera Internet pour toujours [La technologie expliquée] Ce que le balisage sémantique est et comment il changera Internet pour toujours la page Web, tandis que CSS se préoccupe de la présentation. Bien que la plupart d’entre nous sachent écrire un peu de HTML, nous semblons penser que le CSS est une sorte de magie noire. J'espère changer cela avec ces 5 étapes pour devenir un sorcier CSS.

Cet article s'adresse aux utilisateurs qui ont encore très peu d'expérience en CSS, mais espérons qu'il y en a pour tous les goûts..

(1) Grammaire

Comme toute langue, CSS a une certaine grammaire, et cela peut sembler un peu “programme informatique” au début, mais c'est vraiment juste une liste de choses. Tout le CSS est écrit comme ceci:

SELECTOR PROPERTY: VALUE; VALEUR DE LA PROPRIÉTÉ; VALEUR DE LA PROPRIÉTÉ;

Comme vous le savez peut-être déjà, CSS fonctionne en appliquant un style à un élément sélectionné de la page Web. Par exemple, pour styler la façon dont tous vos liens sont affichés, vous utiliseriez “une” en tant que sélecteur. Les diverses propriétés et valeurs que vous apprendrez avec l'expérience, mais certaines sont faciles - COLOR, BORDER, FONT-SIZE, HEIGHT, sont des propriétés possibles, dont les valeurs peuvent être red, 14pt, 150%, 1000px - c'est vraiment cela facile. Voyons comment nous pourrions styler tous les liens en rouge:

un couleur: rouge;

Vous pouvez également utiliser le même bloc de code CSS pour créer simultanément plusieurs types d’éléments avec des virgules:

a, h2, h3 couleur: rouge;

Cela crée non seulement tous les liens, mais également toutes les rubriques h2 et h3, dans la même couleur rouge. Notez qu'ils peuvent tous être de tailles différentes, car ce bloc de code particulier modifie UNIQUEMENT la couleur..

(2) Sélecteurs de classe et d'identifiant

Parfois, vous ne souhaitez pas appliquer de style à TOUS les éléments a de la même manière - et dans ces cas, vous pouvez utiliser CLASSE ou ID. En règle générale, ID est utilisé pour les éléments uniques et est le plus souvent utilisé pour définir des blocs de contenu volumineux ou des boutons spéciaux uniques..

Par exemple, vous pourriez avoir une grande DIV pour les blocs HEADER, CONTENT et FOOTER de votre page. Par conséquent, définir ceux-ci en tant qu'ID serait un choix judicieux. Les classes, par contre, sont utilisées lorsque des éléments de style sont susceptibles d'être répétés sur toute la page. Peut-être souhaitez-vous que plusieurs objets aient des coins arrondis avec une bordure rouge unie - au lieu d'écrire le même style en ligne un million de fois, vous définiriez une classe pour cette classe et l'attacheriez à la place. Alors, comment définissez-vous ces identifiants et classes?

 
BARRE LATERALE
 

Pour cibler ces éléments en CSS, vous utiliseriez:

 .red-rounded // c'est une classe border-radius: 5px; bord: 2px rouge solide;  #sidebar … // c'est un identifiant 

(3) descendants

Vous n'avez cependant pas besoin de joindre des classes et des identifiants à tout le contenu de votre document. Vous pouvez également utiliser ce que nous appelons DESCENDANTS pour sélectionner des éléments. Regardez cette déclaration CSS et voyez si vous pouvez comprendre ce qu'elle fait:

#sidebar h1 font-size: 20px;

Ce sera d'abord trouver l'article avec un ID de “barre latérale” Ensuite, la sélection sera réduite à tous les

s contenus dans cela et n'appliquent le style qu'à ceux.

Par conséquent, si vous pouvez regrouper tous vos éléments d’une manière ou d’une autre, il est préférable d’utiliser des sélecteurs de descendance car c’est encore moins de code que d’ajouter beaucoup classe =”” définitions à tout.

(4) Où mettre ce CSS?

La meilleure façon de traiter le CSS est de le séparer entièrement de votre code HTML. Créez un fichier appelé ce que vous aimez .css et ajoutez simplement cette ligne à votre en-tête HTML:

Vous pouvez également ajouter des blocs de CSS à la section entre les balises, mais je ne suggère pas cette méthode car elle crée des fichiers HTML compliqués et difficiles à lire..

Le troisième endroit pour ajouter CSS est inline, mais vous devez également vous méfier de cela. Tout ce qui est ajouté en ligne ressemble à ça:

remplacera automatiquement tout ce qui est défini dans votre style séparé. Vous pouvez donc rester assis à essayer de déboguer pendant des années pourquoi les vignettes ne sont pas redimensionnées et votre CSS peut être parfait - mais si l'élément IMG inclut déjà des styles en ligne, ceux-ci sont prioritaires. Comment savez-vous si quelque chose d'autre l'affecte bien?

(5) Obtenir FireBug ou utiliser Chrome

Guide de FireBug Amateur pour la conception de sites Web avec FireBug Guide de FireBug Amateur pour la conception de sites Web avec FireBug Read More est un formidable outil de développement particulièrement utile pour comprendre le fonctionnement de CSS. Prenez un moment pour le télécharger et y jeter un coup d’œil. FireBug est disponible sous forme de plug-in pour Firefox ou, si vous utilisez Chrome, un ensemble identique de fonctionnalités est déjà intégré. Une fois que vous avez activé le plug-in dans Firefox ou que vous utilisez Chrome, cliquez simplement avec le bouton droit de la souris sur la page et sélectionnez “Inspecter l'élément“.

Cela ouvrira une nouvelle fenêtre au bas de votre navigateur. Sur le côté gauche se trouve la vue XHTML, joliment formatée et compressible. Si vous survolez n'importe quel élément, il soulignera cet élément sur la page et vous montrera le modèle de boîte CSS qui l'entoure (nous en parlerons davantage dans une leçon ultérieure). Le point clé ici est que vous pouvez également sélectionner n’importe quel élément et voir précisément quel CSS agit sur celui-ci sur le côté droit, et cela décomposera ceux dans lesquels les sélecteurs ont causé cela. Tout ce qui est ajouté en ligne sera affiché sous le “element.style” titre. Essayez-le maintenant sur cette page. Notez que très souvent une grande partie des CSS figurant à droite est barrée par une ligne centrale - cela signifie qu'un autre sélecteur travaillant sur cet élément est prioritaire et remplace celui barré..

C'est tout pour aujourd'hui, mais n'hésitez pas à laisser des commentaires si vous pensez avoir oublié certains points fondamentaux pour les débutants, ou si vous avez des questions spécifiques ou des problèmes avec CSS, n'hésitez pas à demander conseil dans la section support technique de notre site. La prochaine fois, j'aimerais développer vos connaissances en CSS au-delà des simples changements de couleur et de taille.

En savoir plus sur: HTML, Programmation, Web Design, Développement Web.