Styles CSS
Afin d'afficher l'effet de feuille de style CSS attendu dans le navigateur, le navigateur doit reconnaître et appeler correctement le CSS. Lorsque le navigateur lit la feuille de style, il doit la lire au format texte. Voici quatre méthodes pour insérer des feuilles de style CSS dans la page : créer des liens vers des feuilles de style externes, des feuilles de style internes, importer des feuilles de style d'apparence et des styles intégrés.
1. Créer un lien vers une feuille de style externe
Établir un lien vers une feuille de style externe consiste à enregistrer la feuille de style en tant que fichier de feuille de style. puis ajoutez-le à la page. Utilisez la balise <link> pour créer un lien vers ce fichier de feuille de style. Cette balise <link> doit être placée dans la zone <head>
<head>
…… <link href="mystyle.css" rel="stylesheet " type="text/css" media="all" >
......
</head>
L'exemple ci-dessus indique que le Le navigateur lit la feuille de style définie au format document à partir du fichier mystyle.css. rel="stylesheet" fait référence à l'utilisation de cette feuille de style externe dans la page. type="text/css" signifie que le type de fichier est du texte de feuille de style. href="mystyle.css" est l'endroit où se trouve le fichier. media consiste à sélectionner le type de média. Ces médias comprennent : écran, papier, appareil de synthèse vocale, appareil de lecture braille, etc.
Un fichier de feuille de style externe peut être appliqué à plusieurs pages. Lorsque vous modifiez ce fichier de feuille de style, les styles de toutes les pages sont modifiés en conséquence. C'est très utile lors de la création d'un grand nombre de sites Web avec le même style de page. Cela réduit non seulement la charge de travail de duplication, mais facilite également les modifications et éditions futures, et réduit également le téléchargement répété de codes lors de la navigation.Remarque
Les fichiers de feuille de style peuvent être ouverts et modifiés avec n'importe quel éditeur de texte (par exemple : Bloc-notes). Généralement, les extensions de fichier de feuille de style sont .css. Le contenu est une feuille de style définie et ne contient pas de balises HTML. Le contenu du fichier mystyle.css est le suivant :hr {color: sienna}
p {marge-gauche : 20px}
body {background-image: url("images/back40.gif")} /*Définition La couleur de la ligne horizontale est jaune terre ; la marge à gauche du paragraphe est de 20 pixels ; l'image de fond de la page est le fichier back40.gif dans le répertoire images */
2. Feuille de style interne
La feuille de style interne place la feuille de style dans la zone <head> la page. Ces styles définis sont appliqués à la page. Styles Le tableau est inséré à l'aide de la balise <style>. <tête>…… image : url("images/back40.gif")} Importer des feuilles de style externes fait référence à < ;style> pour importer une feuille de style externe, utilisez @import lors de l'importation, voir l'exemple suivant : @import « mystyle.css » Autres déclarations de feuilles de style 4. Styles en ligne Styles en ligne C'est utilisé mélangé dans les balises HTML De cette façon, vous pouvez facilement définir le style d'un certain élément séparément. L'utilisation de styles en ligne consiste à ajouter directement le paramètre de style à la balise HTML. Le contenu du paramètre style est constitué des attributs et des valeurs CSS, comme dans l'exemple suivant : <p style="color: sienna;margin-left: 20px;"> </p> <!--La couleur de ce paragraphe est kaki, et la marge gauche est de 20 pixels- -> Superposition de plusieurs feuilles de style Les feuilles de style CSS ont un ordre en cascade. Nous discutons ici de la superposition de ces méthodes d'insertion de feuilles de style si plusieurs feuilles de style différentes sont utilisées sur le même sélecteur, cette valeur d'attribut se chevauchera plusieurs fois. En cas de conflit entre feuilles de style, la dernière définie prévaudra. Par exemple, nous lions d'abord dans une feuille de style externe, qui définit les attributs color, text-alig et font-size du sélecteur h3 : h3 { Ensuite, les attributs text-align et font-size du sélecteur h3 sont également définis dans la feuille de style interne : h3 { Ensuite le style superposé de cette page est : couleur : rouge alignement du texte : <🎜; > /*La couleur du texte est rouge ; alignée à droite ; la taille est de 20 pts*/ De manière générale, tous les styles seront cascadés dans une nouvelle feuille de style virtuelle selon les règles suivantes, le numéro 4 ayant la plus haute priorité. 1. Paramètres par défaut du navigateur 2. Feuille de style externe 3. Feuille de style interne (située à l'intérieur de la balise <head>) 4. . Styles en ligne (à l'intérieur des éléments HTML) Par conséquent, les styles en ligne (à l'intérieur des éléments HTML) ont la priorité la plus élevée, ce qui signifie qu'ils auront priorité sur les déclarations de style suivantes : Déclaration de styles dans les balises, une déclaration de style dans un feuille de style externe ou une déclaration de style dans le navigateur (valeur par défaut).
</style>
……
</head>
…… <style type=”text/css”>
-->
</style>
...... Feuille de style .css, faites attention au chemin de la feuille de style externe lorsque vous l'utilisez. La méthode est très similaire à la méthode de liaison dans une feuille de style, mais la méthode de saisie d'importation de feuille de style externe présente plus d'avantages. Essentiellement, cela équivaut à être stocké dans une feuille de style interne.
Remarque : L'importation de feuilles de style externes doit se faire au début de la feuille de style, au-dessus des autres feuilles de style internes.
Remarque : Le paramètre de style peut être appliqué à n'importe quel élément du BODY (y compris le BODY lui-même), à l'exception de BASEFONT, PARAM et SCRIPT.
couleur : rouge ;
text-align : gauche ;
font-size : 8pt
}
/*La couleur du texte du titre 3 est rouge ; Aligné à gauche ; la taille du texte est de taille 8*/
alignement du texte : droite
taille de la police : <🎜 ; >}
/*Le texte du titre 3 est aligné à droite ; la taille est de 20 points*/
Lorsque le même élément HTML est stylisé par plusieurs plus d'un Lors de la définition, quel style sera utilisé ?
- Recommandations de cours
- Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~ 