Que signifie CSS ?

css signifie Cascading Style Sheets, et son nom complet en anglais est "Cascading Style Sheets". Il s'agit d'un langage informatique utilisé pour exprimer des styles de fichiers tels que HTML ou XML ; mais également coopérer avec divers langages de script pour formater dynamiquement divers éléments d'une page Web.

L'environnement d'exploitation de cet article : système Windows 7, version css3, ordinateur Dell G3.

Les feuilles de style en cascade (nom complet en anglais : Cascading Style Sheets) sont un ordinateur utilisé pour exprimer des styles de fichiers tels que le langage HTML (une application du langage de balisage généralisé standard) ou XML (un sous-ensemble du langage de balisage généralisé standard). . CSS peut non seulement modifier statiquement les pages Web, mais peut également coopérer avec divers langages de script pour formater dynamiquement divers éléments des pages Web.

CSS peut effectuer un contrôle précis au niveau des pixels sur la disposition des positions des éléments dans les pages Web, prend en charge presque toutes les tailles et styles de police et a la capacité de modifier les objets de page Web et les styles de modèle.

Fonctionnalités du langage

CSS fournit une description de style pour le langage de balisage HTML, définissant la manière dont les éléments sont affichés. CSS est une avancée majeure dans le domaine de la conception Web. Il peut être utilisé pour modifier un petit style afin de mettre à jour tous les éléments de page qui lui sont liés.

En général, CSS présente les caractéristiques suivantes :

• Définitions de styles riches

CSS fournit des styles de document riches, une apparence et la possibilité de définir les propriétés du texte et de l'arrière-plan ; permet la création d'une bordure pour n'importe quel élément, ainsi que la distance entre la bordure de l'élément et les autres éléments, et la distance entre la bordure de l'élément et le contenu de l'élément vous permet de modifier librement le contenu de l'élément ; majuscules, décoration et autres effets de page.

• Facile à utiliser et à modifier

CSS peut définir des styles dans l'attribut style des éléments HTML ou dans les documents HTML. le style peut également être déclaré dans un fichier CSS spécial pour référence par la page HTML. En bref, les feuilles de style CSS peuvent stocker et gérer toutes les déclarations de style de manière unifiée.

De plus, les éléments du même style peuvent être classés et définis en utilisant le même style, vous pouvez également appliquer un certain style à toutes les balises HTML portant le même nom, ou vous pouvez attribuer un style CSS à un certain style. dans les éléments de la page. Si nous voulons modifier le style, il suffit de trouver l'instruction de style correspondante dans la liste de styles et de la modifier.

• Application multipage

La feuille de style CSS peut être stockée dans un fichier CSS séparé, afin que nous puissions utiliser le même style CSS feuille. Théoriquement, les feuilles de style CSS n'appartiennent à aucun fichier de page et peuvent être référencées dans n'importe quel fichier de page. De cette manière, les styles de plusieurs pages peuvent être unifiés.

• Cascading

En termes simples, la cascade consiste à définir le même style plusieurs fois sur un élément, qui utilisera la dernière valeur d'attribut définie. . Par exemple, si vous utilisez le même ensemble de feuilles de style CSS pour plusieurs pages d'un site et si vous souhaitez utiliser d'autres styles pour certains éléments de certaines pages, vous pouvez définir une feuille de style distincte pour ces styles et les appliquer au page. Ces styles définis ultérieurement remplaceront les paramètres de style précédents et ce que vous verrez dans le navigateur sera l'effet de style défini en dernier.

• Compression de page

Dans les sites Web qui utilisent HTML pour définir les effets de page, un grand nombre de tableaux et d'éléments de police répétés sont souvent nécessaires pour former diverses spécifications. Le résultat est qu'un grand nombre de balises HTML seront générées, ce qui augmentera la taille du fichier de page. Placer la déclaration de style séparément dans la feuille de style CSS peut réduire considérablement la taille de la page, de sorte que le temps passé à charger la page sera également considérablement réduit. De plus, la réutilisation des feuilles de style CSS réduit davantage la taille de la page et réduit le temps de téléchargement.

