Comment je fais de la volonté de soi.

Je vais enseigner au CSS pour le mois, voire plus rapidement

Étape 4: Afficher les pages HTML dans le navigateur

Ouvrez un exemple dans le navigateur et assurez-vous que le résultat de notre exemple correspond à l'image:

Connexion d'une feuille de style externe

Nous allons maintenant créer un fichier séparé qui contiendra une feuille de style et la connecter à notre document HTML.

1. Dans le programme Nottepad ++, créez un nouveau fichier vide et enregistrez-le sous la page Nom.css (lors de la sauvegarde d'un fichier, vous devez sélectionner Feuilles de style Cascade * .CSS) Dans le même dossier où vous avez créé un document HTML.
2. Transfert de l'exemple précédent Code CSS (Contenu de la balise Situé à tour de rôle dans le conteneur ... .
   
   

   Attribut type \u003d "Texte / CSS"Auparavant obligatoire pour la balise .........

   Texte gris dans toutes les paragraphes de la page Web

   
   
   

   RÉSULTAT:

   Texte gris dans toutes les paragraphes de la page Web

   Texte gris dans toutes les paragraphes de la page Web

   Styles externes (liées)

   Les styles externes (liés) sont définis dans un fichier séparé avec expansion. cSS.. Les styles externes permettent à toutes les pages du site de regarder uniformément.

   Pour communiquer avec le fichier dans lequel les styles sont décrits, la balise est utilisée. situé dans le conteneur ... .

   Dans cette balise, deux attributs doivent être spécifiés: rel \u003d "styesheet" et href.Définition de l'adresse du fichier de style.

   Exemple

   ......... ......... .........
   
   

   Styles de connexion

   La règle des styles globaux et externes consiste en sélecteur et annonces de style.

   Le sélecteur situé sur le côté gauche de la règle détermine l'élément (éléments) pour lequel la règle est établie. Ensuite, dans les supports bouclés sont des annonces de style répertoriées, séparées par un point-virgule. Par example:

   P (Texte-tiret: 30px; taille de la police: 14px; couleur: # 666;)

   L'annonce de style est un couple propriété CSS: valeur CSS.

   Par example: la couleur rouge

   Lorsque la connexion de style interne, la règle CSS, qui est la valeur d'attribut style., Il se compose d'annonces de style, séparées par un point de virgule. Par example:

   Sélecteurs CSS

   Sélecteur	La description	Plus de détails
   *	N'importe quel élément
   E.	Élément déterminé par la balise e
   E # myid.	Element E avec identifiant "myid"
   E.myclass.	Element E Classe "MyClass"
   E.	L'existence de l'existence d'attribut
   E.	Sélecteur d'égalité des attributs
   E.	Sélecteur d'attributs avec une liste de valeurs	Sélecteurs d'attributs
   E.	Sélecteur de préfixe d'attribut
   E.	Attribut suffixe suffixe
   E.	Attribut Sélecteur Sous-chaîne
   E: lien	Element E - non encore visité par l'utilisateur. Lien	Pseudoclasses dynamiques
   E: visité	Element E - Lien visité par l'utilisateur	Pseudoclasses dynamiques
   E: survoler	Element E Lorsque vous survolez le pointeur de la souris	Pseudoclasses dynamiques
   E: actif	Element E activé par l'utilisateur	Pseudoclasses dynamiques
   E: Focus	Élément e en mise au point	Pseudoclasses dynamiques
   E: cible.	Element E, qui est le but de la référence	Pseudoclasse ciblée
   E: Lang	Element E, écrit dans la langue spécifiée	Langue pseudo-classe
   E: Activé.	Element E - élément de formulaire disponible	Pseudoclasse des États
   E: Désactivé.	Élément E - élément de forme inaccessible	Pseudoclasse des États
   E: vérifié.	Cochez la case ou interrupteur activé par élément E	Pseudoclasse des États
   E: indéterminé.	Element E est une case à cocher indéfinie ou commutateur	Pseudoclasse des États
   E: root.	Element E, racine de document	Pseudoclasse structurelle
   E: Nth-enfant (n)	Element E, N-ème Élément parent bébé	Pseudoclasse structurelle
   E: Nth-last-enfant (n)	Élément E, N-ème Élément parent bébé, comptant à partir de la fin	Pseudoclasse structurelle
   E: Nth-of-Type (n)	n-ème type d'élément e	Pseudoclasse structurelle
   E: Nth-dernier de type (n)	n-Th Element Type E, comptant à partir de la fin	Pseudoclasse structurelle
   E: Premier-enfant	Element E, premier élément enfant	Pseudoclasse structurelle
   E: dernier enfant	Element E, le dernier élément de fille du parent	Pseudoclasse structurelle
   E: premier de type	Le premier élément de type e	Pseudoclasse structurelle
   E: dernier de type	Le dernier élément de type e	Pseudoclasse structurelle
   E: seul-enfant	Le seul élément parent	Pseudoclasse structurelle
   E: Seulement de type	Le seul élément parent de type e	Pseudoclasse structurelle
   E: vide	Élément e ne contenant pas de filiales	Pseudoclasse structurelle
   E: non (x)	Element E, qui ne correspond pas au sélecteur simple x	Pseudoclasse de déni
   E :: première ligne	Premier élément ligne e	Pseudo-éléments
   E :: première lettre	Premier élément de lettre e	Pseudo-éléments
   E :: avant.	Contenu à l'élément e	Pseudo-éléments
   E :: Après.	Contenu après l'élément e	Pseudo-éléments
   E :: Sélection	Sélection dans l'élément e	Pseudo-éléments
   E f.	Élément f c'est à l'intérieur de l'élément e
   E\u003e F.	Élément f qui est directement à l'intérieur de l'élément e
   E + f.	Élément f qui suit immédiatement après l'élément e
   E ~ f.	Élément f qui suit après l'élément e

   Sélecteur universel

   Le sélecteur universel correspond à n'importe quel élément du document HTML.

   Pour désigner un sélecteur universel, le symbole étoile est utilisé (*).

   Il est utilisé si vous devez installer le même style pour tous les éléments de la page Web. Par example:

   * (Marge: 0; rembourrage: 0;)
   

   Dans certains cas, le symbole "étoile" (*) peut être omis:
   * .Ma classe et .Ma classe équivalents
   * # ma pièce d'identité. et #Ma pièce d'identité. Équivalent

   Sélecteurs de tag

   Toute balise HTML peut être utilisée comme sélecteur pour lequel les règles de la conception de style sont déterminées. Par example:

   H1 (couleur: rouge; text-alignement: centre;)

   Si plusieurs éléments auront un style commun, les sélecteurs correspondants peuvent être répertoriés dans la table Styles via la virgule. Par example:

   H1, H2, H3, H4 (Couleur: rouge; Text-Align: Centre;)

   Sélecteurs d'identifiant

   HTML offre la possibilité d'attribuer un identifiant unique à n'importe quelle balise. L'identifiant est défini par l'attribut identifiant. Par example:

   ...

   La valeur d'identifiant doit commencer par une lettre latine et peut contenir des lettres (), des chiffres (), des "traits d'union" (-) et "soussecore" (_).

   Valeurs de tous les attributs identifiant Dans le document HTML doit être unique. Si trouvé identifiant Avec les mêmes valeurs, ces identificateurs sont ignorés et le code de la page Web devient intact.

   Dans le code CSS, le sélecteur d'identifiant est indiqué par le signe "grille" (#). Depuis l'identifiant identifiant Il ne s'applique qu'aux éléments uniques, le nom de la balise devant le signe "grille" (#) OMIT:

   Div # a1 (couleur: vert;)

   de même

   # A1 (couleur: vert;)
   

   Il est conseillé d'utiliser identifiant Pas pour la conception de style de l'élément, mais pour y accéder via des scripts ou la transition par référence.

   CLASSES DE SÉLECTIONS

   Pour la conception stylisée, les sélecteurs de classes sont le plus souvent utilisés. La classe Tag est définie par l'attribut. classer. Par example:

   ...

   Le nom de la classe doit commencer par une lettre latine et peut contenir des lettres (), des chiffres (), des "traits d'union" (-) et "soussecore" (_).

   Si l'attribut identifiant Utilisé pour une identification unique, puis avec l'aide de l'attribut classer Tag référence à un groupe particulier.

   Dans le code CSS, le sélecteur d'identifiant est indiqué par le signe "Point" (.). Différentes tags peuvent être attribués à une classe. Dans ce cas, le nom de la balise avant le signe "Point" (.) OMIT:

   I.green (couleur: # 008000;) B.Red (couleur: # f00;) .blue (couleur: # 00f;)

   Pour la balise, vous pouvez spécifier simultanément plusieurs classes en les faisant de la 10 dans l'attribut. classer via l'espace. Dans ce cas, les styles de chacune de ces classes sont appliqués à l'élément.

   ...

   Si certaines de ces classes contiennent les mêmes propriétés de style, mais avec des valeurs différentes, les valeurs du style de classe seront appliquées, qui dans le code CSS est située ci-dessous.

   Sélecteurs d'attributs

   Il existe de nombreux attracteurs d'attributs avec lesquels vous pouvez définir la conception de style pour la balise en fonction de ses attributs.

   
   H1 (couleur: # 800000;) / * élément h1, qui a un attribut de titre * /
   Entrée (bordure: 1px solide # CSS; rembourrage: 4px 6px; largeur: 300px;)
   A (Texte-Décoration: Aucun; Border-Bottom: 1Px Solide # 06C; Couleur: # 06C;)
   SPAN (Affichage: Inline-Block; Arrière-plan-image: URL ("/ img / icon_sprite.png");)
   A, a (arrière-plan: URL ("pic.gif") bas à gauche non répétée; affichage: en ligne-block; largeur: 32px;)
   (Affichage: bloc; flotteur: gauche; largeur: 280px;)
   

   Entre le nom de la balise et le support carré ([), il ne devrait y avoir aucune lacune!

   
   

   Sélecteur universel, Sélecteurs de balises, identificateurs, classes et attributs, ainsi que des pseudoclasses, reportez-vous à des sélecteurs simples.

   Les sélecteurs simples peuvent être associés à certaines séquences basées sur la relation d'éléments dans l'arborescence du document Web. Ces structures sont appelées combinaisons.

   Sélecteurs contextuels

   L'une des machines les plus couramment utilisées est un sélecteur contextuel.

   Sélecteurs contextuels ou sélecteurs de descendants déterminent plusieurs éléments, dont l'un est à l'intérieur de l'autre. Dans le sélecteur contextuel, de simples sélecteurs sont séparés par un espace.

   Exemple

   1. Pushkin a.s.
      • "Tirer"
      • "Misel"
      • Dubrovsky
   2. Gogol N.V.
      • "Auditeur"
      • "Taras Bulba"
      • "Âmes mortes"
   3. Tolstoï l.n.
      • "Guerre et Paix"
      • "Anna Karenina"
      • "Résurrection"

   RÉSULTAT:

   1. Pushkin a.s.
      • "Tirer"
      • "Misel"
      • Dubrovsky
   2. Gogol N.V.
      • "Auditeur"
      • "Taras Bulba"
      • "Âmes mortes"
   3. Tolstoï l.n.
      • "Guerre et Paix"
      • "Anna Karenina"
      • "Résurrection"

   Sélecteurs subsidiaires

   Le sélecteur enfant définit l'élément qui se trouve directement dans l'autre. Dans le sélecteur enfant, les sélecteurs simples sont séparés par le signe "plus" (\u003e).

   Exemple

   1. Pushkin a.s.
      • "Tirer"
      • "Misel"
      • Dubrovsky
   2. Gogol N.V.
      • "Auditeur"
      • "Taras Bulba"
      • "Âmes mortes"
   3. Tolstoï l.n.
      • "Guerre et Paix"
      • "Anna Karenina"
      • "Résurrection"

   RÉSULTAT:

   1. Pushkin a.s.
      • "Tirer"
      • "Misel"
      • Dubrovsky
   2. Gogol N.V.
      • "Auditeur"
      • "Taras Bulba"
      • "Âmes mortes"
   3. Tolstoï l.n.
      • "Guerre et Paix"
      • "Anna Karenina"
      • "Résurrection"

   Sélecteurs voisins

   Le sélecteur adjacent définit le signe plus (+), séparant deux séquences de sélecteurs simples. Les éléments représentés par ces séquences sont à l'intérieur d'un seul conteneur et suivez la seconde sur la première directement, non séparées par des autres balises.

   Exemple

   Réflexologie

   RÉSULTAT:

   Réflexologie

   Sélecteurs associés

   Le sélecteur adjacent définit le signe "tilda" (~), séparant deux séquences de sélecteurs simples. Les éléments représentés par ces séquences sont situés à l'intérieur d'un seul conteneur et suivent la seconde pour la première (option directement).

   Exemple

   ---

   Réflexologie

   "Tous les actes de la vie consciente et inconsciente dans la voie d'origine sont l'essence des réflexes." EUX. Sechenov

   ---

   Réflexothérapie - Traitement des maladies via des contrôles réflexes. Appliqué avec succès dans des programmes de traitement intégrés ou en tant que technique individuelle.

   RÉSULTAT:

   Réflexologie

   "Tous les actes de la vie consciente et inconsciente dans la voie d'origine sont l'essence des réflexes." EUX. Sechenov

   Réflexothérapie - Traitement des maladies via des contrôles réflexes. Appliqué avec succès dans des programmes de traitement intégrés ou en tant que technique individuelle.

   
   
   

   CSS (feuilles de style en cascade) - Langue des feuilles de style qui vous permettent d'attacher de style (par exemple, des polices et des couleurs) à des documents structurés (par exemple, des documents HTML et des applications XML). Habituellement, les styles CSS sont utilisés pour créer et modifier le style des pages Web et des interfaces utilisateur écrites dans les langues HTML et XHTML, mais peuvent également être appliquées à tout type de document XML, y compris XML, SVG et XUL. Division du style de présentation de documents du contenu des documents, CSS simplifie la création de pages Web et de service de sites.

   CSS prend en charge des feuilles de style pour des supports spécifiques. Les auteurs peuvent donc adapter la présentation de leurs documents aux navigateurs visuels, aux appareils d'audition, aux imprimantes, aux appareils en braille, aux périphériques de poche, etc.

   Les feuilles de style en cascade décrivent les règles de formatage des éléments à l'aide de propriétés et de valeurs admissibles de ces propriétés. Pour chaque élément, vous pouvez utiliser un ensemble de propriétés limité, les propriétés restantes n'auront aucune influence sur celle-ci.

   L'annonce de style se compose de deux parties: sélecteur et les publicités. Dans HTML, les noms des éléments sont insensibles au registre. "H1" fonctionne de la même manière que "H1". L'annonce se compose de deux parties: nom de propriété (par exemple, couleur) et valeur de la propriété (gris). Le sélecteur informe le navigateur, quel élément est de formater, et dans le bloc d'annonce (code sous contre crocs), les commandes de format sont répertoriées - Propriétés et leurs valeurs.

   Figure. 1. Structure d'annonce

   Bien que l'exemple tente d'influencer une paire de propriétés nécessaires au rendu d'un document HTML, il est seul qualifié de feuille de style. En combinaison avec d'autres feuilles de style (une caractéristique fondamentale de CSS est que les feuilles de style sont combinées), la règle déterminera la soumission finale du document.

   Types de feuilles de style en cascade et leur spécificité

   1. Types de feuilles de style

   1.1. Table de style externe

   Table de style externe Il s'agit d'un fichier texte avec extension.css, qui contient un ensemble de styles de CSS-styles d'éléments. Le fichier est créé dans l'éditeur de code, ainsi que la page HTML. À l'intérieur du fichier ne peut contenir que des styles, sans marquage HTML. Fiche de style externe se connecte à une page Web à l'aide d'une étiquette situé dans la section . Ces styles fonctionnent pour toutes les pages de sites.

   Plusieurs tables de style peuvent être jointes à chaque page Web en ajoutant avec plusieurs balises successivement. En spécifiant l'attribution d'attribut d'étiquette de support de cette feuille de style. Rel \u003d "stylesheet" indique le type de liaison (lien vers une feuille de style).

   Type d'attribut \u003d "Text / CSS" n'est pas obligatoire selon la norme HTML5, il ne peut donc pas être indiqué. Si l'attribut est manquant, la valeur par défaut est TYPE \u003d "TEXT / CSS".

   1.2. Styles internes

   Styles internes Incorporer dans la section Document HTML et sont déterminés à l'intérieur de la balise . Les styles internes ont la priorité sur des styles externes, mais inférieurs aux intempéries (spécifiés à travers l'attribut de style).

   ...
   
   

   1.3. Styles intégrés

   Quand on écrit styles intégrésNous écrivons du code CSS dans un fichier HTML directement dans la balise d'élément à l'aide de l'attribut Style:

   Faites attention à ce texte.

   Ces styles agissent uniquement sur l'élément pour lequel ils sont spécifiés.

   1.4. Règle @import.

   Règle @import. Vous permet de télécharger des feuilles de style externe. À la directive @import, il devrait être situé dans la table de style (externe ou interne) devant toutes les autres règles:

   La règle @import est également utilisée pour connecter des polices Web:

   @Import URL (https://font.googleapis.com/css?family\u003dopen+Sans&subset\u003dlatin.cyrillique);

   2. Types de sélecteurs

   Sélecteurs Représenter une structure de page Web. Avec leur aide, les règles sont créées pour formater les éléments de page Web. Les sélecteurs peuvent être des éléments, leurs classes et identificateurs, ainsi que des pseudoclasses et des pseudo-éléments.

   2.1. Sélecteur universel

   Correspond à n'importe quel élément HTML. Par exemple, * (marge: 0;) réinitialiser les tirets externes pour tous les éléments du site. En outre, le sélecteur peut être utilisé en combinaison avec un pseudo-classe ou un pseudo-élément: *: après (styles CSS), *: vérifié (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 type sur toutes les pages du site. Par exemple, H1 (Font-famille: homard, cursif;) Tâchez le style de formatage général de tous les en-têtes H1.

   2.3. Sélecteur de classe

   Les sélecteurs de classe vous permettent de définir des styles pour un ou plusieurs éléments avec le même nom de classe, placé dans différents emplacements de la page ou sur différentes pages du site. Par exemple, pour créer un en-tête de tête, vous devez ajouter l'attribut de classe avec la valeur de titre à la balise d'ouverture.

   Et définissez le style pour la classe spécifiée. Les styles créés à l'aide de la classe peuvent être appliqués à d'autres éléments, pas nécessairement ce type.

   .Inhead (Text-Transform: majuscule; Couleur: LightBlue;)

   Si l'élément comporte plusieurs attributs de classe, leurs valeurs sont combinées avec des espaces.

   Instructions pour utiliser un ordinateur personnel

   2.4. Sélecteur d'identifiant

   Le sélecteur d'identifiant vous permet de formater une Élément spécifique. La valeur d'identification doit être unique sur une seule page une seule fois et doit contenir au moins un caractère. La valeur ne doit pas contenir d'espaces.

   Aucune autre restriction sur quelle forme peut recevoir une carte d'identité, en particulier, des identificateurs ne peuvent constituer que des nombres, de commencer avec les numéros, commencent par un soulignement, ne constituent que des marques de ponctuation, etc.

   L'identifiant unique de l'élément peut être utilisé à diverses fins, en particulier, en tant que procédé de référence à des parties spécifiques du document à l'aide d'identificateurs de fragments, en tant que procédé de ciblage d'un élément lors de la création de scripts et de manière à styliser un élément spécifique. de CSS.

   #Debar (largeur: 300px; flotteur: gauche;)

   2.5 Sélecteur de descendance

   Les sélecteurs Descendeurs utilisent des styles sur des éléments situés à l'intérieur de l'élément de conteneur. Par exemple, UL LI (Texte-Transform: majuscule;) - Sélectionne tous les éléments LI, qui sont des descendants de tous les éléments ul.

   Si vous devez formater les descendants d'un certain élément, cet élément doit définir la classe de styliste:

   p.First A (Couleur: Vert;) - Ce style s'appliquera à tous les liens, les descendants des paragraphes avec la 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 seront stylisés, ce qui est un élément descendant

   Premier A (Couleur: Vert;) - Ce style s'appliquera à n'importe quel lien situé à l'intérieur d'un autre élément indiqué par la classe.First.

   2.6. Sélecteur de fille

   L'élément enfant est un descendant direct de son élément le contenant. Un élément peut avoir plusieurs filiales et l'élément parent n'a qu'un élément. Le sélecteur enfant vous permet d'appliquer des styles uniquement si l'élément enfant passe immédiatement derrière l'élément parent et il n'y a pas d'autres éléments entre eux, c'est-à-dire un élément enfant n'est plus investi.
   Par exemple, p\u003e forte - choisira tous les éléments puissants, qui sont une filiale par rapport à l'élément P.

   2.7. Sélecteur de retraite

   Les relations infirmières se produisent entre des éléments qui ont un parent commun. Les sélecteurs des éléments de soins infirmiers vous permettent de choisir des éléments d'un groupe d'éléments d'un niveau.

   h1 + P - choisira tous les premiers paragraphes en cours d'exécution directement derrière n'importe quelle balise

   sans affecter le reste des paragraphes;

   h1 ~ P - choisira tous les paragraphes qui sont infirmés par rapport à n'importe quel en-tête H1 et allant immédiatement après.

   2.8. Sélecteur d'attributs

   Sélecteurs d'attributs Sélectionnez Éléments basés sur le nom d'attribut ou la valeur d'attribut:

   [Attribut] - Tous les éléments contenant l'attribut spécifié sont tous des éléments pour lesquels l'attribut alt est défini;

   sélecteur [Attribut] - Éléments de ce type contenant l'attribut spécifié, IMG - uniquement des images uniquement pour lesquelles l'attribut ALT est spécifié;

   sélecteur [Attribut \u003d "Valeur"] - Éléments de ce type contenant l'attribut spécifié avec une valeur spécifique, IMG - Toutes les images dont le nom contient des fleurs de mots;

   sélecteur [Attribut ~ \u003d "Valeur"] - Éléments contenant partiellement cette valeur, par exemple, si quelques classes sont spécifiées pour l'élément via un espace, P-paragraphes dont le nom est présenté;

   sélecteur [Attribut | \u003d "Valeur"] - Éléments, une liste des valeurs de l'attribut dont commence par le mot spécifié, P-paragraphes dont la fonction de nom est nommée ou commence sur la fonctionnalité;

   sélecteur [Attribut ^ \u003d "Valeur"] - Éléments, la valeur de l'attribut dont commence à partir de la valeur spécifiée, a - toutes les références commençant par http: //;

   sélecteur [Attribut $ $ \u003d "Valeur"] - Éléments, la valeur de l'attribut dont se termine avec la valeur spécifiée, img - toutes les images du format PNG;

   sélecteur [Attribut * \u003d "Valeur"] - Éléments, la valeur de l'attribut dont contient le mot spécifié n'importe où, A est tous des liens dont le nom contient le nom.

   2.9 Sélecteur Pseudoclassa

   Les pseudoclasses sont des cours non attachés aux balises HTML. Ils vous permettent d'appliquer des règles CSS aux éléments lors de la création d'un événement ou d'une règle spécifique. Pseudoclasses caractérisent des éléments avec les propriétés suivantes:

   : plancher - n'importe quel élément par lequel le curseur de la souris est effectué;

   : La mise au point est un élément interactif auquel ils sont passés au clavier ou activés au moyen d'une souris;

   : Actif - un élément qui a été activé par l'utilisateur;

   : Valide - champs de formulaire, dont le contenu transmis au navigateur est conforme au type de données spécifié;

   : champs de formulaire invalides, dont le contenu ne correspond pas au type de données spécifié;

   : activé - tous les champs de formulaires actifs;

   : les champs de formulaire bloqués désactivés, c'est-à-dire dans une condition inactive;

   : champs dans la gamme - champs dont les valeurs sont dans une plage donnée;

   : Hors de portée - champs de formulaire dont les valeurs ne sont pas incluses dans la plage définie;

   : lang () - éléments avec du texte dans la langue spécifiée;

   : pas (sélecteur) - éléments qui ne contiennent pas le sélecteur spécifié - classe, identifiant, nom ou type de champ de formulaire -: pas ();

   : cible - un élément avec un numéro de symbole, aux quelles références dans le document;

   : Vérifié - sélectionné (sélectionné par l'utilisateur).

   2.10. Sélecteur Pseudoclassov structural

   Les pseudoclasses structurelles sont sélectionnées par des éléments enfants conformément au paramètre spécifié entre parenthèses:

   : Nth-enfant (impair) - éléments de fille impairs;

   : Nième enfant (même) - filiales forgées;

   : Nth-enfant (3n) - chaque troisième élément parmi les filiales;

   : Nth-enfant (3n + 2) - Sélectionne chaque troisième élément, à partir du deuxième élément enfant (+2);

   : Nth-enfant (N + 2) - choisit tous les éléments à partir du second;

   : Nth-enfant (3) - choisit le troisième élément enfant;

   : Nth-last-enfant () - Dans la liste des éléments enfants, sélectionne un élément avec l'emplacement spécifié, similaire à: Nth-enfant (), mais à partir du dernier, dans la direction opposée;

   : Premier-enfant - vous permet de ne délivrer que le tout premier élément enfant de la balise;

   : Dernier enfant - vous permet de formater le dernier élément enfant de la balise;

   : seul-enfant - choisit un élément qui est la seule filiale;

   : vide - choisit des éléments qui n'ont pas de filiales;

   : root - sélectionne un élément racine dans le document - élément HTML.

   2.11. Sélecteur de pseudoclasses structurelles

   Indiquez le type spécifique de la balise enfant:

   : NT-de type () - choisit des éléments par analogie avec: Nth-enfant (), tandis que seul le type d'élément prend en compte;

   : premier de type - sélectionne le premier élément enfant de ce type;

   : Dernier de type - sélectionne le dernier élément de ce type;

   : Nth-dernier de type () - Sélectionne l'élément du type spécifié dans la liste des éléments conformément à l'emplacement spécifié, à partir de la fin;

   : Seulement de type - choisit le seul élément du type spécifié parmi les éléments enfants de l'élément parent.

   2.12. Pseudo-élément sélecteur

   Les pseudo-éléments sont utilisés pour ajouter du contenu généré à l'aide de la propriété Contenu:

   : Première lettre - choisit la première lettre de chaque paragraphe, s'applique uniquement aux éléments bloquants;

   : Première ligne - Sélectionne la première chaîne du texte de l'élément, ne s'applique qu'aux éléments bloquants;

   : Avant - insère le contenu généré avant l'élément;

   : Après - ajoute le contenu généré après l'élément.

   3. Combinaison de sélecteurs

   Pour une sélection plus précise d'éléments pour la mise en forme, vous pouvez utiliser des combinaisons de sélecteurs:

   iMG: NTH-of-Type (même) - choisira toutes les images même, dont le texte alternatif contient le mot CSS.

   4. Regroupement des sélecteurs

   Le même style peut être simultanément applicable à plusieurs éléments. Pour ce faire, vous devez énumérer les sélecteurs nécessaires à travers la virgule de gauche de l'annonce:

   H1, H2, P, SPAN (Couleur: Tomate; Fond: Blanc;)

   5. Héritage et cascade

   L'héritage et la cascade sont deux concepts fondamentaux dans le CSS, qui sont étroitement liés à l'autre. L'héritage réside dans le fait que les éléments héritent des propriétés de leur parent (élément les contenant). La cascade se manifeste dans la manière dont différents types de feuilles de style s'appliquent au document et, comme les règles contradictoires se redéfinissent mutuellement.

   5.1. Héritage

   Héritage C'est un mécanisme par lequel certaines propriétés sont transmises d'ancêtre à ses descendants. Spécification CSS assure l'héritage des propriétés liées aux contenus de page, tels que la couleur, la police, l'espacement des lettres, la hauteur de la ligne, le style de liste, le texte-alignement, le text-tiret, la transformation textuelle, la visibilité, l'espace blanc et l'espacement des mots. Dans de nombreux cas, il est pratique, car il n'est pas nécessaire de définir la taille de la police et la famille de polices pour chaque élément de page Web.

   Les propriétés liées au formatage des blocs ne sont pas héritées. C'est l'arrière-plan, la bordure, l'affichage, le flotteur et le clair, la hauteur et la largeur, la marge, la hauteur min-max et -width, le contour, le débordement, le rembourrage, la position, la décoration de texte, la verticale-alignement et l'index z.

   Héritage forcé

   En utilisant le mot-clé hérit, vous pouvez forcer l'élément à hériter de toute valeur de la propriété de l'élément parent. Cela fonctionne même pour ces propriétés qui ne sont pas héritées par défaut.

   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érite);

   2) Styles situés dans la feuille de style ci-dessous, annuler des styles situés dans le tableau ci-dessus;

   3) Les styles de différentes sources peuvent être appliqués à un élément. Vérifiez quels styles sont appliqués, vous pouvez dans le mode développeur de navigateur. Pour cela, sur l'élément, vous devez cliquer sur le bouton droit de la souris et sélectionner l'élément "Afficher le code" (ou quelque chose de similaire). La colonne de droite répertorie toutes les propriétés spécifiées pour cet élément ou héritées de l'élément parent, ainsi que des styles dans lesquels ils sont spécifiés et le numéro de séquence de la chaîne de code.

   
   Figure. 2. Mode développeur dans le navigateur Google Chrome

   4) Lors de la détermination du style, vous pouvez utiliser n'importe quelle combinaison de sélecteurs - le sélecteur d'élément, les pseudo-classes de l'élément, de la classe ou de l'identifiant de l'élément.

   Div (frontière: 1px Solidth #eee;) #Wrap (largeur: 500px;) .BOX (flotteur: gauche;) .clear (clair: les deux;)

   5.2. Cascade

   En cascade - Il s'agit d'un mécanisme qui gère la fin résulte d'une situation dans laquelle différentes règles CSS s'appliquent à un élément. Il existe trois critères qui déterminent la procédure d'application des propriétés - une règle! Important, spécificité et ordre dans lequel les styles sont connectés.

   RÈGLE! IMPORTANT.

   Les règles de poids peuvent être définies à l'aide du mot clé! IMPORTANT, qui est ajouté immédiatement après la valeur de la propriété, telle que la portée (Poids de la police: gras! Important;). La règle doit être placée à la fin de la publicité avant le support de fermeture, sans espace. Une telle annonce aura une priorité sur toutes les autres règles. Cette règle vous permet d'annuler la valeur de la propriété et d'installer un nouveau pour un groupe d'éléments dans le cas où il n'y a pas d'accès direct au fichier avec des styles.

   Spécificité

   Pour chaque règle, le navigateur calcule spécificité du sélecteurEt si l'élément a des annonces de biens en conflit, la règle qui a la plus grande spécificité est prise en compte. La valeur spécifique est composée de quatre parties: 0, 0, 0, 0. La spécificité du sélecteur est définie comme suit:

   pour l'identifiant est ajouté 0, 1, 0, 0;
   classe est ajoutée 0, 0, 1, 0;
   pour chaque élément et pseudo-élément, 0, 0, 0, 1 est ajouté;
   pour le style intégré, ajouté directement à l'élément - 1, 0, 0, 0;
   le sélecteur universel n'a pas de spécificité.

   H1 (Couleur: LightBlue;) / * Spécificité 0, 0, 0, 1 * / EM (Couleur: Silver;) / * Spécificité 0, 0, 0, 1 * / H1 EM (Couleur: Or;) / * Spécificité: 0, 0, 0, 1 + 0, 0, 0, 1 \u003d 0, 0, 0, 2 * / DIV # MAIN P.BOUT (Couleur: bleu;) / * Spécificité: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 \u003d 0, 1, 1, 2 * / .Bar (Couleur: gris;) / * Spécificité 0, 0, 1, 0 * / #Dedbar (couleur: orange;) / * Spécificité 0, 1, 0, 0 * / Li # Barre latérale (Couleur: Aqua;) / * Spécificité: 0, 0, 0, 1 + 0, 1, 0, 0, 0 \u003d 0, 1, 0, 1 * /

   En conséquence, ces règles dont la spécificité est appliquée à l'élément. Par exemple, si deux spécificités avec des valeurs de 0, 0, 0, 2 et 0, 1, 0, 1 agissent sur l'élément, alors remportera la deuxième règle.

   Ordre des tables connectées

   Vous pouvez créer plusieurs feuilles de style externe et les connecter à une page Web. Si différentes valeurs des propriétés d'un élément sont remplies dans différentes tables, la règle dans la table de style indiquée ci-dessous sera appliquée à l'élément.

   CSS.- Les feuilles de style cascade (tables de style en cascade) sont un moyen qui vous permet de définir diverses propriétés visuelles des balises HTML.

   Le site officiel des développeurs: http://www.w3.org/tr/css21/cover.html.

   CSS consiste en des règles. Les règles sont d'elles-mêmes le nom et la valeur. Ils sont séparés par un côlon (nom de règle: la valeur de la règle). Aucune citation dans les valeurs des règles ne mettez pas! Exemple:

   La couleur rouge; Contexte: #CCCCCCC;

   Mais comment associer CSS de HTML? Comment prescrire un styles de conception de documents dans le code HTML? Pour cela, il y a 3 solutions:

   • En ligne.
   • Incorporement (en Inclus).
   • Mise en relation.

   La base du document - HTML et CSS y sont déjà appliquées. C'est au document que le CSS lui-même ne signifie rien.

   Méthode de l'intension CSS (Inline)

   Attribut de style d'occasion. Il peut être livré dans n'importe quel élément affiché visuellement. Les règles CSS sont enregistrées dans le style (nom de règle: valeur de règle), plusieurs règles sont séparées par un point-virgule (; est la fin de la règle en CSS):

   Texte normal

   "Couleur: rouge; fond: #ccccccc"\u003e Ce paragraphe applique le style d'encrassement.

   Méthode d'intégration (In Nexing) CSS

   Un élément spécial "style" est utilisé dans lequel les règles CSS sont enregistrées. Style intérieur Écrivez seulement la langue CSS. Exemple:

   < style type= "text/ css"> P (couleur: rouge; arrière-plan: #cccccccc) Il applique le style de la méthode de fixation. Texte normal

   Dans cet exemple, nous avons prescrit la règle de l'élément "P" paragraphe. Dans la 2e ligne, nous avons prescrit le sélecteur (auxquels des balises seront appliquées par la règle CSS). La règle elle-même est enregistrée dans les crochets "()".

   Element "style" ne mettez que dans l'élément "tête".

   Méthode de liaison CSS (liaison)

   Pour ne pas écrire la conception de style chaque fois (ne téléchargez pas le document), vous devez écrire des règles CSS au même endroit et les appliquer à différents documents (à une quantité illimitée).

   Pour ce faire, toutes les règles CSS ont lieu dans un fichier texte distinct. Habituellement, ce fichier donne une extension. CSS. Et puis il est immédiatement clair que les règles de style sont épelées. Ne confondez rien.

   Comment alors attacher ce fichier CSS séparé avec notre document HTML? Pour ce faire, utilisez le code suivant dans la section principale:

   Ceux. Spécifiez le fichier avec des styles via le lien hypertexte. Le navigateur charge le fichier de style et applique les règles à tout le document. En fait, cela fonctionne comme l'élément "style", mais est uniquement dans un fichier séparé. Et nous pouvons livrer un lien vers le fichier CSS dans n'importe quel document. C'est très pratique, car Je vais bien avec des styles dans un seul fichier; Après avoir téléchargé la table de style une fois, lorsque vous accédez aux pages suivantes, le navigateur ne comprend pas ce fichier, il l'obtiendra dans le cache (tel que le stockage temporaire de fichiers téléchargés). Ainsi, je sauve la circulation et accélère l'affichage de la page.

   Attention! L'élément "Link" ne fonctionnera pas avec un attribut HREF. Parce que Cet hyperser est utilisé à des fins différentes. Il s'agit d'un lien hypertexte de service qui peut indiquer différents types de fichiers pouvant être utilisés à des fins différentes pour vos pages. Pour donner pour comprendre le navigateur, il s'agit d'une table de style, l'attribut REL est utilisé (rel \u003d "stylesheet"). Cela indique le type de relation du document téléchargé et de notre document principal. Maintenant, le navigateur comprend que le document téléchargé est une feuille de style.

   CSS est déchiffré comme "feuilles de style en cascade", ce qui signifie "tables de style cascade". Utilisé pour concevoir des pages Web. Si le contenu est contenu dans le code HTML (ce que le navigateur affiche), CSS détermine sa conception (comment le navigateur le montrera). La beauté de CSS est qu'avec l'aide d'un style, vous pouvez immédiatement organiser tout le même type de page ou tout un site entier (immédiatement tous les liens, paragraphes, listes). Style CSS Vous avez une fois déterminé comment l'un ou l'autre élément devrait regarder, par exemple, des images, et ils changent de conception immédiatement dans tous les documents. Pour modifier le formatage du texte sur tout le site, il vous suffit de modifier le code CSS une seule fois.

   Les principaux éléments de CSS.

   En tant que HTML consiste en étiquettes, attributs et valeurs et CSS consiste en ses propres éléments. L'essence des conceptions CSS peut être expliquée comme suit: "Spécifiez quel élément de la page pour organiser et indiquer comment le concevoir." Voici les composants de la conception CSS.

   • Sélecteur. L'identifiant indiquant le navigateur à quel élément est d'appliquer la conception. Grâce à lui, le navigateur "comprend" que le style est destiné, par exemple, de décorer des listes ou des tables.
   • Unité de déclaration de style. Écrire après le sélecteur et se situe dans des supports bouclés. Il définit le style d'élément (sa conception). Unité de déclaration de style se compose de deux parties.
   • Propriété. Attribut analogique en HTML. Détermine quelle propriété de spécification sera modifiée.
   • Valeur. Définit la propriété à travers le côlon et détermine la manière dont la propriété sera modifiée.

   Les propriétés et les valeurs dans l'unité de déclaration de styles peuvent être quelque peu, auquel cas ils sont répertoriés via un point-virgule.

   Types de sélecteurs

   Selon si les propriétés dont sont déterminées les éléments de la page, les sélecteurs sont des types différents.

   • Universel. Spécifie les règles à tous les éléments de page pour lesquels d'autres règles ne sont pas installées.
     Le code * (Taille de la police: 14px;) Définit la taille de la police de 14 pixels vers tous les éléments du document pour lequel d'autres règles ne sont pas spécifiées à l'aide d'autres sélecteurs.
   • Étiqueter. Ce type de sélecteur spécifie les règles de formatage du contenu d'une étiquette HTML spécifique. Le nom du sélecteur coïncide avec le nom du descripteur, écrit seulement sans crochets angulaires: p., h1., ul.
     Par exemple, code h2. (La couleur rouge;) Définit la couleur verte du texte pour tous les en-têtes de second niveau, c'est-à-dire le contenu des balises
     .
   • Attributa. Avec ce groupe de sélecteur, vous pouvez déterminer le style de conception du contenu de toutes les balises, qui sont spécifiées par un attribut spécifique. Les sélecteurs peuvent être définis plus précisément, indiquant non seulement le nom de l'attribut, mais également lui-même attribué, ainsi que le nom de sa balise. Cela peut être utilisé pour rendre l'enregistrement plus individuel.
   • Classer. Le type de sélecteurs au cas où vous devriez créer le contenu des mêmes tags de type différemment. Par exemple, des liens au bas du site que vous souhaitez faire rouge, alors que tout le monde devrait rester bleu, comme ils l'étaient. Pour appliquer les règles de la classe sur l'élément Site, vous devez spécifier le nom de la classe dans l'attribut. classer La balise correspondante.

   Supposons d'utiliser la classe marcher. Des éléments séparés doivent définir un tiret à gauche de 15 pixels.

   Le code CSS sera comme celui-ci:

   Étape (marge-gauche: 15px;)

   Le code HTML qui donnera un élément à la règle sera la suivante:

   Texte avec indenté

   • Identifiant. Utilisé en conjonction avec l'attribut identifiant Tag HTML et est utilisé lorsque les propriétés doivent définir un seul élément. Contrairement au sélecteur de classe, avant le nom duquel le point est défini, écrit à travers la "grille":

   #Exclusive (couleur: orange;)

   • Contextuel. En HTML, certaines tags se trouvent souvent à l'intérieur des autres et des sélecteurs contextuels aident à définir les règles uniquement pour un tel cas. Utilisez-les, par exemple, vous pouvez formater des éléments à l'intérieur des listes numérotées ou du texte de croisière dans les paragraphes:

   P i (FROM-FAMILLE: siècle;)

   Les groupes restants de sélecteurs sont basés sur la combinaison des types répertoriés, ainsi que sur le principe de l'héritage, lorsque l'élément enfant prend les propriétés du parent.

   Les sélecteurs combinés et de groupe sont pratiques dans de nombreuses situations. Par exemple, pour définir des règles de classe marcher. Ce n'est que pour les références, vous devez spécifier les deux sélecteurs via le point (première étiquette, puis classe):

   A.step (marge-gauche: 15px;)

   Comment connecter CSS à une page HTML?

   Forcer les outils de création de site pour interagir les uns avec les autres de plusieurs manières. Selon la méthode d'ajout de styles, sont divisés en catégories suivantes.

   Styles intégrés

   Situé dans le document directement dans l'étiquette HTML à l'aide de l'attribut style.. Avoir la plus haute priorité. Cela signifie que si une conception différente est définie pour le même élément, la préférence sera donnée à la règle, qui est écrite à l'intérieur de la balise. Le sélecteur pour le style intégré n'est pas nécessaire, car la connexion du style et de la balise est évidente - la conception de la balise et est définie.

   Le code suivant définit la taille et la couleur de la police sur la balise

   Texte décoré avec un style interne.

   Styles mondiaux

   Étiquette …

   Styles connexes

   Le plus confortable, car avec leur aide, vous pouvez facilement organiser un site entier dans un style unique. Le style associé implique que toute la conception CSS est dans un fichier séparé avec une extension. .css.

   Cette approche est également pratique car elle sépare les règles de conception de pages de leur contenu, le code CSS peut être facilement modifié sans interférer avec des fichiers HTML, et le principe de séparation du code est très important, en particulier dans les grands projets.

   Pour associer des règles du fichier CSS avec une page HTML, une balise est utilisée. ajouté au conteneur et ses attributs.

   Voici une chaîne reliant les règles du fichier mystyle.css. Avec la page HTML:

   rel \u003d "styesheet" Détermine que la balise fait référence au fichier de table de style, href \u003d "mysyle.css" Spécifie son adresse. Les règles d'adressage sont les mêmes que dans les références classiques - le chemin peut être absolu, relatif, etc.

   Styles importés

   Avec l'aide de l'équipe @importervous pouvez ajouter des styles du fichier CSS à la table actuelle. Cela peut être nécessaire, par exemple, si vous souhaitez compléter la conception individuelle du document spécifié par Global Styles, des règles universelles d'un fichier séparé. Avec des styles embarqués, la méthode ne peut pas être utilisée.

   Le code ci-dessous importe le document de la table de documents any.css.qui est dans le dossier avec le document HTML modifiable:

   @import URL (any.css);

   La commande est prescrite par une chaîne sous la balise d'ouverture