CSS
CSS est l'abréviation de l'anglais Cascading Style Sheets. CSS est une technologie de base pour définir l'affichage de divers éléments des pages web : texte, images, en-têtes, listes, tableaux, etc. Cette technologie est utilisée par les webmasters pour définir les couleurs, les polices et le positionnement des blocs individuels, ainsi que d'autres aspects de l'apparence des pages d'un site web.
Toutes les questions concernant l'utilisation et la configuration de CSS peuvent être envoyées à la page de discussion de cet article.
Histoire de CSS
Au début des années 1990, différents navigateurs avaient leurs propres styles pour afficher les pages web. Le développement du HTML était très rapide et pouvait satisfaire tous les besoins existants en matière de formatage de l'information à l'époque, c'est pourquoi CSS n'a pas gagné une large reconnaissance à ce moment-là.
Ce n'est qu'en 1994 que Håkon Wium Lie a proposé d'utiliser le concept de "feuilles de style en cascade" pour les documents HTML. À cette époque, les navigateurs avaient une fonctionnalité limitée. En 1990, le HTML, créé par Tim Berners-Lee, était destiné à fournir une représentation structurelle plutôt que visuelle des documents. L'un des fondateurs de Netscape, Marc Andreessen, a annoncé le 13 octobre 1994 que la première version de Netscape Navigator était disponible pour des tests. Trois jours avant les tests, le programmeur norvégien Håkon Wium Lie a publié une version préliminaire de CSS. Aujourd'hui, elle a très peu en commun avec les normes modernes adoptées, mais c'est à ce moment-là que le concept général a été établi. Non seulement CSS, mais aussi plusieurs autres langages de programmation de style pourraient être utilisés pour le design visuel.
En novembre 1994, lors de la conférence Web à Chicago, comme prévu, le premier projet de CSS a été présenté. Les débats politiques et la résolution de certains problèmes techniques ont duré deux ans, mais le 17 décembre 1996, le W3C a officiellement recommandé CSS1.
Depuis lors, les versions suivantes de CSS ont été publiées avec des fonctionnalités étendues et des capacités améliorées pour la mise en page des pages web :
- CSS1 - 1994 : Fonctionnalité limitée qui incluait la configuration de la taille de la police, le changement de son style : normal, italique ou gras, la définition des bordures, des arrière-plans, des couleurs de texte et d'autres éléments de la page. Également la configuration de l'espacement des mots, de l'espacement des lignes et de l'espacement des caractères, l'alignement du texte, des tableaux, des images. Il existe des propriétés pour les marges intérieures et extérieures, les bordures, la largeur, la hauteur des blocs et le positionnement des éléments.
- CSS2 - 1998-2009 : Toutes les fonctions précédentes ont été conservées et plusieurs autres ont été ajoutées, à savoir : le positionnement fixe, absolu et relatif des éléments, un mécanisme de sélection étendu et plusieurs autres fonctionnalités lors du travail avec des éléments graphiques et sonores.
- CSS3 - Le développement actuel de CSS, qui permet des animations, divers arrondis de bordures, des tableaux, ainsi que des paramètres d'ombre, des arrière-plans multiples et d'autres capacités.
Bases de CSS
Tous ceux qui commencent à créer des sites web ont un problème avec leur design et la mise en page générale de toutes les pages. Il est nécessaire de le faire correctement, afin que toutes les pages se ressemblent dans tous les navigateurs web comme Internet Explorer, FireFox, Chrom et autres. La mise en page correcte permet un chargement rapide de la page et une indexation rapide par les moteurs de recherche comme Google. Ce manuel et d'autres articles dédiés à CSS vous fournissent un guide général sur la façon dont tous les éléments de la page et du design du site web peuvent être réalisés en utilisant CSS. Ce manuel est destiné à ceux qui commencent à apprendre la création de sites web.
Comment créer un fichier CSS et le connecter à un site web
Il existe trois façons de connecter CSS à un site web et de créer une mise en page avec cette technologie :
1) Utilisez le code suivant dans HTML qui doit être placé entre les balises head - <head>. Le code CSS doit être placé là entre les balises style - <style type="text/css"> et </style>. Cette méthode a l'inconvénient que tous les paramètres CSS ne sont pas connectés aux autres pages d'un site web, mais fonctionnent uniquement sur la page où le code est placé.
<head>
<style type="text/css">
#example {
width: 100%
}
.class_example {
border: 1px solid red;
}
</style>
</head>
2) La deuxième méthode nécessite un fichier CSS spécial où tous les paramètres CSS sont définis. Par exemple, mystyles.css où tout le code CSS doit être placé. Ce fichier peut être créé et édité à l'aide de programmes simples comme "Notepad" et d'autres logiciels gratuits comme Notepad++, Visual Studio Code, etc. Si vous souhaitez créer un fichier CSS séparé, vous devez l'indiquer dans le HTML de toutes les pages de votre site web (cela peut être fait dans le modèle d'en-tête) le lien vers ce fichier CSS comme suit :
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css"/>
</head>
href="mystyles.css" - l'adresse sur le serveur du fichier CSS.
Cette méthode est la meilleure, car tous les paramètres CSS sont connectés à toutes les pages du site web. Cette méthode est également pratique en cas de modification du CSS, car vous n'avez besoin de faire des modifications que dans un seul fichier, et toutes les modifications seront appliquées à toutes les pages en même temps.
3) Les paramètres CSS peuvent être indiqués dans le code HTML comme ceci :
<div style="border: 1px solid blue; padding: 5px;">Texte ou autre élément HTML sur la page.</div>
- Après
style=, vous pouvez définir n'importe quel paramètre CSS.
Syntaxe de CSS
Tout d'abord, il est important de savoir que le code CSS a trois éléments principaux :
- Sélecteur : le nom de l'élément HTML ou son nom d'ID. CSS permet de créer un groupe de sélecteurs et d'appliquer les mêmes propriétés.
- Propriété : un paramètre qui s'applique au sélecteur. (
color,font,size, etc.) - Valeur : la valeur de la propriété. Cela dépend de la propriété utilisée.
Ci-dessous, vous pouvez voir un exemple de code CSS :
Pour appliquer des valeurs CSS à un élément HTML, vous devez faire ce qui suit :
- Attribuer un nom d'ID à un élément HTML sur une page (à toute la page, une image, un tableau ou un élément div). La meilleure façon de placer un élément HTML est de créer un bloc appelé
<div>et de lui attribuer un nom d'ID pour appliquer des styles CSS par la suite :
<div id="id_name">Texte, image ou autre élément</div>
Les concepteurs web l'utilisent presque tous les jours, mais peu savent réellement ce que signifie la balise div et où elle doit être utilisée. Cet article vise à démystifier la balise div, à expliquer quand et où elle doit être utilisée et à la comparer à la balise span similaire. div-balise (ou élément), abréviation de division. Un conteneur générique pour des blocs de contenu, tels que des images et des paragraphes de texte. Peut être identifié de manière unique par un ID pour être lié à une feuille de style CSS.
Consultez les articles spéciaux dédiés à CSS dans WikiJournal qui décrivent tous les types de sélecteurs, leurs propriétés et valeurs.
- Il est possible de définir des propriétés et des valeurs pour lui entre accolades {} dès que le nom est attribué à un élément HTML sur la page ou son sélecteur. Cela peut ressembler à ceci :
div {
font-size: 12px;
font-family: Verdana;
}
#id_name {
background: blue;
border: 1px solid blue;
}
body {
background: gray;
border: 1px solid black;
}
img {border: 1px solid red;}
div- définit les paramètres et valeurs communs pour tous les éléments inclus dans le bloc div.#id_name- définit le nom pour un élément HTML spécifique. Les propriétés et les valeurs sont définies entre accolades, comme indiqué dans l'exemple ci-dessus (dans l'exemple, l'arrière-plan et la bordure sont définis).body- dans ce cas, nous définissons les propriétés CSS pour toute la page, car tous les éléments HTML sont à l'intérieur de la balise<body></body>.img- définit les paramètres et valeurs pour toutes les images sur la page. Il est également possible de définir des propriétés pour une image spécifique en lui attribuant un ID unique. Dans ce cas, le sélecteur devrait ressembler à ceci :#id_name img, c'est-à-dire une image à l'intérieur d'un élément avec son ID -#id_name.table- définit les paramètres et valeurs pour tous les tableaux sur la page ou sur l'ensemble du site web.td, th- définit les paramètres et valeurs pour toutes les cellules des tableaux sur la page ou sur l'ensemble du site web.
Exemple de site web réalisé avec CSS
Conclusion
Fondamentalement, la syntaxe de CSS n'est pas compliquée et peut être facilement utilisée pour la mise en page des pages et le design général d'un site web. Pour plus d'informations sur la façon d'utiliser CSS pour certains éléments sur une page, suivez les liens ci-dessous. Si vous avez des questions sur la façon d'utiliser CSS et de définir certaines propriétés ou valeurs, n'hésitez pas à poster vos messages sur la page de discussion.