Les feuilles de style en cascade sont de trois types et, par conséquent, sont incluses dans le code HTML de trois manières.

1. Feuilles de style internes. Définir des éléments à l'intérieur à l'aide d'un attribut montant, Par exemple:

   En-tête bleu

   Le résultat de tout cela sera :

   En-tête bleu

   De cette manière, une feuille de style peut être attribuée à chaque titre et paragraphe. L'inconvénient de cette méthode est que le tableau n'est défini que pour un seul élément, par exemple l'en-tête. Pour tous les autres en-têtes, vous devez créer vos propres feuilles de style, et c'est déjà du temps perdu. De plus, si vous souhaitez définir de nouvelles feuilles de style pour le site dans son ensemble en utilisant cette méthode, vous devrez travailler dur.

2. Feuilles de style intégrées. De cette façon, la feuille de style est définie pour l'ensemble du document HTML entre les balises ... . Par exemple, si nous voulons rendre tous les en-têtes d'une page Web bleus, nous aurons besoin entre les balises ... écrivez ce qui suit :

   Si vous écrivez ce code entre les balises ... , alors tous les en-têtes de premier niveau seront bleus. Avec cette méthode, les styles sont spécifiés à l'aide de balises . Marquez également , mais pas le site dans son ensemble.

3. Feuilles de style externes. Ils sont spécifiés dans un fichier séparé et connectés au document html à l'aide d'une balise , qui est placé entre les balises ... . Considérons ce cas plus en détail. Nous tapons le code suivant dans le bloc-notes et l'enregistrons sous forme de fichier HTML.

   
   
   
   
   
   
   

   En-tête de premier niveau

   
   

   En-tête de troisième niveau situé au centre du document html

   
   

   Titre de niveau six, aligné sur le bord droit de la page Web

   
   
   
   
   

   Après cela, créez un nouveau fichier avec le contenu suivant :

   H1 (couleur : bleu ;)
   H3 (couleur : rouge ;)
   H6 (couleur : vert ;)

   Et enregistrez-le sous style avec rallonge *css. Voir le résultat. Ceci est notre fichier HTML avec les en-têtes. Voyons maintenant comment fonctionne cette conception. Dans un document html avec des titres nous sommes entre les balises ... a écrit cette ligne :

   Ici en utilisant la balise nous connectons les feuilles de style au document html. Attribut href fait référence à l'emplacement où se trouve le fichier de style ; il s'agit d'un attribut obligatoire. Attribut taper nous savons déjà qu'il spécifie le type de feuille de style. Attribut rapport indique la relation du fichier inclus avec ce document HTML. Dans notre cas, la valeur de l'attribut rel="feuille de style" indique que nous avons ajouté principal feuille de style. L'avantage de cette méthode de spécification des feuilles de style est que si vous souhaitez modifier le design du site dans son ensemble, il vous suffit de modifier un seul fichier avec des feuilles de style.

Une feuille de style CSS, si l'on prend la définition elle-même, est un langage permettant de décrire l'apparence d'un document. Autrement dit, HTML est responsable de la structure de la page et les feuilles de style CSS sont responsables de l'ensemble de la conception. J'ai compilé ici des informations qui vous permettront d'utiliser librement la feuille de style. Je n'écrirai pas sur la nécessité de le savoir, car c'est déjà clair - sans cela, vous ne pourrez pas donner au site une forme plus ou moins normale. Si quelqu'un commence tout juste à apprendre les styles CSS, ces matériaux suffiront pour commencer à apprendre le CSS.

1. Choses de base

Je vais commencer par les bases. Lorsque j'ai démarré ce site, j'ai écrit des petits tutoriels sur l'apprentissage des feuilles de style CSS. Les cours conviennent aussi bien à ceux qui débutent qu'à ceux qui savent déjà quelque chose pour rafraîchir leurs connaissances. Tout y est présenté en images et exemples réels.

