Introduction à la syntaxe CSS

CSS se compose de trois parties :

sélecteur,

propriétés

valeur de l'attribut.

Syntaxe : sélecteur {propriété : valeur} (sélecteur {propriété : valeur})

1 Description

Le sélecteur peut prendre de nombreuses formes, généralement vous souhaitez définir le style des balises HTML. , tel que BODY, P, TABLE, vous pouvez définir ses attributs et valeurs via cette méthode. Les attributs et valeurs doivent être séparés par des deux-points :

Exemple : body {color: black}, l'effet de. cet exemple consiste à utiliser Le texte sur la page est noir.

Si la valeur d'un attribut est composée de plusieurs mots, des guillemets doivent être ajoutés à la valeur. Par exemple, le nom d'une police est souvent une combinaison de plusieurs mots :

Exemple : p {font. -family: "sans serif"} (Définissez la police du paragraphe comme sans serif)

Si vous devez spécifier plusieurs attributs pour un sélecteur, utilisez des points-virgules pour séparer tous les attributs et valeurs :

Exemple : p {texte -align: center; color : red} (Les paragraphes sont disposés au centre ; et le texte dans le paragraphe est rouge)

2. Groupe de sélection

Vous pouvez écrire des sélecteurs combinés avec les mêmes attributs et valeurs et séparez les sélecteurs par des virgules, cela peut réduire les définitions répétées des styles :

h1, h2, h3, h4, h5, h6 { color: green } (Ce groupe comprend tous les éléments de titre et le texte de chacun l'élément titre est vert)

p, table{ font-size: 9pt } (La taille du texte dans les paragraphes et les tableaux est de taille 9)

L'effet est complètement équivalent à :

p { font- size: 9pt }

table { font-size: 9pt }

3. Sélecteur de classe

En utilisant le sélecteur de classe, vous pouvez classer les mêmes éléments et définir différents styles lors de la définition du sélecteur de classe. , dans la classe personnalisée, ajoutez un point devant le nom. Si vous souhaitez deux paragraphes différents, un aligné à droite et un centré, vous pouvez d'abord définir deux classes :

p.right {text-align: right}

p.center { text-align: center }

Ensuite, utilisez-le dans différents paragraphes. Ajoutez simplement le paramètre de classe que vous avez défini dans la balise HTML :

right Ce paragraphe est aligné à droite

center Ce paragraphe est centré Arrangé

Il existe une autre façon d'utiliser le sélecteur de classe. Omettez le nom de la balise HTML dans le sélecteur, afin que plusieurs éléments différents puissent être définis dans le même style :

center {text-align: center} (define .center). Le sélecteur de classe est un texte centré). Une telle classe peut être appliquée à n'importe quel élément. Ce qui suit classe à la fois l'élément h1 (titre 1) et l'élément p (paragraphe) dans la classe « center », ce qui fait que les styles des deux éléments suivent le sélecteur de classe « .center » :

Ce titre est centré

Ce paragraphe est également centré.

Ce sélecteur de classe qui omet les balises HTML est la méthode CSS la plus couramment utilisée à l'avenir. En utilisant cette méthode, vous pouvez facilement appliquer des éléments prédéfinis à n'importe quel style de classe d'élément.

4. Sélecteur d'ID

Dans la page HTML, le paramètre ID spécifie un seul élément, et le sélecteur d'ID est utilisé pour définir un style distinct pour cet élément unique. L'application du sélecteur d'ID est similaire à celle du sélecteur de classe, il suffit de remplacer CLASS par ID. Remplacez la classe dans l'exemple ci-dessus par ID : alignez ce paragraphe à droite et définissez le sélecteur d'ID avec un signe "#" avant le nom de l'ID. Comme pour le sélecteur de classe, il existe deux manières de définir les attributs du sélecteur d'ID. Dans l'exemple suivant, l'attribut ID fera correspondre tous les éléments avec id="intro":

#intro

