CSS Back To Basics Terminologies Explained
Les feuilles de style CSS ou en cascade complètent le langage de définition des règles de conception pour notre site Web. Partout dans le monde, les artistes utilisent CSS au quotidien pour créer, organiser et encoder des ensembles de règles pour des mises en page de base de sites Web. Ceci est devenu le langage le plus populaire pour la conception front-end et offre des capacités étonnantes avec la récente version de CSS3. Mais qu'est-ce que tout ce code signifie réellement??
Le langage lui-même est pleinement développé depuis quelques années maintenant. La confusion peut survenir principalement en raison de problèmes de communication et d'utilisation abusive de termes similaires. CSS apporte beaucoup de nouveaux concepts à la table. Nous allons couvrir certaines des terminologies les plus populaires à maîtriser en tant que guru CSS.
Pourquoi se spécialiser avec CSS?
Cette question a déjà été posée, et même en 2011, nous pouvons voir les mêmes résultats se manifester. CSS est un langage robuste qui n’appartient ni aux scripts ni à la programmation. C'est un langage de style, plus précisément du code utilisé pour décrire le comportement d'une page Web..
En utilisant CSS, nous pouvons manipuler directement les attributs d’éléments HTML individuels. Tous les blocs, paragraphes, liens et images peuvent être affectés par les règles CSS. Raffiner la sémantique des présentations pour le Web a toujours été une étape importante. C’est la raison principale pour laquelle CSS est toujours le principal acteur pour les concepteurs - personne n’a rien créé de mieux!
Propriétés et valeurs
C'est le moyen le plus simple de percer dans CSS. Tout le code se décompose en deux actions: choisir un élément à appliquer et les éléments à appliquer. Ce dernier est créé par des paires propriété / valeur.
Par exemple La couleur rouge; est une paire propriété / valeur très simple. La propriété que nous avons utilisée est Couleur ce qui nous permet de passer dans tout acceptable valeur changer la couleur du texte. Il peut également s'agir d'un code hexadécimal ou de données de couleur RVB (rouge-vert-bleu). Souvent, les concepteurs ne mentionnent pas l'idée de valeurs, car elle peut induire en erreur.
Les propriétés et les valeurs sont vraiment une seule idée. Chaque déclaration de propriété nécessite une valeur, et les valeurs seules n'ont pas de sens. Il existe de nombreux documents en ligne qui traitent des nombreuses propriétés différentes et de leur incidence sur les éléments HTML. Je recommanderais d'acheter un livre de référence CSS dans n'importe quel magasin de livres à proximité. Ils sont assez bon marché et contiennent la plupart des informations dont vous avez besoin.
Valeurs de sélecteur
Les sélecteurs sont nécessaires pour compléter une ligne complète de code CSS. C’est ce que nous déclarons définir le type d’élément que nous ciblons. Il existe de nombreux sélecteurs et beaucoup sont tellement compliqués que le concepteur moyen n'aurait pas besoin de compétences. Consultez la documentation du sélecteur W3 si vous souhaitez en savoir plus..
La méthode la plus simple pour commencer les définitions de style consiste à utiliser des éléments nus comme sélecteurs de propriétés. Cela signifie manipuler du code racine tel que p pour les paragraphes, div pour les divisions, et même corps et html peut être utilisé pour manipuler le document de page Web entier. Vous trouverez ci-dessous un exemple rapide de style de tous les éléments de paragraphe..
p font-family: Arial, sans-serif; couleur: # 222; poids de police: gras;
Ce qui donne du poids réel à CSS est la précision avec laquelle le sniping peut être effectué. La meilleure façon d’obtenir des styles ciblés consiste à utiliser deux méthodes connues: Des classes et Identifiants. Ce sont des idées courantes en HTML où vous pouvez définir n'importe quel élément avec un identifiant et une valeur de classe par le biais d'attributs. Ensuite, en utilisant CSS, il est simple d'appliquer des styles à ce bloc spécifique.
p # firstpar taille de la police: 14px; / * styles paragraphe avec l'ID de "firstpar" * / p.comment font-size: 1.0em; hauteur de ligne: 1.3em; / * styles paragraphe (s) avec la classe de "comment" * /
Unités de longueur et valeurs
Souvent, ces termes sont confondus, sans grande surprise. Les valeurs ont été expliquées précédemment en tant que placement utilisé pour décrire une propriété. Les unités de longueur sont également des valeurs dans la mesure où elles sont utilisées pour décrire une propriété.
La différence est que ces valeurs nécessitent des données numériques et doivent donc renvoyer une certaine forme d'unités. Les pixels (px) sont les plus répandus et peuvent être utilisés pour presque tout: largeur / hauteur, taille de la police, remplissage / marges, pour n'en nommer que quelques-uns..
En dehors de ceux-ci, vous pouvez voir des pourcentages (%) souvent utilisés dans les présentations de fluide. Lorsque vous définissez des valeurs de largeur sur un pourcentage, le compilateur suppose que 100% correspond à la largeur totale du navigateur Web. Cela donne beaucoup de précision aux concepteurs lors de l'application de styles aux structures de mise en page et même à la typographie de page..
Le bloc de déclaration
Maintenant, après avoir réuni tous ces termes, nous sommes enfin en mesure de discuter de l’idée principale des feuilles de style. Les blocs de code sont utilisés pour délimiter les zones de sujet et spécifier les détails des éléments. Par exemple, ci-dessous, une ligne de code pour un conteneur de navigation simple:
div # nav display: block; largeur: 100%; rembourrage: 3px 6px; marge inférieure: 20 px;
Le moyen le plus simple d’afficher ce code consiste à aligner les propriétés l’une après l’autre. Les développeurs CSS ont utilisé des blocs de code pour répartir chaque propriété sur sa propre ligne. Cet agenda prend beaucoup plus de place mais réduit la capacité de “parcourir” votre feuille pour trouver exactement ce dont vous avez besoin.
Une meilleure façon de décomposer des blocs de code consiste à séparer les éléments compliqués en leurs propres après avoir atteint un seuil. Ce nombre est personnel et sera différent entre les développeurs. C'est le point de basculement où la logique indique qu'il est idiot de tout garder sur une seule ligne, principalement pour des raisons de lisibilité..
J'ai écrit ci-dessous un exemple de bloc de propriétés de navigation. Cette pratique permet de conserver les éléments les plus profonds au même endroit. Les modifications de tous les éléments de navigation sont donc beaucoup plus simples..
div # nav display: block; largeur: 100%; rembourrage: 3px 6px; marge inférieure: 20 px; div # nav ul list-style: none; bloc de visualisation; div # nav ul li float: left; marge droite: 10px; taille de police: 12px; div # nav ul li a color: # 0f0f0f; texte-décoration: aucun; affichage: inline-block; rembourrage: 2px 5px;
Progrès possibles de CSS2 / CSS3
Récemment, dans les manchettes, on a parlé sans cesse des avantages incroyables de CSS3. Mais qu'est-ce qui a vraiment modifié dans la langue? Clairement, l'ancien code fonctionnera toujours très bien. Cela montre au moins une compatibilité ascendante complète entre les compilateurs (toujours une bonne chose).
Les principales différences concernent principalement les nouvelles propriétés. Celles-ci permettent de rendre les angles arrondis et les effets d'ombre portée dans le navigateur. CSS3 propose également de nouveaux outils pour décrire les couleurs dans le document. HSL (Hue-Saturation-Lightness) est le plus récent, en plus de HSLA, qui comprend un canal Alpha pour réduire l'opacité..
Les sélecteurs d'attributs constituent un énorme pas en avant en ce qui concerne le style de balisage direct. Avec ce style de code, vous pouvez cibler un nom d'élément spécifique contenant des attributs avec certaines valeurs. Celles-ci sont surtout utiles lorsque vous utilisez des balises telles que XML, pour lesquelles il n'existe pas de principes de conception standard permettant de manipuler les nœuds. L'exemple ci-dessous est une idée relativement simple:
div [attrib ^ = "1"] / * styles ici * /
Le code ci-dessus fait partie de la bibliothèque de sélecteurs CSS. Cela affecterait tous les éléments div avec un attribut “attrib” qui détient également la valeur “1”. Si cela prête encore à confusion, référez-vous à l'exemple ci-dessous. En théorie, ces deux sélecteurs devraient effectuer les mêmes actions.
p [id ^ = "primaire"] / * styles * / p # primaire / * styles * /
Conclusion
Après avoir décomposé quelques-uns des termes les plus confus, CSS semble être une promenade dans le parc. La langue est très intuitive et les débutants peuvent commencer à concevoir dès les premières heures. C’est ce qui rend le CSS si populaire parmi les développeurs Web..
Les avantages de CSS3 commencent tout juste à prendre effet. Au cours des dernières années, les tendances Web en constante évolution nous montreront à quel point nous contrôlons réellement la conception de pages Web. CSS est actuellement le langage dominant du style des sites Web frontaux. La mise en pratique de compétences de niveau intermédiaire, même rudimentaires, peut générer une expérience de conception enrichissante et des connaissances supplémentaires.
