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)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

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)

Comment utiliser le bouton bootstrap Comment utiliser le bouton bootstrap Apr 07, 2025 pm 03:09 PM

Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton

Comment insérer des photos sur bootstrap Comment insérer des photos sur bootstrap Apr 07, 2025 pm 03:30 PM

Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.

Comment régler la barre de navigation bootstrap Comment régler la barre de navigation bootstrap Apr 07, 2025 pm 01:51 PM

Bootstrap fournit un guide simple pour configurer les barres de navigation: l'introduction de la bibliothèque bootstrap pour créer des conteneurs de barre de navigation Ajouter l'identité de marque Créer des liens de navigation Ajouter d'autres éléments (facultatif) Styles d'ajustement (facultatif)

Comment redimensionner le bootstrap Comment redimensionner le bootstrap Apr 07, 2025 pm 03:18 PM

Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-

Comment télécharger des fichiers sur bootstrap Comment télécharger des fichiers sur bootstrap Apr 07, 2025 pm 01:09 PM

La fonction de téléchargement de fichiers peut être implémentée via Bootstrap. Les étapes sont les suivantes: introduire les fichiers Bootstrap CSS et JavaScript; créer des champs d'entrée de fichier; créer des boutons de téléchargement de fichiers; gérer les téléchargements de fichiers (à l'aide de FormData pour collecter des données, puis envoyer au serveur); style personnalisé (facultatif).

Comment vérifier la date de bootstrap Comment vérifier la date de bootstrap Apr 07, 2025 pm 03:06 PM

Pour vérifier les dates dans Bootstrap, suivez ces étapes: introduisez les scripts et styles requis; initialiser le composant de sélecteur de date; Définissez l'attribut Data-BV-Date pour activer la vérification; Configurer les règles de vérification (telles que les formats de date, les messages d'erreur, etc.); Intégrez le cadre de vérification de bootstrap et vérifiez automatiquement l'entrée de date lorsque le formulaire est soumis.

Comment configurer le cadre de bootstrap Comment configurer le cadre de bootstrap Apr 07, 2025 pm 03:27 PM

Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.

Comment afficher la date de bootstrap Comment afficher la date de bootstrap Apr 07, 2025 pm 03:03 PM

Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.

See all articles