Une petite parenthèse : Lorsque j’ai commencé à étudier moi-même le sujet de la création de sites Web, j’ai appris presque toutes les balises HTML et elles ne m’ont pas beaucoup inspiré. Mais après avoir commencé à étudier la feuille de style CSS et à essayer d'appliquer chacune des propriétés, je l'ai tellement aimé (je ne l'aurais pas créé si je ne l'aimais pas). J'ai vu qu'on pouvait faire des choses incroyables rien qu'avec CSS. Ce n'est pas un langage de programmation qui prend des mois à apprendre. La feuille de style peut être maîtrisée en une (deux) semaines maximum.

Bien entendu, vous n’étudierez pas absolument toutes les propriétés et leurs significations, et ce n’est pas nécessaire ! Il vous suffit de connaître les bases pour pouvoir commencer à l'appliquer et à l'utiliser dans vos projets. Une nuance importante est que vous devez appliquer IMMÉDIATEMENT la propriété que vous venez d'apprendre sur un exemple réel. Qu'il s'agisse de votre propre site Web ou d'un simple site Web HTML, il n'y a aucune différence. L'important est que vous essayiez de l'écrire vous-même et de voir le résultat.

J'ai beaucoup d'exemples sur mon site qui utilisent CSS. Ensemble, ils contiennent plus de 100 leçons ! Lorsque vous connaissez au moins les bases, vous pouvez alors modifier et appliquer en toute sécurité tous les exemples des leçons.

Mes tutoriels sur les bases des styles CSS en cascade

2. Aide-mémoire CSS et CSS3

Eh bien, vous avez appris les bases et après quelques jours, vous avez tout oublié avec « succès » et, probablement, vous pensez que ce n'est pas votre truc et que tout est compliqué. Je veux tout de suite vous encourager un peu - je ne connais pas moi-même toutes les propriétés CSS. Mais qu’est-ce qui m’empêche de les regarder sur Internet ?

Certes, pour l'instant, vous irez sur Yandex ou Google, puis vous taperez la demande dont vous avez besoin. Et si la recherche ne vous donne toujours pas ce dont vous avez besoin. Vous pouvez passer beaucoup de temps de cette façon et ne toujours pas trouver ce que vous cherchiez réellement.

Heureusement, de bonnes personnes ont compilé des aide-mémoire très utiles qui m'ont aidé plus d'une fois. Il suffit de comprendre où se trouve tout et il n'est alors pas difficile de trouver les propriétés nécessaires.

Aide-mémoire CSS et CSS3

Ce sont tout simplement des matériaux irremplaçables lors de la conception et du développement d’un site Web. Le temps nécessaire pour se laisser distraire et rechercher sur Internet des descriptions de propriétés est considérablement réduit.

Certes, comme vous l'avez compris, plus vous créez ou concevez des sites Web, moins vous devez consulter cette info-bulle, car toutes les propriétés nécessaires restent toujours en mémoire. Mais néanmoins, il ne sera pas superflu d'avoir cet ensemble d'aide-mémoire à portée de main.

C'est comme à l'école : même si vous n'utilisez pas d'aide-mémoire, votre âme est toujours plus calme grâce à elle 😆 .

Pour créer la présentation des pages Web, la technologie des feuilles de style en cascade (CSS), ou simplement des feuilles de style, est prévue. Tableau styles CSS contient un ensemble de règles (styles) qui décrivent la conception de la page Web elle-même et de ses fragments individuels. Ces règles déterminent la couleur du texte et l'alignement des paragraphes, les retraits entre une image graphique et le texte qui l'entoure, la présence et les paramètres d'une bordure de tableau, la couleur d'arrière-plan d'une page Web, et bien plus encore.

