Que signifie CSS ?

Apr 27, 2021 pm 03:22 PM
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.

Que signifie CSS ?

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}
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que signifie l'espace réservé en vue Que signifie l'espace réservé en vue May 07, 2024 am 09:57 AM

Dans Vue.js, l'attribut placeholder spécifie le texte d'espace réservé de l'élément d'entrée, qui s'affiche lorsque l'utilisateur n'a pas saisi de contenu, fournit des conseils ou des exemples de saisie et améliore l'accessibilité du formulaire. Son utilisation consiste à définir l'attribut placeholder sur l'élément d'entrée et à personnaliser l'apparence à l'aide de CSS. Les meilleures pratiques consistent à être pertinent par rapport à la contribution, à être court et clair, à éviter le texte par défaut et à prendre en compte l'accessibilité.

Que signifie span en js Que signifie span en js May 06, 2024 am 11:42 AM

La balise span peut ajouter des styles, des attributs ou des comportements au texte. Elle est utilisée pour : ajouter des styles, tels que la couleur et la taille de la police. Définissez des attributs tels que l'identifiant, la classe, etc. Comportements associés tels que clics, survols, etc. Marquez le texte pour un traitement ultérieur ou une citation.

Que signifie rem en js Que signifie rem en js May 06, 2024 am 11:30 AM

REM en CSS est une unité relative par rapport à la taille de la police de l'élément racine (html). Il présente les caractéristiques suivantes : relative à la taille de la police de l'élément racine, non affectée par l'élément parent. Lorsque la taille de la police de l'élément racine change, les éléments utilisant REM s'ajusteront en conséquence. Peut être utilisé avec n’importe quelle propriété CSS. Les avantages de l'utilisation de REM incluent : Réactivité : gardez le texte lisible sur différents appareils et tailles d'écran. Cohérence : assurez-vous que les tailles de police sont cohérentes sur l’ensemble de votre site Web. Évolutivité : modifiez facilement la taille de police globale en ajustant la taille de police de l'élément racine.

Comment introduire des images dans vue Comment introduire des images dans vue May 02, 2024 pm 10:48 PM

Il existe cinq façons d'introduire des images dans Vue : via une URL, une fonction require, un fichier statique, une directive v-bind et une image d'arrière-plan CSS. Les images dynamiques peuvent être gérées dans les propriétés calculées ou les écouteurs de Vue, et des outils fournis peuvent être utilisés pour optimiser le chargement des images. Assurez-vous que le chemin est correct sinon une erreur de chargement apparaîtra.

Quelle est la fonction de la balise span Quelle est la fonction de la balise span Apr 30, 2024 pm 01:54 PM

La balise SPAN est une balise HTML en ligne utilisée pour mettre en évidence le texte en appliquant des attributs tels que le style, la couleur et la taille de la police. Cela inclut la mise en valeur du texte, le regroupement du texte, l'ajout d'effets de survol et la mise à jour dynamique du contenu. Il est utilisé en plaçant les balises <span> et </span> autour du texte que vous souhaitez mettre en valeur, et est manipulé via le style CSS ou JavaScript. Les avantages des balises SPAN incluent la clarté sémantique, la flexibilité du style et la facilité de maintenance.

Comment envelopper l'invite dans js Comment envelopper l'invite dans js May 01, 2024 am 06:24 AM

Lorsque vous utilisez la méthode prompt() en JavaScript, vous pouvez réaliser des sauts de ligne grâce aux trois méthodes suivantes : 1. Insérez le caractère « \n » à l'endroit où vous souhaitez couper la ligne. 2. Utilisez le caractère de saut de ligne dans le champ ; texte d'invite ; 3. Utilisez le style "white" -space: pre" de CSS pour forcer les sauts de ligne.

Dans quelle langue le plug-in du navigateur est-il écrit ? Dans quelle langue le plug-in du navigateur est-il écrit ? May 08, 2024 pm 09:36 PM

Les plug-ins de navigateur sont généralement écrits dans les langages suivants : Langages front-end : JavaScript, HTML, CSS Langages back-end : C++, Rust, WebAssembly Autres langages : Python, Java

Qu'est-ce qu'un nœud dans js Qu'est-ce qu'un nœud dans js May 07, 2024 pm 09:06 PM

Les nœuds sont des entités du DOM JavaScript qui représentent des éléments HTML. Ils représentent un élément spécifique de la page et peuvent être utilisés pour accéder et manipuler cet élément. Les types de nœuds courants incluent les nœuds d'élément, les nœuds de texte, les nœuds de commentaires et les nœuds de document. Grâce aux méthodes DOM telles que getElementById(), vous pouvez accéder aux nœuds et opérer sur eux, notamment en modifiant les propriétés, en ajoutant/supprimant des nœuds enfants, en insérant/remplaçant des nœuds et en clonant des nœuds. La traversée des nœuds aide à naviguer dans la structure DOM. Les nœuds sont utiles pour créer dynamiquement du contenu de page, la gestion des événements, l'animation et la liaison de données.

See all articles