Maison > interface Web > tutoriel HTML > Une brève introduction aux connaissances CSS

Une brève introduction aux connaissances CSS

零下一度
Libérer: 2017-06-26 15:43:48
original
1307 Les gens l'ont consulté

1. Définition CSS

CSS fait référence aux feuilles de style en cascade, qui est un langage de feuille de style utilisé pour décrire la présentation de documents HTML ou XML (y compris les langages de branche XML tels que SVG et XHTML). CSS décrit comment les éléments doivent être rendus à l'écran, sur papier, audio et autres supports.

2.Pourquoi utiliser CSS

Les pages Web sont composées de balises HTML, et ces balises seront saisies et rendues selon la méthode par défaut du navigateur. Si vous souhaitez modifier ces styles par défaut, c'est le cas. Il est recommandé d'utiliser CSS, car cela permet non seulement de séparer le contenu et les performances, mais facilite également la maintenance.

3. Syntaxe CSS

La syntaxe CSS se compose de deux parties principales : le sélecteur et une ou plusieurs déclarations.

selector {declaration1; declaration2; ... declarationN }
Copier après la connexion

Chaque déclaration est constituée d'un attribut et d'une valeur.

selector {property: value}
Copier après la connexion

Dans l'exemple suivant, h1 est le sélecteur, color et font-size sont des attributs, et red et 14px sont des valeurs.

h1 {color:red; font-size:14px;}
Copier après la connexion

Cette image représente de manière vivante la structure du code ci-dessus

Les CSS sur les espaces et les majuscules ne sont pas sensible, c'est-à-dire que les majuscules et les minuscules peuvent être utilisées. Le fait que des espaces soient inclus ou non n'affectera pas l'effet de fonctionnement du CSS dans le navigateur

/* 属性为大小,值为小写,并且冒号后面有多个空格 */
 .box {COLOR:   blue;
}/* 建议写法 */.box {color: blue;
}
Copier après la connexion
Les deux méthodes d'écriture ci-dessus sont L'effet affiché dans le navigateur est le même.

4. Commentaires CSS

Comme le langage HTML, CSS a également des commentaires

4.1 Commentaires sur une seule ligne

/* 这是表示单行的注释 */
Copier après la connexion
<.>Remarque : Les commentaires ne peuvent pas être imbriqués. Par exemple, l'écriture suivante est incorrecte

/* 这是表示*/单行的注释 *//* 这是表示单行的注释 /* */ */
Copier après la connexion
Commentaires multilignes

.
/*
 * 这是表示多行的注释
 * 注释内容1
 * 注释内容2 */
Copier après la connexion
5. Méthode d'introduction

5.1. Style en ligne

Le style en ligne consiste à définir le style CSS dans l'attribut style de la balise.

<div style="..."></div>
Copier après la connexion
5.2. Embedded

Embedded consiste à écrire des styles CSS ensemble dans le