{

font-size:110%;

font-weight:bold ;

color:#0000ff;

background-color:transparent

} (la taille de la police est de 110 % de la taille par défaut ; gras ; bleu ; la couleur d'arrière-plan est transparente)

Ce qui suit exemple, l'attribut ID correspond uniquement aux éléments de paragraphe avec id="intro":

p#intro

{

font-size: 110%;

color: #0000ff;

background-color: transparent

}

Le sélecteur d'ID est très limité. Il ne peut définir que le style d'un certain élément individuellement et n'est généralement utilisé que dans. circonstances particulières.

Album CSS

5. Contenant des sélecteurs

Vous pouvez inclure individuellement une feuille de style définie par une relation pour un certain élément. L'élément 1 contient l'élément 2. Cette méthode ne fonctionne que pour l'élément 1. L'élément 2 dans est défini et il n'y a pas de définition pour l'élément individuel 1 ou l'élément 2, par exemple :

tableau a

{

font-size: 12px

}

Les liens dans le tableau ont changé le style, la taille du texte est de 12 pixels et le texte des liens en dehors du tableau Toujours la taille par défaut.

6. La nature en cascade des feuilles de style

La nature en cascade est l'héritage La règle d'héritage des feuilles de style est que le style de l'élément externe sera conservé et hérité par les autres éléments contenus dans cet élément. En fait, tous les éléments imbriqués dans un élément hériteront des valeurs d'attribut spécifiées par l'élément externe, empilant parfois plusieurs couches de styles imbriqués, sauf modification contraire. Par exemple, imbriquez la balise P dans la balise DIV :

div { color: red; font-size: 9pt}

Le texte de ce paragraphe est en rouge, taille de police 9 (le contenu de l'élément P sera hériter des propriétés de la définition DIV)

Il existe des cas où le sélecteur interne n'hérite pas de la valeur du sélecteur environnant, mais en théorie, ceux-ci sont spéciaux. Par exemple, la valeur de l'attribut de limite supérieure n'est pas héritée. Intuitivement, un paragraphe n'aura pas la même valeur de limite supérieure que le BODY du document. De plus, en cas de conflit d’héritage de feuille de style, le dernier style défini est toujours prioritaire. Si la couleur de P est définie dans l'exemple ci-dessus :

div { color: red; font-size:9pt}

p {color: blue}

CSS album

Ce paragraphe Le texte est en police bleue de 9 points. La taille du texte dans le paragraphe est de taille 9, qui hérite de l'attribut div, et l'attribut color suit la dernière définition. Lorsque différents sélecteurs définissent le même élément, les priorités entre les différents sélecteurs doivent être prises en compte. Sélecteur d'ID, sélecteur de classe et sélecteur de balise HTML Étant donné que le sélecteur d'ID est ajouté à l'élément en dernier, il a la priorité la plus élevée, suivi du sélecteur de classe. Si vous souhaitez transcender la relation entre ces trois éléments, vous pouvez utiliser !important pour augmenter la priorité de la feuille de style, par exemple :

7. Commentaires

Insérez des commentaires en CSS pour expliquer la signification de votre code. Les commentaires vous aideront, vous ou d'autres, à comprendre la signification du code lorsque vous ou d'autres personnes modifierez et modifierez le code à l'avenir. Dans le navigateur, les commentaires ne sont pas affichés. Les commentaires CSS commencent par "/*" et se terminent par "*/", comme suit :

/* Définir la feuille de style de paragraphe*/

p

{

text-align: center ; /* Le texte est disposé horizontalement et centré */

couleur : noir /* Le texte est noir*/

font-family : arial /* La police est arial */

}

CSS image Book

css peut être développé avec n'importe quel outil d'écriture de texte, tel que les outils de texte et le développement Dreamweaver. CSS est aussi un langage. Ce langage doit être combiné avec HTML ou , forum, la forme d'expression sur la page en ce moment est une liste verticale, ce qui n'est pas assez beau. Vous pouvez utiliser CSS pour améliorer cette liste en une barre de navigation horizontale. et hyperlien:

CSS Partie:

ul {

List-style: Aucun;

margin: 0px; / * Définissez l'indentation du navigateur IE * /

Padding: 0px;/*Définir l'indentation du navigateur standard*/

}

ul li{margin:0px;padding:0px;float:left;}

ul li a{display:block;width :100px;hauteur:30px;arrière-plan:#efefef;couleur:# 333;text-decoration:aucun;text-align:center}

ul li a:hover{background:#333;color:#fff;}

Après avoir ajouté du CSS, cette liste devient une barre de navigation horizontale, le lien hypertexte a un fond clair, une police grise, pas de soulignement, la hauteur est de 30 pixels, la largeur est de 100 pixels. Lorsque la souris passe sur cet hyperlien, il se transforme en gris. polices d'arrière-plan et blanches. La technologie CSS est utilisée lors de la création de la page d'accueil, ce qui est efficace pour obtenir un contrôle plus précis sur la mise en page, les polices, les couleurs, les arrière-plans et autres effets. Tant que vous apportez quelques modifications simples au code correspondant, vous pouvez changer l'apparence et le format de différentes parties d'une même page, ou de pages Web avec des pages différentes.

Il peut réaliser :

(1) Il peut être utilisé sur presque tous les navigateurs.

(2) Certaines fonctions qui devaient auparavant être implémentées via la conversion d'images peuvent désormais être facilement implémentées à l'aide de CSS, téléchargeant ainsi la page plus rapidement.

(3) Rendre les polices de la page plus belles et plus faciles à organiser, rendant la page vraiment agréable à regarder.

(4) Vous pouvez facilement contrôler la mise en page de la page.

(5) Vous pouvez mettre à jour le style et le format de plusieurs pages Web en même temps, vous n'avez plus besoin de mettre à jour page par page. Vous pouvez utiliser un fichier CSS pour contrôler le style de toutes les pages Web du site. Tant que les lignes correspondantes dans le fichier CSS sont modifiées, toutes les pages de l'ensemble du site changeront en conséquence.

Comment contrôler la couleur et la taille des polices et les polices utilisées avant d'utiliser CSS ? Il est généralement implémenté à l’aide de balises HTML et le code est très lourd. Il est difficile d’imaginer que si la couleur et la taille de la police doivent être modifiées fréquemment sur une page, la longueur du code HTML généré doit être excessive. CSS est né pour simplifier un tel travail, mais bien sûr, sa fonction n'est pas aussi simple. CSS contrôle le style de la page entière grâce à l'idée de contrôle de style de la structure de la page. La feuille de style est placée sur la page et est interprétée et exécutée par le navigateur. C'est un texte complet et peut être maîtrisé par toute personne comprenant le HTML. C'est très simple. Même pour certains navigateurs très anciens, aucune confusion de pages ne se produira. L’un des grands avantages du CSS est que sa vitesse de transmission des images est plus rapide que celle d’une page Web HTML complète.