[Apprentissage recommandé : Tutoriel vidéo CSS]

Bases du langage

Attributs et valeurs d'attribut

Attributs

Le nom d'un attribut est un identifiant légal, et ce sont des mots-clés en syntaxe CSS. Un attribut spécifie un aspect du formatage. Par exemple : color est l'attribut de couleur du texte et text-indent spécifie le retrait du paragraphe.

Pour maîtriser l'utilisation d'un attribut, six aspects doivent être compris. La description spécifique est la suivante :

①La valeur légale de cet attribut. Évidemment, l'attribut d'indentation de paragraphe text-indent ne peut se voir attribuer qu'une valeur indiquant la longueur et une valeur indiquant le motif d'arrière-plan. L'attribut image doit prendre une valeur indiquant le lien d'emplacement de l'image ou le mot clé none pour indiquer l'absence de motif d'arrière-plan.

②La valeur par défaut de cet attribut (valeur initiale). Lorsque cet attribut n'est pas spécifié dans la feuille de style et que l'attribut ne peut pas être hérité de son élément parent, le navigateur supposera que l'attribut prend sa valeur par défaut.

③Les éléments auxquels cet attribut s'applique (S'applique à). Certains attributs ne s'appliquent qu'à certains éléments individuels. Par exemple, l'attribut espace blanc ne s'applique qu'aux éléments de niveau bloc. L'attribut white-space peut prendre trois valeurs : normal, pre et nowrap. Lorsqu'il est défini sur normal, le navigateur ignorera les caractères d'espacement consécutifs et n'affichera qu'un seul caractère d'espacement. Lorsque pre est pris, les caractères d'espacement consécutifs sont conservés. Lors de la prise de nowrap, les caractères d'espacement consécutifs sont ignorés et les lignes ne sont pas automatiquement renvoyées à la ligne.

④Si la valeur de cet attribut est héritée par le niveau suivant.

⑤ Si cet attribut peut prendre une valeur en pourcentage, comment le pourcentage sera-t-il interprété ? Autrement dit, quelle est la norme par rapport à la valeur en pourcentage. Par exemple, l'attribut margin peut prendre une valeur en pourcentage, qui correspond à la largeur du conteneur par rapport à l'élément où la marge est stockée.

⑥Les groupes de médias auxquels appartient cet attribut.

Valeur d'attribut

①Entiers et nombres réels

Ceci n'est pas très différent des nombres entiers et réels au sens ordinaire. Seules les décimales à virgule flottante peuvent être utilisées en CSS, et la notation scientifique ne peut pas être utilisée pour représenter des nombres réels comme les autres langages de programmation. Autrement dit, 1.2E3 sera illégal en CSS. Voici quelques exemples corrects, entiers : 128, -313, nombres réels : 12,20, 1415, -12,03.

②Quantité de longueur

Une quantité de longueur se compose d'un nombre entier ou réel plus l'unité de longueur correspondante. Les grandeurs de longueur sont souvent utilisées pour positionner les éléments. Le positionnement est divisé en positionnement absolu et positionnement relatif, de sorte que l'unité de longueur est également divisée en unité de longueur relative et unité de longueur absolue.

Les unités de longueur relative sont : em - la hauteur de la police actuelle, qui est la valeur de l'attribut font.size ; ex - la hauteur de la lettre minuscule x dans la police actuelle ; d'un pixel, sa longueur réelle est déterminée par les paramètres du moniteur.

Un autre point à noter est que les éléments enfants n'héritent pas des valeurs de longueur relative de leurs éléments parents, mais uniquement de leurs valeurs calculées réelles.

③Pourcentages

Les pourcentages sont des nombres plus un signe de pourcentage. Évidemment, les pourcentages sont toujours relatifs, donc comme les longueurs relatives, les pourcentages ne sont pas hérités par les éléments enfants. [10]

Sélecteur

Sélecteur de type

