Les modules inclus dans CSS3 sont?: 1. Le module Liste, utilisé pour ajouter des styles aux listes HTML?; 2. La disposition multi-colonnes, qui étend le mode de disposition des blocs pour faciliter la définition du texte multi-colonnes?; , qui fournit une variété de fa?ons de définir les couleurs, telles que le nom de la couleur, rgb(), hsl(), etc. 4. Requêtes multimédias afin que CSS puisse agir sur différents appareils.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

CSS3 est une version améliorée de la technologie CSS (Cascading Style Sheets). Elle a été formulée en 1999. Le 23 mai 2001, le W3C a achevé la version de travail de CSS3, qui comprend principalement un modèle de bo?te, un module de liste, une méthode d'hyperlien et un module de langage. , Modules tels que l'arrière-plan et la bordure, les effets de texte, la mise en page multi-colonnes, etc.

Un changement majeur dans l'évolution du CSS est la décision du W3C de diviser CSS3 en une série de modules.

Dès 2001, le W3C a finalisé le projet de spécification de CSS3. Une nouveauté de la spécification CSS3 est qu'elle est divisée en plusieurs modules indépendants.

• D'une part, le diviser en plusieurs modules plus petits est plus pratique pour la mise à jour et la publication en temps opportun des spécifications, et l'ajustement en temps opportun du contenu des modules. Ces modules sont implémentés et publiés indépendamment, ce qui jette également les bases de. extension future de CSS.

• D'un autre c?té, en raison des limitations des appareils pris en charge et des fabricants de navigateurs, les appareils ou les fabricants peuvent prendre en charge de manière sélective certains modules et un sous-ensemble de CSS3, ce qui est propice à la promotion de CSS3.

Ce qui suit est la spécification de chaque module de CSS3 à compter de janvier 2021?:

Par exemple?:

module de couleur css3

CSS3 prend en charge la méthode de représentation des couleurs

• exprimée par le nom anglais de la couleur. Le nom anglais représente une couleur, mais la représentation est très limitée et difficile à retenir et à interroger.

• est représenté par une couleur hexadécimale. Le principe des trois couleurs primaires de couleur et de lumière peut être consulté dans le tableau.

• est représenté par RVB (r, g, b). Le principe des trois couleurs primaires de lumière, rouge + vert + bleu.

• est représenté par hsl (Teinte, Saturation, Légèreté). Teinte + Saturation + Luminosité.

• est représenté par rgba (r, g, b, a). Le principe des trois couleurs primaires lumière, rouge, vert, bleu + transparence. a ∈ [0, 1], 0 représente une transparence totale.

• est représenté par hsla (Teinte, Saturation, Luminosité, alpha). Teinte, saturation, luminosité + transparence. alpha ∈ [0, 1], 0 représente une transparence totale.

Mise en page multi-colonnes CSS3

Mise en page multi-colonnes CSS étend le mode de mise en page en bloc pour faciliter la définition de texte multi-colonnes. Si une ligne est trop longue, les gens ont du mal à lire le texte ; si les yeux mettent trop de temps à passer de la fin d’une ligne au début de la suivante, ils perdent la ligne sur laquelle ils se trouvent. Par conséquent, pour tirer le meilleur parti d’un grand écran, les auteurs doivent placer c?te à c?te des colonnes de texte de différentes largeurs, comme un journal.

css3 Media Query

Avec la popularité rapide des appareils mobiles, les utilisateurs ne se contentent plus de parcourir le contenu Web via des systèmes informatiques traditionnels. De plus en plus d'utilisateurs utilisent des smartphones, des tablettes ou d'autres appareils de différentes tailles pour naviguer. Contenu Web Afin de garantir que les utilisateurs utilisant différents appareils puissent vivre une bonne expérience, des requêtes multimédias sont nécessaires.

La requête multimédia est l'une des fonctions les plus importantes des feuilles de style CSS. La requête multimédia fait référence à la distinction de divers appareils (tels que les ordinateurs, les téléphones mobiles, les tablettes, les appareils braille, etc.) en fonction de différents types de médias (appareils). types) et conditions ), et définissez respectivement différents styles CSS pour eux. Les requêtes multimédias permettent à CSS d'agir avec plus de précision sur différents appareils ou sur différentes conditions sur le même appareil, afin que tous les utilisateurs puissent bénéficier d'une bonne expérience utilisateur.

/* 在小于或等于 992 像素的屏幕上，將背景色設(shè)置為藍色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* 在 600 像素或更小的屏幕上，將背景色設(shè)置為橄欖色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

(Partage de vidéos d'apprentissage?: tutoriel vidéo CSS, front-end web)

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!