hideout-lastation.com
CSS Retour à l'essentiel: les terminologies expliquées
Cet article fait partie de notre "série de tutoriels HTML5 / CSS3" - destiné à vous aider à devenir un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série.
CSS ou Cascading Stylesheets compléter le langage de définition des règles de conception pour notre site Web. Partout, des artistes utilisent quotidiennement le langage CSS pour créer, organiser et coder des ensembles de règles pour les mises en page de base de sites Web. C'est devenu le langage le plus populaire pour la conception de front-end et fournit des capacités étonnantes avec la récente sortie de CSS3. Mais que signifie tout ce code?
Le langage lui-même a été entièrement développé pour quelques années maintenant. La confusion peut survenir principalement en raison d'une mauvaise communication et d'une mauvaise utilisation de termes similaires. CSS apporte beaucoup de nouveaux concepts à la table. Nous couvrirons certains des termes les plus populaires à maîtriser en tant que gourou 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 apparaître. CSS est un langage robuste qui ne ressemble pas aux scripts ou à la programmation. C'est un langage de style, plus spécifiquement 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 des règles CSS. Le raffinement de la sémantique de présentation pour le Web a toujours été un grand pas en avant. C'est la principale raison pour laquelle CSS est toujours le principal acteur des designers - personne n'a rien créé de mieux!
Propriétés et valeurs
C'est le moyen le plus simple de pénétrer dans CSS. Tout le code se divise en deux actions: choisir un élément pour appliquer des conceptions et quoi appliquer. Ce dernier est créé à l'aide de paires propriété / valeur.
Comme exemple de color: red; est une paire propriété / valeur très simple. La propriété que nous avons utilisée est la couleur qui nous permet de transmettre toute valeur acceptable pour changer la couleur du texte. Cela peut également être un code hexadécimal ou des données de couleur RVB (rouge-vert-bleu). Souvent, les concepteurs ne mentionnent pas l'idée de valeurs car cela peut être trompeur.
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 aucun sens. Il y a beaucoup de documentation en ligne qui passe en revue les nombreuses propriétés différentes et comment elles affectent les éléments HTML. Je recommanderais d'acheter un livre de référence CSS à partir de n'importe quelle librairie à proximité. Ils sont assez bon marché et contiennent la plupart des informations dont vous auriez besoin.
Valeurs du sélecteur
Les sélecteurs sont nécessaires pour compléter une ligne entière de code CSS. C'est ce que nous déclarons pour définir le type d'élément que nous ciblons. Il y a beaucoup de sélecteurs et beaucoup sont si compliqués que le concepteur moyen n'aurait pas besoin des compétences. Vérifiez les documents de sélection de W3 si vous voulez en savoir plus.
La manière la plus simple de commencer les définitions de style consiste à utiliser des éléments nus comme sélecteurs de propriétés. Cela signifie manipuler le code racine tel que p pour les paragraphes, div pour les divisions, et même le body et html peuvent être utilisés pour manipuler l'ensemble du document de la page Web. Voici un exemple rapide de stylisation de tous les éléments de paragraphe.
p {font-famille: Arial, sans-serif; couleur: # 222; font-weight: gras; } Ce qui donne du poids réel à CSS, c'est la précision du sniper sélectif. La meilleure façon d'accomplir des styles ciblés est à travers 2 méthodes connues sous le nom de classes et IDs . Ce sont des idées courantes en HTML où vous pouvez définir n'importe quel élément pour avoir un ID et une valeur de classe à travers des attributs. Ensuite, en utilisant CSS, il est simple d'appliquer des styles à ce bloc spécifique.
p # firstpar {font-taille: 14px; } / * styles paragraphe avec l'ID de "premierpar" * / p.comment {font-size: 1.0em; hauteur de ligne: 1, 3em; } / * styles paragraph (s) avec la classe de "comment" * / Unités de longueur et valeurs
Souvent, ces termes se mélangent, pas une grosse surprise. Les valeurs ont été expliquées précédemment comme le placement que nous utilisons 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 retourner 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, marge / marge, pour n'en nommer que quelques-uns.
Autre que ceux-ci, vous pouvez voir des pourcentages (%) utilisés souvent à travers des mises en page fluides. Lorsque vous définissez les 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 des pages.
Le bloc de déclaration
Maintenant, après avoir mis tous ces termes ensemble, nous sommes finalement en mesure de discuter de l'idée de base derrière les feuilles de style. Des 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 est une ligne de code pour un conteneur de navigation simple:
div # nav {display: block; largeur: 100%; rembourrage: 3px 6px; marge inférieure: 20px; } 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 séparer chaque propriété sur sa propre ligne. Ce programme prend non seulement 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 casser des blocs de code est de séparer les éléments alambiqués dans leur propre après qu'ils ont atteint un seuil. Ce nombre est personnel et sera différent entre les développeurs. C'est le point de basculement où la logique dicte qu'il est idiot de tout garder sur une seule ligne, principalement en raison de la lisibilité.
Ci-dessous, j'ai écrit un exemple d'un bloc de propriétés de navigation tous ensemble. Cette pratique permet de conserver des éléments plus profonds au même endroit, de sorte que les modifications apportées à tous les éléments de navigation sont beaucoup plus simples.
div # nav {display: block; largeur: 100%; rembourrage: 3px 6px; marge inférieure: 20px; } 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; text-decoration: aucun; affichage: inline-block; rembourrage: 2px 5px; } Progrès possibles de CSS2 / CSS3
Dans les manchettes a récemment été non-stop parler des avantages étonnants de CSS3. Mais qu'est-ce qui a vraiment changé dans la langue? Clairement le vieux code fonctionnera toujours très bien. Cela montre au moins une rétrocompatibilité complète entre les compilateurs (toujours une bonne chose).
Les différences majeures sont principalement liées aux nouvelles propriétés. Ceux-ci permettent de rendre les coins 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'attribut sont un énorme pas en avant en ce qui concerne le style de balisage simple. Avec ce style de code, vous pouvez cibler un nom d'élément spécifique qui contient des attributs avec certaines valeurs. Ils sont surtout utiles lorsque vous utilisez un balisage tel que XML, où il n'y a pas de principes de conception standard pour 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 contient également la valeur "1". Si cela est encore source de confusion, référez-vous à l'exemple ci-dessous pour clarifier. En théorie, ces deux sélecteurs doivent 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 dans les premières heures. C'est ce qui rend le CSS si populaire parmi les développeurs web.
Les avantages de CSS3 viennent juste de commencer à prendre effet. Au cours des dernières années, l'évolution des tendances Web nous montrera à quel point nous contrôlons vraiment la conception de pages Web. CSS est actuellement fier d'être le langage dominant pour le style de site Web frontal. S'entraîner à des compétences de niveau intermédiaire, même rudimentaires, peut générer une expérience de conception abondante et d'autres connaissances.
Applications Web alimentées HTML5: 19 adopteurs précoces
Le HTML5, répandu sous le nom de Flash killer, est une toute nouvelle technologie Web qui révolutionne Apple dans le développement d'applications Web. Il contient un élément de canevas pour les images et les dessins d'animation, prend en charge l'intégration vidéo et audio et inclut une base de données de stockage pour les applications Web hors ligne. Le plu
Comment créer un formulaire de contact HTML5 / CSS3 basé sur Ajax
Cet article fait partie de notre "série de tutoriels HTML5 / CSS3" - destiné à vous aider à devenir un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série. Le formulaire de contact est essentiel pour tout site web, car il agit comme un messager qui transmet l'opinion ou les demandes de renseignements aux visiteurs du webmaster. Il y
