Quels modules CSS3 inclut-il ?

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 :

Recommandésélecteurs-32001.04.04 - 2012.06.19Enquête média

Time	Nom	Dernier statut	Module
1999.01. 27 - 2019.08.13	Module de décoration de texte	recommandation du candidat	css-text-decor-3
1999.06.22 - 2018.1 0.1 8	Module multimédia de pagination	Brouillon de travail	css-page-3
1999.06.23 - 2019.10.15	Mise en page multi-colonnes	Brouillon de travail	css-multicol- 1
1999.06.22 - 2018.06.19	Module couleur	Recommandé	css-color-3
25.06.1999 - 20.03.2014	Module Espace de noms
		Recommandé	css3-mediaqueries
2001.05.17 - 2020.12.22	Module texte	Candidat e recommandation	css-text-3
2001.07.13 - 2021.02.11	Héritage en cascade	Recommandé	css-cascade-3
200 1.07.13 - 2019.06.06	Valeur module Unité de somme	recommandation du candidat	css-values-3
2001.07.26 - 2020.12.22	Modèle de boîte de base	Recommandations de candidats	css-box -3
2001.07.31 - 2018.09.20	Module de polices	Recommandé	css-fonts-3
24.09.2001 - 22.12.2020	Module d'arrière-plan et de bordure	Recommandation du candidat	css-backgrounds-3
2002.02.20 - 2020.11.17	Module de liste	Brouillon de travail	css- lists-3
2002.05.15 - 2020.08.27	inline layout module	ébauche de travail	css-inline-3
2002.08.02 - 2018.06. 21	Module d'interface utilisateur de base	Recommandé	css-ui-3
2003.05.14 - 2019.08.02	Module de génération de contenu	fonctionne Draft	css-content-3
2003.08.13 - 2019.07.16	Module de syntaxe	Recommandation de candidat	css-syntaxe-3
24.02.2004 - 14.10.2014	Module d'affichage des hyperliens	notes de groupe de travail	css3-hyperlinks
2005.12.15 - 2015.03.26	Module de mise en page des modèles	Notes du groupe de travail	css -template -3
2006.06.12 - 2014.05.13	Le module multimédia paginé génère du contenu	ébauche de travail	css-gcpm-3
2008.08.01 - 2014.10 .14	Module Marquee	Notes du groupe de travail	css3-marquee
2009.07.23 - 2020.12.17	Module Image	Recommandation de candidat	css-images-3
2010.12.02 - 2019.12.10	mode d'écriture	recommandé	css-writing -modes-3
2011.09.01 - 2020.12.08	Module de règles conditionnelles	Recommandation du candidat	css3-conditionalr
2012.02.07 - 2020.05.19	Module de disposition de positionnement	Brouillon de travail	css-position-3
2012.02.28 - 2018.12.04	Fragment Module	Candidate Recommendation	css-break-3
2012.06 .12 - 2020.04.21	Module de disposition des boîtes	Brouillon de travail	css-align-3
2012.09.27 - 2020.12.18	module de taille de largeur et de hauteur	ébauche de travail	css-sizing-3
2012.10.09 - 2017.12.14	counter style	recommandation de candidat	css-counter-styles-3
2013. 04.18 - 2 020.06.03	Débordement module	Working Draft	css-overflow-3
2014.02.20 - 2020.12.18	Type d'affichage	Recommandations de candidats	css-display- 3

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 像素的屏幕上，将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
@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!