Tout document HTML, quel que soit le nombre d’éléments qu’il contient, sera essentiellement « mort » sans l’utilisation de styles. modes ou mieux encore feuilles de style en cascade(Feuilles de style en cascade) ou simplement CSS déterminer la présentation du document, son aspect. Jetons un coup d'œil rapide à l'utilisation des styles dans le contexte de HTML5.
Un style en CSS est une règle qui indique au navigateur Web comment formater un élément. Le formatage peut inclure la définition de la couleur d'arrière-plan de l'élément, la définition de la couleur et du type de police, etc.
Une définition de style se compose de deux parties : un sélecteur, qui pointe vers un élément, et un bloc de déclaration de style, un ensemble de commandes qui établissent des règles de formatage. Par exemple:
Div( couleur d'arrière-plan : rouge ; largeur : 100 px ; hauteur : 60 px ; )
Dans ce cas, le sélecteur est div. Ce sélecteur précise que ce style sera appliqué à tous les éléments div.
Après le sélecteur, il y a un bloc de déclaration de style entre accolades. Entre les accolades ouvrantes et fermantes, des commandes sont définies qui indiquent comment formater l'élément.
Chaque commande est constituée d'une propriété et d'une valeur. Ainsi, dans l'expression suivante :
Couleur de fond : rouge ;
background-color représente la propriété et le rouge représente la valeur. La propriété définit un style spécifique. Il existe de nombreuses propriétés CSS. Par exemple, background-color spécifie la couleur d'arrière-plan. Après les deux points vient la valeur de cette propriété. Par exemple, la commande ci-dessus définit la propriété background-color sur rouge. En d’autres termes, la couleur d’arrière-plan de l’élément est définie sur « rouge », c’est-à-dire rouge.
Après chaque commande, il y a un point-virgule qui sépare cette commande des autres.
Les ensembles de tels styles sont souvent appelés feuilles de style ou CSS(Feuilles de style en cascade ou feuilles de style en cascade). Il existe différentes manières de définir des styles.
attribut de style
La première consiste à intégrer des styles directement dans l'élément à l'aide de l'attribut style :
modes
Il y a deux éléments définis ici : en-tête h2 et bloquer div. Le titre a une couleur de texte bleue définie à l'aide de la propriété color. Au bloc div les propriétés de largeur sont définies ( largeur), hauteur ( hauteur), ainsi que la couleur d'arrière-plan ( Couleur de l'arrière plan).
La deuxième façon consiste à utiliser l’élément style dans le document HTML. Cet élément indique au navigateur que les données qu'il contient sont du code CSS et non du HTML :
modes
Il n'y a plus d'élément ici style, mais il y a un élément lien, qui inclut le fichier créé ci-dessus styles.css :
Ainsi, en définissant des styles dans un fichier externe, nous rendons le code html plus propre, en séparant la structure de la page de son style. Lorsqu'ils sont définis de cette façon, les styles sont beaucoup plus faciles à modifier que s'ils étaient définis au sein d'éléments ou à l'intérieur d'un élément. style, et cette méthode est préférée dans HTML5.
L'utilisation de styles dans des fichiers externes vous permet de réduire la charge sur le serveur Web grâce à un mécanisme de mise en cache. Étant donné que le navigateur Web peut mettre en cache le fichier CSS et lors du prochain accès à la page Web, il peut récupérer le fichier CSS souhaité dans le cache.
Il est également possible que toutes ces approches soient combinées et que pour un élément, certaines propriétés CSS soient définies à l'intérieur de l'élément lui-même, d'autres propriétés CSS soient définies à l'intérieur de l'élément de style et d'autres se trouvent dans un fichier externe inclus. Par exemple:
Et dans le fichier style.css le style suivant est défini :
Div( largeur:50px; hauteur:50px; couleur d'arrière-plan:rouge; )
Dans ce cas, l'élément div possède une propriété width définie à trois endroits, avec des valeurs différentes. Quelle valeur sera finalement appliquée à l’élément ? Nous avons ici le système de priorité suivant :
- Si un élément a des styles intégrés (styles en ligne) définis, alors ils ont la priorité la plus élevée, c'est-à-dire que dans l'exemple ci-dessus, la largeur finale sera de 120 pixels.
- Viennent ensuite par ordre de priorité les styles définis dans l'élément style
- Les styles les moins prioritaires sont ceux définis dans un fichier externe.
Attributs HTML et styles CSS
De nombreux éléments HTML vous permettent de définir des styles d'affichage à l'aide d'attributs. Par exemple, pour un certain nombre d’éléments, nous pouvons utiliser les attributs width et height pour définir respectivement la largeur et la hauteur de l’élément. Cependant, cette approche doit être évitée et les styles CSS doivent être utilisés à la place des attributs en ligne. Il est important de comprendre clairement que le balisage HTML doit fournir uniquement la structure du document HTML, et que son apparence et son style doivent être déterminés par les styles CSS.
Validation du code CSS
Lors du processus d'écriture de styles CSS, des questions peuvent se poser quant à savoir s'il est correct de définir les styles de cette manière et s'ils sont corrects. Et dans ce cas, nous pouvons utiliser le validateur CSS, disponible sur http://jigsaw.w3.org/css-validator/.
Voici un didacticiel vidéo sur la façon de connecter CSS au HTML
Il est très important de noter que HTML n'est pas un langage de programmation, comme le croient la plupart des utilisateurs inexpérimentés, mais seulement un outil de mise en page de pages Web et rien d'autre ! Rappelez-vous ceci. Je vois beaucoup de messages ridicules où les gens disent qu'ils sont des programmeurs et écrivent leurs « programmes » en HTML. Je vais probablement vous contrarier, mais ce n'est pas vrai.
HTML n'est qu'un outil de mise en page, et si vous le faites, vous êtes un concepteur de mise en page. Mais si vous en écrivez en plus, dans le même JavaScript ou PHP, vous pouvez alors parler de programmeur. Mais ce n’est pas de cela dont nous parlons maintenant, et maintenant que nous avons découvert avec certitude si HTML est un langage de programmation ou non, passons au point principal de cet article.
En plus du fait que HTML fait office de mise en page de vos pages Web, il existe du CSS (non, ce n'est pas un jeu Counter-Strike : Source, comme pourraient le penser de nombreux jeunes webmasters), ce sont des feuilles de style en cascade. . Leur essence est la formation du style général de la page ou de son élément individuel. En termes simples, les retraits, la couleur, la police, la largeur, la hauteur et d'autres paramètres sont configurés via ces styles.
Il existe une grande variété de propriétés elles-mêmes, certaines d'entre elles sont universelles et d'autres sont personnelles pour un élément particulier. Nous ne les décrirons pas maintenant, mais nous concentrerons sur la façon de connecter vos styles à un document HTML.
Connecter une feuille de style externe
Le fichier de style externe a l'extension .css (c'est un prérequis) et le nom du fichier en anglais. Exemple - main.css ou style.css. Après avoir créé un tel fichier et l'avoir rempli avec les styles appropriés, téléchargez-le sur votre site Web dans un dossier qui vous convient et connectez-vous au document HTML.
La manière la plus courante de connecter un fichier de style externe est la suivante :
Ou une version abrégée pour HTML5 :
À quoi devez-vous faire attention ici ?
- Le fichier est inclus dans la section HEAD de toutes les pages de votre site. Si ce fichier n'est pas présent, votre conception sera manquante.
- En partie href un lien complet ou relatif vers le fichier CSS est écrit.
- La barre oblique de fermeture finale est facultative, mais préférée. C'est ainsi que l'on obtient le code « selon le Feng Shui ».
- Vous pouvez connecter n'importe quel nombre de fichiers de style à une page. L'essentiel est sans fanatisme.
De plus, les styles peuvent être intégrés de plusieurs autres manières.
Connecter une feuille de style interne
Une feuille de style interne signifie qu’il n’y a pas de fichier de style. Les propriétés du tableau dans ce cas sont insérées dans la page comme suit :
Ou un court formulaire pour HTML5 :
Il n'y a pas de nuances particulières ici - vous pouvez insérer la structure à la fois dans les sections HEAD et BODY. De plus, sur une page, dans différentes parties de celle-ci, il peut y avoir plusieurs de ces structures.
Connecter une feuille de style intégrée
Si vous avez exploré différents sites et regardé comment leur mise en page est structurée, vous avez peut-être remarqué comment les styles sont écrits directement comme suit :
Cette option est appelée « styles en ligne » et est applicable à tous les éléments d'une page Web, qu'il s'agisse d'un simple bloc, d'une image ou d'une vidéo intégrée.
La seule mise en garde ici est que si vous utilisez des styles externes ou internes non utilisé propriété " !important» – la propriété bâtie a la priorité d'exécution. Qu'est-ce que ça veut dire? Laissez-moi vous donner un exemple simple :
Malgré le fait que dans les styles internes, nous ayons défini la couleur de la phrase sur rouge, elle sera noire, comme cela est indiqué dans les styles intégrés.
Bonne journée à tous.
Ainsi, dans l'un des articles précédents, nous avons fait connaissance.
Mais nous n’avons pas abordé une question très importante. A savoir - comment lier les styles CSS au code HTML pages de notre site Internet.
Cette question est en fait très importante. Après tout si nous lions incorrectement les styles CSS aux pages de notre site, nous ne pourrons alors pas utiliser ces styles. Le navigateur les ignorera simplement et nous ne verrons pas le résultat que donne l'utilisation de certains styles.
Il existe différentes manières de lier les styles CSS au code de la page, et aujourd'hui, nous allons essayer de toutes les examiner.
Commençons.
En fonction de la nature de la connexion des feuilles de style en cascade CSS à un document HTML, il existe : feuilles de style externes et internes.
1. Feuilles de style CSS internes.
Les feuilles de style internes se trouvent directement dans notre page Web. Oui, oui... Directement dans le code HTML de chaque page individuelle.
C'est bien sûr un peu gênant, mais une telle possibilité existe toujours et je ne peux m'empêcher d'en parler.
Ainsi, la première façon de lier les styles CSS au code de la page est d'utiliser la balise, s'appliquent à l'ensemble du contenu du document HTML. Il peut y en avoir autant que vous le souhaitez, voire tous les styles pour l'ensemble du site. Mais c'est un peu faux. J'en parlerai un peu plus tard lorsque je regarderai les feuilles de style externes.
Parfois il faut écrire des styles CSS dans le code HTML.
Par exemple, lorsque vous placez une sorte de bannière publicitaire sur votre site Web, vous insérez le code de cette bannière dans le code de la page.
Pour que cette bannière s'affiche correctement (ne dépasse pas les limites qui lui sont attribuées, peut-être a-t-elle besoin d'un cadre, etc.), il faut parfois y attacher plusieurs instructions CSS.
Mais cela ne sert à rien d’apporter des modifications à la feuille de style générale. La bannière est un phénomène temporaire. Aujourd'hui un, demain un autre. Par conséquent, il est plus facile d’écrire des styles directement dans le code de cette bannière.
Autrement dit, nous devons connecter les styles CSS uniquement à un élément de page spécifique. Cela se fait très simplement – en utilisant l'attribut style.
Les styles écrits de cette manière n'affectent que l'élément dans la balise duquel ils sont placés. Dans ce cas, uniquement pour ce paragraphe (balise
). Et aucun autre !
2. Feuilles de style externes.
Le nom feuilles de style CSS externes signifie qu'elles ne sont pas écrites dans le corps du document HTML, mais dans un fichier spécial séparé. Ces fichiers portent l'extension .css
Alors, comme promis, je vais vous expliquer pourquoi il est préférable d’utiliser des feuilles de style externes.
Le fait est que cela permet aux pages de votre site de se charger un peu plus rapidement. Peut-être pendant une fraction de seconde, mais plus vite. Ce réduit la charge sur votre site et plus pratique pour vos visiteurs : ils doivent moins attendre le chargement des pages.
Pourquoi cela arrive-t-il.
Si les styles CSS de votre site se trouvent dans un fichier séparé, le navigateur de l'utilisateur n'a pas besoin de charger ces styles à chaque fois qu'une nouvelle page est chargée. Il les télécharge une fois, les place dans le cache (une zone mémoire sur l'ordinateur du visiteur) et lors du chargement de la page suivante, il récupère les styles à partir de là.
Il existe deux manières de joindre des fichiers de feuille de style CSS à une page Web.
La première méthode, la plus courante, consiste à utiliser la balise avec les attributs : rel = "stylesheet" type = "text/css" href = "style file.css" à l'intérieur du code d'en-tête de la page (balise
).Par exemple:
| 1 2 3 4 | <tête > ..... <lien rel = "feuille de style" type = "text/css" href = "style.css" > </tête> |
Cet exemple attache les styles CSS écrits dans le fichier style.css à la page. Ils sont valables tout au long du document.
Il y a une autre façon joindre des feuilles de style externes au HTML document. Cela utilise la directive @import. Il permet d'importer le contenu d'un fichier CSS dans la feuille de style actuelle.
Vous pouvez l'utiliser à la fois pour ajouter des feuilles de style à d'autres et pour joindre un fichier de feuille de style à un document HTML. Pour ce faire, vous devez l'écrire à l'intérieur de la balise
Premier paragraphe
La deuxième paragraphe
Troisième paragraphe
Quatrième paragraphe