Introduction à CSS3

Introduction

CSS est une feuille de style en cascade. La technologie CSS est utilisée dans le développement Web pour contrôler efficacement la mise en page, les polices, les couleurs, les arrière-plans et autres effets de la page. Avec seulement quelques modifications simples, vous pouvez changer l'apparence et le format de vos pages Web. CSS3 est une version améliorée de CSS. Ce nouvel ensemble de standards fournit des spécifications plus riches et plus pratiques, telles que : modèle de boîte, module de liste, méthode d'hyperlien, module de langage, arrière-plan et bordure, effets de texte, mise en page multi-colonnes, etc. , de nombreux navigateurs prennent déjà en charge cette spécification mise à niveau, tels que : Firefox, Chrome, Safari, Opera, etc. L'utilisation de la technologie CSS3 dans le développement Web embellira considérablement nos applications, améliorera l'expérience utilisateur et améliorera également considérablement les performances des programmes.

CSS3 est entièrement rétrocompatible, vous n'avez donc pas besoin de modifier votre conception existante. Les navigateurs prendront toujours en charge CSS2.

Modules CSS3

CSS3 est divisé en "modules". Les anciennes spécifications ont été divisées en petits morceaux et de nouvelles ont été ajoutées.

Certains des modules CSS3 les plus importants sont les suivants :

Sélecteur

Modèle de boîte

Arrière-plan et bordure

Effets de texte

Conversion 2D/3D

Animation

Mise en page multi-colonnes

Interface utilisateur


Liste quelques nouvelles fonctionnalités :

border

attribut border-color
boder- attribut d'image
attribut border-radius
attribut box-shadow

background

attribut background-origin et attribut background-clip
attribut background-size
arrière-plans multiples

Couleur

Valeur de couleur HSL
Valeur de couleur HSLA
Attribut d'opacité
Valeur de couleur RGBA

Effet de texte

ombre de texte attribut
attribut de débordement de texte
attribut de retour à la ligne

interface utilisateur

attribut de dimensionnement de la boîte
attribut de redimensionnement
attribut de contour
nav-top, nav-right , nav-bottom, nav-left Attribut

Sélecteur

Sélecteur d'attribut

Modèle de boîte de base

attribut overflow-x et overflow -y attribut

contenu généré

attribut de contenu

autres modules

module de requêtes multimédias
module de mise en page multi-colonnes
Module de police Web
Module Discours



Formation continue
||
<meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div { width:100px; height:75px; background-color:blue; border:1px solid black; } div{ -webkit-text-fill-color: red; -webkit-text-stroke-color: yellow; -webkit-text-stroke-width: 1.75px; } div#div2 { transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(60deg); /* Safari and Chrome */ } </style> </head> <body> <div>请看文字特效</div> <div id="div2">请看图形特效</div> </body> </html>
soumettreRéinitialiser le code
  • Recommandations de cours
  • Téléchargement du didacticiel