Les feuilles de style en cascade (CSS) vous permettent de transformer l'apparence de vos pages Web. Des polices et des couleurs à l'espacement et à la disposition générale, toutes sortes d'outils de conception sont à portée de main. Bien que CSS soit un langage compliqué dans son intégralité, il n'y a que deux concepts de base que vous devez comprendre pour commencer.
Tout commence par identifier exactement quelle partie d'une page vous souhaitez styliser.
Un fichier CSS contient une série de règles décrivant comment un fichier HTML doit être formaté. Chaque règle se compose de deux parties : quoi styliser et comment le styliser. La première partie est contrôlée à l'aide d'une série de termes appelés « sélecteurs ».
Les exemples dans cet article incluent des déclarations de style, mais ils ne sont pas le focus : les sélecteurs eux-mêmes le sont.
Historiquement, il existait trois niveaux (ou versions) de sélecteur CSS avec divers degrés de prise en charge du navigateur. En 2020, selon Can I Use , ils sont tous disponibles pour plus de 99% des utilisateurs dans le monde.
Le niveau 1 a introduit les quatre types fondamentaux de sélecteurs qui couvrent un grand nombre de cas, même aujourd'hui.
| Modèle | Allumettes |
|---|---|
E |
tous les éléments E |
.c |
tous les éléments avec class="c" |
#myid |
l'élément avec id="myid" |
E F |
un élément F à l'intérieur d'un élément E |
| Pseudo-classes | |
E:link |
un lien hypertexte vers une page qui n'a pas encore été visitée |
E:visited |
un lien hypertexte vers une page qui a déjà été visitée |
E:active |
un lien hypertexte actuellement sélectionné |
| Pseudo-éléments | |
E::first-line |
la première ligne formatée d'un élément E |
E::first-letter |
la première lettre formatée d'un élément E |
Le sélecteur le plus simple est le « sélecteur de type ». Il cible toutes les instances d'un élément, comme un paragraphe ou un texte en gras :
p { margin-bottom: 0; } b { font-family: sans-serif; }
L'attribut class permet d'ajouter une sémantique supplémentaire à un élément HTML, tel qu'un type de paragraphe spécifique. De tels éléments peuvent être sélectionnés dans CSS comme suit :
.intro { font-weight: bold; }
Ce sélecteur correspondrait à :
…
Mais notez qu'il correspondrait également à :
…Si vous souhaitez qu'il ne s'applique qu'aux paragraphes d'introduction, vous pouvez combiner le sélecteur de type et le sélecteur de classe :
p.intro { font-weight: bold; }
L'attribut HTML id doit être unique dans un document, par exemple si vous avez :
…
Cela devrait être le seul élément avec un identifiant « contenu ». Un sélecteur d'ID vous permet de cibler cet élément spécifique dans un document :
#contents { color: #333; }
Strictement, un "combinateur", car ce sélecteur est tout au sujet de l'espace entre deux autres. Le HTML est hiérarchique, comme expliqué dans notre aperçu du DOM . Un sélecteur descendant permet d'identifier un élément par son contexte à l'intérieur d'un autre élément :
table b { font-weight: normal; }
Les pseudo-sélecteurs ciblent des classes ou des éléments qui n'existent pas explicitement mais qui sont quand même rendus disponibles. Considérez-les comme des bonus de contenu spéciaux :
p::first-line { text-transform: uppercase; }
Utilisez une virgule pour combiner les sélecteurs dans une liste si vous souhaitez appliquer le même ensemble de règles à chacun. À la place de:
th { padding: 1em; } td { padding: 1em; }
Tu peux écrire:
th, td { padding: 1em; }
Une feuille de style est une série de règles qui utilisent un sélecteur pour faire correspondre un élément, mais que se passe-t-il lorsque plusieurs règles correspondent à un élément donné ? Le comportement résultant est régi par la « spécificité » qui définit quelle règle est utilisée dans un cas tel que :
p.intro { color: black; } p { color: gray; }
Dans de tels cas, la règle prioritaire est définie par sa spécificité, comme suit :
Lors du calcul de la spécificité, chaque niveau n'est pris en compte que si deux sélecteurs ont le même score au niveau supérieur, donc « #contents » est plus spécifique que « article.news p.author.special » car le premier « gagne » sur les sélecteurs d'ID.
La prochaine révision des sélecteurs CSS a introduit des sélecteurs d'attributs, étendu les pseudo-classes et les pseudo-éléments, et ajouté deux nouveaux combinateurs.
| Modèle | Allumettes |
|---|---|
* |
tout élément |
E > F |
un élément F enfant d'un élément E |
E + F |
un élément F immédiatement précédé d'un élément E |
| Sélecteurs d'attributs | |
E[foo] |
un élément E avec un attribut "foo" |
E[foo="bar"] |
un élément E dont l'attribut "foo" est exactement "bar" |
E[foo~="bar"] |
un élément E dont l'attribut "foo" est une liste de valeurs séparées par des espaces, dont l'une est "bar" |
E[foo|="en"] |
un élément E dont l'attribut "foo" a une liste de valeurs séparées par des tirets commençant par "en" |
| Pseudo-classes | |
E:first-child |
un élément E, premier enfant de son parent |
E:lang(fr) |
un élément de type E en langage "fr" |
| Pseudo-éléments | |
E::before |
contenu généré avant le contenu d'un élément E |
E::after |
contenu généré après le contenu d'un élément E |
Le « * » correspond à n'importe quel élément. Ce n'est pas souvent très utile, mais si vous souhaitez réinitialiser des marges par défaut, par exemple, vous pouvez le faire :
* { margin: 0; }
Les sélecteurs d'attributs permettent de cibler très précisément les styles, filtrés par l'attribut d'un élément :
a[title] { text-decoration: underline dotted; }
Similaire au combinateur de descendants, mais celui-ci ne correspond qu'aux enfants immédiats, pas aux descendants plus bas dans l'arbre. Par exemple, « ul > li » correspondra uniquement au texte « Section 1 » ici, et non à « Section 1.1 » :
Section 1
Section 1.1Section 1.2h1 + p { font-weight: bold; }
Souvent utile pour contrôler les marges, ou un paragraphe d'introduction sans classe spécifique, ce sélecteur ne correspond à un élément que s'il suit immédiatement un autre. Dans l'exemple, seul le premier paragraphe ici sera mis en correspondance, pas le second :
Contents
some extra text
Introductory paragraph
Following paragraph
Notez que ce sélecteur ne prend en compte que les éléments, pas le texte, lorsqu'il décide quel est le prochain frère.
Certaines propriétés CSS héritent leur valeur d'un élément ancêtre. En pratique, cela signifie, par exemple, que la définition de la police de caractères de l'élément « body » signifie que chaque paragraphe, tableau, etc. utilise également cette même police de caractères.
Bien sûr, c'est exactement ce à quoi vous vous attendez, mais considérez une propriété qui n'hérite pas : "marge", par exemple. Vous ne voudriez pas que chaque paragraphe ou morceau de texte en gras ait la même marge que l'ensemble du document.
En relation: Exemples de code CSS simples que vous pouvez apprendre en 10 minutes
Une bonne règle de base est de cibler les éléments aussi généralement que cela a du sens — ne ciblez pas chaque élément individuel alors qu'un simple sélecteur de « corps » suffira.
De nombreuses autres pseudo-classes ont été ajoutées à ce niveau, ainsi que des sélecteurs d'attributs et un nouveau combinateur.
| Modèle | Allumettes |
|---|---|
E ~ F |
un élément F précédé d'un élément E |
| Sélecteurs d'attributs | |
E[foo^="bar"] |
un élément E dont l'attribut "foo" commence par la chaîne "bar" |
E[foo$="bar"] |
un élément E dont l'attribut "foo" se termine par la chaîne "bar" |
E[foo*="bar"] |
un élément E dont l'attribut "foo" contient la sous-chaîne "bar" |
| Pseudo-classes | |
E:root |
un élément E, racine du document |
E:nth-child(n) |
un élément E, le n-ième enfant de son parent |
E:nth-last-child(n) |
un élément E, le n-ième enfant de son parent, à compter du dernier |
E:nth-of-type(n) |
un élément E, le n-ième frère de son type |
E:nth-last-of-type(n) |
un élément E, le n-ième frère de son type, à compter du dernier |
E:last-child |
un élément E, dernier enfant de son parent |
E:first-of-type |
un élément E, premier frère de son type |
E:last-of-type |
un élément E, dernier frère de son type |
E:only-child |
un élément E, seul enfant de son parent |
E:only-of-type |
un élément E, seul frère de son type |
E:empty |
un élément E qui n'a pas d'enfant (y compris les nœuds de texte) |
E:target |
un élément E étant la cible de l'URI de référence |
E:enabled |
un élément d'interface utilisateur E qui est activé |
E:disabled |
un élément d'interface utilisateur E qui est désactivé |
E:checked |
un élément d'interface utilisateur E qui est vérifié |
E:not(s) |
un élément E qui ne correspond pas au simple sélecteur s |
Vous pouvez sélectionner des éléments avec un attribut qui commence par une valeur donnée : a[href^="https:"], se termine par une valeur donnée : img[src$=".gif"], ou contient une valeur : a[*="value"].
Les pseudo-classes supplémentaires incluent ":last-child", ":empty" (pour faire correspondre un élément sans contenu) et ":checked" qui correspond à un élément comme une entrée de case à cocher, mais uniquement lorsqu'elle est cochée.
Semblable au combinateur de frères et sœurs adjacents du niveau 2, cela correspond à n'importe quel frère qui vient après l'autre, pas seulement le suivant :
h1 ~ p { font-size: 110%; }
Maintenant, vous savez à peu près tout ce qu'il y a à savoir sur la façon de sélectionner une partie d'une page Web à l'aide de CSS. Vous êtes maintenant prêt à styliser vos pages avec la grande variété de propriétés CSS qui couvrent tout, des couleurs à la mise en page.
Crédit d'image: Pankaj Patel / Unsplash
Bien que vous puissiez utiliser une calculatrice graphique sur votre ordinateur, l'interpréteur du langage de programmation Python peut également servir de calculatrice de bureau. C'est une blague si populaire dans la communauté Python qu'elle est mentionnée dans le didacticiel officiel. Voici comment vous pouvez utiliser Python comme calculatrice.
En tant que programmeur, vous devez relever des défis pour survivre et créer des merveilles dans le domaine du développement ou de la programmation. Par conséquent, si vous cherchez à apprendre un langage de programmation avancé pour améliorer vos compétences professionnelles, Java est l'une des meilleures perspectives.
Apprendre un nouveau langage de programmation comme Python devient facile si vous disposez d'une feuille de route complète détaillant les concepts à apprendre en tant que débutant et comment progresser davantage pour atteindre le prochain jalon. Même les programmeurs intermédiaires devraient fréquemment réviser leurs bases pour se construire une base solide.
De nos jours, il est courant de créer un site Web ou une application qui ajuste son interface utilisateur en fonction du navigateur ou de l'appareil. Il existe deux approches pour atteindre cet objectif. La première consiste à créer différentes versions de votre site Web ou de votre application pour différents appareils. Mais c'est inefficace et peut conduire à des erreurs imprévisibles.
Travailler avec des nombres fait partie intégrante de la programmation. Chaque langage de programmation prend en charge la manipulation des nombres de différentes manières. Dans cet article, vous apprendrez à trouver le nombre total de chiffres dans un entier à l'aide d'approches itératives, basées sur les journaux et basées sur les chaînes.
Les conteneurs sont très utiles pour le développement, le déploiement et la gestion de logiciels dans un environnement virtuel. Docker est utile dans le processus de conteneurisation, mais ce n'est pas la seule plate-forme disponible. Si vous recherchez des alternatives à Docker, ne cherchez pas plus loin. Cette liste présente des alternatives Docker riches en fonctionnalités et efficaces à utiliser dans votre prochain projet.
SQL vs NoSQL : quelle est la meilleure base de données pour votre prochain projet ?
L'intégration de services tiers dans vos publications WordPress est un moyen passionnant de captiver l'intérêt d'un visiteur. Le contenu intégré fournit également des repères visuels qui facilitent la numérisation. WordPress a facilité l'ajout de ce type de contenu.
Node.js est un environnement d'exécution JavaScript qui vous permet d'exécuter JavaScript en dehors des navigateurs Web, ce qui en fait un choix populaire pour développer toutes sortes d'applications. Une partie de sa popularité est due à la pléthore de packages NPM disponibles pour faciliter l'expérience des développeurs.
Solidity est le langage de programmation utilisé par les contrats intelligents sur la blockchain Ethereum. C'est un langage de programmation orienté objet de type statique.
Les badges GitHub peuvent améliorer la lisibilité d'un référentiel en offrant aux utilisateurs un moyen rapide de capturer les métriques du référentiel. Des badges peuvent être intégrés dans votre README.md pour clarifier l'importance et la nécessité de votre projet aux autres développeurs. En conséquence, les lecteurs se font une idée très rapide du référentiel en vérifiant les badges joints.
Les journées de célébration internationales sont un bon moyen de reconnaître les questions sociales, les journées historiques et les carrières respectives. La Journée internationale des programmeurs célèbre le rôle que les programmeurs jouent pour améliorer la vie quotidienne. Le monde civilisé dans lequel nous vivons est le produit du travail acharné des programmeurs.
Qu'il s'agisse d'une requête de base de données ou de résultats d'opérations mathématiques, la méthode de format de chaîne Python offre un moyen plus dynamique et attrayant de présenter les résultats à un utilisateur.
Plus tôt cette année, Microsoft a publié la version préliminaire de Visual Studio 2022 dans le monde de la programmation sauvage. C'est une bonne nouvelle! C'est un IDE extrêmement populaire, mais qui doit faire l'objet d'une mise au point ou peut-être même d'une refonte, étant donné le rythme des changements dans l'écosystème DevOps dans lequel il prospère.
Les métriques logicielles sont des mesures utilisées pour quantifier divers aspects de votre logiciel. Ces aspects peuvent aller du coût, de la qualité et de l'efficacité de l'équipe de développement.
En tant qu'utilisateur Windows, vous avez probablement au moins une fois rencontré les mots .NET Framework. Il s'agit d'un framework logiciel développé par Microsoft qui vous permet de créer et d'exécuter des programmes C#, C++, F# et Visual Basic. La dernière version de .NET est la 4.8, mais votre ordinateur peut avoir besoin d'une ancienne version de .NET (comme .NET 3.5) pour exécuter certaines applications.
Si vous êtes un développeur Python, vous pouvez grandement bénéficier de la gamme de frameworks disponibles. Alors que certains cadres sont mieux adaptés aux grands écosystèmes, d'autres se spécialisent dans la réalisation d'objectifs de développement spécifiques. Lisez la suite pour découvrir les fonctionnalités de base, les utilisations et les différences entre deux frameworks Python : Flask et CherryPy.
De nombreux programmeurs adorent résoudre des problèmes mathématiques délicats à l'aide de code. Il aide à aiguiser l'esprit et à améliorer les compétences en résolution de problèmes. Dans cet article, vous apprendrez à trouver les carrés et cubes parfaits à n chiffres les plus petits et les plus grands à l'aide de Python, C++ et JavaScript. Chaque exemple contient également un exemple de sortie pour plusieurs valeurs différentes.
L'exécution de Python à partir du terminal est souvent inévitable. Cependant, si vous venez d'installer Python sur Windows 10 pour la première fois, son exécution via le terminal Windows n'est possible que s'il est ajouté à la variable d'environnement Windows PATH.
L'instruction if est la force motrice de la programmation logique. En conséquence, une meilleure compréhension des Pythons est un ajout important à vos compétences en programmation Python.
Bien que vous puissiez utiliser une calculatrice graphique sur votre ordinateur, l'interpréteur du langage de programmation Python peut également servir de calculatrice de bureau. C'est une blague si populaire dans la communauté Python qu'elle est mentionnée dans le didacticiel officiel. Voici comment vous pouvez utiliser Python comme calculatrice.
En tant que programmeur, vous devez relever des défis pour survivre et créer des merveilles dans le domaine du développement ou de la programmation. Par conséquent, si vous cherchez à apprendre un langage de programmation avancé pour améliorer vos compétences professionnelles, Java est l'une des meilleures perspectives.
Apprendre un nouveau langage de programmation comme Python devient facile si vous disposez d'une feuille de route complète détaillant les concepts à apprendre en tant que débutant et comment progresser davantage pour atteindre le prochain jalon. Même les programmeurs intermédiaires devraient fréquemment réviser leurs bases pour se construire une base solide.
De nos jours, il est courant de créer un site Web ou une application qui ajuste son interface utilisateur en fonction du navigateur ou de l'appareil. Il existe deux approches pour atteindre cet objectif. La première consiste à créer différentes versions de votre site Web ou de votre application pour différents appareils. Mais c'est inefficace et peut conduire à des erreurs imprévisibles.
Travailler avec des nombres fait partie intégrante de la programmation. Chaque langage de programmation prend en charge la manipulation des nombres de différentes manières. Dans cet article, vous apprendrez à trouver le nombre total de chiffres dans un entier à l'aide d'approches itératives, basées sur les journaux et basées sur les chaînes.
Les conteneurs sont très utiles pour le développement, le déploiement et la gestion de logiciels dans un environnement virtuel. Docker est utile dans le processus de conteneurisation, mais ce n'est pas la seule plate-forme disponible. Si vous recherchez des alternatives à Docker, ne cherchez pas plus loin. Cette liste présente des alternatives Docker riches en fonctionnalités et efficaces à utiliser dans votre prochain projet.
SQL vs NoSQL : quelle est la meilleure base de données pour votre prochain projet ?
L'intégration de services tiers dans vos publications WordPress est un moyen passionnant de captiver l'intérêt d'un visiteur. Le contenu intégré fournit également des repères visuels qui facilitent la numérisation. WordPress a facilité l'ajout de ce type de contenu.
Node.js est un environnement d'exécution JavaScript qui vous permet d'exécuter JavaScript en dehors des navigateurs Web, ce qui en fait un choix populaire pour développer toutes sortes d'applications. Une partie de sa popularité est due à la pléthore de packages NPM disponibles pour faciliter l'expérience des développeurs.
Solidity est le langage de programmation utilisé par les contrats intelligents sur la blockchain Ethereum. C'est un langage de programmation orienté objet de type statique.