Un sélecteur en CSS est le nom du type d'élément. À l'aide de ce sélecteur (appelé sélecteur de type), une déclaration peut être appliquée à chaque instance de ce type d'élément. Par exemple, le sélecteur de la règle simple suivante est H1, la règle s'applique donc à tous les éléments H1 du document :

H1 {color:red}

Sélecteur d'attribut simple

Attribut CLASS

L'attribut CLASS permet d'appliquer une déclaration à un groupe d'éléments qui ont la même valeur sur l'attribut CLASS. Tous les éléments de BODY ont l'attribut CLASS. Essentiellement, vous utilisez l'attribut CLASS pour classer les éléments, créez des règles dans votre feuille de style pour référencer la valeur de l'attribut CLASS, puis le navigateur applique automatiquement ces attributs à ce groupe d'éléments.

Le sélecteur de classe commence par un désignateur (point), qui est utilisé pour indiquer quel type de sélecteur suit. Pour le sélecteur de classe, la période a été choisie car dans de nombreux langages de programmation elle est associée au terme « classe ». Traduit en anglais, un identifiant signifie « un élément avec un nom de classe ».

Attribut ID

Le fonctionnement de l'attribut ID est similaire à l'attribut CLASS, mais il y a une différence importante : la valeur de l'attribut ID doit être unique dans l'ensemble du document. Cela permet d'utiliser l'attribut ID pour définir des règles de style pour des éléments individuels. Un sélecteur contenant un attribut ID est appelé sélecteur d'ID.

Il est à noter que l'identifiant du sélecteur d'ID est le symbole dièse (#). L'identifiant est utilisé pour rappeler au navigateur que ce qui vient ensuite est une valeur d'identification.

Attribut STYLE

Bien que les valeurs des attributs CLASS et ID puissent être utilisées dans les sélecteurs, l'attribut STYLE peut en fait remplacer l'ensemble du mécanisme de sélection. Plutôt que d'avoir simplement une valeur qui peut être référencée dans un sélecteur (ce que possèdent ID et CLASS), la valeur de l'attribut STYLE est en fait une ou plusieurs déclarations CSS.

Normalement, avec CSS, le concepteur placera toutes les règles de style dans une feuille de style, située dans l'élément STYLE en haut du document (ou liée en externe). Cependant, l'utilisation de l'attribut STYLE permet de contourner la feuille de style et de placer la déclaration directement dans la balise d'ouverture du document.

Types de sélecteurs combinés

Les sélecteurs de type, les sélecteurs d'ID et les sélecteurs de classe peuvent être combinés en différents types de sélecteurs pour former des sélecteurs plus complexes. En combinant des sélecteurs, vous pouvez être plus précis sur les éléments auxquels vous souhaitez donner une certaine représentation. Par exemple, pour combiner un sélecteur de type et un sélecteur de classe, un élément doit répondre à deux exigences : il doit être du bon type et de la bonne classe pour que les règles de style puissent agir sur lui.

Informations externes : pseudo-classes et pseudo-éléments

En CSS1, les styles étaient généralement basés sur des balises et des attributs qui apparaissaient dans le code source HTML. Cette approche convient parfaitement à de nombreuses situations de conception, mais elle ne parvient pas à obtenir certains effets de conception courants que les concepteurs souhaitent obtenir.

La conception de pseudo-classes et de pseudo-éléments peut produire certains de ces effets. Ces deux mécanismes étendent les capacités d'expression de CSS. En CSS1, les pseudo-classes étaient utilisées pour modifier le style des liens dans un document en fonction de circonstances telles que l'accès au lien, le moment où il a été accédé et la manière dont l'utilisateur a interagi avec le document. A l'aide de pseudo-éléments, vous pouvez modifier le style de la première lettre et de la première ligne d'un élément, ou ajouter des éléments qui n'apparaissent pas dans le document source.

Ni les pseudo-classes ni les pseudo-éléments n'existent en HTML ; c'est-à-dire qu'ils ne sont pas visibles dans le code HTML. Les deux mécanismes ont été soigneusement conçus pour être étendus dans les futures versions de CSS, c'est-à-dire pour obtenir davantage d'effets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!