Comment créer une feuille de style en cascade liée (CSS)?
Comment couper le code CSS entre les balises de style d'ouverture et de fermeture?
Au fil des ans, les normes de conception et de développement Web ont changé. L'un de ces changements concerne l'utilisation de feuilles de style en cascade (CSS) pour contrôler l'apparence générale d'un site Web. L'utilisation de CSS dans la conception de votre site Web vous permet, en tant que développeur, d'apporter des modifications radicales à l'ensemble du site tout en ne modifiant qu'une seule ligne de code.
- 1Commencez par ouvrir un simple éditeur de texte tel que le bloc-notes (dans le dossier accessoires du menu programmes de Windows).
- 2Les premières modifications de style que vous apporterez affecteront l'ensemble de la page Web. Vous commencerez donc par ajuster la couleur d'arrière-plan et la couleur du texte de toute la page. Corps du premier type {
- 3Essayez maintenant de changer la couleur d'arrière-plan en tapant background-color: immédiatement suivi du code de couleur et en terminant la ligne par un point-virgule (chaque ligne d'une balise de style doit se terminer par un point-virgule). Le code couleur peut être saisi de plusieurs manières.
- Notation hexadécimale - un code alphanumérique à six chiffres qui répertorie les valeurs rouge, verte et bleue, dans cet ordre, pour cette couleur. (c'est-à-dire que #000000 est noir, #FFFFFF est blanc, #FFFF00 est jaune).
- Pourcentage rouge, vert, bleu - utilise une valeur en pourcentage pour indiquer la quantité de chaque couleur représentée (c'est-à-dire rgb (100%, 100%, 0%) est jaune et rgb (100%, 50%, 0%) est orange).
- Valeurs Rouge, Vert Bleu - cette technique est similaire au pourcentage mais la valeur utilisée est de 0 à 128 (c'est-à-dire rgb(128128,128) est blanc et rgb(6464,64) est gris).
- Nom de la couleur - certaines couleurs peuvent être saisies sous forme de valeur de texte comme le noir, le blanc, le rouge, le bleu, le vert.
- 4Pour affecter la couleur du type de couleur du texte: suivi de la couleur souhaitée. Utilisez l'une des techniques énumérées ci-dessus pour changer la couleur d'arrière-plan.
Pour affecter la couleur du type de couleur du texte: suivi de la couleur souhaitée. - 5Fermez la balise body en tapant une fin }
- 6Dans cet exemple, nous apporterons des modifications similaires à la balise <h1> (en-tête 1) en tapant ensuite h1 {
- 7Modifiez la police qui sera utilisée par le navigateur pour rendre tout texte contenu dans cette balise. Ici, nous utiliserons la police verdana qui est l'une des polices par défaut installées avec la plupart des systèmes d'exploitation Windows. Une bonne règle de base consiste à répertorier deux types de polices souhaités, puis une classe de polices. Vous implémenterez ceci en tapant font-family: verdana, arial, sans serif; Cependant, comme nous l'avons montré ici, vous pouvez simplement choisir une seule police.
- 8Pour modifier la taille du texte, tapez font-size: suivi de la taille souhaitée. La taille peut être définie en pixels et em s. Pour l'instant, définissez la taille du texte à 22px.
- 9Modifiez la couleur du texte en utilisant les mêmes méthodes définies ci-dessus pour affecter le style du corps. Dans cet exemple, nous rendons le texte gris en tapant le code couleur hexadécimal: #CCCCCC;
- 10N'oubliez pas de fermer la définition du style h1 en tapant }
- 11Pour modifier la balise de paragraphe, commencez par taper p { et apportez des modifications similaires à celles apportées dans la définition de style h1.
- 12Une fois que vous êtes satisfait de vos définitions de style, vous devez enregistrer le fichier dans un format que le navigateur reconnaîtra. Dans ce cas, nous enregistrerons le fichier sous le nom styles.css bien que vous puissiez réellement nommer le fichier comme vous l'avez choisi tant qu'il se termine par.css (c'est-à-dire monstyle.css, monfichier.css, sitestyle.css). Pour les personnes utilisant le Bloc - notes Windows, assurez-vous que la liste déroulante "Enregistrer sous le type" indique "Tous les fichiers" ou qu'une extension de fichier.txt supplémentaire sera ajoutée. Pour cet exemple, nous allons également enregistrer notre CSS dans le même dossier que la page Web sur laquelle nous travaillons.
L'un de ces changements concerne l'utilisation de feuilles de style en cascade (CSS) pour contrôler l'apparence générale d'un site Web. - 13Toujours à l'aide de votre éditeur de texte, ouvrez le fichier html où vous souhaitez lier le CSS.
- 14Insérez la ligne de code suivante quelque part entre les balises <head>: '''<link rel="stylesheet" type="text/css" href=".css" media="all">'''
- link rel="stylesheet" (La relation de lien avec le document est une feuille de style)
- type="text/css" - indique au navigateur vers quel type de document vous vous connectez.
- href="styles.css" - le chemin d'accès à l'emplacement de la feuille de style.
- media="all" - spécifie le type de média auquel la balise link fait référence.
- 15Actualisez ou ouvrez votre navigateur pour voir les modifications que vous avez apportées à votre page Web.
- Lors de l'enregistrement du fichier, n'oubliez pas de taper.css après le nom du fichier et d'enregistrer le type de fichier sous "Tous les fichiers".
- Indentez chaque définition pour rendre votre code plus facile à lire.
Lisez aussi: Comment pirater un compte Hotmail?
Questions et réponses
- Comment couper le code CSS entre les balises de style d'ouverture et de fermeture?Mettez le code en surbrillance, puis appuyez sur Ctrl + X. Fondamentalement, vous avez sélectionné le code par surbrillance et Ctrl + X est la touche de raccourci pour couper.
