Styles dans un document HTML. Conception de balises HTML avec l'attribut style (styles CSS intégrés). Comment plusieurs styles se combinent en un seul
CSS (Cascading Style Sheets), ou feuilles de style en cascade, sont utilisés pour décrire apparence document rédigé en langage de balisage. Généralement, les styles CSS sont utilisés pour créer et modifier le style des éléments de la page Web et interfaces utilisateurécrit en Langages HTML et XHTML, mais peut également être appliqué à tout type de document XML, notamment XML, SVG et XUL.
Les feuilles de style en cascade décrivent les règles de formatage des éléments à l'aide des propriétés et valeurs acceptables ces propriétés. Pour chaque élément, vous pouvez utiliser ensemble limité propriétés, les autres propriétés n’auront aucun effet sur elle.
Une déclaration de style se compose de deux parties : l'élément de page Web - sélecteur et les commandes de formatage - bloc de publicité. Le sélecteur indique au navigateur quel élément formater, et dans le bloc de déclaration (code dans accolades) les commandes de formatage sont répertoriées - les propriétés et leurs valeurs.
Riz. 1. Structure de déclaration de style CSS Types de feuilles de style en cascade et leurs spécificités
1. Types de feuilles de style
1.1. Feuille de style externe
Feuille de style externe est un fichier texte avec l'extension .css, qui contient un ensemble de styles CSS pour les éléments. Le fichier est créé dans un éditeur de code, tout comme une page HTML. Le fichier ne peut contenir que des styles, sans balisage HTML. Une feuille de style externe est connectée à une page Web à l'aide d'une balise , situé à l'intérieur de la section
. Ces styles fonctionnent pour toutes les pages du site.Vous pouvez joindre plusieurs feuilles de style à chaque page Web en ajoutant plusieurs balises en séquence , indiquant l'objectif de cette feuille de style dans l'attribut de balise média. rel="stylesheet" précise le type de lien (lien vers une feuille de style).
L'attribut type="text/css" n'est pas requis par la norme HTML5, il peut donc être omis. Si l'attribut est manquant, la valeur par défaut est type="text/css" .
1.2. Styles internes
Styles internes intégré dans une section
Document HTML et sont définis à l'intérieur de la balise. Les styles internes ont priorité sur les styles externes, mais sont inférieurs aux styles en ligne (spécifiés via l'attribut style)....
1.3. Styles intégrés
Quand on écrit styles en ligne, nous écrivons le code CSS dans le fichier HTML, directement à l'intérieur de la balise element en utilisant attribut de style:
Faites attention à ce texte.
De tels styles n'affectent que l'élément pour lequel ils sont définis.
1.4. @règle d'importation
@règle d'importation Permet de charger des feuilles de style externes. Pour que la directive @import fonctionne, elle doit apparaître dans la feuille de style (externe ou interne) avant toutes les autres règles :
La règle @import est également utilisée pour inclure les polices Web :
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic) ;
2. Types de sélecteurs
Sélecteurs représentent la structure d'une page Web. Ils aident à créer des règles de formatage des éléments de page Web. Les sélecteurs peuvent être des éléments, leurs classes et identifiants, ainsi que des pseudo-classes et pseudo-éléments.
2.1. Sélecteur universel
Correspond à n’importe quel élément HTML. Par exemple, * (marge : 0 ;) réinitialisera les marges de tous les éléments du site. Le sélecteur peut également être utilisé en combinaison avec une pseudo-classe ou un pseudo-élément : *:after (styles CSS) , *:checked (styles CSS) .
2.2. Sélecteur d'éléments
Les sélecteurs d'éléments vous permettent de formater tous les éléments de ce genre sur toutes les pages du site. Par exemple, h1 (font-family : Lobster, cursive ;) définira le style de formatage global pour tous les en-têtes h1.
2.3. Sélecteur de classe
Les sélecteurs de classe vous permettent de spécifier des styles pour un ou plusieurs éléments avec même nom classe située dans différents endroits pages ou sur différentes pages site. Par exemple, pour créer un titre avec la classe headline, vous devez ajouter attribut de classe avec le titre de la valeur dans la balise d'ouverture
et définissez le style pour classe spécifiée. Les styles créés à l'aide d'une classe peuvent être appliqués à d'autres éléments, pas nécessairement de ce type.
Mode d'emploi ordinateur personnel
.headline ( transformation de texte : majuscule ; couleur : bleu clair ; )2.4. Sélecteur d'identifiant
Le sélecteur d'ID vous permet de formater unélément spécifique. L'identifiant doit être unique et ne peut apparaître qu'une seule fois sur une page.
#sidebar (largeur : 300 px ; float : gauche ; )
2.5. Sélecteur de descendants
Les sélecteurs descendants appliquent des styles aux éléments d'un élément conteneur. Par exemple, ul li (text-transform: uppercase;) - sélectionnera tous les éléments li qui sont des enfants de tous les éléments ul.
Si vous devez formater les descendants élément spécifique, cet élément doit recevoir une classe de style :
p.first a (couleur : vert ;) - ce style sera appliqué à tous les liens descendants du paragraphe de première classe ;
p .first a (couleur : vert ;) - si vous ajoutez un espace, les liens situés à l'intérieur de toute balise de classe .first qui est un descendant de l'élément seront stylés
D'abord a (couleur : vert ;) - ce style sera appliqué à tout lien situé à l'intérieur d'un autre élément, désigné par class.first .
2.6. Sélecteur d'enfant
Un élément enfant est un enfant direct de son élément conteneur. Un élément peut en avoir plusieurs éléments enfants, et chaque élément ne peut avoir qu'un seul parent. Le sélecteur d'enfant vous permet d'appliquer des styles uniquement si l'élément enfant vient immédiatement après l'élément parent et qu'il n'y a aucun autre élément entre eux, c'est-à-dire que l'élément enfant n'est imbriqué dans rien d'autre.
Par exemple, p > strong sélectionnera tous les éléments forts qui sont des enfants de l'élément p.
2.7. Sélecteur de soeur
La sororité se produit entre des éléments qui partagent un parent commun. Les sélecteurs frères et sœurs vous permettent de sélectionner des éléments dans un groupe d'éléments du même niveau.
h1 + p - sélectionnera tous les premiers paragraphes immédiatement après n'importe quelle balise
sans affecter les paragraphes restants ;
h1 ~ p - sélectionnera tous les paragraphes qui sont frères d'un en-tête h1 et immédiatement après celui-ci.
2.8. Sélecteur d'attribut
Les sélecteurs d'attribut sélectionnent les éléments en fonction du nom ou de la valeur de l'attribut :
[attribut] - tous les éléments contenant l'attribut spécifié - tous les éléments pour lesquels l'attribut alt est spécifié ;
selector[attribute] - éléments de ce type contenant l'attribut spécifié, img - uniquement les images pour lesquelles l'attribut alt est spécifié ;
selector[attribute="value"] - éléments de ce type contenant l'attribut spécifié avec signification spécifique, img - toutes les images dont le titre contient le mot fleur ;
selector[attribute~="value"] - éléments contenant partiellement valeur donnée, par exemple, si plusieurs classes sont spécifiées pour un élément séparées par un espace, p - paragraphes dont le nom de classe contient feature ;
selector[attribute|="value"] - éléments dont la liste des valeurs d'attribut commence par le mot spécifié, p - paragraphes dont le nom de classe est feature ou commence par feature ;
selector[attribute^="value"] - éléments dont la valeur d'attribut commence par la valeur spécifiée, a - tous les liens commençant par http:// ;
selector[attribute$="value"] - éléments dont la valeur d'attribut se termine par la valeur spécifiée, img - toutes les images au format png ;
selector[attribute*="value"] - éléments dont la valeur d'attribut contient le mot spécifié n'importe où, a - tous les liens dont le nom contient book .
2.9. Sélecteur de pseudo-classe
Les pseudo-classes sont des classes qui ne sont pas réellement attachées aux balises HTML. Ils permettent d'appliquer des règles CSS aux éléments lorsqu'un événement survient ou est soumis à une certaine règle. Les pseudo-classes caractérisent les éléments ayant les propriétés suivantes :
:hover - tout élément sur lequel le curseur de la souris est survolé ;
:se concentrer - élément interactif, accessible à l'aide du clavier ou activé à l'aide de la souris ;
:active - élément qui a été activé par l'utilisateur ;
:valid - champs de formulaire dont le contenu a été vérifié dans le navigateur pour vérifier sa conformité avec le type de données spécifié ;
:invalid — champs de formulaire dont le contenu ne correspond pas au type de données spécifié ;
:activé - tout champs actifs formulaires;
:disabled — champs de formulaire bloqués, c'est-à-dire dans un état inactif ;
:in-range - champs de formulaire dont les valeurs se trouvent dans la plage spécifiée ;
:hors plage - champs de formulaire dont les valeurs ne se trouvent pas dans la plage spécifiée ;
:lang() - éléments avec du texte dans la langue spécifiée ;
:not(selector) - éléments qui ne contiennent pas le sélecteur spécifié - classe, identifiant, nom ou type de champ de formulaire - :not() ;
:target est un élément avec le symbole # référencé dans le document ;
:checked — éléments de formulaire sélectionnés (sélectionnés par l'utilisateur).
2.10. Sélecteur de pseudo-classe structurelle
Les pseudo-classes structurelles sélectionnent les éléments enfants en fonction du paramètre spécifié entre parenthèses :
:nth-child(odd) - éléments enfants impairs ;
:nth-child(even) - éléments pairs enfants ;
:nth-child(3n) - un élément sur trois parmi les enfants ;
:nth-child(3n+2) - sélectionne un élément sur trois, en commençant par le deuxième enfant (+2) ;
:nth-child(n+2) - sélectionne tous les éléments à partir du second ;
:nth-child(3) - sélectionne le troisième élément enfant ;
:nth-last-child() - dans la liste des éléments enfants, sélectionne l'élément avec emplacement spécifié, similaire à:nth-child() , mais en commençant par le dernier, dans la direction opposée ;
:first-child - vous permet de styliser uniquement le tout premier élément enfant de la balise ;
:last-child - vous permet de formater le dernier élément enfant de la balise ;
:only-child - sélectionne un élément qui est le seul élément enfant ;
:empty - sélectionne les éléments qui n'ont pas d'enfants ;
:root - sélectionne l'élément qui est la racine du document - élément HTML.
2.11. Sélecteur de pseudo-classe de type structurel
Indique un type spécifique de balise enfant :
:nth-of-type() - sélectionne des éléments similaires à :nth-child() , mais ne prend en compte que le type de l'élément ;
:first-of-type - sélectionne le premier enfant d'un type donné ;
:last-of-type - sélectionne dernier élément de ce type ;
:nth-last-of-type() - sélectionne un élément type donné dans une liste d'éléments selon l'emplacement spécifié, en commençant par la fin ;
:only-of-type - sélectionne un seul élément type spécifié parmi les éléments enfants de l’élément parent.
2.12. Sélecteur de pseudo-éléments
Les pseudo-éléments sont utilisés pour ajouter du contenu, généré à l'aide de la propriété content :
:first-letter - sélectionne la première lettre de chaque paragraphe, s'applique uniquement aux éléments de bloc ;
:first-line - sélectionne la première ligne du texte de l'élément, s'applique uniquement aux éléments de bloc ;
:before - insère le contenu généré avant l'élément ;
:after - ajoute le contenu généré après l'élément.
3. Combinaison de sélecteur
Pour sélectionner plus précisément les éléments à formater, vous pouvez utiliser des combinaisons de sélecteurs :
img:nth-of-type(even) - sélectionnera toutes les images paires dont le texte alternatif contient mot css.
4. Regroupement des sélecteurs
Le même style peut être appliqué à plusieurs éléments en même temps. Pour ce faire, vous devez lister les sélecteurs requis sur le côté gauche de la déclaration, séparés par des virgules :
H1, h2, p, span ( couleur : tomate ; fond : blanc ; )
5. Héritage et cascade
L'héritage et la cascade sont deux concepts fondamentaux en CSS étroitement liés. L'héritage est l'endroit où les éléments héritent des propriétés de leur parent (l'élément qui les contient). La cascade se manifeste dans la façon dont différents types les feuilles de style sont appliquées à un document et comment les règles conflictuelles se remplacent les unes les autres.
5.1. Héritage
Héritage est le mécanisme par lequel certaines propriétés sont transmises d'un ancêtre à ses descendants. Spécification CSS L'héritage des propriétés liées au contenu textuel de la page est fourni, telles que la couleur, la police, l'espacement des lettres, la hauteur de ligne, le style de liste, l'alignement du texte, l'indentation du texte, la transformation du texte, la visibilité, l'espace blanc et espacement des mots. Dans de nombreux cas, cela est pratique car vous n'avez pas besoin de définir la taille et la famille de polices pour chaque élément de la page Web.
Les propriétés liées au formatage des blocs ne sont pas héritées. Ce sont background , border , display , float et clear , height et width , margin , min-max-height et -width , outline , overflow , padding , position , text-decoration , vertical-align et z-index .
Héritage forcé
En utilisant mot-clé hériter peut forcer un élément à hériter de n'importe quelle valeur de propriété de son élément parent. Cela fonctionne même pour les propriétés qui ne sont pas héritées par défaut.
Comment les styles CSS sont définis et fonctionnent
1) Les styles peuvent être hérités de l'élément parent (propriétés héritées ou en utilisant la valeur héritée) ;
2) Les styles situés dans la feuille de style ci-dessous remplacent les styles situés dans le tableau ci-dessus ;
3) Les styles d'un élément peuvent être appliqués différentes sources. Vous pouvez vérifier quels styles sont appliqués en mode développeur du navigateur. Pour cela, cliquez sur l'élément clic droit souris et sélectionnez « Afficher le code » (ou quelque chose de similaire). La colonne de droite répertorie toutes les propriétés définies sur cet élément ou héritées d'un élément parent, ainsi que les fichiers de style dans lesquels elles sont spécifiées et le numéro ordinal de la ligne de code.
Riz. 2. Mode développeur dans Navigateur Google Chrome 4) Lors de la définition d'un style, vous pouvez utiliser n'importe quelle combinaison de sélecteurs - un sélecteur d'élément, une pseudo-classe d'élément, une classe ou un identifiant d'élément.
div (bordure : 1px solide #eee ;) #wrap (largeur : 500px ;).box (float : gauche ;).clear (clear : les deux ;)
5.2. Cascade
En cascade est un mécanisme qui contrôle le résultat final dans une situation où différentes règles CSS sont appliquées au même élément. Il existe trois critères qui déterminent l'ordre dans lequel les propriétés sont appliquées : la règle importante, la spécificité et l'ordre dans lequel les feuilles de style sont incluses.
Règle!important
Le poids d'une règle peut être spécifié à l'aide du mot-clé!important, qui est ajouté immédiatement après la valeur de la propriété, par exemple span (font-weight: bold!important;) . La règle doit être placée à la fin de la déclaration avant la parenthèse fermante, sans espace. Une telle annonce prévaudra sur toutes les autres règles. Cette règle permet d'annuler une valeur de propriété et d'en définir une nouvelle pour un élément d'un groupe d'éléments dans le cas où il n'y a pas d'accès direct au fichier de style.
Spécificité
Pour chaque règle, le navigateur calcule spécificité du sélecteur, et si un élément a des déclarations de propriétés contradictoires, la règle qui a le plus de spécificité est prise en compte. La valeur de spécificité comporte quatre parties : 0, 0, 0, 0. La spécificité du sélecteur est définie comme suit :
pour l'identifiant, 0, 1, 0, 0 est ajouté ;
pour la classe 0, 0, 1, 0 est ajouté ;
pour chaque élément et pseudo-élément, 0, 0, 0, 1 est ajouté ;
pour un style en ligne ajouté directement à un élément - 1, 0, 0, 0 ;
Un sélecteur universel n'a aucune spécificité.
H1 (couleur : bleu clair ;) /*spécificité 0, 0, 0, 1*/ em (couleur : argent ;) /*spécificité 0, 0, 0, 1*/ h1 em (couleur : or ;) /*spécificité : 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (couleur : bleu ;) /*spécificité : 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (couleur : gris ;) /*spécificité 0, 0, 1, 0 */ #sidebar (couleur : orange ;) /*spécificité 0, 1, 0, 0*/ li#sidebar (couleur : aqua ;) /*spécificité : 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
En conséquence, les règles plus spécifiques seront appliquées à l'élément. Par exemple, si un élément possède deux spécificités de valeurs 0, 0, 0, 2 et 0, 1, 0, 1, alors la deuxième règle l'emportera.
Ordre des tables connectées
Vous pouvez créer plusieurs feuilles de style externes et les connecter à une seule page Web. Si dans différents tableaux se rencontrera différentes significations propriétés d'un élément, la règle de la feuille de style répertoriée ci-dessous sera alors appliquée à l'élément.
CSS (Cascading Style Sheets) est un langage de gestion du style des pages Web.
Application de CSS vous permet de réduire considérablement le volume des documents HTML, surtout si vous avez plusieurs pages avec le même style, et, en même temps, de simplifier le travail de création et d'ajout de nouveaux documents. En stockant les descriptions des différents styles dans fichiers séparés, vous pouvez facilement manipuler les styles.
CSS descriptif
Fichiers de style - réguliers fichiers texte, contenant une description de style en CSS, et situé sur le serveur Web.
Pour que la page Web voie le style à l'intérieur de la baliseune référence est faite au fichier de style, comme le montre l'exemple :
fichier style.css
Contenu du document
Si le fichier de style se trouve sur un autre serveur, vous devez fournir son URL complète
fichier style.css
Dans ce cas, vous pouvez utiliser ces styles pour les éléments situés au sein de la page WEB. Autrement dit, tous les éléments de texte situés à l'intérieur des balises
, et sur cette page sera affiché en italique rouge, avec une taille de caractère de 32 pixels.ET dernière option- la description du style se trouve directement à l'intérieur de la balise de l'élément auquel ce style est appliqué, par exemple :
Ce style s'applique uniquement à cette étiquette
Cette option n'est pas la meilleure, car elle entraîne une augmentation de la taille du code de la page et la perte de séparation des styles individuels et des données de page individuelles.
Considérons maintenant le cas où il est nécessaire d'attribuer des styles non pas à tous les éléments identiques de la page, mais seulement à certains - pour cela nous utilisons le paramètre CLASSE = "nom de la classe" ou ID="nom de l'élément" qui peut être attribué à n'importe quel élément de page (paragraphe, tableau, etc.).
Le paramètre CLASS est utilisé si vous devez créer le même style pour plusieurs éléments de page, mais pas pour tous (identiques ou différents).
Par exemple, en précisant dans la description du style :
Bold_italic (poids de la police : gras ; style de police : italique)
Vous pouvez vous assurer que seules certaines cellules du tableau sont affichées italique gras. Pour cela, attribuez-leur le style de la classe bi :
Attention! Les noms de classe sont sensibles à la casse.
L'attribution de styles à l'aide d'identifiants est utilisée lorsqu'un seul élément de la page correspond à un identifiant donné. S'il y a plusieurs éléments auxquels ce style doit être attribué, il s'agit déjà d'une classe.
Pseudo-classes et pseudo-éléments :
Les pseudo-classes et pseudo-éléments sont des classes et des éléments spéciaux inhérents au CSS et sont automatiquement détectés par les navigateurs compatibles CSS.
On distingue les pseudo-classes différents types un élément, création lors de la définition propres styles pour chacun d'eux.
Les pseudo-éléments font partie d’autres éléments, donnant à ces parties un style différent de celui de l’élément dans son ensemble.
Syntaxe:
sélecteur:pseudo-classe ( propriétés )
selector.class:pseudo-classe (propriétés)
sélecteur:pseudo-élément (propriétés)
selector.class:pseudo-élément (propriétés)
Liste des pseudo-classes et pseudo-éléments :
Les pseudo-classes de lien sont ces pseudo-classes d'un élément , indiquant un lien.
actif (lien actif)
visité (URL précédemment visitée)
hover (une pseudo-classe qui se produit lorsque le curseur est placé sur un lien, ne fonctionne pas en NN).
Pseudo-éléments de la première ligne. Peut être utilisé avec des éléments de niveau bloc (p, h1, etc.). Modifie le style de la première ligne de ces éléments.
Pseudo-éléments de la première lettre. Cela n'affecte pas la ligne entière, mais uniquement le premier caractère.
Brève description du langage CSS
Propriétés de police font-family Cette propriété spécifie la police utilisée par l'élément. Si vous spécifiez une URL, la police sera automatiquement installée sur l'ordinateur de l'utilisateurEXEMPLE : famille de polices : URL Arial Black ("arialblack.ttf") font-style (normal, italique) Style de l'élément. Italique ou régulier
EXEMPLE : style de police : italique variante de police (normal-normal, petites majuscules-remplace toutes les lettres minuscules par des majuscules) Options d'affichage des polices. Netscape ne prend pas en charge cette propriété
EXEMPLE : variante de police : petites majuscules poids de la police (normal-normal, gras-gras, plus gras-très gras, plus léger-fin, réglage de précision 100-900)Mise en évidence des éléments (poids)
EXEMPLE : font-weight : taille de police en gras (XX %, XXpt, XXpx) Taille de police
EXEMPLE : font-size:30pt font (famille, style, variante, poids, taille) Combine toutes les propriétés ci-dessus.
EXEMPLE : police : italique plus gras, Arial 12pt Propriétés du texte.
décoration de texte (aucun, souligné, surligné, interligne, clignotant) Style de texte EXEMPLE : décoration de texte : passage en ligne
espacement des lettres (numéro XX) Distance entre les lettres EXEMPLE : espacement des lettres : 100
alignement vertical (ligne de base, sous, super, texte du haut, haut, milieu, bas, texte du bas, pourcentage) La disposition des éléments par rapport aux autres éléments de la même ligne. EXEMPLE : alignement vertical : texte supérieur
text-transform (Majuscule - chaque mot commence par une lettre majuscule, MAJUSCULE - chaque lettre du texte devient majuscule, minuscule - chaque lettre du texte devient petite. EXEMPLE : text-transform : Capitaliser
text-align (gauche, droite, centre, justifier) Alignement du texte.
EXEMPLE : text-align : right text-indent (unité de longueur ou pourcentage) Indentation du texte. EXEMPLE : text-indent : 30 em
hauteur de ligne (unité de longueur ou pourcentage) Retrait supérieur
EXEMPLE : line-height : 100 % Propriétés de couleur.
couleur (#RRGGBB)Couleur de l'élément EXEMPLE : color : #f00000 backgroung-color (#RRGGBB) Couleur d'arrière-plan de l'élément
EXEMPLE : couleur de fond : #f00000 image d'arrière-plan (URL)Image d'arrière-plan
EXEMPLE :image d'arrière-plan:URL("img.gif") background-attachment (défilement de l'image d'arrière-plan avec le document, correction fixe de l'image d'arrière-plan) Mode de défilement de l'image d'arrière-plan.
EXEMPLE : pièce jointe d'arrière-plan : fixe background-position (% de largeur + % de hauteur ; haut, milieu, bas ; gauche, centre, droite ; distance du bord gauche + distance du bord supérieur) Position de l'image d'arrière-plan
EXEMPLE : background-position:50%0% background (couleur, image, position, pièce jointe, répétition) Combine toutes les propriétés ci-dessus.
EXEMPLE : arrière-plan : noir sans répétition, propriétés de bordure fixes à 50 %0%.
margin-top (longueur, pourcentage, auto) Marge supérieure
EXEMPLE : marge supérieure : 100 marge droite (longueur, pourcentage, auto) Marge droite
EXEMPLE : margin-right : 100 % de marge inférieure (longueur, pourcentage, auto) Marge inférieure
EXEMPLE : marge inférieure : marge gauche de 100 em (longueur, pourcentage, auto) Marge gauche
EXEMPLE : margin-left : 100pt margin (top, right, left, bottom) Combine toutes les propriétés ci-dessus.
EXEMPLE : arrière-plan : remplissage supérieur de 100 pts (longueur, pourcentage) Retrait à partir de la bordure supérieure "a
EXEMPLE : padding-top :100pt padding-right (longueur, pourcentage)Indentation à partir de la bordure droite"a
EXEMPLE : padding-right : 100 % padding-bottom (longueur, pourcentage) Indentation à partir de la bordure inférieure "a
EXEMPLE : padding-bottom:100em padding-left (longueur, pourcentage)Indentation à partir de la bordure gauche"a
EXEMPLE : padding-top : 100 padding (gauche, droite, haut, bas) Combine toutes les propriétés ci-dessus. Vous pouvez définir plusieurs valeurs simultanément (jusqu'à quatre) pour différents côtés. Si une valeur est définie, un seul retrait est défini pour tous les côtés, s'il y en a deux, des retraits différents sont définis pour les côtés adjacents, et s'il y en a quatre, des retraits individuels sont définis pour tous les côtés.
EXEMPLE : rembourrage : 100 px de largeur de bordure supérieure (longueur, fin, moyen, épais) et épaisseur de la bordure supérieure "a
EXEMPLE : border-top-width : 100 pt border-right-width (longueur, fin, moyen, épais) épaisseur de la bordure droite "a
EXEMPLE : bordure-droite-largeur : bordure épaisse-largeur inférieure (longueur, fine, moyenne, épaisse) épaisseur de la bordure inférieure "a
EXEMPLE : border-bottom-width : 100em border-left-width (longueur, fin, moyen, épais) épaisseur de la bordure gauche "a
EXEMPLE : border-width : 15pt border-color (color)Couleur de la bordure.
EXEMPLE :border-color:green border-style Style des bordures Vous pouvez définir plusieurs valeurs en même temps (jusqu'à quatre) pour différentes bordures. Si une valeur est définie, un seul style est défini pour tous les côtés, s'il y en a deux, différents styles sont définis pour les côtés adjacents et s'il y en a quatre, des styles individuels sont définis pour tous les côtés.
EXEMPLE : border-style : bordure à rainure en pointillés (largeur, style, couleur) Combine toutes les propriétés ci-dessus pour la bordure supérieure.
EXEMPLE : border-top : 100em de rainure rouge border-right (largeur, style, couleur) Combine toutes les propriétés ci-dessus pour la bordure droite.
EXEMPLE : bordure droite : bordure gauche unie magenta 5 pts (largeur, style, couleur) Combine toutes les propriétés ci-dessus pour la bordure gauche.
EXEMPLE : bordure gauche : 15 pièces de bordure inférieure en corail (largeur, style, couleur) Combine toutes les propriétés ci-dessus pour la bordure gauche.
EXEMPLE : border-bottom : 30 bordure de départ orange (largeur, style, couleur) Combine toutes les propriétés ci-dessus.
EXEMPLE : bordure : double largeur noire épaisse (longueur, pourcentage) Largeur de l'élément
EXEMPLE : largeur : 10 % de hauteur (longueur, pourcentage) Hauteur de l'élément
EXEMPLE : hauteur : 100 pts flottants (gauche, droite) Position de l'élément
EXEMPLE :float:right clear (gauche, droite, les deux)Le placement d'autres éléments autour de celui-ci
EXEMPLE : clair : les deux classifications.
display (aucun - non affiché, block - coupe la ligne avant et après l'élément, inline - ne coupe pas la ligne, list-item - coupe la ligne avant et après l'élément + ajoute un marqueur comme les éléments de la liste) Détermine comment la liste l'élément sera affiché
EXEMPLE : display:none white-space (normal - "compresse" plusieurs espaces consécutifs en un seul, pre - permet l'affichage de plusieurs espaces consécutifs, nowrap - n'autorise pas les sauts de ligne sans balise
)Détermine comment les espaces entre les éléments seront affichés
EXEMPLE : white-space:nowrap list-style-type (disque, cercle, carré, décimal, romain inférieur, romain supérieur, alpha inférieur ou alpha supérieur) spécifie l'apparence du marqueur d'élément de liste.
EXEMPLE : list-style-type:lower-alpha list-style-image (URL) définit l'apparence du marqueur d'élément de liste sous forme d'image
EXEMPLE : list-style-image:URL(cool.gif) list-style-position (inside, outside)Définit la position du marqueur en fonction de l'élément de la liste
EXEMPLE : list-style-position : inside list-style (type, position, image) Combine toutes les propriétés ci-dessus.
EXEMPLE : style de liste : à l'intérieur
Modules complémentairesEXEMPLE : -566pt em - ems hauteur de l'élément de police utilisé ex - x-height largeur de la lettre "x" utilisée par l'élément de police px pixels en pouces cm centimètres mm millimètres pt points (1pt = 1/72in) pc picas ( 1pc = 12pt) Mesures en pourcentage
EXEMPLE : -566% -/+%XX Diminution/augmentation du pourcentage.
Couleurs Nom de la couleur EXEMPLE : magenta #rrggbb Couleur en RVB, où rr,gg,bb est un nombre hexadécimal.
EXEMPLE : #00cc00 rgb(x,x,x) Couleur en RVB, où "x" est un nombre décimal compris entre 0 et 255.
EXEMPLE : rgb(0,204,0) #rgb Couleur en RVB, où r,g,b est un nombre hexadécimal.
EXEMPLE : #0c0 rgb (x%,x%,x%) Couleur en RVB, où "x%" est un nombre compris entre 0,0 et 100,0.
EXEMPLE : rvb(0%,80%,0%)
Spécifiez des tailles de police relatives plutôt qu’absolues.
En spécifiant des tailles de police absolues, vous privez les personnes qui consultent vos pages de la possibilité d'augmenter ou de diminuer la taille de la police à l'aide d'un bouton spécial du navigateur en fonction de leur résolution d'affichage et de leur vision. Les polices ne seront affichées que dans la taille que vous avez spécifiée lors de l'écriture de la page.
Joignez les descriptions de style dans une balise de commentaire
Vous pouvez spécifier des valeurs de remplissage autour des objets sous forme de valeurs négatives.
Cette astuce vous permet de superposer une couche de texte sur une autre et d'obtenir des résultats très intéressants et inhabituels.
Indentez la première ligne d'un paragraphe.
Préciser dans la description du styleP ( retrait du texte : 1 cm ; )
Désormais, les premières lignes de chaque nouveau paragraphe apparaîtront à partir de la ligne « rouge ».
Bonjour, chers lecteurs du projet Anatomy of Business. Le webmaster Alexandre est avec vous ! Dans le dernier article, nous avons examiné ce que sont les styles CSS et leur importance dans la programmation WEB.
Il est bien évident que si les styles CSS ont un impact significatif sur l'affichage d'un fichier HTML, alors ils doivent être connectés d'une manière ou d'une autre. Aujourd'hui, nous examinerons quatre manières principales de connecter le style CSS au HTML.
Ne tergiversons pas et commençons !
L'un des moyens les plus pratiques et les plus simples de connecter des styles consiste à connecter un fichier séparé avec des styles. Pour ce faire, vous devez utiliser l'éditeur de texte notepad++ (ou tout autre) pour créer un fichier avec l'extension .css et le placer dans le même dossier que le fichier dans lequel nous souhaitons le placer.
Puis dans le fichier HTML entre les balises
poste le code suivant :
Voyons maintenant ce que tout cela signifie :
Link # traduit de l'anglais signifie « lien ». De cette façon, nous montrons au navigateur que ce dont nous allons parler ensuite est un lien. rel= # avec cet attribut, nous montrons comment le fichier CSS est lié au fichier HTML. "stylesheet" # à savoir que le fichier CSS est une feuille de style en cascade. type="text/css" # tout est simple ici : c'est une indication que le fichier est écrit au format texte et porte l'extension .css href="style.css" # c'est un lien vers un fichier avec des styles CSS.
À mon avis, c’est la manière la plus privilégiée d’inclure des styles CSS.
On écrit les styles directement dans le fichier HTML (première méthode)
La prochaine façon de spécifier les styles CSS consiste à les écrire directement dans le document HTML. Cela ressemble à ceci :
Si nous regardons comment ce document HTML sera affiché dans le navigateur, nous verrons que le texte entre les balises est devenu rouge. Et en utilisant l'attribut style, nous disons que nous avons ensuite les paramètres de style d'affichage. Couleur est un sélecteur responsable de la couleur. Rouge est la valeur de ce sélecteur. De cette manière, nous pouvons mettre en évidence certaines parties du texte avec un certain type d'affichage.
Placer des feuilles de style en cascade dans HTML (deuxième méthode)
Une autre façon d'inclure des styles CSS consiste à placer des tableaux en cascade dans le fichier HTML lui-même. À mon avis, cette méthode n'est pas la plus pratique, car en l'utilisant, analyser le code du site ne devient pas très pratique. Pour commencer à écrire des styles CSS, il vous suffit d'insérer des balises dans le fichier HTML . En pratique, cela ressemble à ceci :
Voici un exemple : afficher les styles CSS dans un document HTML
Veuillez noter qu'à l'intérieur de la balise, nous écrivons également du code selon les règles CSS, en utilisant des accolades. Dans les articles suivants, je parlerai plus en détail des règles de syntaxe en CSS.
Connexion de plusieurs fichiers CSS à un document HTML.
Les règles HTML permettent d'inclure plusieurs fichiers CSS à la fois. De nombreux webmasters l'utilisent : ils créent des fichiers CSS séparés pour le texte et les images. Ou des fichiers séparés pour l'en-tête, le pied de page et le corps principal de la page. Voyons comment mettre en œuvre cela.
Nous créons plusieurs fichiers avec des styles CSS. Que leurs noms soient style-1.css et style-2.css. Nous le plaçons, comme dans la méthode numéro un, dans le même dossier que le fichier HTML.
Voici un exemple : afficher les styles CSS dans un document HTML
Tout est similaire à la première méthode, seulement dans ce cas nous indiquons des liens vers deux fichiers à la fois.
Lien vers le fichier CSS à l'intérieur d'un fichier du même type.
En plus de toutes les méthodes ci-dessus, il existe une méthode qui vous permet de placer des liens vers de nombreuses autres méthodes dans un seul fichier CSS !
Ceci est mis en œuvre comme suit :
Tout d’abord, nous devons connecter au moins un fichier CSS à votre code de la même manière.
Deuxièmement, entrez le code suivant dans le fichier déjà connecté :
@import url("style-2.css");
Cette ligne inclut un fichier CSS supplémentaire à notre fichier. Si vous rencontrez des difficultés pour connecter CSS, vous pouvez les poser dans les commentaires.
Comme nous l’avons appris des deux leçons précédentes, la technologie CSS est un outil puissant que tout webmaster devrait maîtriser ! Pour améliorer l'assimilation de la matière, j'ai décidé d'ajouter une vidéo de formation + test à la fin de chaque cours pour consolider les informations reçues.
Test de fixation du matériau :
Nous devons inclure le fichier CSS en plaçant un lien vers celui-ci dans le fichier HTML. Laquelle des méthodes suivantes est correcte ?
Option 1 :
Option 2:
Option 3 :
Option 4:
Peut-on placer des cascades CSS directement dans le fichier HTML ?
Les feuilles de style peuvent être ajoutées à une page Web de trois manières différentes, dont les capacités varient.
Feuilles de style associées
Le moyen le plus puissant et le plus pratique de définir des styles et des règles pour un site. Les styles sont stockés dans un fichier séparé qui peut être utilisé pour n'importe quelle page Web. Pour connecter un tableau de styles associés, utilisez la balise
dans le titre de la page (exemple 1).
Styles
Bonjour le monde!
Le chemin d'accès au fichier de style peut être relatif ou absolu, comme le montre cet exemple.
- Avantages de cette méthode
- Un fichier de style est utilisé pour un nombre illimité de pages Web ; il est également possible de l'utiliser sur d'autres sites.
- Lorsque vous modifiez le style dans un seul fichier, le style est automatiquement appliqué à toutes les pages où il existe un lien vers celui-ci. Sans aucun doute pratique. Nous spécifions la taille de la police à un seul endroit et elle change sur toutes les centaines de pages Web ou plus de notre site.
- Lorsque le fichier de style est chargé pour la première fois, il est mis en cache sur votre ordinateur local, séparément des pages Web, afin que le site se charge plus rapidement.
Feuilles de style globales
Le style est défini dans le document lui-même et se trouve généralement dans l’en-tête de la page Web.
Styles
En termes de flexibilité et de capacités, cette méthode d'utilisation d'un style est inférieure à la précédente, mais elle permet également de placer tous les styles au même endroit. Dans ce cas, directement dans le corps du document. La définition du style est spécifiée par la balise
Cet exemple montre la modification du style d'en-tête
.
Sur une page Web, il vous suffit désormais de préciser cette balise et les styles y seront ajoutés automatiquement.
Styles internes
Les styles en ligne sont essentiellement une extension d'une seule balise utilisée sur une page Web. L'attribut style permet de définir un style, et ses valeurs sont spécifiées à l'aide d'un langage de feuille de style (exemple 3).
Exemple 3 : Utilisation de styles internes
Bonjour le monde!
Il est recommandé d'utiliser un style interne pour des balises uniques ou de ne pas l'utiliser du tout, car la modification d'un certain nombre d'éléments devient problématique. Les styles internes ne correspondent pas à l’idéologie d’un document structurel lorsque le contenu et sa conception sont séparés.
Styles
Styles
Toutes les méthodes décrites d'utilisation de CSS peuvent être utilisées indépendamment ou en combinaison les unes avec les autres. Dans ce cas, il faut rappeler leur hiérarchie.
CSS signifie « Cascading Style Sheets », ce qui signifie « Cascading Style Sheets ». Utilisé pour concevoir des pages Web. Si le code HTML contient le contenu (ce que le navigateur affichera), alors le CSS détermine sa conception (comment le navigateur l'affichera). La beauté du CSS est qu'avec l'aide d'un seul style, vous pouvez concevoir le même type d'éléments d'une page ou d'un site entier (tous les liens, paragraphes, listes à la fois). Avec un style CSS, vous définissez une seule fois à quoi doit ressembler un élément particulier, par exemple des images, et leur conception est modifiée dans tous les documents en même temps. Pour modifier la mise en forme du texte sur l'ensemble de votre site, il vous suffit de modifier le code CSS une seule fois.
Éléments CSS de base
Tout comme le HTML est constitué de balises, d'attributs et de valeurs, le CSS est constitué de ses propres éléments. L'essence des constructions CSS peut être expliquée comme suit : "Spécifiez quel élément de page styliser et spécifiez comment le styliser." Voici les éléments constitutifs du CSS.
- Sélecteur. Un identifiant qui indique au navigateur à quel élément de page appliquer la conception. Grâce à lui, le navigateur « comprend » que le style est destiné, par exemple, à concevoir des listes ou des tableaux.
- Bloc de déclaration de style. Il est écrit après le sélecteur et est placé entre accolades. Il précise le style de l'élément (sa conception). Le bloc de déclaration de style se compose de deux parties.
- Propriété. Un analogue d'un attribut en HTML. Détermine quelle propriété d'apparence sera modifiée.
- Signification. Spécifié à une propriété via deux points et détermine exactement comment la propriété sera modifiée.
Il peut y avoir plusieurs propriétés et valeurs dans un bloc de déclaration de style, auquel cas elles sont répertoriées séparées par un point-virgule.
Types de sélecteur
En fonction des propriétés des éléments de page qu'ils définissent, les sélecteurs sont de différents types.
- Universel. Définit des règles pour tous les éléments de page pour lesquels aucune autre règle n'est définie.
Codage * (taille de police : 14 px ;) définit la taille de la police à 14 pixels pour tous les éléments du document pour lesquels d'autres règles ne sont pas spécifiées à l'aide d'autres sélecteurs. - Téga. Ce type de sélecteur spécifie les règles de formatage pour le contenu d'une balise HTML spécifique. Le nom du sélecteur est le même que le nom du descripteur, écrit uniquement sans chevrons : p, h1, ul.
Par exemple, code h2 (couleur : rouge ;) définit la couleur du texte sur vert pour tous les titres de deuxième niveau, c'est-à-dire le contenu des balises . - Attribut. À l'aide de ce groupe de sélecteurs, vous pouvez déterminer le style du contenu de toutes les balises pour lesquelles un attribut spécifique est spécifié. Les sélecteurs peuvent être spécifiés plus précisément en précisant non seulement le nom de l'attribut, mais également la valeur qui lui est attribuée, ainsi que le nom de la balise le contenant. Cela peut être utilisé pour rendre le design plus individuel.
- classe. Un type de sélecteurs lorsque vous devez formater différemment le contenu des balises du même type. Par exemple, vous souhaitez rendre les liens en bas du site rouges, tandis que tous les autres doivent rester bleus, comme avant. Pour appliquer des règles de classe à un élément du site, vous devez spécifier le nom de la classe dans l'attribut classe la balise correspondante.
Disons en utilisant la classe étape les éléments individuels doivent avoir une marge gauche de 15 pixels.
Le code CSS ressemblera à ceci :
Étape (marge gauche : 15 px ;)
Le code HTML qui liera l'élément à la règle sera :
Texte en retrait
- IDENTIFIANT. Utilisé conjointement avec l'attribut identifiant Balise HTML et est utilisée lorsque les propriétés doivent être définies pour un seul élément. Contrairement à un sélecteur de classe, dont le nom est précédé d'un point, il s'écrit à l'aide d'un hachage :
#exclusif (couleur:orange;)
- Contextuel. En HTML, certaines balises se trouvent souvent à l'intérieur d'autres balises, et les sélecteurs contextuels aident à définir des règles pour de tels cas. Par exemple, vous pouvez les utiliser pour mettre en forme des éléments dans des listes numérotées ou du texte en italique dans des paragraphes :
P i (fint-famille : siècle ;)
Les groupes de sélecteurs restants sont basés sur une combinaison des types répertoriés, ainsi que sur le principe de l'héritage, lorsqu'un élément enfant prend les propriétés de son parent.
La combinaison et le regroupement de sélecteurs sont pratiques dans de nombreuses situations. Par exemple, pour définir des règles de classe étape uniquement pour les liens, vous devez spécifier les deux sélecteurs séparés par un point (d'abord la balise, puis la classe) :
A.step (marge gauche : 15px ;)
Comment inclure du CSS dans une page HTML ?
Il existe plusieurs manières de faire interagir les outils de création de sites Web entre eux. En fonction de la méthode d'ajout, les styles sont divisés dans les catégories suivantes.
Styles intégrés
Défini dans le document directement à l'intérieur de la balise HTML à l'aide de l'attribut style. Avoir la plus haute priorité. Cela signifie que si une conception différente est spécifiée pour le même élément, la préférence sera alors donnée à la règle écrite à l'intérieur de la balise. Le sélecteur de style intégré n'est pas nécessaire, car le lien entre le style et la balise est évident - la conception de la balise y est spécifiée.
Le code suivant définit la taille et la couleur de la police du texte à l'intérieur de la balise
Texte formaté à l'aide d'un style interne.
Styles globaux
Définir par balise …