Share
Nous avons un nouveau guide d’apprentissage complet pour vous aider à apprendre le CSS en ligne, que vous commenciez à vous familiariser avec les bases ou que vous souhaitiez explorer un CSS plus avancé. Check-out Learn CSS: Le guide complet.
CSS fonctionne main dans la main avec HTML; HTML trie la structure de la page, CSS lui donne une belle apparence et ajoute de subtils niveaux d’interaction. En tant que concepteur Web, vous devez vraiment vous familiariser avec ces deux langues. Même si vous ne codez pas vous-même, comprendre leur fonctionnement vous aidera à concevoir pour le Web..
C.S.S. représente Feuilles de style en cascade; les documents contenant des règles de style à appliquer au HTML (ou XML, ainsi que quelques autres formats structurels). Plusieurs règles de style peuvent pointer sur un élément HTML, auquel cas il doit exister un moyen de déterminer quelle règle doit prendre effet. Le terme en cascade décrit le processus de filtrage à partir des règles générales jusqu'à ce que la règle la plus spécifique soit rencontrée. Cette règle est alors choisie pour faire son travail…
Grâce à CSS, la présentation peut être séparée de la structure. Il résout le besoin de mashing des règles de style parmi HTML, comme ceci:
Présentation au sein de la structure. Ew. qui garde les documents plus propres et plus secs.
CSS est lu par les navigateurs Web. Ils prennent le document de balisage, puis appliquent les règles de style aux éléments de ce document..
Ils n'interprètent pas toujours les règles de style de la même manière, et à mesure que les navigateurs se développent, leur support des propositions de style plus récentes. Ce sont souvent les fabricants de navigateurs eux-mêmes qui expérimentent les propriétés CSS, dans l'espoir que leurs suggestions seront adoptées par les utilisateurs..
En fin de compte, le World Wide Web Consortium (W3C) dépend du fait que les propriétés CSS soient normalisées ou non..
La syntaxe CSS comprend quelques éléments fondamentaux; règles, sélecteurs, déclarations, propriétés et valeurs.
Cette règle CSS contient tous les autres bits et bobs que nous venons de mentionner.
Les sélecteurs pointent les éléments dans le balisage HTML, puis les déclarations entre accolades définissent le style de ces éléments. Il peut y avoir plusieurs déclarations dans une même règle. chaque déclaration comprenant une propriété avec une valeur associée.
Il existe de nombreuses façons de sélectionner des éléments HTML, à partir de sélecteurs de types:
Cela sélectionnera toutes les images et appliquera un remplissage nul à toutes.. Ensuite nous avons sélecteurs de classe, qui désignent tous les éléments auxquels une classe spécifique est appliquée. Jetez un oeil à ce balisage, avec son CSS correspondant:
Voici une ancre, il pourrait y en avoir beaucoup… 
… Alors cela sélectionnera toutes les ancres avec une classe de "surbrillance" et les rendra orange. Remarque: contrairement à ce que vous pourriez entendre, il n’existe pas de Classe CSS. Il y a Sélecteurs CSS quelle cible Classes HTML. Vous pouvez en savoir plus à ce sujet sur tantek.com et au 456 Berea St.
Il y a un grand nombre de sélecteurs possibles à apprendre. Il y a encore plus de propriétés à maîtriser (jetez un coup d'œil à cette liste sur le site du W3C). Plus tard, nous examinerons les devoirs au cours desquels il vous sera demandé d’en apprendre beaucoup. Avoir autant que possible au bout de vos doigts fera de vous un meilleur codeur CSS!
Maintenant que vous avez une compréhension fondamentale de ce qu'est le CSS, il est temps de plonger correctement. Il existe un certain nombre de cours pour débutants en ligne qui vous aideront. Voici quelques exemples qui valent le détour:
Lorsque Dave Shea a lancé CSS Zen Garden en mai 2003, il avait pour objectif de démontrer qu'un seul document HTML pouvait être stylé de manière infinie à l'aide de différentes feuilles de style. C'était un concept génial et un véritable moment d'ampoule pour les designers du monde entier.
Pourquoi ne pas faire quelque chose de similaire vous-même? Prenez un balisage simple (le système de navigation de la liste non ordonnée de Chris Coyier est le candidat idéal):
Voyez combien d'effets différents vous pouvez obtenir, simplement en modifiant les styles.
Jetez un oeil à cet atelier Webdesigntuts + Community où près de 100 lecteurs ont soumis leurs feuilles de style pour une simple liste non ordonnée. Comme vous le constaterez avec les résultats, un peu d'imagination peut entraîner un long chemin de CSS!
Si les gens connaissent le CSS, ils tweetent à ce sujet - c'est un fait scientifique. Faites attention à ce que font les célébrités CSS et vous en apprendrez beaucoup. Voici quelques utilisateurs de Twitter que vous devriez suivre:
… et…
Pourquoi ne pas trouver vos propres héros sur un site de codage social comme GitHub ou CodePen? La meilleure chose à propos de tels réseaux est le conseil que chacun se donne; si vous avez un problème de CSS, quelqu'un l'aura eu devant vous et sera prêt à donner un coup de main.
CodePen Comme nous l'avons mentionné précédemment, les navigateurs n'interprètent pas toujours vos styles de manière égale. Cela est particulièrement vrai si vous utilisez des versions plus anciennes d'Internet Explorer, qui sont très en retard sur l'adoption de CSS. Les navigateurs modernes (tels que Google Chrome, Mozilla Firefox, Apple Safari, Opera et même Internet Explorer 10) ont une gestion plus proactive des mises à jour, ce qui réduit la probabilité que les anciennes versions flottent longtemps.
Cela dit, il existe des différences entre chacun de ces navigateurs, quelle que soit leur actualité. Certains CSS seront bien supportés dans un navigateur, interprétés différemment dans un autre, c'est pourquoi il est judicieux de faire attention aux navigateurs..
Voici quelques ressources utiles qui vous aideront dans votre cheminement:
Que vous les lisiez de bout en bout ou que vous les ayez tout simplement à portée de main si vous avez besoin de références rapides, les meilleurs ouvrages de l'industrie sont sans égal pour l'apprentissage.
CSS a été écrit à plusieurs reprises, mais ces publications sont ma crème de la crème:
Au fur et à mesure que vous gagnerez en confiance, votre vocabulaire CSS grandira. Vous allez enregistrer les propriétés CSS en mémoire ainsi que les différentes manières de sélectionner des éléments. Il est maintenant temps de vraiment augmenter le niveau et d'apprendre sérieusement certains sélecteurs CSS.
Apprendre les sélecteurs CSS signifie aussi maîtriser la spécificité.
Icône Stormtrooper par Jory Raphael Quels sélecteurs remplaceront les autres? Quelle est la syntaxe minimale que je devrais utiliser dans mes sélecteurs pour être efficace dans mon codage? Le seul endroit où j'envoie toujours des gens pour apprendre les règles de la spécificité est le CSS d'Andy Clarke: Specificity Wars. Une visualisation inspirée de la façon dont les sélecteurs se débrouillent lorsqu'ils sont opposés les uns aux autres (et aux forces obscures).
Le CSS est une discipline très impliquée. Une fois que vous avez les bases à votre actif, il existe de nombreuses pistes de recherche. Par exemple:
CSS3 est constamment en mouvement. De nouvelles propriétés sont adoptées, d'autres sont abandonnées par les navigateurs, parfois même la syntaxe change. Se familiariser avec les dégradés CSS sera un autre clou dans le cercueil de votre utilisation de Photoshop; pourquoi utiliser des images snippées quand vous pouvez le CSS?!
Reportez-vous à CSS3 Please pour voir toutes les implémentations CSS3 correctes, avec les solutions de secours recommandées pour les navigateurs non compatibles. Découvrez également CSS3 Essentials sur Tuts + Premium pour dynamiser vos connaissances..
Responsive Web Design permet à vos mises en page Web fluides de changer, en fonction de la manière dont la page est consultée. Les requêtes de média CSS3 facilitent ce processus en fournissant différentes règles CSS en fonction des circonstances. Jetez un coup d’œil à Responsive Web Design: Un guide visuel pour commencer.
Il s'avère que CSS pourrait être mieux. Une fois que vous avez commencé à utiliser CSS pour des projets réels, vous tirerez probablement la même conclusion. Conserver de gros fichiers CSS est difficile, la répétition est courante - et pourquoi ne pouvez-vous pas utiliser une variable pour stocker la valeur d'une couleur HEX au lieu de la taper encore et encore?! Les préprocesseurs CSS tels que Sass, LESS et Stylus résolvent tous ces problèmes et bien plus encore. Sans même avoir à «réapprendre» un langage similaire (tenez-vous-en au CSS vanille si vous le souhaitez), vous pouvez exploiter toute la puissance des pré-processeurs..
Découvrez Get Into LESS, Mastering SASS et Sass vs LESS vs Stylus: Pré-processeur Shootout si vous souhaitez en savoir plus..
SMACSS (ou Architecture modulaire et évolutive pour CSS) est un concept développé par Jonathan Snook, qui vise à lutter contre la maintenabilité délicate des fichiers CSS. Il n'enseigne pas une nouvelle langue, mais suggère des moyens de mieux organiser votre CSS actuel..
L'écriture CSS modulaire vous permet de prendre des morceaux de code de style et de les insérer dans d'autres projets, sans ruiner le reste de vos styles. La gestion de la spécificité à son meilleur.
Il ne fait aucun doute qu'avec des compétences telles que HTML et CSS, vous deviendrez un meilleur concepteur de sites Web. Suivez les deux processus d'apprentissage que nous avons décrits et vous serez sur la bonne voie..
Si vous avez des recommandations d'apprentissage CSS, criez-les dans les commentaires!
Accentsconagua