A quoi sert le hashtag dans les feuilles de style CSS ? Conseils pour un webmaster. Injecter du style dans une balise HTML
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 image graphique et le texte qui l'entoure, la présence et les paramètres du cadre du tableau, la couleur de fond de la 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 reliure, décrit par le style sélectionné paramètres CSS commencer à s'appliquer à 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 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 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 désormais largement pris en charge et utilisé, et CSS 3 est en cours de 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 programmes modernes) 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 par croisillons.
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 bleu, écrit en 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
). Ceci, d'ailleurs, exemple typique Liaison de style implicite.
style css Celui que nous avons examiné s’appelle le style de remplacement de balise. Le sélecteur ici est le nom de la balise HTML à remplacer par ce style sans caractères< и >. Sélecteur peut être tapé en majuscule et en lettres minuscules; l'auteur préfère les majuscules.
Examinons quelques autres de ces styles.
Voici le style de remplacement des balises :
EM ( couleur : #00FF00 ;
poids de la police : gras)
Tout texte placé dans une balise , Le navigateur Web affichera du vert audacieux. L'attribut de style font-weight spécifie le degré de « gras » de la police, et sa valeur bold spécifie une police semi-gras.
Et voici le style de remplacement des balises
:CORPS (couleur d'arrière-plan : #000000 ;
couleur : #FFFFFF )
Il définit pour la page Web entière blanc texte (code RVB #FFFFFF) et couleur de fond noir (code RVB #000000). L'attribut de style background-color, comme nous l'avons déjà compris, définit la couleur d'arrière-plan.
Regardons maintenant un style complètement différent :
Texte rouge (couleur : #FF0000)
Il définit la couleur du texte sur rouge (code RVB #FF0000). Mais le sélecteur n'est clairement pas le nom de la balise - la balise HTML
C'est une variété différente Style CSS- cours de style. Il peut être attaché à n’importe quelle balise. Le sélecteur ici est le nom de la classe de style, qui l'identifie de manière unique. Le nom de la classe de style doit être composé de lettres alphabet latin, des chiffres et des tirets, et doit commencer par une lettre. Dans la définition d'une classe de style, son nom est obligatoirement précédé d'un point - c'est le signe que c'est la classe de style qui est définie.
Une classe de style nécessite une liaison de balise explicite. Cela se fait à l'aide de l'attribut CLASS, qui est pris en charge par presque toutes les balises. La valeur de cet attribut est le nom de la classe de style souhaitée sans le symbole point :
Attention!
Ici, nous avons lié la classe de style redtext nouvellement créée au paragraphe « Attention ! En conséquence, ce paragraphe sera rédigé en rouge.
Dans le listing 7.2, nous avons créé une classe de style attention qui définit la couleur de la police sur rouge et italique. (L'attribut font-style spécifie le style de la police et sa valeur italique rend la police en italique.) Nous l'avons ensuite lié à une balise. . En conséquence, le contenu de cette balise sera saisi en gras, en italique rouge ; l'importance particulière et « l'audace » associée du texte est déterminée par la balise , et le style italique et la couleur rouge sont la classe de style attention.
Comme valeur Attribut CLASSE Vous pouvez spécifier plusieurs noms de classes de style à la fois, en les séparant par des espaces. Dans ce cas, l’effet des classes de style semble s’additionner. (Pour plus d'informations sur l'effet de plusieurs différents styles nous parlerons plus tard.)
Dans l'exemple du Listing 7.3, nous nous sommes liés à la balise deux classes de style à la fois : attention et bigtext. De ce fait, le contenu de cette balise sera affiché en gras, italique, rouge et en grande taille. (L'attribut style font-size spécifie la taille de la police et sa valeur large est grande taille, comparable à la taille de police utilisée pour les titres de premier niveau.)
Un style nommé est similaire à une classe de style à bien des égards. Le sélecteur de ce style est également un nom qui l'identifie de manière unique, et il est également explicitement lié à la balise. Et puis les différences commencent.
Dans la définition d'un style nommé, un caractère # (dièse) est placé devant son nom. Il indique au navigateur Web qu'il s'agit d'un style nommé.
La liaison d'un style nommé à une balise est implémentée via l'attribut ID, qui est également pris en charge par presque toutes les balises. La valeur de cet attribut est le nom du style nommé souhaité, sans le symbole #.
La valeur de l'attribut de balise d'identification doit être unique dans la page Web. Autrement dit, dans le code HTML d'une page Web, il ne peut y avoir qu'une seule balise avec valeur donnée Attribut d'identification. Par conséquent, les styles nommés sont utilisés si un style doit être lié à un seul élément d'une page Web.
Dans l'exemple
#bigtext (taille de police : grande)
. . .
Ce grand texte.
Le paragraphe « Ceci est un texte en gros caractères » sera en gros caractères.
Tous les types de styles que nous avons examinés avaient un seul sélecteur, à l'aide duquel la reliure était effectuée. Cependant, CSS vous permet de créer des styles avec plusieurs sélecteurs – ce que l'on appelle des styles combinés. De tels styles sont utilisés pour se lier à des balises qui satisfont plusieurs conditions à la fois. Ainsi, nous pouvons spécifier qu'un style combiné doit être lié à une balise imbriquée dans une autre balise, ou à une balise dont une classe de style spécifique est spécifiée.
Règles établies par la norme CSS lors de l'écriture de sélecteurs dans un style combiné.
-Sélecteurs Il peut s'agir de noms de balises, de noms de classes de style et de noms de styles nommés.
Les sélecteurs sont classés de gauche à droite et indiquent le niveau d'imbrication des balises correspondantes, qui augmente à mesure que vous vous déplacez de gauche à droite : les balises répertoriées à droite doivent être imbriquées dans les balises qui sont à gauche.
Si un nom de balise est combiné avec le nom d'une classe de style ou d'un style nommé, alors pour de cette balise il doit s'agir du nom d'une classe de style ou d'un style nommé.
Les sélecteurs sont séparés par des espaces.
Le style est lié à la balise indiquée par le sélecteur le plus à droite.
Des règles délicates, n'est-ce pas ?.. Pour les comprendre, regardons quelques exemples.
Commençons par le style combiné le plus simple :
P EM ( couleur : #0000FF )
Les noms de balises sont utilisés comme sélecteurs
ET .
Le tag vient en premier
Derrière lui se trouve une étiquette . Donc l'étiquette doit être imbriqué dans une balise Le style sera lié à la balise .
Ce texte deviendra bleu. Mais celui-ci ne le fera pas. Ce- Même.
Ici, les mots « Ce texte » seront en caractères bleus.
Voici un autre style CSS combiné :
P.mini ( couleur : #FF0000 ;
taille de police : plus petite)
Nom de la balise
Combiné avec le nom de classe de style mini. Cela signifie que ce style CSS sera appliqué à n'importe quelle balise
Pour lequel le nom de classe de style mini est spécifié. (La valeur de l'attribut de style de taille de police plus petite spécifie une taille de police plus petite.)
Petit texte rouge.
ET dernier exemple style CSS combiné :
P.sel (couleur : #FF0000)
Ce style sera appliqué à la balise , situé à l'intérieur de la balise À laquelle la classe de style sel est liée. Ce le texte deviendra rouge.
DANS dans cet exemple le mot « Ceci » sera surligné en rouge.
Le standard CSS permet de définir plusieurs styles identiques à la fois, listant leurs sélecteurs séparés par des virgules :
H1, .redtext, PEM (couleur : #FF0000)
Ici, nous avons créé trois styles identiques à la fois : style de remplacement des balises
, texte rouge de classe de style et style combiné P EM. Ils ont tous défini la couleur de la police sur rouge.
Les quatre types de styles CSS que nous avons examinés ne peuvent être présents que dans les feuilles de style. Si vous les spécifiez dans le code HTML d'une page Web, ils seront très probablement ignorés.
Les styles de la dernière - cinquième - variété sont indiqués directement dans le code HTML de la page Web, dans la balise correspondante. Ce sont des styles en ligne. Dans une famille très unie de styles, ils se démarquent.
Ils ne disposent pas de sélecteur, puisqu'ils se placent directement dans la balise souhaitée. Sélecteur dans dans ce cas ce n'est tout simplement pas nécessaire.
Il n'y a pas d'accolades car il n'est pas nécessaire de séparer la liste des attributs de style CSS du sélecteur, qui n'est pas là.
Un style CSS en ligne ne peut être lié qu'à une seule balise : celle dans laquelle il se trouve.
La définition du style CSS en ligne est spécifiée comme valeur de l'attribut STYLE l'étiquette souhaitée, qui est pris en charge par presque toutes les balises :
Petit
-italique.
Nous avons mentionné plus tôt que dans certains cas, la valeur de l'attribut style css doit être placé entre guillemets. Mais la définition de style en ligne utilise des apostrophes au lieu de guillemets.
Les styles CSS intégrés sont désormais très rarement utilisés, car ils violent l'exigence du concept Web 2.0 de séparer le contenu et la présentation des pages Web. Ils sont principalement utilisés pour lier des styles à un seul élément d'une page Web (très rarement) et pour expérimenter des styles.
Au chapitre 14, nous examinerons une autre variété Styles CSS. Pour l'instant, finissons-en avec eux et commençons à examiner les feuilles de style.
Dans ce chapitre, nous expliquerons comment implémenter CSS dans un document HTML, c'est-à-dire lier la description de style d'un élément directement à l'élément lui-même, une balise HTML.
Mettre en œuvre cette tâche possible de trois manières :
- Écrivez une description de style directement dans l'élément lui-même. Cette méthode n'est valable que s'il n'y a qu'un seul élément de ce type dans Document HTML qui nécessite une description de style distincte.
- Rédigez une description de style pour tous les éléments identiques du document HTML. Cette méthode se justifie si le style de la page est fondamentalement différent de la conception globale du site (un groupe de pages interconnectées).
- Extrayez la description du style des éléments HTML dans un fichier CSS séparé. Cela vous permettra de gérer le design de l'ensemble du site, chaque page du site dans laquelle est indiquée une référence à un fichier CSS. Cette méthode est la plus utilisation efficace feuilles de style en cascade.
Examinons de plus près chaque option tout en nous familiarisant avec les règles de la syntaxe d'écriture CSS.
L'attribut de style.
Presque toutes les balises HTML ont un attribut style, ce qui indique qu'une certaine description de style est appliquée à cette balise.
C'est écrit ainsi :
style="">
Tout ce qui sera écrit entre les guillemets d'attribut style et sera une description de style pour de cet élément, dans ce cas l'élément
Eh bien par exemple :
style="couleur : #ff0000 ; taille de police : 12px"> c'est un paragraphe avec un style personnel
Dans ce cas, nous avons précisé que ce paragraphe devait être affiché en rouge et avoir une taille de police de 12 pixels. Dans les chapitres suivants, je parlerai en détail de ce qui est écrit entre guillemets, maintenant nous parlons de sur la façon d'appliquer CSS à n'importe quelle balise HTML.
En utilisant le même principe, vous pouvez spécifier un style individuel pour presque tout le monde Élément HTML.
style="couleur de fond : #c5ffa0">
style="couleur : #0000ff ; taille de police : 18px">Tout sur les éléphants
Acheter un éléphant
style="couleur : #ff0000 ; taille de police : 14px">
style="couleur : #0000ff ; taille de police : 16px">Louer un éléphant
style="couleur : #ff0000 ; taille de police : 14px">
Mais je vais répéter cette méthode Implémentation CSS bon seulement si vous devez définir un certain style pour un petit nombre d’éléments HTML.
Étiqueter (à ne pas confondre avec l'attribut du même nom) dans lequel sont décrits les éléments dont nous avons besoin.
Jetez un œil à l'exemple, il y aura des commentaires ci-dessous.
Tout sur les éléphants
Sur ce site vous trouverez toutes les informations sur les éléphants.
Acheter un éléphant
Avec nous, vous pouvez prix avantageux achetez les meilleurs éléphants !!
Louer un éléphant
Seulement ici, vous pouvez louer des éléphants !!
Comme le montre l'exemple, nous avons obtenu exactement le même résultat que dans le premier cas, seulement maintenant nous n'attribuons pas de style à chaque élément individuellement, mais le plaçons dans le « en-tête » du document, indiquant ainsi que tous les titres ,
- les paragraphes seront bleus
- rouge. Imaginez à quel point notre travail serait plus facile s'il y avait une centaine de paragraphes de ce type et une quinzaine de titres sur une page, et que le document lui-même pèserait moins en « supprimant » toutes les descriptions de style répétitives pour chaque élément individuel.
Maintenant les commentaires promis :
Étiqueter il existe une déclaration directe des styles de certains éléments HTML selon la syntaxe suivante :
Si plusieurs propriétés d'un élément sont spécifiées dans un bloc de déclaration de style, elles sont séparées par un point-virgule.
CSS dans un fichier externe séparé.
En bref, nous arrivons au principal avantage, à mon avis, du CSS, à savoir la possibilité de mettre toutes les informations liées à la conception du site dans un fichier externe séparé.
Alors, ouvrez le bloc-notes (ou un autre éditeur) et écrivez-y le texte suivant :
Corps (couleur d'arrière-plan : #c5ffa0)
a (couleur : #000060 ; poids de la police : gras ;)
a: survol (couleur : #ff0000 ; poids de la police : gras ; décoration du texte : aucun)
h1 (couleur : #0000ff ; taille de police : 18px)
h2 (couleur : #ff00ff ; taille de police : 16px)
p (couleur : #600000 ; taille de police : 14px)
Je vais essayer de vous raconter en détail ce que nous avons écrit sur cette chose étrange dans les chapitres suivants de ce manuel.
Tous! Le fichier de description de style a été créé ! Il ne reste plus qu'un tout petit peu, à savoir forcer pages requises notre site Internet pour obtenir des informations sur ce fichier.
Cela se fait en utilisant la balise (connexion). Étiqueter polyvalent et sert à « lier » un document HTML avec des fichiers externes supplémentaires qui assurent son bon fonctionnement. Étiqueter est une sorte de lien, destiné uniquement non pas aux utilisateurs, mais aux programmes de navigation (navigateurs). Parce que contient exclusivement des informations de service ; elles sont situées en tête du document HTML entre les balises ; et n'est pas affiché à l'écran par les navigateurs.
Étiqueter a des attributs :
href- Chemin d'accès au fichier.rapport- Définit la relation entre document actuel et le fichier référencé.
- icône de raccourci - Spécifie que le fichier inclus est un fichier .
- feuille de style- Spécifie que le fichier inclus contient une feuille de style.
- application/rss+xml - Fichier dans Format XML pour décrire le fil d'actualité.
Puisque nous nous connectons comme fichier externe feuille de style en cascade, alors notre lien de service prend la forme suivante :
Je le répète, pour certainement dissiper d'éventuels malentendus. Attribut rapport attribuer une valeur feuille de style Puisque nous connectons une feuille de style en cascade en tant que fichier externe, nous indiquons le chemin d'accès au fichier CSS (dans cet exemple, le fichier s'appelle monstyle.css et se trouve à côté du document HTML dans lequel il est écrit ce lien) nous indiquons également que ce fichier texte et contient une description de style type="texte/css"
Maintenant, nous insérons cette ligne dans les en-têtes de page de notre site et apprécions le résultat.
fichier monstyle.css
corps (couleur d'arrière-plan : #c5ffa0)
a (couleur : #000060 ; poids de la police : gras ;)
a: survol (couleur : #ff0000 ; poids de la police : gras ; décoration du texte : aucun)
h1 (couleur : #0000ff ; taille de police : 18px)
h2 (couleur : #ff00ff ; taille de police : 16px)
p (couleur : #600000 ; taille de police : 14px)
Fichier index.html
Menu:
Tout sur les éléphants.
Achetez un éléphant.
Louez un éléphant.
Tout sur les éléphants
Sur ce site vous trouverez toutes les informations sur les éléphants.
Fichier éléphant.html
Menu:
Tout sur les éléphants.
Achetez un éléphant.
Louez un éléphant.
Acheter un éléphant
Avec nous, vous pouvez acheter les meilleurs éléphants à des prix compétitifs !!
Fichier éléphant1.html
Menu:
Tout sur les éléphants.
Achetez un éléphant.
Louez un éléphant.
Louer un éléphant
Seulement ici, vous pouvez louer des éléphants !!
Dans l'exemple ci-dessus, "site sur les éléphants", sur à l'heure actuelle, il y a trois pages, chacune étant associée à un seul fichier CSS externe - mystyle.css. Ainsi, nous l'avons considérablement « déchargé » et avons rendu la conception de l'ensemble du site « adaptée aux mobiles ». Imaginez combien de kilo-octets nous gagnerions si ce site avait une centaine de pages à part entière !? Et aussi, combien de temps gagnerions-nous si nous devions changer quoi que ce soit dans sa conception !?
Dans ce chapitre, nous avons examiné trois façons d'intégrer du CSS dans un document HTML. Lequel vaut-il mieux utiliser ?
- Utiliser l'attribut style pour n'importe quel élément, si cet élément avec un style différent des autres éléments est le seul sur l'ensemble du site.
- Utiliser la balise