"Manuel de référence CSS3 dernière édition" est le manuel d'apprentissage de référence en ligne officiel CSS3. Ce manuel de développement en ligne CSS3 contient diverses propriétés CSS3, syntaxe, définitions, méthodes d'utilisation, exemples d'opérations, etc. Consultez les documents manuels en ligne ! Remarque : CSS3 est une version améliorée de la technologie CSS. Le développement du langage CSS3 évolue vers la modularisation. Ces modules incluent : le modèle de boîte, le module de liste, la méthode de lien hypertexte, le module de langage, l'arrière-plan et la bordure, les effets de texte, la mise en page multi-colonnes, etc.
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, un module de langage, et l'arrière-plan et des modules tels que les bordures, les effets de texte et la mise en page multi-colonnes.
Un changement majeur dans l’évolution du CSS est la décision du W3C de diviser CSS3 en une série de modules. Les fournisseurs de navigateurs innovent rapidement au rythme du CSS. Ainsi, en adoptant une approche modulaire, les éléments de la spécification CSS3 peuvent avancer à des vitesses différentes, car les différents fournisseurs de navigateurs ne prennent en charge que des fonctionnalités données.
Mais différents navigateurs prennent en charge différentes fonctionnalités à des moments différents, ce qui complique également le développement entre navigateurs.
Conseils : Avant de continuer à apprendre CSS3, vous devez avoir une compréhension de base de CSS et HTML.
CSS est utilisé pour contrôler le style et la mise en page des pages Web. CSS3 est la dernière norme CSS.
Bases du langage CSS3
La syntaxe de CSS3 est basée sur la version originale de CSS, qui permet aux utilisateurs de spécifier des éléments HTML spécifiques dans des balises sans utiliser de classes, d'ID ou de JavaScript redondants.
La plupart des sélecteurs CSS ne sont pas nouvellement ajoutés dans CSS3, ils ne sont tout simplement pas largement utilisés dans les versions précédentes.
Si vous souhaitez essayer d'obtenir une balise propre et légère et une meilleure séparation entre structure et performances, les sélecteurs avancés sont très utiles. Ils peuvent réduire le nombre de classes et d'identifiants dans la balise et permettre aux concepteurs de gérer davantage les feuilles de style. facilement.
Créez et exécutez la première instance CSS3
Instance
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
N'est-ce pas très simple et amusant ! Le principe du CSS3 est le même que celui du CSS Il s'agit de personnaliser les sélecteurs de la feuille de style dans la page web, puis de référencer ces sélecteurs en grand nombre dans la page web.
Conseils : Notre tutoriel CSS3 vous aidera à apprendre étape par étape les nouvelles fonctionnalités de CSS3 et à contrôler le style et la mise en page de plusieurs pages Web en même temps. Si vous avez des questions, veuillez vous rendre sur le site Web PHP chinois CSS3 Community pour poser vos questions, et des internautes enthousiastes y répondront pour vous.
Avantages de CSS3
Réduire les coûts de développement et de maintenance
Avant l'émergence de CSS3, les développeurs devaient souvent ajouter des balises HTML supplémentaires pour obtenir un effet de coin arrondi, en utilisant une ou plusieurs images pour compléter l'utilisation. CSS3 ne nécessite qu'une seule balise, qui peut être réalisée à l'aide de la propriété border-radius en CSS3.
De cette manière, la technologie CSS3 peut libérer les gens du travail de dessin, de découpe et d'optimisation des images.
Si vous devez ajuster l'arc ou la couleur du coin arrondi ultérieurement, en utilisant CSS2.1, vous devez dessiner et couper l'image à partir de zéro pour y parvenir en utilisant CSS3, il vous suffit de modifier la valeur de l'attribut border-radius. pour terminer rapidement la modification.
Les fonctionnalités d'animation fournies par CSS3 permettent aux développeurs de rester à l'écart de JavaScript lors de l'implémentation de certains boutons dynamiques ou d'une navigation dynamique, de sorte que les développeurs n'ont pas besoin de passer beaucoup de temps à écrire des scripts ou à rechercher des plug-ins de script appropriés pour s'adapter à certains effets de site Web dynamiques.
Améliorer les performances des pages
De nombreuses technologies CSS3 deviennent des "remplacements" des images en fournissant les mêmes effets visuels, en d'autres termes, en réduisant l'imbrication de balises redondantes et le nombre d'images utilisées lors du développement Web, ce qui signifie que les utilisateurs auront moins de contenu à télécharger et les pages se chargeront plus rapidement.
De plus, moins d'images, de scripts et de fichiers Flash peuvent réduire le nombre de requêtes HTTP lorsque les utilisateurs visitent le site Web, ce qui est l'un des meilleurs moyens d'améliorer la vitesse de chargement des pages. L'utilisation de CSS3 pour créer un site Web graphique ne nécessite aucune image, ce qui réduit considérablement le nombre de requêtes HTTP et améliore la vitesse de chargement des pages.
Par exemple, les effets d'animation CSS3 peuvent réduire les requêtes HTTP pour les fichiers JavaScript et Flash, mais peuvent nécessiter que le navigateur effectue beaucoup de travail pour terminer le rendu de cet effet d'animation, ce qui peut entraîner une réponse lente du navigateur et entraîner une perte d'utilisateur. .
Par conséquent, vous devez bien réfléchir lorsque vous utilisez certains effets spéciaux complexes. En fait, de nombreuses technologies CSS3 peuvent améliorer considérablement les performances des pages en toutes circonstances.
CSS3 sera entièrement rétrocompatible, il ne sera donc pas nécessaire de modifier la conception pour qu'ils continuent de fonctionner. Les navigateurs Web continueront également à prendre en charge CSS2.
Ce que couvre ce manuel du didacticiel CSS3
Ce manuel du didacticiel CSS3 couvre toutes les nouvelles fonctionnalités CSS3, y compris les effets de coins arrondis, les bordures graphiques, les ombres de bloc et les ombres de texte, l'utilisation de RGBA pour obtenir des effets de transparence, des effets de dégradé, en utilisant les implémentations @Font-Face. polices personnalisées, images d'arrière-plan multiples, traitement de la déformation du texte ou de l'image (rotation, mise à l'échelle, inclinaison, mouvement), mise en page multi-colonnes, requête multimédia et autres nouvelles fonctionnalités, introduction et exemples d'exécution.
Conseils : Chaque chapitre de ce tutoriel contient de nombreux exemples CSS3. Vous pouvez directement cliquer sur le bouton "Exécuter l'exemple" pour afficher les résultats en cours d'exécution en ligne. Ces exemples vous aideront à mieux comprendre et utiliser les nouvelles fonctionnalités CSS3.
Autres ressources de référence d'apprentissage liées au CSS3
En plus de l'expansion des connaissances sur le côté droit de cette page, les ressources suivantes sont également sélectionnées pour tout le monde
Dernier chapitre
- CSS3 多媒体查询实例 2016-10-18
- CSS3 多媒体查询 2016-10-18
- CSS3 弹性盒子 2016-10-18
- CSS3 框大小 2016-10-18
- CSS 分页 2016-10-18
- CSS 按钮 2016-10-18
- CSS 图片 2016-10-18
- CSS3 用户界面 2016-10-18
Cours connexes
- Introduction rapide au développement web front-end 2021-12-10
- Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original] 2022-09-30
- Tutoriel vidéo de démarrage de Gulp 2022-04-18
- Tutoriel vidéo CSS3 des frères d'armes Gao Luofeng 2022-04-20
- Tutoriel vidéo d'exemple de base d'application Web de développement AngularJS 2022-04-18
- Contact complet Ajax 2022-04-13
- Tutoriel vidéo de base du framework MUI 2022-04-13
- Cours d'essai de cours de formation en ligne 2019-01-10