Chaque style CSS doit être associé à un élément correspondant de la page Web (ou de la page Web elle-même). Après la liaison, les paramètres décrits par le style CSS sélectionné commencent à être appliqués à cet élément. Le lien peut être explicitelorsque nous spécifions nous-mêmes quel style CSS est lié à quel élément de la page Web, ou implicite, lorsque le style CSS est automatiquement lié à tous les éléments de la page Web créés à l'aide d'une balise spécifique.

Tableau styles CSS peut être stocké directement dans le code HTML de la page Web ou dans un fichier séparé. Cette dernière approche est plus cohérente avec le concept Web 2.0 ; Comme on se souvient du chapitre 1, cela nécessite que le contenu et la présentation d'une page Web soient séparés. De plus, séparez styles CSS peut être placé directement dans une balise HTML qui crée un élément de page Web ; Cette approche est désormais utilisée assez rarement et principalement lors de l'expérimentation de styles.

Les feuilles de style CSS sont écrites dans un langage spécial appelé CSS. La norme décrivant la première version de ce langage (CSS 1) est apparue en 1996. CSS 2 est actuellement largement pris en charge et utilisé, et CSS 3 est en développement, dont un sous-ensemble limité est déjà pris en charge par de nombreux navigateurs Web.

Juste CSS3 (plus précisément, son sous-ensemble pris en charge par les programmes modernes) que nous étudierons.

Création de styles CSS

Format de définition commun Style CSS Le listing 7.1 l’illustre.

Voici les règles de base pour créer un style CSS.

Une définition de style CSS comprend un sélecteur et une liste d'attributs de style avec leurs valeurs.

- Sélecteur utilisé pour lier un style à l'élément de la page Web auquel il doit appliquer son effet. En fait, le sélecteur identifie de manière unique un style donné.

Après le sélecteur, séparé par un espace, se trouve une liste d'attributs de style CSS et leurs valeurs, entourés d'accolades.

L'attribut style (à ne pas confondre avec l'attribut tag !) représente l'un des paramètres d'un élément de page Web : couleur de la police, alignement du texte, degré d'indentation, épaisseur du cadre, etc. La valeur de l'attribut style est indiquée après celui-ci via le symbole : (deux-points). Dans certains cas, la valeur de l'attribut de style CSS est placée entre guillemets.

Couples<атрибут стиля>:<значение>séparés les uns des autres par un symbole ; (point-virgule).

Entre le dernier couple<атрибут стиля>:<значение>et un symbole d'accolade fermante ; ne définissez pas, sinon certains navigateurs Web risquent de ne pas traiter correctement la définition du style.

Les définitions des différents styles sont séparées par des espaces ou des sauts de ligne.

Il ne doit y avoir aucun espace ni nouvelle ligne à l'intérieur des sélecteurs et des noms de style. Quant aux espaces et aux nouvelles lignes placés ailleurs dans la définition du style, le navigateur Web les ignore. Par conséquent, nous pouvons formater le code CSS pour le rendre plus facile à lire, tout comme nous l'avons fait avec le code HTML.

Mais les règles sont les règles, et surtout, la pratique. Regardons un petit exemple de style :

P (couleur : #0000FF)

Regardons-le pièce par pièce.

P est un sélecteur. Il représente le nom de la balise

La couleur est un attribut de style. Il définit la couleur du texte.

- #0000FF est la valeur de l'attribut de style de couleur. Il représente le code couleur bleu écrit au format RVB. (Nous parlerons davantage du code RVB et de sa définition au chapitre 8.)

Lorsque le navigateur Web lit le style décrit, il l'appliquera automatiquement à tous les paragraphes de la page Web (balises

). Soit dit en passant, il s'agit d'un exemple typique de liaison de style implicite.

style css Celui que nous avons examiné s’appelle le style de remplacement des balises. Le sélecteur ici est le nom de la balise HTML à remplacer par ce style sans caractères< и >. Sélecteur peut être saisi en lettres majuscules et minuscules ; l'auteur préfère les majuscules.

Examinons quelques autres de ces styles.

Voici le style de remplacement des balises :