CSS - Guide rapide
Superior styles to HTML - CSS a un éventail d'attributs beaucoup plus large que HTML, vous pouvez donc donner une bien meilleure apparence à votre page HTML par rapport aux attributs HTML.
Multiple Device Compatibility- Les feuilles de style permettent d'optimiser le contenu pour plusieurs types d'appareils. En utilisant le même document HTML, différentes versions d'un site Web peuvent être présentées pour les appareils de poche tels que les PDA et les téléphones portables ou pour l'impression.
Global web standards- Les attributs HTML sont désormais obsolètes et il est recommandé d'utiliser CSS. C'est donc une bonne idée de commencer à utiliser CSS dans toutes les pages HTML pour les rendre compatibles avec les futurs navigateurs.
Qui crée et gère le CSS?
CSS est créé et maintenu par un groupe de personnes au sein du W3C appelé le CSS Working Group. Le groupe de travail CSS crée des documents appelés spécifications. Lorsqu'une spécification a été discutée et officiellement ratifiée par les membres du W3C, elle devient une recommandation.
Ces spécifications ratifiées sont appelées recommandations car le W3C n'a aucun contrôle sur la mise en œuvre réelle du langage. Des entreprises et organisations indépendantes créent ce logiciel.
NOTE - Le World Wide Web Consortium, ou W3C, est un groupe qui formule des recommandations sur la manière dont Internet fonctionne et comment il doit évoluer.
Versions CSS
Les feuilles de style en cascade de niveau 1 (CSS1) sont sorties du W3C en tant que recommandation en décembre 1996. Cette version décrit le langage CSS ainsi qu'un simple modèle de formatage visuel pour toutes les balises HTML.
CSS2 est devenu une recommandation du W3C en mai 1998 et s'appuie sur CSS1. Cette version ajoute la prise en charge des feuilles de style spécifiques aux médias, par exemple les imprimantes et les appareils auditifs, les polices téléchargeables, le positionnement des éléments et les tableaux.
selector { property: value }
Example - Vous pouvez définir une bordure de tableau comme suit -
table{ border :1px solid #C00; }Ici, la table est un sélecteur et la bordure est une propriété et la valeur donnée 1px solid # C00 est la valeur de cette propriété.
Vous pouvez définir des sélecteurs de différentes manières simples en fonction de votre confort. Permettez-moi de mettre ces sélecteurs un par un.
Les sélecteurs de type
C'est le même sélecteur que nous avons vu ci-dessus. Encore une fois, un autre exemple pour donner une couleur à tous les titres de niveau 1 -
h1 {
color: #36CFFF;
}Les sélecteurs universels
Plutôt que de sélectionner des éléments d'un type spécifique, le sélecteur universel correspond tout simplement au nom de n'importe quel type d'élément -
* {
color: #000000;
}Cette règle rend le contenu de chaque élément de notre document en noir.
Les sélecteurs descendants
Supposons que vous souhaitiez appliquer une règle de style à un élément particulier uniquement lorsqu'il se trouve à l'intérieur d'un élément particulier. Comme indiqué dans l'exemple suivant, la règle de style s'applique à l'élément <em> uniquement lorsqu'il se trouve à l'intérieur de la balise <ul>.
ul em {
color: #000000;
}Les sélecteurs de classe
Vous pouvez définir des règles de style en fonction de l'attribut de classe des éléments. Tous les éléments ayant cette classe seront formatés selon la règle définie.
.black {
color: #000000;
}Cette règle rend le contenu en noir pour chaque élément avec l'attribut de classe défini sur noir dans notre document. Vous pouvez le rendre un peu plus particulier. Par exemple -
h1.black {
color: #000000;
}Cette règle rend le contenu en noir uniquement pour les éléments <h1> avec l'attribut de classe défini sur noir .
Vous pouvez appliquer plusieurs sélecteurs de classe à un élément donné. Prenons l'exemple suivant -
<p class = "center bold">
This para will be styled by the classes center and bold.
</p>Les sélecteurs d'ID
Vous pouvez définir des règles de style en fonction de l' attribut id des éléments. Tous les éléments ayant cet identifiant seront formatés selon la règle définie.
#black {
color: #000000;
}Cette règle rend le contenu en noir pour chaque élément avec l' attribut id défini sur noir dans notre document. Vous pouvez le rendre un peu plus particulier. Par exemple -
h1#black {
color: #000000;
}Cette règle rend le contenu en noir uniquement pour les éléments <h1> avec l' attribut id défini sur noir .
La vraie puissance des sélecteurs d' identifiant est lorsqu'ils sont utilisés comme base pour les sélecteurs descendants, par exemple -
#black h2 {
color: #000000;
}Dans cet exemple, tous les en-têtes de niveau 2 seront affichés en noir lorsque ces en-têtes se trouveront dans des balises dont l' attribut id est défini sur noir .
Les sélecteurs enfants
Vous avez vu les sélecteurs descendants. Il existe un autre type de sélecteur, qui est très similaire aux descendants mais qui a des fonctionnalités différentes. Prenons l'exemple suivant -
body > p {
color: #000000;
}Cette règle rendra tous les paragraphes en noir s'ils sont les enfants directs de l'élément <body>. D'autres paragraphes placés dans d'autres éléments comme <div> ou <td> n'auraient aucun effet sur cette règle.
Les sélecteurs d'attributs
Vous pouvez également appliquer des styles à des éléments HTML avec des attributs particuliers. La règle de style ci-dessous correspondra à tous les éléments d'entrée ayant un attribut de type avec une valeur de texte -
input[type = "text"] {
color: #000000;
}L'avantage de cette méthode est que l'élément <input type = "submit" /> n'est pas affecté et que la couleur n'est appliquée qu'aux champs de texte souhaités.
Les règles suivantes s'appliquent au sélecteur d'attribut.
p[lang]- Sélectionne tous les éléments de paragraphe avec un attribut lang .
p[lang="fr"]- Sélectionne tous les éléments de paragraphe dont l' attribut lang a une valeur d'exactement "fr".
p[lang~="fr"]- Sélectionne tous les éléments de paragraphe dont l' attribut lang contient le mot "fr".
p[lang|="en"]- Sélectionne tous les éléments de paragraphe dont l' attribut lang contient des valeurs qui sont exactement "en", ou commencent par "en-".
Règles de style multiples
Vous devrez peut-être définir plusieurs règles de style pour un seul élément. Vous pouvez définir ces règles pour combiner plusieurs propriétés et valeurs correspondantes en un seul bloc comme défini dans l'exemple suivant -
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Ici, toutes les paires propriété et valeur sont séparées par un semicolon (;). Vous pouvez les conserver sur une ou plusieurs lignes. Pour une meilleure lisibilité, nous les conservons dans des lignes séparées.
Pendant un certain temps, ne vous souciez pas des propriétés mentionnées dans le bloc ci-dessus. Ces propriétés seront expliquées dans les chapitres suivants et vous pouvez trouver des détails complets sur les propriétés dans les références CSS
Sélecteurs de regroupement
Vous pouvez appliquer un style à de nombreux sélecteurs si vous le souhaitez. Séparez simplement les sélecteurs par une virgule, comme indiqué dans l'exemple suivant -
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Cette règle de style de définition sera également applicable aux éléments h1, h2 et h3. L'ordre de la liste n'est pas pertinent. Tous les éléments du sélecteur auront les déclarations correspondantes appliquées.
Vous pouvez combiner les différents sélecteurs d' identifiants comme indiqué ci-dessous -
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}Cela produira le résultat suivant -
Les attributs
Les attributs associés aux éléments <style> sont -
| Attribut | Valeur | La description |
|---|---|---|
| type | texte / css | Spécifie le langage de la feuille de style en tant que type de contenu (type MIME). Cet attribut est obligatoire. |
| médias | écran tty la télé projection portable impression braille auriculaire tout |
Spécifie le périphérique sur lequel le document sera affiché. La valeur par défaut est tout . Ceci est un attribut facultatif. |
CSS en ligne - L' attribut de style
Vous pouvez utiliser l' attribut style de n'importe quel élément HTML pour définir des règles de style. Ces règles ne s'appliqueront qu'à cet élément. Voici la syntaxe générique -
<element style = "...style rules....">Les attributs
| Attribut | Valeur | La description |
|---|---|---|
| style | règles de style | La valeur de l' attribut style est une combinaison de déclarations de style séparées par un point-virgule (;). |
Exemple
Voici l'exemple de CSS en ligne basé sur la syntaxe ci-dessus -
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>Cela produira le résultat suivant -
CSS externe - L'élément <link>
L'élément <link> peut être utilisé pour inclure un fichier de feuille de style externe dans votre document HTML.
Une feuille de style externe est un fichier texte distinct avec .cssextension. Vous définissez toutes les règles de style dans ce fichier texte et vous pouvez ensuite inclure ce fichier dans n'importe quel document HTML en utilisant l'élément <link>.
Voici la syntaxe générique pour inclure un fichier CSS externe -
<head>
<link type = "text/css" href = "..." media = "..." />
</head>Les attributs
Les attributs associés aux éléments <style> sont -
| Attribut | Valeur | La description |
|---|---|---|
| type | texte css | Spécifie le langage de la feuille de style en tant que type de contenu (type MIME). Cet attribut est obligatoire. |
| href | URL | Spécifie le fichier de feuille de style ayant des règles de style. Cet attribut est obligatoire. |
| médias | écran tty la télé projection portable impression braille auriculaire tout |
Spécifie le périphérique sur lequel le document sera affiché. La valeur par défaut est tout . Il s'agit d'un attribut facultatif. |
Exemple
Considérez un simple fichier de feuille de style avec un nom mystyle.css ayant les règles suivantes -
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Vous pouvez maintenant inclure ce fichier mystyle.css dans n'importe quel document HTML comme suit -
<head>
<link type = "text/css" href = "mystyle.css" media = " all" />
</head>CSS importé - Règle @import
@import est utilisé pour importer une feuille de style externe d'une manière similaire à l'élément <link>. Voici la syntaxe générique de la règle @import.
<head>
@import "URL";
</head>Ici, URL est l'URL du fichier de feuille de style ayant des règles de style. Vous pouvez également utiliser une autre syntaxe -
<head>
@import url("URL");
</head>Exemple
Voici l'exemple qui vous montre comment importer un fichier de feuille de style dans un document HTML -
<head>
@import "mystyle.css";
</head>Remplacement des règles CSS
Nous avons discuté de quatre façons d'inclure des règles de feuille de style dans un document HTML. Voici la règle pour remplacer toute règle de feuille de style.
Toute feuille de style en ligne a la priorité la plus élevée. Ainsi, il remplacera toute règle définie dans les balises <style> ... </style> ou les règles définies dans tout fichier de feuille de style externe.
Toute règle définie dans les balises <style> ... </style> remplacera les règles définies dans tout fichier de feuille de style externe.
Toute règle définie dans un fichier de feuille de style externe a la priorité la plus basse et les règles définies dans ce fichier ne seront appliquées que lorsque les deux règles ci-dessus ne sont pas applicables.
Gestion des anciens navigateurs
Il existe encore de nombreux anciens navigateurs qui ne prennent pas en charge CSS. Nous devons donc faire attention lors de l'écriture de notre CSS incorporé dans un document HTML. L'extrait de code suivant montre comment utiliser les balises de commentaire pour masquer les CSS des anciens navigateurs -
<style type = "text/css">
<!--
body, td {
color: blue;
}
-->
</style>Commentaires CSS
Plusieurs fois, vous devrez peut-être ajouter des commentaires supplémentaires dans vos blocs de feuille de style. Ainsi, il est très facile de commenter n'importe quelle partie de la feuille de style. Vous pouvez simplement mettre vos commentaires dans /*..... c'est un commentaire dans la feuille de style ..... * /.
Vous pouvez utiliser / * .... * / pour commenter des blocs multilignes de la même manière que vous le faites dans les langages de programmation C et C ++.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Cela produira le résultat suivant -
| % | Définit une mesure sous forme de pourcentage par rapport à une autre valeur, généralement un élément englobant. | p {taille de la police: 16pt; hauteur de ligne: 125%;} |
| cm | Définit une mesure en centimètres. | div {margin-bottom: 2cm;} |
| em | Une mesure relative de la hauteur d'une police dans les espaces em. Comme une unité em équivaut à la taille d'une police donnée, si vous attribuez une police à 12 pt, chaque unité «em» serait de 12 pt; ainsi, 2em serait 24pt. | p {interligne: 7em;} |
| ex | Cette valeur définit une mesure relative à la hauteur x d'une police. La hauteur x est déterminée par la hauteur de la lettre minuscule x de la police. | p {taille de la police: 24pt; hauteur de ligne: 3ex;} |
| dans | Définit une mesure en pouces. | p {espacement des mots: .15in;} |
| mm | Définit une mesure en millimètres. | p {espacement des mots: 15 mm;} |
| pc | Définit une mesure en picas. Un pica équivaut à 12 points; ainsi, il y a 6 picas par pouce. | p {taille de la police: 20pc;} |
| pt | Définit une mesure en points. Un point est défini comme 1 / 72ème de pouce. | corps {taille de la police: 18pt;} |
| px | Définit une mesure en pixels d'écran. | p {remplissage: 25px;} |
| Code hexadécimal | #RRGGBB | p {couleur: # FF0000;} |
| Code hexadécimal court | #RGB | p {couleur: # 6A7;} |
| RVB% | rgb (rrr%, ggg%, bbb%) | p {couleur: rgb (50%, 50%, 50%);} |
| RVB absolu | rgb (rrr, ggg, bbb) | p {couleur: rgb (0,0,255);} |
| mot-clé | aqua, noir, etc. | p {couleur: sarcelle;} |
Ces formats sont expliqués plus en détail dans les sections suivantes -
Couleurs CSS - Codes hexadécimaux
Un hexadécimal est une représentation à 6 chiffres d'une couleur. Les deux premiers chiffres (RR) représentent une valeur rouge, les deux suivants sont une valeur verte (GG) et les derniers sont la valeur bleue (BB).
Un hexadécimal est une représentation à 6 chiffres d'une couleur. Les deux premiers chiffres (RR) représentent une valeur rouge, les deux suivants sont une valeur verte (GG) et les derniers sont la valeur bleue (BB).
Une valeur hexadécimale peut être prise à partir de n'importe quel logiciel graphique comme Adobe Photoshop, Jasc Paintshop Pro ou même en utilisant Advanced Paint Brush.
Chaque code hexadécimal sera précédé d'un signe dièse ou dièse '#'. Voici les exemples d'utilisation de la notation hexadécimale.
| Couleur | Couleur HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
Couleurs CSS - Codes hexadécimaux courts
Il s'agit d'une forme plus courte de la notation à six chiffres. Dans ce format, chaque chiffre est répliqué pour arriver à une valeur équivalente à six chiffres. Par exemple: # 6A7 devient # 66AA77.
Une valeur hexadécimale peut être prise à partir de n'importe quel logiciel graphique comme Adobe Photoshop, Jasc Paintshop Pro ou même en utilisant Advanced Paint Brush.
Chaque code hexadécimal sera précédé d'un signe dièse ou dièse '#'. Voici les exemples d'utilisation de la notation hexadécimale.
| Couleur | Couleur HEX |
|---|---|
| # 000 | |
| # F00 | |
| # 0F0 | |
| # 0FF | |
| # FF0 | |
| # 0FF | |
| # F0F | |
| #FFF |
Couleurs CSS - Valeurs RVB
Cette valeur de couleur est spécifiée à l'aide du rgb( )propriété. Cette propriété prend trois valeurs, une pour le rouge, le vert et le bleu. La valeur peut être un entier compris entre 0 et 255 ou un pourcentage.
NOTE - Tous les navigateurs ne supportent pas la propriété rgb () de la couleur, il est donc recommandé de ne pas l'utiliser.
Voici l'exemple pour afficher quelques couleurs en utilisant des valeurs RVB.
| Couleur | Couleur RVB |
|---|---|
| rgb (0,0,0) | |
| RVB (255,0,0) | |
| rgb (0,255,0) | |
| rgb (0,0,255) | |
| RVB (255,255,0) | |
| RVB (0,255,255) | |
| RVB (255,0,255) | |
| RVB (192.192.192) | |
| RVB (255,255,255) |
Codes de couleur du bâtiment
Vous pouvez créer des millions de codes couleur à l'aide de notre générateur de code couleur. Consultez notreHTML Color Code Builder. Pour utiliser cet outil, vous aurez besoin d'un navigateur compatible Java.
Couleurs compatibles avec le navigateur
Voici la liste des 216 couleurs qui sont censées être les couleurs les plus sûres et indépendantes de l'ordinateur. Ces couleurs varient du code hexa 000000 au FFFFFF. Ces couleurs sont sûres à utiliser car elles garantissent que tous les ordinateurs afficheraient correctement les couleurs lors de l'exécution d'une palette de 256 couleurs -
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | Restaurer | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Définir la couleur d'arrière-plan
Voici l'exemple qui montre comment définir la couleur d'arrière-plan d'un élément.
<html>
<head>
</head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>Cela produira le résultat suivant -
Définir l'image d'arrière-plan
Nous pouvons définir l'image d'arrière-plan en appelant les images stockées localement comme indiqué ci-dessous -
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
<html>It will produce the following result −
Repeat the Background Image
The following example demonstrates how to repeat the background image if an image is small. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display only once.
By default background-repeat property will have repeat value.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>It will produce the following result −
The following example which demonstrates how to repeat the background image vertically.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>It will produce the following result −
The following example demonstrates how to repeat the background image horizontally.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>It will produce the following result −
Set the Background Image Position
The following example demonstrates how to set the background image position 100 pixels away from the left side.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>It will produce the following result −
The following example demonstrates how to set the background image position 100 pixels away from the left side and 200 pixels down from the top.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>It will produce the following result −
Set the Background Attachment
Background attachment determines whether a background image is fixed or scrolls with the rest of the page.
The following example demonstrates how to set the fixed background image.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>It will produce the following result −
The following example demonstrates how to set the scrolling background image.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment:scroll;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>It will produce the following result −
Shorthand Property
You can use the background property to set all the background properties at once. For example −
<p style = "background:url(/images/pattern1.gif) repeat fixed;">
This parapgraph has fixed repeated background image.
</p>Set the Font Family
Following is the example, which demonstrates how to set the font family of an element. Possible value could be any font family name.
<html>
<head>
</head>
<body>
<p style = "font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the
default serif font depending on which font you have at your system.
</p>
</body>
</html>This will produce following result −
Set the Font Style
Following is the example, which demonstrates how to set the font style of an element. Possible values are normal, italic and oblique.
<html>
<head>
</head>
<body>
<p style = "font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>This will produce following result −
Set the Font Variant
The following example demonstrates how to set the font variant of an element. Possible values are normal and small-caps.
<html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>This will produce following result −
Set the Font Weight
The following example demonstrates how to set the font weight of an element. The font-weight property provides the functionality to specify how bold a font is. Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
<html>
<head>
</head>
<body>
<p style = "font-weight:bold;">
This font is bold.
</p>
<p style = "font-weight:bolder;">
This font is bolder.
</p>
<p style = "font-weight:500;">
This font is 500 weight.
</p>
</body>
</html>This will produce following result −
Set the Font Size
The following example demonstrates how to set the font size of an element. The font-size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.
<html>
<head>
</head>
<body>
<p style = "font-size:20px;">
This font size is 20 pixels
</p>
<p style = "font-size:small;">
This font size is small
</p>
<p style = "font-size:large;">
This font size is large
</p>
</body>
</html>This will produce following result −
Set the Font Size Adjust
The following example demonstrates how to set the font size adjust of an element. This property enables you to adjust the x-height to make fonts more legible. Possible value could be any number.
<html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
</body>
</html>This will produce following result −
Set the Font Stretch
The following example demonstrates how to set the font stretch of an element. This property relies on the user's computer to have an expanded or condensed version of the font being used.
Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
<html>
<head>
</head>
<body>
<p style = "font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer
doesn't have a <br>condensed or expanded version of the font being used.
</p>
</body>
</html>This will produce following result −
Shorthand Property
You can use the font property to set all the font properties at once. For example −
<html>
<head>
</head>
<body>
<p style = "font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>
</body>
</html>This will produce following result −
The text-decoration property is used to underline, overline, and strikethrough text.
The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
The white-space property is used to control the flow and formatting of text.
The text-shadow property is used to set the text shadow around a text.
Set the Text Color
The following example demonstrates how to set the text color. Possible value could be any color name in any valid format.
<html>
<head>
</head>
<body>
<p style = "color:red;">
This text will be written in red.
</p>
</body>
</html>It will produce the following result −
Set the Text Direction
The following example demonstrates how to set the direction of a text. Possible values are ltr or rtl.
<html>
<head>
</head>
<body>
<p style = "direction:rtl;">
This text will be rendered from right to left
</p>
</body>
</html>It will produce the following result −
Set the Space between Characters
The following example demonstrates how to set the space between characters. Possible values are normal or a number specifying space..
<html>
<head>
</head>
<body>
<p style = "letter-spacing:5px;">
This text is having space between letters.
</p>
</body>
</html>It will produce the following result −
Set the Space between Words
The following example demonstrates how to set the space between words. Possible values are normal or a number specifying space.
<html>
<head>
</head>
<body>
<p style = "word-spacing:5px;">
This text is having space between words.
</p>
</body>
</html>This will produce following result −
Set the Text Indent
The following example demonstrates how to indent the first line of a paragraph. Possible values are % or a number specifying indent space.
<html>
<head>
</head>
<body>
<p style = "text-indent:1cm;">
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>
</body>
</html>It will produce the following result −
Set the Text Alignment
The following example demonstrates how to align a text. Possible values are left, right, center, justify.
<html>
<head>
</head>
<body>
<p style = "text-align:right;">
This will be right aligned.
</p>
<p style = "text-align:center;">
This will be center aligned.
</p>
<p style = "text-align:left;">
This will be left aligned.
</p>
</body>
</html>This will produce following result −
Decorating the Text
The following example demonstrates how to decorate a text. Possible values are none, underline, overline, line-through, blink.
<html>
<head>
</head>
<body>
<p style = "text-decoration:underline;">
This will be underlined
</p>
<p style = "text-decoration:line-through;">
This will be striked through.
</p>
<p style = "text-decoration:overline;">
This will have a over line.
</p>
<p style = "text-decoration:blink;">
This text will have blinking effect
</p>
</body>
</html>This will produce following result −
Set the Text Cases
The following example demonstrates how to set the cases for a text. Possible values are none, capitalize, uppercase, lowercase.
<html>
<head>
</head>
<body>
<p style = "text-transform:capitalize;">
This will be capitalized
</p>
<p style = "text-transform:uppercase;">
This will be in uppercase
</p>
<p style = "text-transform:lowercase;">
This will be in lowercase
</p>
</body>
</html>This will produce following result −
Set the White Space between Text
The following example demonstrates how white space inside an element is handled. Possible values are normal, pre, nowrap.
<html>
<head>
</head>
<body>
<p style = "white-space:pre;">
This text has a line break and the white-space pre setting
tells the browser to honor it just like the HTML pre tag.
</p>
</body>
</html>This will produce following result −
Set the Text Shadow
The following example demonstrates how to set the shadow around a text. This may not be supported by all the browsers.
<html>
<head>
</head>
<body>
<p style = "text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.
</p>
</body>
</html>It will produce the following result −
The Image Border Property
The border property of an image is used to set the width of an image border. This property can have a value in length or in %.
A width of zero pixels means no border.
Here is the example −
<html>
<head>
</head>
<body>
<img style = "border:0px;" src = "/css/images/logo.png" />
<br />
<img style = "border:3px dashed red;" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
The Image Height Property
The height property of an image is used to set the height of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.
Here is an example −
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
The Image Width Property
The width property of an image is used to set the width of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.
Here is an example −
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
The -moz-opacity Property
The -moz-opacity property of an image is used to set the opacity of an image. This property is used to create a transparent image in Mozilla. IE uses filter:alpha(opacity=x) to create transparent images.
In Mozilla (-moz-opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent (The same things goes for the CSS3-valid syntax opacity:x).
In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.
Here is an example −
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
Usually, all these properties are kept in the header part of the HTML document.
Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active MUST come after a:hover in the CSS definition as follows −
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>Now, we will see how to use these properties to give different effects to hyperlinks.
Set the Color of Links
The following example demonstrates how to set the link color. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>It will produce the following black link −
Set the Color of Visited Links
The following example demonstrates how to set the color of visited links. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = ""> link</a>
</body>
</html>It will produce the following link. Once you will click this link, it will change its color to green.
Change the Color of Links when Mouse is Over
The following example demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>It will produce the following link. Now, you bring your mouse over this link and you will see that it changes its color to yellow.
Change the Color of Active Links
The following example demonstrates how to change the color of active links. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>It will produce the following link. It will change its color to pink when the user clicks it.
Now, we will see how to use these properties with examples.
The border-collapse Property
This property can have two values collapse and separate. The following example uses both the values −
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Collapse Border Example</caption>
<tr><td class = "a"> Cell A Collapse Example</td></tr>
<tr><td class = "b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two">
<caption>Separate Border Example</caption>
<tr><td class = "a"> Cell A Separate Example</td></tr>
<tr><td class = "b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>It will produce the following result −
The border-spacing Property
The border-spacing property specifies the distance that separates adjacent cells'. borders. It can take either one or two values; these should be units of length.
If you provide one value, it will applies to both vertical and horizontal borders. Or you can specify two values, in which case, the first refers to the horizontal spacing and the second to the vertical spacing −
NOTE − Unfortunately, this property does not work in Netscape 7 or IE 6.
<style type="text/css">
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>Modifions maintenant l'exemple précédent et voyons l'effet -
<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table class = "one" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>Cela produira le résultat suivant -
La propriété caption-side
La propriété caption-side vous permet de spécifier où le contenu d'un élément <caption> doit être placé par rapport à la table. Le tableau qui suit répertorie les valeurs possibles.
Cette propriété peut avoir l'une des quatre valeurs top, bottom, left ou right . L'exemple suivant utilise chaque valeur.
NOTE - Ces propriétés peuvent ne pas fonctionner avec votre navigateur IE.
<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style = "width:400px; border:1px solid black;">
<caption class = "top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>Cela produira le résultat suivant -
La propriété empty-cells
La propriété empty-cells indique si une cellule sans contenu doit avoir une bordure affichée.
Cette propriété peut avoir l'une des trois valeurs: afficher, masquer ou hériter .
Voici la propriété empty-cells utilisée pour masquer les bordures des cellules vides dans l'élément <table>.
<html>
<head>
<style type = "text/css">
table.empty {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>
<body>
<table class = "empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty"></td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
La propriété table-layout
La propriété table-layout est censée vous aider à contrôler la façon dont un navigateur doit rendre ou disposer un tableau.
Cette propriété peut avoir l'une des trois valeurs: fixe, automatique ou hériter .
L'exemple suivant montre la différence entre ces propriétés.
NOTE - Cette propriété n'est pas prise en charge par de nombreux navigateurs, ne vous fiez donc pas à cette propriété.
<html>
<head>
<style type = "text/css">
table.auto {
table-layout: auto
}
table.fixed {
table-layout: fixed
}
</style>
</head>
<body>
<table class = "auto" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
<br />
<table class = "fixed" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
La propriété border-color vous permet de changer la couleur de la bordure entourant un élément. Vous pouvez modifier individuellement la couleur des côtés inférieur, gauche, supérieur et droit de la bordure d'un élément en utilisant les propriétés -
border-bottom-color change la couleur de la bordure inférieure.
border-top-color change la couleur de la bordure supérieure.
border-left-color change la couleur de la bordure gauche.
border-right-color change la couleur de la bordure droite.
L'exemple suivant montre l'effet de toutes ces propriétés -
<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>
<p class = "example2">
This example is showing all borders in green color only.
</p>
</body>
</html>Cela produira le résultat suivant -
La propriété border-style
La propriété border-style vous permet de sélectionner l'un des styles de bordure suivants -
none- Pas de frontière. (Équivalent de la largeur de la bordure: 0;)
solid - La bordure est une seule ligne continue.
dotted - La bordure est une série de points.
dashed - Border est une série de lignes courtes.
double - La bordure est constituée de deux lignes pleines.
groove - La bordure semble être gravée dans la page.
ridge - La bordure ressemble à l'opposé de la rainure.
inset - La bordure donne l'impression que la boîte est intégrée à la page.
outset - La bordure donne l'impression que la boîte sort de la toile.
hidden - Identique à aucun, sauf en termes de résolution des conflits de frontières pour les éléments de table.
Vous pouvez modifier individuellement le style des bordures inférieure, gauche, supérieure et droite d'un élément à l'aide des propriétés suivantes:
border-bottom-style change le style de la bordure inférieure.
border-top-style change le style de la bordure supérieure.
border-left-style change le style de la bordure gauche.
border-right-style change le style de la bordure droite.
L'exemple suivant montre tous ces styles de bordure -
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>
</html>Cela produira le résultat suivant -
La propriété border-width
La propriété border-width vous permet de définir la largeur des bordures d'un élément. La valeur de cette propriété peut être une longueur en px, pt ou cm ou elle doit être définie sur mince, moyen ou épais.
Vous pouvez modifier individuellement la largeur des bordures inférieure, supérieure, gauche et droite d'un élément à l'aide des propriétés suivantes:
border-bottom-width modifie la largeur de la bordure inférieure.
border-top-width modifie la largeur de la bordure supérieure.
border-left-width modifie la largeur de la bordure gauche.
border-right-width modifie la largeur de la bordure droite.
L'exemple suivant montre toutes ces largeurs de bordure -
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style = "border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style = "border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style = "border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style = "border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style = "border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
This is a a border with four different width.
</p>
</body>
</html>Cela produira le résultat suivant -
Propriétés de bordure à l'aide de raccourcis
La propriété border vous permet de spécifier la couleur, le style et la largeur des lignes dans une propriété -
L'exemple suivant montre comment utiliser les trois propriétés dans une seule propriété. Il s'agit de la propriété la plus fréquemment utilisée pour définir une bordure autour d'un élément.
<html>
<head>
</head>
<body>
<p style = "border:4px solid red;">
This example is showing shorthand property for border.
</p>
</body>
</html>Cela produira le résultat suivant -
le margin-right spécifie la marge droite d'un élément.
Maintenant, nous allons voir comment utiliser ces propriétés avec des exemples.
La propriété Margin
La propriété margin vous permet de définir toutes les propriétés des quatre marges dans une déclaration. Voici la syntaxe pour définir la marge autour d'un paragraphe -
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
<p style = "margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</p>
<p style = "margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
</p>
<p style = "margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total
width of the document, bottom margin will be -10px, left margin
will be set by the browser
</p>
</body>
</html>Cela produira le résultat suivant -
La propriété margin-bottom
La propriété margin-bottom vous permet de définir la marge inférieure d'un élément. Il peut avoir une valeur en longueur,% ou auto.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin
</p>
<p style = "margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in percent
</p>
</body>
</html>Cela produira le résultat suivant -
La propriété margin-top
La propriété margin-top vous permet de définir la marge supérieure d'un élément. Il peut avoir une valeur en longueur,% ou auto.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>
<p style = "margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>Cela produira le résultat suivant -
La propriété margin-left
La propriété margin-left vous permet de définir la marge gauche d'un élément. Il peut avoir une valeur en longueur,% ou auto.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>
<p style = "margin-left: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>Cela produira le résultat suivant -
La propriété margin-right
La propriété margin-right vous permet de définir la marge droite d'un élément. Il peut avoir une valeur en longueur,% ou auto.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in percent
</p>
</body>
</html>Cela produira le résultat suivant -
Maintenant, nous allons voir comment utiliser ces propriétés avec des exemples.
La propriété de type liste-style
La propriété list-style-type vous permet de contrôler la forme ou le style de la puce (également appelé marqueur) dans le cas de listes non ordonnées et le style des caractères de numérotation dans les listes ordonnées.
Voici les valeurs qui peuvent être utilisées pour une liste non ordonnée -
| Sr.No. | Valeur et description |
|---|---|
| 1 | none N / A |
| 2 | disc (default) Un cercle rempli |
| 3 | circle Un cercle vide |
| 4 | square Un carré rempli |
Voici les valeurs qui peuvent être utilisées pour une liste ordonnée -
| Valeur | La description | Exemple |
|---|---|---|
| décimal | Nombre | 1,2,3,4,5 |
| zéro décimal | 0 avant le nombre | 01, 02, 03, 04, 05 |
| alpha inférieur | Caractères alphanumériques minuscules | a, b, c, d, e |
| alpha supérieur | Caractères alphanumériques majuscules | A, B, C, D, E |
| bas-romain | Chiffres romains minuscules | i, ii, iii, iv, v |
| supérieur-romain | Chiffres romains majuscules | I, II, III, IV, V |
| bas-grec | Le marqueur est le grec inférieur | alpha, bêta, gamma |
| bas-latin | Le marqueur est en bas-latin | a, b, c, d, e |
| latin supérieur | Le marqueur est en haut-latin | A, B, C, D, E |
| hébreu | Le marqueur est une numérotation hébraïque traditionnelle | |
| arménien | Le marqueur est la numérotation arménienne traditionnelle | |
| géorgien | Le marqueur est une numérotation géorgienne traditionnelle | |
| cjk-idéographique | Le marqueur est constitué de nombres idéographiques simples | |
| Hiragana | Le marqueur est hiragana | a, i, u, e, o, ka, ki |
| Katakana | Le marqueur est katakana | A, I, U, E, O, KA, KI |
| Hiragana-iroha | Le marqueur est hiragana-iroha | je, ro, ha, ni, ho, il, à |
| katakana-iroha | Le marqueur est katakana-iroha | I, RO, HA, NI, HO, HE, TO |
Voici un exemple -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
La propriété list-style-position
La propriété list-style-position indique si le marqueur doit apparaître à l'intérieur ou à l'extérieur de la zone contenant les puces. Il peut avoir l'une des deux valeurs -
| Sr.No. | Valeur et description |
|---|---|
| 1 | none N / A |
| 2 | inside Si le texte va sur une deuxième ligne, le texte sera enveloppé sous le marqueur. Il apparaîtra également en retrait par rapport à l'endroit où le texte aurait commencé si la liste avait une valeur extérieure. |
| 3 | outside Si le texte va sur une deuxième ligne, le texte sera aligné avec le début de la première ligne (à droite de la puce). |
Voici un exemple -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
La propriété list-style-image
L' image de style de liste vous permet de spécifier une image afin que vous puissiez utiliser votre propre style de puce. La syntaxe est similaire à la propriété background-image avec les lettres url commençant par la valeur de la propriété suivie de l'URL entre crochets. S'il ne trouve pas l'image donnée, les puces par défaut sont utilisées.
Voici un exemple -
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
La propriété de style liste
Le style de liste vous permet de spécifier toutes les propriétés de la liste dans une seule expression. Ces propriétés peuvent apparaître dans n'importe quel ordre.
Voici un exemple -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
La propriété marker-offset
La propriété marker-offset vous permet de spécifier la distance entre le marqueur et le texte relatif à ce marqueur. Sa valeur doit être une longueur comme indiqué dans l'exemple suivant -
Malheureusement, cette propriété n'est pas prise en charge dans IE 6 ou Netscape 7.
Voici un exemple -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
le padding sert de raccourci pour les propriétés précédentes.
Maintenant, nous allons voir comment utiliser ces propriétés avec des exemples.
La propriété padding-bottom
La propriété padding-bottom définit le remplissage inférieur (espace) d'un élément. Cela peut prendre une valeur en termes de longueur de%.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style = "padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
</body>
</html>Cela produira le résultat suivant -
La propriété padding-top
La propriété padding-top définit le remplissage supérieur (espace) d'un élément. Cela peut prendre une valeur en termes de longueur de%.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
</body>
</html>Cela produira le résultat suivant -
La propriété padding-left
La propriété padding-left définit le remplissage gauche (espace) d'un élément. Cela peut prendre une valeur en termes de longueur de%.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style = "padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>
</body>
</html>Cela produira le résultat suivant -
La propriété padding-right
La propriété padding-right définit le remplissage droit (espace) d'un élément. Cela peut prendre une valeur en termes de longueur de%.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>
</html>Cela produira le résultat suivant -
La propriété Padding
La propriété padding définit le remplissage (espace) gauche, droit, haut et bas d'un élément. Cela peut prendre une valeur en termes de longueur de%.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style = "padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>
</html>Cela produira le résultat suivant -
| 1 | auto La forme du curseur dépend de la zone de contexte sur laquelle il se trouve. Par exemple, un I sur un texte, une main sur un lien, etc. |
| 2 | crosshair Un réticule ou signe plus |
| 3 | default Une flèche |
| 4 | pointer Une main pointée (dans IE 4 cette valeur est main) |
| 5 | move La barre I |
| 6 | e-resize Le curseur indique qu'un bord d'une boîte doit être déplacé vers la droite (est) |
| sept | ne-resize Le curseur indique qu'un bord d'une boîte doit être déplacé vers le haut et vers la droite (nord / est) |
| 8 | nw-resize Le curseur indique qu'un bord d'une boîte doit être déplacé vers le haut et vers la gauche (nord / ouest) |
| 9 | n-resize Le curseur indique qu'un bord d'une boîte doit être déplacé vers le haut (nord) |
| dix | se-resize Le curseur indique qu'un bord d'une boîte doit être déplacé vers le bas et vers la droite (sud / est) |
| 11 | sw-resize Le curseur indique qu'un bord d'une boîte doit être déplacé vers le bas et vers la gauche (sud / ouest) |
| 12 | s-resize Le curseur indique qu'un bord d'une boîte doit être déplacé vers le bas (sud) |
| 13 | w-resize Le curseur indique qu'un bord d'une boîte doit être déplacé vers la gauche (ouest) |
| 14 | text La barre I |
| 15 | wait Un sablier |
| 16 | help Un point d'interrogation ou un ballon, idéal pour une utilisation sur les boutons d'aide |
| 17 | <url> La source d'un fichier image de curseur |
NOTE- Vous devriez essayer de n'utiliser que ces valeurs pour ajouter des informations utiles aux utilisateurs, et à certains endroits, ils s'attendraient à voir ce curseur. Par exemple, l'utilisation du réticule lorsque quelqu'un survole un lien peut dérouter les visiteurs.
Voici un exemple -
<html>
<head>
</head>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<div style = "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
</body>
</html>Cela produira le résultat suivant -
le outline-width La propriété est utilisée pour définir la largeur du contour.
le outline-style La propriété est utilisée pour définir le style de ligne du contour.
le outline-color La propriété est utilisée pour définir la couleur du contour.
le outline propriété est utilisée pour définir les trois propriétés ci-dessus dans une seule instruction.
La propriété contour-width
La propriété contour-width spécifie la largeur du contour à ajouter à la boîte. Sa valeur doit être une longueur ou l'une des valeurs thin, medium ou thick, tout comme l'attribut border-width.
Une largeur de zéro pixel signifie pas de contour.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:solid;">
This text is having thick outline.
</p>
<br />
<p style = "outline-width:5px; outline-style:solid;">
This text is having 5x outline.
</p>
</body>
</html>Cela produira le résultat suivant -
La propriété de style de contour
La propriété de style de contour spécifie le style de la ligne (pleine, en pointillé ou en pointillé) qui entoure un élément. Il peut prendre l'une des valeurs suivantes -
none- Pas de frontière. (Équivalent de la largeur du contour: 0;)
solid - Le contour est une seule ligne continue.
dotted - Le contour est une série de points.
dashed - Outline est une série de lignes courtes.
double - Le contour est composé de deux lignes pleines.
groove - Le contour semble être gravé dans la page.
ridge - Le contour ressemble à l'opposé de la rainure.
inset - Le contour donne l'impression que la boîte est intégrée à la page.
outset - Le contour donne l'impression que la boîte sort de la toile.
hidden - Identique à aucun.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin solid outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;">
This text is having thick dashed outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
</p>
</body>
</html>Cela produira le résultat suivant -
La propriété contour-color
La propriété contour-color vous permet de spécifier la couleur du contour. Sa valeur doit être un nom de couleur, une couleur hexadécimale ou une valeur RVB, comme pour les propriétés de couleur et de couleur de bordure.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;outline-color:red">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
</p>
</body>
</html>Cela produira le résultat suivant -
La propriété contour
La propriété contour est une propriété abrégée qui vous permet de spécifier des valeurs pour l'une des trois propriétés décrites précédemment dans n'importe quel ordre, mais dans une seule instruction.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "outline:thin solid red;">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline:thick dashed #009900;">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline:5px dotted rgb(13,33,232);">
This text is having 5x dotted blue outline.
</p>
</body>
</html>Cela produira le résultat suivant -
le max-width La propriété est utilisée pour définir la largeur maximale qu'une boîte peut avoir.
le min-width La propriété est utilisée pour définir la largeur minimale qu'une boîte peut avoir.
Les propriétés de hauteur et de largeur
Les propriétés de hauteur et de largeur vous permettent de définir la hauteur et la largeur des boîtes. Ils peuvent prendre des valeurs d'une longueur, d'un pourcentage ou du mot-clé auto.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
</body>
</html>Cela produira le résultat suivant -
La propriété line-height
La propriété line-height vous permet d'augmenter l'espace entre les lignes de texte. La valeur de la propriété line-height peut être un nombre, une longueur ou un pourcentage.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
</p>
</body>
</html>Cela produira le résultat suivant -
La propriété max-height
La propriété max-height vous permet de spécifier la hauteur maximale d'une boîte. La valeur de la propriété max-height peut être un nombre, une longueur ou un pourcentage.
NOTE - Cette propriété ne fonctionne ni dans Netscape 7 ni dans IE 6.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
<br>
<img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
</body>
</html>Cela produira le résultat suivant -
La propriété min-height
La propriété min-height vous permet de spécifier la hauteur minimale d'une boîte. La valeur de la propriété min-height peut être un nombre, une longueur ou un pourcentage.
NOTE - Cette propriété ne fonctionne ni dans Netscape 7 ni dans IE 6.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
</body>
</html>Cela produira le résultat suivant -
La propriété max-width
La propriété max-width vous permet de spécifier la largeur maximale d'une boîte. La valeur de la propriété max-width peut être un nombre, une longueur ou un pourcentage.
NOTE - Cette propriété ne fonctionne ni dans Netscape 7 ni dans IE 6.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
</body>
</html>Cela produira le résultat suivant -
La propriété min-width
La propriété min-width vous permet de spécifier la largeur minimale d'une boîte. La valeur de la propriété min-width peut être un nombre, une longueur ou un pourcentage.
NOTE - Cette propriété ne fonctionne ni dans Netscape 7 ni dans IE 6.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
</body>
</html>Cela produira le résultat suivant -
| 1 | visible Permet au contenu de déborder des bordures de son élément conteneur. |
| 2 | hidden Le contenu de l'élément imbriqué est simplement coupé à la bordure de l'élément contenant et aucune barre de défilement n'est visible. |
| 3 | scroll La taille de l'élément contenant ne change pas, mais les barres de défilement sont ajoutées pour permettre à l'utilisateur de faire défiler pour voir le contenu. |
| 4 | auto Le but est le même que le défilement, mais la barre de défilement ne sera affichée que si le contenu déborde. |
Voici un exemple -
<html>
<head>
<style type = "text/css">
.scroll {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
</head>
<body>
<p>Example of scroll value:</p>
<div class = "scroll">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class = "auto">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
</body>
</html>Cela produira le résultat suivant -
| 1 | visible La boîte et son contenu sont présentés à l'utilisateur. |
| 2 | hidden La boîte et son contenu sont rendus invisibles, bien qu'ils affectent toujours la mise en page de la page. |
| 3 | collapse Ceci est à utiliser uniquement avec les colonnes de tableau dynamique et les effets de ligne. |
Voici un exemple -
<html>
<head>
</head>
<body>
<p>
This paragraph should be visible in normal way.
</p>
<p style = "visibility:hidden;">
This paragraph should not be visible.
</p>
</body>
</html>Cela produira le résultat suivant -
- Monter - Utilisez une valeur négative pour le haut .
- Descendre - Utilisez une valeur positive pour le haut .
NOTE- Vous pouvez également utiliser les valeurs du bas ou de la droite de la même manière que pour le haut et la gauche .
Voici l'exemple -
<html>
<head>
</head>
<body>
<div style = "position:relative; left:80px; top:2px; background-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>Cela produira le résultat suivant -
Positionnement absolu
Un élément avec position: absolute est positionné aux coordonnées spécifiées par rapport au coin supérieur gauche de votre écran.
Vous pouvez utiliser deux valeurs en haut et à gauche avec la propriété position pour déplacer un élément HTML n'importe où dans le document HTML.
- Déplacer vers la gauche - Utilisez une valeur négative pour la gauche .
- Déplacer vers la droite - Utilisez une valeur positive pour la gauche .
- Monter - Utilisez une valeur négative pour le haut .
- Descendre - Utilisez une valeur positive pour le haut .
NOTE- Vous pouvez également utiliser les valeurs du bas ou de la droite de la même manière que le haut et la gauche.
Voici un exemple -
<html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>Positionnement fixe
Le positionnement fixe vous permet de fixer la position d'un élément à un endroit particulier de la page, quel que soit le défilement. Les coordonnées spécifiées seront relatives à la fenêtre du navigateur.
Vous pouvez utiliser deux valeurs en haut et à gauche avec la propriété position pour déplacer un élément HTML n'importe où dans le document HTML.
- Déplacer vers la gauche - Utilisez une valeur négative pour la gauche .
- Déplacer vers la droite - Utilisez une valeur positive pour la gauche .
- Monter - Utilisez une valeur négative pour le haut .
- Descendre - Utilisez une valeur positive pour le haut .
NOTE- Vous pouvez également utiliser les valeurs du bas ou de la droite de la même manière que pour le haut et la gauche .
Voici un exemple -
<html>
<head>
</head>
<body>
<div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html><body>
<div style = "background-color:red;
width:300px;
height:100px;
position:relative;
top:10px;
left:80px;
z-index:2">
</div>
<div style = "background-color:yellow;
width:300px;
height:100px;
position:relative;
top:-60px;
left:35px;
z-index:1;">
</div>
<div style = "background-color:green;
width:300px;
height:100px;
position:relative;
top:-220px;
left:120px;
z-index:3;">
</div>
</body>Cela produira le résultat suivant -
Les pseudo-classes les plus couramment utilisées sont les suivantes -
| Sr.No. | Valeur et description |
|---|---|
| 1 | :link Utilisez cette classe pour ajouter un style spécial à un lien non visité. |
| 2 | :visited Utilisez cette classe pour ajouter un style spécial à un lien visité. |
| 3 | :hover Utilisez cette classe pour ajouter un style spécial à un élément lorsque vous passez la souris dessus. |
| 4 | :active Utilisez cette classe pour ajouter un style spécial à un élément actif. |
| 5 | :focus Utilisez cette classe pour ajouter un style spécial à un élément pendant que l'élément a le focus. |
| 6 | :first-child Utilisez cette classe pour ajouter un style spécial à un élément qui est le premier enfant d'un autre élément. |
| sept | :lang Utilisez cette classe pour spécifier une langue à utiliser dans un élément spécifié. |
Lors de la définition de pseudo-classes dans un bloc <style> ... </style>, les points suivants doivent être notés -
a: hover DOIT venir après a: link et a: viewed dans la définition CSS pour être efficace.
a: active DOIT venir après un: hover dans la définition CSS pour être efficace.
Les noms de pseudo-classes ne sont pas sensibles à la casse.
Les pseudo-classes sont différentes des classes CSS mais elles peuvent être combinées.
La pseudo-classe: link
L'exemple suivant montre comment utiliser la classe : link pour définir la couleur du lien. Les valeurs possibles peuvent être n'importe quel nom de couleur dans n'importe quel format valide.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Black Link</a>
</body>
</html>Il produira le lien noir suivant -
La pseudo-classe visitée
L'exemple suivant montre comment utiliser la classe : visitée pour définir la couleur des liens visités. Les valeurs possibles peuvent être n'importe quel nom de couleur dans n'importe quel format valide.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = "">Click this link</a>
</body>
</html>Cela produira le lien suivant. Une fois que vous aurez cliqué sur ce lien, il changera sa couleur en vert.
La pseudo-classe: hover
L'exemple suivant montre comment utiliser la classe : hover pour modifier la couleur des liens lorsque nous plaçons un pointeur de souris sur ce lien. Les valeurs possibles peuvent être n'importe quel nom de couleur dans n'importe quel format valide.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Bring Mouse Here</a>
</body>
</html>Il produira le lien suivant. Maintenant vous amenez votre souris sur ce lien et vous verrez qu'il change sa couleur en jaune.
La: pseudo-classe active
L'exemple suivant montre comment utiliser la classe : active pour modifier la couleur des liens actifs. Les valeurs possibles peuvent être n'importe quel nom de couleur dans n'importe quel format valide.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Click This Link</a>
</body>
</html>Il produira le lien suivant. Lorsqu'un utilisateur clique dessus, la couleur devient rose.
La pseudo-classe: focus
L'exemple suivant montre comment utiliser la classe : focus pour modifier la couleur des liens focalisés. Les valeurs possibles peuvent être n'importe quel nom de couleur dans n'importe quel format valide.
<html>
<head>
<style type = "text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href = "">Click this Link</a>
</body>
</html>Il produira le lien suivant. Lorsque ce lien se concentre, sa couleur devient orange. La couleur change quand elle perd le focus.
La pseudo-classe: premier enfant
La pseudo-classe : first-child correspond à un élément spécifié qui est le premier enfant d'un autre élément et ajoute un style spécial à cet élément qui est le premier enfant d'un autre élément.
Pour faire: le travail du premier enfant dans IE <! DOCTYPE> doit être déclaré en haut du document.
Par exemple, pour mettre en retrait le premier paragraphe de tous les éléments <div>, vous pouvez utiliser cette définition -
<html>
<head>
<style type = "text/css">
div > p:first-child {
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>First paragraph in div. This paragraph will be indented</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>But it will not match the paragraph in this HTML:</p>
<div>
<h3>Heading</h3>
<p>The first paragraph inside the div. This paragraph will not be effected.</p>
</div>
</body>
</html>Cela produira le résultat suivant -
La pseudo-classe: lang
La pseudo-classe de langue : lang , permet de construire des sélecteurs basés sur le paramètre de langue pour des balises spécifiques.
Cette classe est utile dans les documents qui doivent faire appel à plusieurs langues qui ont des conventions différentes pour certaines constructions de langage. Par exemple, la langue française utilise généralement des crochets (<et>) pour les guillemets, tandis que la langue anglaise utilise des guillemets ('et').
Dans un document qui doit aborder cette différence, vous pouvez utiliser la pseudo-classe: lang pour modifier les guillemets de manière appropriée. Le code suivant modifie la balise <blockquote> de manière appropriée pour la langue utilisée -
<html>
<head>
<style type = "text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang = "fr">A quote in a paragraph</q>...</p>
</body>
</html>Les sélecteurs: lang s'appliqueront à tous les éléments du document. Cependant, tous les éléments n'utilisent pas la propriété quotes, donc l'effet sera transparent pour la plupart des éléments.
Cela produira le résultat suivant -
Les pseudo-éléments les plus couramment utilisés sont les suivants -
| Sr.No. | Valeur et description |
|---|---|
| 1 | :first-line Utilisez cet élément pour ajouter des styles spéciaux à la première ligne du texte dans un sélecteur. |
| 2 | :first-letter Utilisez cet élément pour ajouter un style spécial à la première lettre du texte dans un sélecteur. |
| 3 | :before Utilisez cet élément pour insérer du contenu avant un élément. |
| 4 | :after Utilisez cet élément pour insérer du contenu après un élément. |
Le: pseudo-élément de première ligne
L'exemple suivant montre comment utiliser l' élément : first-line pour ajouter des effets spéciaux à la première ligne d'éléments du document.
<html>
<head>
<style type = "text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
</head>
<body>
<p class = "noline">
This line would not have any underline because this belongs to nline class.
</p>
<p>
The first line of this paragraph will be underlined as defined in the
CSS rule above. Rest of the lines in this paragraph will remain normal.
This example shows how to use :first-line pseduo element to give effect
to the first line of any HTML element.
</p>
</body>
</html>Il produira le lien suivant -
Le pseudo-élément: première lettre
L'exemple suivant montre comment utiliser l' élément : first-letter pour ajouter des effets spéciaux à la première lettre des éléments du document.
<html>
<head>
<style type = "text/css">
p:first-letter { font-size: 5em; }
p.normal:first-letter { font-size: 10px; }
</style>
</head>
<body>
<p class = "normal">
First character of this paragraph will be normal and will have font size 10 px;
</p>
<p>
The first character of this paragraph will be 5em big as defined in the
CSS rule above. Rest of the characters in this paragraph will remain
normal. This example shows how to use :first-letter pseduo element
to give effect to the first characters of any HTML element.
</p>
</body>
</html>Il produira le lien noir suivant -
Le pseudo-élément: avant
L'exemple suivant montre comment utiliser l' élément : before pour ajouter du contenu avant tout élément.
<html>
<head>
<style type = "text/css">
p:before {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
</body>
</html>Il produira le lien noir suivant -
Le pseudo-élément: après
L'exemple suivant montre comment utiliser l' élément : after pour ajouter du contenu après n'importe quel élément.
<html>
<head>
<style type = "text/css">
p:after {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
</body>
</html>Il produira le lien noir suivant -
La règle @import
La règle @import vous permet d'importer des styles à partir d'une autre feuille de style. Il doit apparaître juste au début de la feuille de style avant toute règle et sa valeur est une URL.
Il peut être écrit de l'une des deux manières suivantes -
<style type = "text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......other CSS rules .....
-->
</style>L'intérêt de la règle @import est qu'elle vous permet de développer vos feuilles de style avec une approche modulaire. Vous pouvez créer diverses feuilles de style et les inclure là où vous en avez besoin.
La règle @charset
Si vous écrivez votre document à l'aide d'un jeu de caractères autre que ASCII ou ISO-8859-1, vous pouvez définir la règle @charset en haut de votre feuille de style pour indiquer dans quel jeu de caractères la feuille de style est écrite.
La règle @charset doit être écrite juste au début de la feuille de style sans même un espace devant elle. La valeur est placée entre guillemets et doit être l'un des jeux de caractères standard. Par exemple -
<style type = "text/css">
<!--
@charset "iso-8859-1"
.......other CSS rules .....
-->
</style>La règle @ font-face
La règle @ font-face est utilisée pour décrire de manière exhaustive une police à utiliser dans un document. @ font-face peut également être utilisé pour définir l'emplacement d'une police à télécharger, bien que cela puisse rencontrer des limites spécifiques à l'implémentation.
En général, @ font-face est extrêmement compliqué et son utilisation n'est recommandée à personne, sauf à ceux qui sont experts en métriques de polices.
Voici un exemple -
<style type = "text/css">
<!--
@font-face {
font-family: "Scarborough Light";
src: url("http://www.font.site/s/scarbo-lt");
}
@font-face {
font-family: Santiago;
src: local ("Santiago"),
url("http://www.font.site/s/santiago.tt")
format("truetype");
unicode-range: U+??,U+100-220;
font-size: all;
font-family: sans-serif;
}
-->
</style>La! Règle importante
Feuilles de style en cascade. Cela signifie que les styles sont appliqués dans le même ordre qu'ils sont lus par le navigateur. Le premier style est appliqué, puis le second et ainsi de suite.
La règle! Important fournit un moyen de rendre votre CSS en cascade. Il comprend également les règles qui doivent toujours être appliquées. Une règle ayant une propriété! Important sera toujours appliquée, peu importe où cette règle apparaît dans le document CSS.
Par exemple, dans la feuille de style suivante, le texte du paragraphe sera noir, même si la première propriété de style appliquée est rouge:
<style type = "text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>Donc, si vous vouliez vous assurer qu'une propriété s'applique toujours, vous ajouteriez la propriété! Important à la balise. Donc, pour que le texte du paragraphe soit toujours rouge, vous devez l'écrire comme suit -
<html>
<head>
<style type = "text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>Tutorialspoint.com</p>
</body>
</html>Ici vous avez rendu p {color: # ff0000! Important; } obligatoire, maintenant cette règle s'appliquera toujours même si vous avez défini une autre règle p {color: # 000000; }
Cela produira le résultat suivant -
| 1 | opacity Niveau d'opacité. 0 est totalement transparent, 100 est totalement opaque. |
| 2 | finishopacity Niveau d'opacité à l'autre extrémité de l'objet. |
| 3 | style La forme du dégradé d'opacité. 0 = uniforme 1 = linéaire 2 = radial 3 = rectangulaire |
| 4 | startX Coordonnée X pour le début du dégradé d'opacité. |
| 5 | startY Coordonnée Y pour le début du dégradé d'opacité. |
| 6 | finishX Coordonnée X pour le dégradé d'opacité à la fin. |
| sept | finishY Coordonnée Y pour la fin du dégradé d'opacité. |
Exemple
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Alpha(Opacity=100,
FinishOpacity = 0,
Style = 2,
StartX = 20,
StartY = 40,
FinishX = 0,
FinishY = 0)" />
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
</body>
</html>Cela produira le résultat suivant -
Flou de mouvement
Le flou de mouvement est utilisé pour créer des images ou du texte flous avec la direction et la force. Les paramètres suivants peuvent être utilisés dans ce filtre -
| Sr.No. | Paramètre et description |
|---|---|
| 1 | add Vrai ou faux. Si vrai, l'image est ajoutée à l'image floue; et si faux, l'image n'est pas ajoutée à l'image floue. |
| 2 | direction La direction du flou, dans le sens des aiguilles d'une montre, arrondie à des incréments de 45 degrés. La valeur par défaut est 270 (à gauche). 0 = Haut 45 = En haut à droite 90 = Droite 135 = En bas à droite 180 = bas 225 = En bas à gauche 270 = Gauche 315 = En haut à gauche |
| 3 | strength Le nombre de pixels que le flou s'étendra. La valeur par défaut est de 5 pixels. |
Exemple
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
</div>
</body>
</html>Cela produira le résultat suivant -
Filtre Chroma
Le filtre Chroma est utilisé pour rendre toute couleur particulière transparente et il est généralement utilisé avec des images. Vous pouvez également l'utiliser avec des barres de défilement. Le paramètre suivant peut être utilisé dans ce filtre -
| Sr.No. | Paramètre et description |
|---|---|
| 1 | color La couleur que vous aimeriez être transparente. |
Exemple
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/images/css.gif"
alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
<p>Text Example:</p>
<div style = "width: 580;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: #3300FF;
Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
</body>
</html>Cela produira le résultat suivant -
Effet d'ombre portée
L'ombre portée est utilisée pour créer une ombre de votre objet au décalage et à la couleur X (horizontal) et Y (vertical) spécifiés.
Les paramètres suivants peuvent être utilisés dans ce filtre -
| Sr.No. | Paramètre et description |
|---|---|
| 1 | color La couleur, au format #RRGGBB, du dropshadow. |
| 2 | offX Nombre de pixels dont l'ombre portée est décalée par rapport à l'objet visuel, le long de l'axe des x. Les entiers positifs déplacent l'ombre portée vers la droite, les entiers négatifs déplacent l'ombre portée vers la gauche. |
| 3 | offY Nombre de pixels dont l'ombre portée est décalée par rapport à l'objet visuel, le long de l'axe y. Les entiers positifs déplacent l'ombre portée vers le bas, les entiers négatifs déplacent l'ombre portée vers le haut. |
| 4 | positive Si vrai, tous les pixels opaques de l'objet ont une ombre portée. Si faux, tous les pixels transparents ont une ombre portée. La valeur par défaut est true. |
Exemple
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter:drop-shadow(2px 2px 1px #FF0000);">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
</body>
</html>Cela produira le résultat suivant -
Effet Flip
L'effet Flip est utilisé pour créer une image miroir de l'objet. Les paramètres suivants peuvent être utilisés dans ce filtre -
| Sr.No. | Paramètre et description |
|---|---|
| 1 | FlipH Crée une image miroir horizontale |
| 2 | FlipV Crée une image miroir verticale |
Exemple
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: FlipH">
<img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">
<p>Text Example:</p>
<div style = "width: 300;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: FlipV">CSS Tutorials</div>
</body>
</html>Cela produira le résultat suivant -
Effet lumineux
L'effet Glow est utilisé pour créer une lueur autour de l'objet. S'il s'agit d'une image transparente, une lueur est créée autour de ses pixels opaques. Les paramètres suivants peuvent être utilisés dans ce filtre -
| Sr.No. | Paramètre et description |
|---|---|
| 1 | color La couleur que vous voulez que la lueur soit. |
| 2 | strength L'intensité de la lueur (de 1 à 255). |
Exemple
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
</body>
</html>Cela produira le résultat suivant -
Effet en niveaux de gris
L'effet Niveaux de gris est utilisé pour convertir les couleurs de l'objet en 256 nuances de gris. Le paramètre suivant est utilisé dans ce filtre -
| Sr.No. | Paramètre et description |
|---|---|
| 1 | grayscale Convertit les couleurs de l'objet en 256 nuances de gris. |
Exemple
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: grayscale(50%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: grayscale(50%)">CSS Tutorials</div>
</body>
</html>Cela produira le résultat suivant -
Effet inversé
L'effet d'inversion est utilisé pour mapper les couleurs de l'objet à leurs valeurs opposées dans le spectre de couleurs, c'est-à-dire pour créer une image négative. Le paramètre suivant est utilisé dans ce filtre -
| Sr.No. | Paramètre et description |
|---|---|
| 1 | Invert Mappe les couleurs de l'objet à leur valeur opposée dans le spectre de couleurs. |
Exemple
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: invert(100%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: invert(100%)">CSS Tutorials</div>
</body>
</html>Cela produira le résultat suivant -
Effet de masque
L'effet de masque est utilisé pour transformer les pixels transparents en une couleur spécifiée et rend les pixels opaques transparents. Le paramètre suivant est utilisé dans ce filtre -
| Sr.No. | Paramètre et description |
|---|---|
| 1 | color La couleur que deviendront les zones transparentes. |
Exemple
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Mask(Color=#00FF00)">CSS Tutorials
</div>
</body>
</html>Cela produira le résultat suivant -
Filtre d'ombre
Le filtre d'ombre est utilisé pour créer une ombre atténuée dans la direction et la couleur spécifiées. Il s'agit d'un filtre situé entre Dropshadow et Glow. Les paramètres suivants peuvent être utilisés dans ce filtre -
| Sr.No. | Paramètre et description |
|---|---|
| 1 | color La couleur que vous voulez que l'ombre soit. |
| 2 | direction La direction du flou, dans le sens des aiguilles d'une montre, arrondie à des incréments de 45 degrés. La valeur par défaut est 270 (à gauche). 0 = Haut 45 = En haut à droite 90 = Droite 135 = En bas à droite 180 = bas 225 = En bas à gauche 270 = Gauche 315 = En haut à gauche |
Exemple
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family:
Arial Black;
color: red;
filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials
</div>
</body>
</html>Cela produira le résultat suivant -
Effet de vague
L'effet d'onde est utilisé pour donner à l'objet une distorsion d'onde sinusoïdale pour lui donner un aspect ondulé. Les paramètres suivants peuvent être utilisés dans ce filtre -
| Sr.No. | Paramètre et description |
|---|---|
| 1 | add Une valeur de 1 ajoute l'image d'origine à l'image ondulée, 0 ne le fait pas. |
| 2 | freq Le nombre de vagues. |
| 3 | light La force de la lumière sur l'onde (de 0 à 100). |
| 4 | phase À quel degré l'onde sinusoïdale doit commencer (de 0 à 100). |
| 5 | strength L'intensité de l'effet de vague. |
Exemple
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000)
Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
</div>
</body>
</html>Cela produira le résultat suivant -
Effet X-Ray
Effet X-Ray en niveaux de gris et aplatit la profondeur de couleur. Le paramètre suivant est utilisé dans ce filtre:
| Sr.No. | Paramètre et description |
|---|---|
| 1 | xray Niveaux de gris et aplatit la profondeur de la couleur. |
Exemple
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Xray">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Xray">CSS Tutorials
</div>
</body>
</html>Cela produira le résultat suivant -
Ci-dessous un exemple -
<style tyle = "text/css">
<!--
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}
-->
</style>La langue du document
En HTML 4.0, l' attribut media sur l'élément LINK spécifie le média cible d'une feuille de style externe -
Voici un exemple -
<style tyle = "text/css">
<!--
<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<head>
<title>link to a target medium</title>
<link rel = "stylesheet" type = "text/css" media = "print,
handheld" href = "foo.css">
</head>
<body>
<p>the body...
</body>
</html>
-->
</style>Types de supports reconnus
Les noms choisis pour les types de médias CSS reflètent les périphériques cibles pour lesquels les propriétés pertinentes ont un sens. Ils donnent une idée de l'appareil auquel le type de média est censé se référer. Vous trouverez ci-dessous une liste de différents types de supports
| Sr.No. | Valeur et description |
|---|---|
| 1 | all Convient à tous les appareils. |
| 2 | aural Destiné aux synthétiseurs vocaux. |
| 3 | braille Destiné aux dispositifs de retour tactile en braille. |
| 4 | embossed Destiné aux imprimantes braille paginées. |
| 5 | handheld Destiné aux appareils portables (généralement petit écran, monochrome, bande passante limitée). |
| 6 | Destiné aux documents paginés et opaques et aux documents affichés à l'écran en mode d'aperçu avant impression. Veuillez consulter la section sur les médias paginés. |
| sept | projection Destiné aux présentations projetées, par exemple des projecteurs ou à l'impression sur des transparents. Veuillez consulter la section sur les médias paginés. |
| 8 | screen Destiné principalement aux écrans d'ordinateur couleur. |
| 9 | tty Destiné aux médias utilisant une grille de caractères à pas fixe, tels que les télétypes, les terminaux ou les appareils portables avec des capacités d'affichage limitées. |
| dix | tv Destiné aux appareils de type télévision. |
NOTE - Les noms de type de média ne sont pas sensibles à la casse.
Le CSS2 définit une "boîte de page", une boîte de dimensions finies dans laquelle le contenu est rendu. La zone de page est une zone rectangulaire qui contient deux zones -
The page area- La zone de page comprend les boîtes disposées sur cette page. Les bords de la zone de page agissent comme le bloc contenant initial pour la mise en page qui se produit entre les sauts de page.
The margin area - Il entoure la zone de page.
Vous pouvez spécifier les dimensions, l'orientation, les marges, etc., d'une zone de page dans une règle @page. Les dimensions de la zone de page sont définies avec la propriété 'size'. Les dimensions de la zone de page sont les dimensions de la zone de page moins la zone de marge.
Par exemple, la règle @page suivante définit la taille de la zone de page sur 8,5 × 11 pouces et crée une marge de «2 cm» sur tous les côtés entre le bord de la zone de page et la zone de page -
<style type = "text/css">
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>Vous pouvez utiliser les propriétés margin, margin-top, margin-bottom, margin-left et margin-right dans la règle @page pour définir les marges de votre page.
Enfin, la propriété marks est utilisée dans la règle @page pour créer des marques de recadrage et de repérage en dehors de la zone de page sur la feuille cible. Par défaut, aucune marque n'est imprimée. Vous pouvez utiliser un ou les deux mots-clés crop et cross pour créer respectivement des repères de coupe et des repères de repérage sur la page d'impression cible.
Définition de la taille de la page
La propriété size spécifie la taille et l'orientation d'une zone de page. Quatre valeurs peuvent être utilisées pour la taille de la page -
auto - La zone de page sera définie sur la taille et l'orientation de la feuille cible.
landscape- Remplace l'orientation de la cible. La zone de page a la même taille que la cible et les côtés les plus longs sont horizontaux.
portrait- Remplace l'orientation de la cible. La zone de page a la même taille que la cible et les côtés les plus courts sont horizontaux.
length- Les valeurs de longueur pour la propriété 'size' créent une zone de page absolue. Si une seule valeur de longueur est spécifiée, elle définit à la fois la largeur et la hauteur de la zone de page. Les valeurs de pourcentage ne sont pas autorisées pour la propriété 'size'.
Dans l'exemple suivant, les bords extérieurs de la zone de page s'aligneront sur la cible. La valeur en pourcentage de la propriété «margin» est relative à la taille cible, donc si les dimensions de la feuille cible sont de 21,0 cm × 29,7 cm (c'est-à-dire A4), les marges sont de 2,10 cm et 2,97 cm.
<style type = "text/css">
<!--
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
-->
</style>L'exemple suivant définit la largeur de la zone de page sur 8,5 pouces et la hauteur sur 11 pouces. La zone de page dans cet exemple nécessite une taille de feuille cible de 8,5 "× 11" ou plus.
<style type = "text/css">
<!--
@page {
size: 8.5in 11in; /* width height */
}
-->
</style>Une fois que vous avez créé une mise en page nommée, vous pouvez l'utiliser dans votre document en ajoutant la propriété de page à un style qui sera ensuite appliqué à un élément de votre document. Par exemple, ce style rend toutes les tables de votre document sur des pages en mode paysage -
<style type = "text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>En raison de la règle ci-dessus, lors de l'impression, si le navigateur rencontre un élément <table> dans votre document et que la mise en page actuelle est la mise en page portrait par défaut, il démarre une nouvelle page et imprime le tableau sur une page paysage.
Pages gauche, droite et première
Lors de l'impression de documents recto verso, les zones de page des pages gauche et droite doivent être différentes. Il peut être exprimé à travers deux pseudo-classes CSS comme suit -
<style type = "text/css">
<!--
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
-->
</style>Vous pouvez spécifier le style de la première page d'un document avec la: première pseudo-classe -
<style type = "text/css">
<!--
@page { margin: 2cm } /* All margins set to 2cm */
@page :first {
margin-top: 10cm /* Top margin on first page 10cm */
}
-->
</style>Contrôle de la pagination
Sauf indication contraire, les sauts de page se produisent uniquement lorsque le format de page change ou lorsque le contenu déborde de la zone de page actuelle. Pour forcer ou supprimer les sauts de page, utilisez les propriétés page-break-before, page-break-after et page-break-inside .
Le saut de page avant et le saut de page après acceptent les mots clés auto, toujours, éviter, gauche et droite .
Le mot - clé auto est la valeur par défaut, il permet au navigateur de générer des sauts de page selon les besoins. Le mot-clé force toujours un saut de page avant ou après l'élément, tandis que eviter supprime un saut de page immédiatement avant ou après l'élément. Les mots-clés gauche et droit forcent un ou deux sauts de page, de sorte que l'élément est rendu sur une page de gauche ou de droite.
L'utilisation des propriétés de pagination est assez simple. Supposons que votre document ait des en-têtes de niveau 1 pour commencer de nouveaux chapitres avec des en-têtes de niveau 2 pour désigner les sections. Vous souhaitez que chaque chapitre commence sur une nouvelle page de droite, mais vous ne voulez pas que les en-têtes de section soient divisés en un saut de page à partir du contenu suivant. Vous pouvez y parvenir en utilisant la règle suivante -
<style type = "text/css">
<!--
h1 { page-break-before : right }
h2 { page-break-after : avoid }
-->
</style>Utilisez uniquement les valeurs auto et évitez avec la propriété page-break-inside . Si vous préférez que vos tableaux ne soient pas divisés en pages si possible, vous écririez la règle -
<style type = "text/css">
<!--
table { page-break-inside : avoid }
-->
</style>Contrôle des veuves et des orphelins
Dans le jargon typographique, les orphelins sont les lignes d'un paragraphe échouées en bas d'une page en raison d'un saut de page, tandis que les veuves sont les lignes qui restent en haut d'une page après un saut de page. En règle générale, les pages imprimées ne semblent pas attrayantes avec des lignes de texte simples échouées en haut ou en bas. La plupart des imprimantes essaient de laisser au moins deux lignes de texte ou plus en haut ou en bas de chaque page.
le orphans property spécifie le nombre minimum de lignes d'un paragraphe qui doivent être laissées en bas d'une page.
le widows property spécifie le nombre minimum de lignes d'un paragraphe qui doivent être laissées en haut d'une page.
Voici l'exemple pour créer 4 lignes en bas et 3 lignes en haut de chaque page -
<style type = "text/css">
<!--
@page{orphans:4; widows:2;}
-->
</style>- Documentation médicale
Lors de l'utilisation des propriétés auditives, le canevas se compose d'un espace physique tridimensionnel (son entoure) et d'un espace temporel (on peut spécifier des sons avant, pendant et après d'autres sons).
Les propriétés CSS permettent également de faire varier la qualité de la parole synthétisée (type de voix, fréquence, flexion, etc.).
Voici un exemple -
<html>
<head>
<style type = "text/css">
h1, h2, h3, h4, h5, h6 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("../audio/pop.au");
}
p {
azimuth:center-right;
}
</style>
</head>
<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>Cela produira le résultat suivant -
Il dirigera le synthétiseur vocal pour qu'il prononce les en-têtes d'une voix (sorte de police audio) appelée "paul", sur un ton plat, mais d'une voix très riche. Avant de prononcer les en-têtes, un échantillon sonore sera lu à partir de l'URL donnée.
Les paragraphes avec la classe «heidi» sembleront provenir de l'avant gauche (si le système audio est capable de produire un son spatial) et les paragraphes de la classe «peter» de la droite.
Nous allons maintenant voir les différentes propriétés liées aux médias auditifs.
le azimuth jeux de propriétés, d'où le son doit provenir horizontalement.
le elevation ensembles de propriétés, d'où le son doit provenir verticalement.
le cue-after spécifie un son à jouer après avoir prononcé le contenu d'un élément pour le délimiter des autres.
le cue-before spécifie un son à jouer avant de prononcer le contenu d'un élément pour le délimiter des autres.
le cue est un raccourci pour définir le cue-before et le cue-after.
le pause-after spécifie une pause à observer après avoir prononcé le contenu d'un élément.
le pause-before spécifie une pause à observer avant de prononcer le contenu d'un élément.
le pause est un raccourci pour définir une pause avant et une pause après.
le pitch spécifie la hauteur moyenne (une fréquence) de la voix parlée.
le pitch-range spécifie la variation du pas moyen.
le play-during spécifie un son à jouer comme arrière-plan pendant que le contenu d'un élément est prononcé.
le richness spécifie la richesse ou la luminosité de la voix qui parle.
le speak spécifie si le texte sera rendu auditif et si oui, de quelle manière.
le speak-numeral contrôle la façon dont les chiffres sont prononcés.
le speak-punctuation spécifie comment la ponctuation est prononcée.
le speech-rate spécifie le taux de parole.
le stress spécifie la hauteur des "pics locaux" dans le contour d'intonation d'une voix.
le voice-family spécifie la liste prioritaire des noms de famille de voix.
le volume fait référence au volume médian de la voix.
La propriété azimut
La propriété azimut définit la provenance horizontale du son. Les valeurs possibles sont listées ci-dessous -
angle- La position est décrite en termes d'angle compris entre -360 ° et 360 ° . La valeur 0deg signifie directement devant au centre de la scène sonore. 90deg est à droite, 180deg derrière et 270deg (ou, de manière équivalente et plus pratique, -90deg ) à gauche.
left-side- Identique à «270deg». Avec «derrière», «270deg».
far-left- Identique à «300deg». Avec «derrière», «240deg».
left- Identique à «320deg». Avec «derrière», «220deg».
center-left- Identique à «340deg». Avec «derrière», «200deg».
center- Identique à «0deg». Avec «derrière», «180deg».
center-right- Identique à «20deg». Avec «derrière», «160deg».
right- Identique à '40deg'. Avec «derrière», «140deg».
far-right- Identique à «60deg». Avec «derrière», «120deg».
right-side- Identique à «90deg». Avec «derrière», «90deg».
leftwards- Déplace le son vers la gauche et par rapport à l'angle actuel. Plus précisément, soustrait 20 degrés.
rightwards- Déplace le son vers la droite, par rapport à l'angle actuel. Plus précisément, ajoute 20 degrés.
Voici un exemple -
<style type = "text/css">
<!--
h1 { azimuth: 30deg }
td.a { azimuth: far-right } /* 60deg */
#12 { azimuth: behind far-right } /* 120deg */
p.comment { azimuth: behind } /* 180deg */
-->
</style>La propriété d'élévation
La propriété d'élévation définit d'où le son doit provenir verticalement. Les valeurs possibles sont les suivantes -
angle- Spécifie l'élévation sous la forme d'un angle, entre -90 ° et 90 ° . 0deg signifie à l'horizon avant, ce qui signifie vaguement au niveau de l'auditeur. 90deg signifie directement au-dessus et -90deg signifie directement en dessous.
below - Identique à «-90deg».
level - Identique à «0deg».
above - Identique à «90deg».
higher - Ajoute 10 degrés à l'élévation actuelle.
lower - Soustrait 10 degrés de l'élévation actuelle.
Voici un exemple -
<style type = "text/css">
<!--
h1 { elevation: above }
tr.a { elevation: 60deg }
tr.b { elevation: 30deg }
tr.c { elevation: level }
-->
</style>La propriété cue-after
La propriété cue-after spécifie un son à jouer après avoir prononcé le contenu d'un élément pour le délimiter des autres. Les valeurs possibles incluent -
url - L'URL d'un fichier son à lire.
none - Rien ne doit être joué.
Voici un exemple -
<style type = "text/css">
<!--
a {cue-after: url("dong.wav");}
h1 {cue-after: url("pop.au"); }
-->
</style>La propriété cue-before
Cette propriété spécifie un son à jouer avant de prononcer le contenu d'un élément pour le délimiter des autres. Les valeurs possibles sont -
url - L'URL d'un fichier son à lire.
none - Rien ne doit être joué.
Voici un exemple -
<style type = "text/css">
<!--
a {cue-before: url("bell.aiff");}
h1 {cue-before: url("pop.au"); }
-->
</style>La propriété cue
La propriété cue est un raccourci pour définir cue-before et cue-after . Si deux valeurs sont données, la première valeur est cue-before et la seconde est cue-after . Si une seule valeur est donnée, elle s'applique aux deux propriétés.
Par exemple, les deux règles suivantes sont équivalentes -
<style type = "text/css">
<!--
h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
h1 {cue: url("pop.au") }
-->
</style>La propriété pause-after
Cette propriété spécifie une pause à observer après avoir prononcé le contenu d'un élément. Les valeurs possibles sont -
time - Exprime la pause en unités de temps absolues (secondes et millisecondes).
percentage- Fait référence à l'inverse de la valeur de la propriété speech-rate . Par exemple, si le taux de parole est de 120 mots par minute (c'est-à-dire qu'un mot prend une demi-seconde ou 500 ms), une pause après de 100% signifie une pause de 500 ms et une pause après de 20% signifie 100 ms .
La propriété pause-before
Cette propriété spécifie une pause à observer avant de prononcer le contenu d'un élément. Les valeurs possibles sont -
time - Exprime la pause en unités de temps absolues (secondes et millisecondes).
percentage- Fait référence à l'inverse de la valeur de la propriété speech-rate . Par exemple, si le taux de parole est de 120 mots par minute (c'est-à-dire qu'un mot prend une demi-seconde ou 500 ms), une pause avant de 100% signifie une pause de 500 ms et une pause avant de 20% signifie 100 ms .
La propriété pause
Cette propriété est un raccourci pour définir une pause-avant et une pause-après . Si deux valeurs sont données, la première valeur est pause-before et la seconde est pause-after.
Voici un exemple -
<style type = "text/css">
<!--
/* pause-before: 20ms; pause-after: 20ms */
h1 { pause : 20ms }
/* pause-before: 30ms; pause-after: 40ms */
h2{ pause : 30ms 40ms }
/* pause-before: ?; pause-after: 10ms */
h3 { pause-after : 10ms }
-->
</style>La propriété pitch
Cette propriété spécifie la hauteur moyenne (une fréquence) de la voix parlée. La hauteur moyenne d'une voix dépend de la famille de voix. Par exemple, la hauteur moyenne d'une voix masculine standard est d'environ 120 Hz, mais pour une voix féminine, elle est d'environ 210 Hz. Les valeurs possibles sont -
frequency - Spécifie la hauteur moyenne de la voix parlée en hertz (Hz).
x-low, low, medium, high, x-high - Ces valeurs ne correspondent pas à des fréquences absolues car ces valeurs dépendent de la famille de voix.
La propriété pitch-range
Cette propriété spécifie la variation du pas moyen. Les valeurs possibles sont -
number- Une valeur comprise entre «0» et «100». Une plage de hauteur de «0» produit une voix plate et monotone. Une plage de pas de 50 produit une flexion normale. Les plages de hauteur supérieures à 50 produisent des voix animées.
La propriété play-pendant
Cette propriété spécifie un son à jouer en arrière-plan pendant que le contenu d'un élément est prononcé. Les valeurs possibles peuvent être l'une des suivantes -
URI - Le son désigné par ce <uri> est joué comme arrière-plan pendant que le contenu de l'élément est prononcé.
mix- Lorsqu'il est présent, ce mot-clé signifie que le son hérité de la propriété play-during de l'élément parent continue de jouer et que le son désigné par l' URI est mélangé avec lui. Si mix n'est pas spécifié, le son d'arrière-plan de l'élément remplace celui du parent.
repeat- Lorsqu'il est présent, ce mot-clé signifie que le son se répétera s'il est trop court pour remplir toute la durée de l'élément. Sinon, le son est lu une fois, puis s'arrête.
auto - Le son de l'élément parent continue de jouer.
none - Ce mot-clé signifie qu'il y a silence.
Voici un exemple -
<style type = "text/css">
<!--
blockquote.sad { play-during: url("violins.aiff") }
blockquote q { play-during: url("harp.wav") mix }
span.quiet { play-during: none }
-->
</style>La Propriété Richesse
Cette propriété spécifie la richesse ou la luminosité de la voix parlée. Les valeurs possibles sont -
number- Une valeur comprise entre «0» et «100». Plus la valeur est élevée, plus la voix portera. Une valeur inférieure produira une voix douce et mélodieuse.
La propriété speak
Cette propriété spécifie si le texte sera rendu auditif et si oui, de quelle manière. Les valeurs possibles sont -
none - Supprime le rendu auditif afin que l'élément ne nécessite pas de temps pour le rendu.
normal - Utilise des règles de prononciation dépendant de la langue pour rendre un élément et ses enfants.
spell-out - Épelle le texte une lettre à la fois.
Notez la différence entre un élément dont la propriété 'volume' a la valeur 'silent' et un élément dont la propriété 'speak' a la valeur 'none'. Le premier prend le même temps que s'il avait été prononcé, y compris toute pause avant et après l'élément, mais aucun son n'est généré. Ce dernier ne nécessite aucun temps et n'est pas rendu.
La propriété speak-numeral
Cette propriété contrôle la façon dont les chiffres sont prononcés. Les valeurs possibles sont -
digits- Énoncez le chiffre sous forme de chiffres individuels. Ainsi, "237" est prononcé "Deux Trois Sept".
continuous- Énoncez le chiffre comme un nombre entier. Ainsi, «237» est dit «Deux cent trente sept». Les représentations de mots dépendent de la langue.
La propriété speak-ponctuation
Cette propriété spécifie la manière dont la ponctuation est prononcée. Les valeurs possibles sont -
code - Les ponctuations telles que les points-virgules, les accolades, etc. doivent être prononcées littéralement.
none - La ponctuation ne doit pas être prononcée, mais rendue naturellement par diverses pauses.
La propriété speech-rate
Cette propriété spécifie le taux de parole. Notez que les valeurs de mots clés absolues et relatives sont autorisées. Les valeurs possibles sont -
number - Spécifie le taux de parole en mots par minute.
x-slow - Identique à 80 mots par minute.
slow - Identique à 120 mots par minute.
medium - Identique à 180 - 200 mots par minute.
fast - Identique à 300 mots par minute.
x-fast - Identique à 500 mots par minute.
faster - Ajoute 40 mots par minute au taux de parole actuel.
slower - Soustrait 40 mots par minute du taux de parole actuel.
La propriété de stress
Cette propriété spécifie la hauteur des "pics locaux" dans le contour d'intonation d'une voix. L'anglais est une langue stressée, et différentes parties d'une phrase se voient attribuer un stress primaire, secondaire ou tertiaire. Les valeurs possibles sont -
number- Une valeur comprise entre «0» et «100». La signification des valeurs dépend de la langue parlée. Par exemple, un niveau de «50» pour une voix d'homme anglophone standard (hauteur moyenne = 122 Hz), parler avec une intonation et une emphase normales aurait une signification différente de «50» pour une voix italienne.
La propriété de la famille vocale
La valeur est une liste hiérarchisée de noms de famille de voix séparés par des virgules. Il peut avoir les valeurs suivantes -
generic-voice- Les valeurs sont des familles de voix. Les valeurs possibles sont «homme», «femme» et «enfant».
specific-voice - Les valeurs sont des instances spécifiques (par exemple, comédien, trinoïdes, carlos, lani).
Voici un exemple -
<style type = "text/css">
<!--
h1 { voice-family: announcer, male }
p.part.romeo { voice-family: romeo, male }
p.part.juliet { voice-family: juliet, female }
-->
</style>La propriété volume
Le volume fait référence au volume médian de la voix. Il peut avoir les valeurs suivantes -
numbers- Tout nombre compris entre «0» et «100». «0» représente le niveau de volume sonore minimum et 100 correspond au niveau de confort maximum.
percentage - Ces valeurs sont calculées par rapport à la valeur héritée, puis sont coupées dans la plage «0» à «100».
silent- Pas de son du tout. La valeur «0» ne signifie pas la même chose que «silencieux».
x-soft - Identique à «0».
soft - Identique à «25».
medium - Identique à «50».
loud - Identique à «75».
x-loud - Identique à «100».
Voici un exemple -
<style type = "text/css">
<!--
P.goat { volume: x-soft }
-->
</style>Paragraphes avec classe goat sera très doux.
@media print {
p.bodyText {font-family:georgia, times, serif;}
}
@media screen, print {
p.bodyText {font-size:10pt}
}Si vous définissez votre feuille de style dans un fichier séparé, vous pouvez également utiliser l'attribut media lors de la liaison à une feuille de style externe -
<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">CSS est essentiel pour l'avenir des documents Web et sera pris en charge par la plupart des navigateurs.
Le CSS est plus exact que les tableaux, ce qui permet à votre document d'être affiché comme vous le souhaitez, quelle que soit la fenêtre du navigateur.
Garder une trace des tables imbriquées peut être une vraie douleur. Les règles CSS ont tendance à être bien organisées, faciles à lire et à modifier facilement.
Enfin, nous vous suggérons d'utiliser la technologie qui vous convient le mieux et d'utiliser ce que vous savez ou ce qui présente vos documents de la meilleure façon.
CSS fournit également une propriété de mise en page de table pour accélérer le chargement de vos tables. Voici un exemple -
<table style = "table-layout:fixed;width:600px;">
<tr height = "30">
<td width = "150">CSS table layout cell 1</td>
<td width = "200">CSS table layout cell 2</td>
<td width = "250">CSS table layout cell 3</td>
</tr>
</table>Vous remarquerez davantage les avantages sur les grandes tables. Avec le HTML traditionnel, le navigateur devait calculer chaque cellule avant de finalement rendre le tableau. Cependant, lorsque vous définissez l'algorithme de mise en page du tableau sur fixe , il suffit de regarder la première ligne avant de rendre l'ensemble du tableau. Cela signifie que votre table devra avoir des largeurs de colonne et des hauteurs de ligne fixes.
Exemple de disposition de colonne
Voici les étapes pour créer une disposition de colonne simple en utilisant CSS -
Définissez la marge et le remplissage du document complet comme suit -
<style style = "text/css">
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style>Maintenant, nous allons définir une colonne de couleur jaune et plus tard, nous attacherons cette règle à un <div> -
<style style = "text/css">
<!--
#level0 {
background:#FC0;
}
-->
</style>Jusqu'à ce point, nous aurons un document avec un corps jaune, définissons maintenant une autre division à l'intérieur de level0 -
<style style = "text/css">
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
-->
</style>Maintenant, nous allons imbriquer une autre division à l'intérieur du niveau 1, et nous ne changerons que la couleur d'arrière-plan -
<style style = "text/css">
<!--
#level2 {
background:#FFF3AC;
}
-->
</style>Enfin, nous utiliserons la même technique, imbriquer une division de niveau3 à l'intérieur de niveau2 pour obtenir la disposition visuelle de la colonne de droite -
<style style = "text/css">
<!--
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {
background:#CCC;
}
-->
</style>Complétez le code source comme suit -
<style style = "text/css">
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
#level0 {background:#FC0;}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
#level2 {background:#FFF3AC;}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {background:#CCC;}
</style>
<body>
<div id = "level0">
<div id = "level1">
<div id = "level2">
<div id = "level3">
<div id = "main">
Final Content goes here...
</div>
</div>
</div>
</div>
</div>
</body>De même, vous pouvez ajouter une barre de navigation supérieure ou une barre d'annonces en haut de la page.
Cela produira le résultat suivant -
Validateur CSS du W3C (World Wide Web Consortium), ce validateur vérifie votre css soit par téléchargement de fichier, entrée directe ou en utilisant l'URI - une page à la fois. Ce validateur vous aide à localiser toutes les erreurs dans votre CSS. Le validateur de contrôle CSS WDG vous permet de valider votre css par entrée directe, téléchargement de fichier et utilisation de l'URI. Les erreurs seront répertoriées par numéros de ligne et de colonne si vous en avez. Les erreurs sont généralement accompagnées de liens expliquant la raison de l'erreur.Un validateur CSS vérifie vos feuilles de style en cascade pour s'assurer qu'elles sont conformes aux normes CSS définies par le consortium W3. Il existe quelques validateurs qui vous diront également quelles fonctionnalités CSS sont prises en charge par quels navigateurs (puisque tous les navigateurs ne sont pas égaux dans leur implémentation CSS).
Pourquoi valider votre code HTML?
Il y a un certain nombre de raisons pour lesquelles vous devriez valider votre code. Mais les principaux sont -
Il aide à la compatibilité entre navigateurs, plates-formes et futures.
Un site Web de bonne qualité augmente la visibilité des moteurs de recherche.
Professionnalisme: en tant que développeur Web, votre code ne doit pas générer d'erreurs lorsqu'il est vu par les visiteurs.
CSS3 est une collaboration de spécifications CSS2 et de nouvelles spécifications, nous pouvons appeler cette collaboration est module. Certains des modules sont illustrés ci-dessous -
- Selectors
- Modèle de boîte
- Backgrounds
- Valeurs d'image et contenu remplacé
- Effets de texte
- Transformations 2D
- Transformations 3D
- Animations
- Disposition à plusieurs colonnes
- Interface utilisateur
Le tableau suivant montre les valeurs possibles pour les coins arrondis comme suit -
| Sr.No. | Valeur et description |
|---|---|
| 1 | border-radius Utilisez cet élément pour définir la propriété du rayon des quatre frontières |
| 2 | border-top-left-radius Utilisez cet élément pour définir la frontière du coin supérieur gauche |
| 3 | border-top-right-radius Utilisez cet élément pour définir la frontière du coin supérieur droit |
| 4 | border-bottom-right-radius Utilisez cet élément pour définir la frontière du coin inférieur droit |
| 5 | border-bottom-left-radius Utilisez cet élément pour définir la frontière du coin inférieur gauche |
Exemple
Cette propriété peut avoir trois valeurs. L'exemple suivant utilise à la fois les valeurs -
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(/css/images/logo.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id = "rcorners1">Rounded corners!</p>
<p id = "rcorners2">Rounded corners!</p>
<p id = "rcorners3">Rounded corners!</p>
</body>
</html>Cela produira le résultat suivant -
Chaque propriété Corner
Nous pouvons spécifier la propriété de chaque coin comme indiqué ci-dessous dans l'exemple -
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id = "rcorners1"></p>
<p id = "rcorners2"></p>
<p id = "rcorners3"></p>
</body>
<body>Cela produira le résultat suivant -
| Sr.No. | Valeur et description |
|---|---|
| 1 | border-image-source Utilisé pour définir le chemin de l'image |
| 2 | border-image-slice Utilisé pour découper l'image du pensionnaire |
| 3 | border-image-width Utilisé pour définir la largeur de l'image du pensionnaire |
| 4 | border-image-repeat Utilisé pour définir l'image du pensionnaire comme arrondie, répétée et étirée |
Exemple
Voici l'exemple qui montre comment définir l'image comme bordure pour les éléments.
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
}
</style>
</head>
<body>
<p id = "borderimg1">This is image boarder example.</p>
<p id = "borderimg2">This is image boarder example.</p>
<p id = "borderimg3">This is image boarder example.</p>
</body>
</html>Cela produira le résultat suivant -
Les valeurs les plus couramment utilisées sont indiquées ci-dessous -
| Sr.No. | Valeur et description |
|---|---|
| 1 | background Utilisé pour définir toutes les propriétés de l'image d'arrière-plan dans une section |
| 2 | background-clip Utilisé pour déclarer la zone de peinture de l'arrière-plan |
| 3 | background-image Utilisé pour spécifier l'image d'arrière-plan |
| 4 | background-origin Utilisé pour spécifier la position des images d'arrière-plan |
| 5 | background-size Utilisé pour spécifier la taille des images d'arrière-plan |
Exemple
Voici l'exemple qui montre les images d'arrière-plan multiples.
<html>
<head>
<style>
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>
</head>
<body>
<div id = "multibackground">
<h1>www.tutorialspoint.com</h1>
<p>
Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web designing
to academics and much more..
</p>
</div>
</body>
</html>Cela produira le résultat suivant -
Taille du fond multi
La propriété multi-arrière-plan est acceptée pour ajouter différentes tailles pour différentes images.Un exemple de syntaxe est comme indiqué ci-dessous -
#multibackground {
background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
background-size: 50px, 130px, auto;
}Comme indiqué ci-dessus, chaque image a des tailles spécifiques telles que 50px, 130px et la taille automatique.
#d1 {background-color: rgba(255, 0, 0, 0.5);}
#d2 {background-color: rgba(0, 255, 0, 0.5);}
#d3 {background-color: rgba(0, 0, 255, 0.5);}HSL signifie hue, saturation, lightnessIci, Énorme est un degré sur la roue chromatique, la saturation et la luminosité sont des valeurs en pourcentage comprises entre 0 et 100%. Un exemple de syntaxe de HSL comme indiqué ci-dessous -
#g1 {background-color: hsl(120, 100%, 50%);}
#g2 {background-color: hsl(120, 100%, 75%);}
#g3 {background-color: hsl(120, 100%, 25%);}HSLA signifie hue, saturation, lightness and alpha. La valeur alpha spécifie l'opacité comme indiqué RVBA. Un exemple de syntaxe de HSLA comme indiqué ci-dessous -
#g1 {background-color: hsla(120, 100%, 50%, 0.3);}
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}opacityest une peinture plus fine qui nécessite un ajout de noir pour augmenter l'opacité. Un exemple de syntaxe d'opacité est illustré ci-dessous -
#g1 {background-color:rgb(255,0,0);opacity:0.6;}
#g2 {background-color:rgb(0,255,0);opacity:0.6;}
#g3 {background-color:rgb(0,0,255);opacity:0.6;}L'exemple suivant montre la propriété de couleur rgba.
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
</style>
</head>
<body>
<p>RGBA colors:</p>
<p id = "p1">Red</p>
<p id = "p2">Green</p>
<p id = "p3">Blue</p>
</body>
</html>Cela produira le résultat suivant -
L'exemple suivant montre la propriété de couleur HSL.
<html>
<head>
<style>
#g1 {background-color:hsl(120, 100%, 50%);}
#g2 {background-color:hsl(120,100%,75%);}
#g3 {background-color:hsl(120,100%,25%);}
</style>
</head>
<body>
<p>HSL colors:</p>
<p id = "g1">Green</p>
<p id = "g2">Normal Green</p>
<p id = "g3">Dark Green</p>
</body>
</html>Cela produira le résultat suivant -
L'exemple suivant montre la propriété de couleur HSLA.
<html>
<head>
<style>
#d1 {background-color:hsla(120,100%,50%,0.3);}
#d2 {background-color:hsla(120,100%,75%,0.3);}
#d3 {background-color:hsla(120,100%,25%,0.3);}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id = "d1">Less opacity green</p>
<p id = "d2">Green</p>
<p id = "d3">Green</p>
</body>
</html>Cela produira le résultat suivant -
L'exemple suivant montre la propriété Opacity.
<html>
<head>
<style>
#m1 {background-color:rgb(255,0,0);opacity:0.6;}
#m2 {background-color:rgb(0,255,0);opacity:0.6;}
#m3 {background-color:rgb(0,0,255);opacity:0.6;}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id = "m1">Red</p>
<p id = "m2">Green</p>
<p id = "m3">Blue</p>
</body>
</html>Cela produira le résultat suivant -
Dégradés linéaires
Les dégradés linéaires sont utilisés pour organiser deux couleurs ou plus dans des formats linéaires comme de haut en bas.
De haut en bas
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(pink,green);
background: -o-linear-gradient(pink,green);
background: -moz-linear-gradient(pink,green);
background: linear-gradient(pink,green);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Cela produira le résultat suivant -
De gauche à droite
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Cela produira le résultat suivant -
Diagonale
La diagonale commence au bouton supérieur gauche et droit.
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Cela produira le résultat suivant -
Multi couleur
<html>
<head>
<style>
#grad2 {
height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: linear-gradient(red, orange, yellow, red, blue, green,pink);
}
</style>
</head>
<body>
<div id = "grad2"></div>
</body>
</html>Cela produira le résultat suivant -
Dégradés radiaux CSS3
Des dégradés radiaux apparaissent au centre.
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Cela produira le résultat suivant -
Répéter les dégradés radiaux CSS3
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Cela produira le résultat suivant -
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>Cela produira le résultat suivant -
boîte ombre
Utilisé pour ajouter des effets d'ombre aux éléments, voici l'exemple pour ajouter des effets d'ombre à l'élément.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: red;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow</div>
</body>
</html>Cela produira le résultat suivant -
| Sr.No. | Valeur et description |
|---|---|
| 1 | text-align-last Utilisé pour aligner la dernière ligne du texte |
| 2 | text-emphasis Utilisé pour mettre en valeur le texte et la couleur |
| 3 | text-overflow utilisé pour déterminer comment le contenu débordé qui n'est pas affiché est signalé aux utilisateurs |
| 4 | word-break Utilisé pour couper la ligne en fonction du mot |
| 5 | word-wrap Utilisé pour casser la ligne et passer à la ligne suivante |
Débordement de texte
La propriété text-overflow détermine comment le contenu débordé qui n'est pas affiché est signalé aux utilisateurs. l'exemple d'exemple de dépassement de texte est présenté comme suit -
<html>
<head>
<style>
p.text1 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.text2 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<b>Original Text:</b>
<p>
Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.
</p>
<b>Text overflow:clip:</b>
<p class = "text1">
Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of their
drawing rooms.
</p>
<b>Text overflow:ellipsis</b>
<p class = "text2">
Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.
</p>
</body>
</html>Cela produira le résultat suivant -
Rupture de mot CSS3
Utilisé pour casser la ligne, le code suivant montre l'exemple de code de saut de mot.
<html>
<head>
<style>
p.text1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.text2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<b>line break at hyphens:</b>
<p class = "text1">
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of
their drawing rooms.
</p>
<b>line break at any character</b>
<p class = "text2">
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.
</p>
</body>
</html>Cela produira le résultat suivant -
Emballage de mots CSS
L'habillage de mots est utilisé pour couper la ligne et passer à la ligne suivante.Le code suivant aura un exemple de syntaxe -
p {
word-wrap: break-word;
}| 1 | TrueType Fonts (TTF) TrueType est une norme de police de contour développée par Apple et Microsoft à la fin des années 1980.Il est devenu les polices les plus courantes pour les systèmes d'exploitation Windows et MAC. |
| 2 | OpenType Fonts (OTF) OpenType est un format pour les polices informatiques évolutives et développé par Microsoft |
| 3 | The Web Open Font Format (WOFF) WOFF est utilisé pour développer la page Web et développé en 2009. Maintenant, il utilise la recommandation du W3C. |
| 4 | SVG Fonts/Shapes SVG autorise les polices SVG dans la documentation SVG. Nous pouvons également appliquer CSS à SVG avec la propriété font face. |
| 5 | Embedded OpenType Fonts (EOT) EOT est utilisé pour développer les pages Web et il est intégré dans les pages Web, donc pas besoin d'autoriser les polices tierces |
Le code suivant montre l'exemple de code de la police face -
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(/css/font/SansationLight.woff);
}
div {
font-family: myFirstFont;
}
</Style>
</head>
<body>
<div>This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS3.</p>
</body>
</html>Cela produira le résultat suivant -
Description des polices
La liste suivante contenait toutes les descriptions des polices qui sont placées dans la règle @ font-face -
| Sr.No. | Valeur et description |
|---|---|
| 1 | font-family Utilisé pour définir le nom de la police |
| 2 | src Utilisé pour définir l'URL |
| 3 | font-stretch Utilisé pour trouver, comment la police doit être étirée |
| 4 | font-style Utilisé pour définir le style des polices |
| 5 | font-weight Utilisé pour définir l'épaisseur de la police (gras) |
| 1 | matrix(n,n,n,n,n,n) Utilisé pour définir les transformations matricielles avec six valeurs |
| 2 | translate(x,y) Utilisé pour transformer l'élément le long de l'axe des x et de l'axe des y |
| 3 | translateX(n) Utilisé pour transformer l'élément avec l'axe des x |
| 4 | translateY(n) Utilisé pour transformer l'élément le long de l'axe y |
| 5 | scale(x,y) Utilisé pour changer la largeur et la hauteur de l'élément |
| 6 | scaleX(n) Utilisé pour changer la largeur de l'élément |
| sept | scaleY(n) Utilisé pour changer la hauteur de l'élément |
| 8 | rotate(angle) Utilisé pour faire pivoter l'élément en fonction d'un angle |
| 9 | skewX(angle) Utilisé pour définir les transformations obliques avec l'axe des x |
| dix | skewY(angle) Utilisé pour définir les transformations obliques avec l'axe y |
Les exemples suivants sont un exemple de toutes les propriétés ci-dessus.
Rotation de 20 degrés
Rotation de la boîte avec un angle de 20 degrés comme indiqué ci-dessous -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Cela produira le résultat suivant -
Rotation de -20 degrés
Rotation de la boîte avec un angle de -20 degrés comme indiqué ci-dessous -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Cela produira le résultat suivant -
Incliner l'axe X
Rotation de la boîte avec axe x incliné comme indiqué ci-dessous -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Cela produira le résultat suivant -
Incliner l'axe Y
Rotation de la boîte avec axe y oblique comme indiqué ci-dessous -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Cela produira le résultat suivant -
Transformation matricielle
Rotation de boîte avec des transformations Matrix comme indiqué ci-dessous -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv1 {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv1">
Tutorials point.com
</div>
</body>
</html>Cela produira le résultat suivant -
Matrix se transforme dans une autre direction.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv2 {
/* IE 9 */
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Safari */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Standard syntax */
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv2">
Tutorials point.com
</div>
</body>
</html>Cela produira le résultat suivant -
| 1 | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Utilisé pour transformer l'élément en utilisant 16 valeurs de matrice |
| 2 | translate3d(x,y,z) Utilisé pour transformer l'élément en utilisant les axes x, y et z |
| 3 | translateX(x) Utilisé pour transformer l'élément en utilisant l'axe des x |
| 4 | translateY(y) Utilisé pour transformer l'élément en utilisant l'axe y |
| 5 | translateZ(z) Utilisé pour transformer l'élément en utilisant l'axe y |
| 6 | scaleX(x) Utilisé pour mettre à l'échelle transforme l'élément en utilisant l'axe des x |
| sept | scaleY(y) Utilisé pour mettre à l'échelle transforme l'élément en utilisant l'axe y |
| 8 | scaleY(y) Utilisé pour transformer l'élément en utilisant l'axe z |
| 9 | rotateX(angle) Utilisé pour faire pivoter transforme l'élément en utilisant l'axe des x |
| dix | rotateY(angle) Utilisé pour faire pivoter transforme l'élément en utilisant l'axe y |
| 11 | rotateZ(angle) Utilisé pour faire pivoter transforme l'élément en utilisant l'axe z |
Transformations 3D sur l'axe X
L'exemple suivant montre les transformations 3D de l'axe des x.
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateX(150deg);
/* Safari */
transform: rotateX(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate X-axis</p>
<div id = "myDiv">
tutorials point.com.
</div>
</body>
</html>Cela produira le résultat suivant -
Transformations 3D sur l'axe Y
L'exemple suivant montre les transformations 3D de l'axe y -
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#yDiv {
-webkit-transform: rotateY(150deg);
/* Safari */
transform: rotateY(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate Y axis</p>
<div id = "yDiv">
tutorials point.com.
</div>
</body>
</html>Cela produira le résultat suivant -
Transformations 3D sur l'axe Z
L'exemple suivant montre les transformations 3D de l'axe Z -
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
/* Safari */
transform: rotateZ(90deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>rotate Z axis</p>
<div id = "zDiv">
tutorials point.com.
</div>
</body>
</html>Cela produira le résultat suivant -
L'exemple ci-dessus montre la hauteur, la largeur, la couleur, le nom et la durée de l'animation avec la syntaxe des images clés.
Déplacement vers la gauche de l'animation
<html>
<head>
<style type = "text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>this is an example of moving left animation .</p>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>Cela produira le résultat suivant -
Déplacement d'une animation vers la gauche avec des images clés
<html>
<head>
<style type = "text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>This is an example of animation left with an extra keyframe
to make text changes.</p>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>Cela produira le résultat suivant -
| 1 | column-count Utilisé pour compter le nombre de colonnes que l'élément doit être divisé. |
| 2 | column-fill Utilisé pour décider, comment remplir les colonnes. |
| 3 | column-gap Utilisé pour décider de l'écart entre les colonnes. |
| 4 | column-rule Utilisé pour spécifier le nombre de règles. |
| 5 | rule-color Utilisé pour spécifier la couleur de la règle de colonne. |
| 6 | rule-style Utilisé pour spécifier la règle de style de la colonne. |
| sept | rule-width Utilisé pour spécifier la largeur. |
| 8 | column-span Utilisé pour spécifier l'étendue entre les colonnes. |
Exemple
L'exemple ci-dessous montre la disposition du texte en tant que nouvelle structure de papier.
<html>
<head>
<style>
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* Column style property */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
</head>
<body>
<div class = "multi">
Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web
designing to academics and much more.
</div>
</body>
</html>Cela produira le résultat suivant -
Par exemple, si l'utilisateur souhaite créer du texte en tant que nouveau papier sans ligne, nous pouvons le faire en supprimant la syntaxe de style comme indiqué ci-dessous -
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}Cela produira le résultat suivant -
| 1 | appearance Utilisé pour permettre à l'utilisateur de créer des éléments en tant qu'éléments d'interface utilisateur. |
| 2 | box-sizing Permet aux utilisateurs de fixer des éléments sur la zone de manière claire. |
| 3 | icon Utilisé pour fournir l'icône sur la zone. |
| 4 | resize Utilisé pour redimensionner les éléments qui sont sur la zone. |
| 5 | outline-offset Utilisé pour dessiner l'arrière du contour. |
| 6 | nav-down Utilisé pour descendre lorsque vous avez appuyé sur le bouton fléché vers le bas du clavier. |
| sept | nav-left Utilisé pour se déplacer vers la gauche lorsque vous avez appuyé sur la touche fléchée gauche du clavier. |
| 8 | nav-right Utilisé pour se déplacer vers la droite lorsque vous avez appuyé sur la flèche vers la droite du clavier. |
| 9 | nav-up Utilisé pour monter lorsque vous avez appuyé sur la touche fléchée vers le haut du clavier. |
Exemple de propriété resize
La propriété Resize a trois valeurs communes, comme indiqué ci-dessous -
- horizontal
- vertical
- both
Utilisation de both valeur dans la propriété resize dans l'interface utilisateur css3 -
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>TutorialsPoint.com</div>
</body>
</html>Cela produira le résultat suivant -
Décalage du contour CSS3
La ligne de sortie signifie dessiner une ligne autour de l'élément à l'extérieur de la bordure.
<html>
<head>
<style>
div {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 5px solid pink;
outline: 5px solid green;
outline-offset: 15px;
}
</style>
</head>
<body>
<div>TutorialsPoint</div>
</body>
</html>Cela produira le résultat suivant -
<html>
<head>
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid green;
}
.div2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>Cela produira le résultat suivant -
L'image ci-dessus a la même largeur et la même hauteur que deux éléments, mais le résultat est différent, car le second est inclus dans la propriété de remplissage.
Propriété de dimensionnement de la boîte CSS3
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>L'échantillon ci-dessus a la même hauteur et la même largeur avec box-sizing:border-box. ici le résultat est montré ci-dessous.
Cela produira le résultat suivant -
Les éléments ci-dessus ont la même hauteur et la même largeur avec box-sizing: border-box donc le résultat est toujours le même pour les deux éléments comme indiqué ci-dessus.
<html>
<head>
<style>
body {
font: 600 14px/24px "Open Sans",
"HelveticaNeue-Light",
"Helvetica Neue Light",
"Helvetica Neue",
Helvetica, Arial,
"Lucida Grande",
Sans-Serif;
}
h1 {
color: #9799a7;
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
}
.container:before, .container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.container {
background: #eaeaed;
margin-bottom: 24px;
*zoom: 1;
}
.container-75 {
width: 75%;
}
.container-50 {
margin-bottom: 0;
width: 50%;
}
.container, section, aside {
border-radius: 6px;
}
section, aside {
background: #2db34a;
color: #fff;
margin: 1.858736059%;
padding: 20px 0;
text-align: center;
}
section {
float: left;
width: 63.197026%;
}
aside {
float: right;
width: 29.3680297%;
}
</style>
</head>
<body>
<h1>100% Wide Container</h1>
<div class = "container">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>75% Wide Container</h1>
<div class = "container container-75">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>50% Wide Container</h1>
<div class = "container container-50">
<section>Section</section>
<aside>Aside</aside>
</div>
</body>
</html>Cela produira le résultat suivant -
Requêtes médias
Les requêtes multimédias concernent différentes règles de style pour des appareils de différentes tailles tels que les mobiles, les ordinateurs de bureau, etc.,
<html>
<head>
<style>
body {
background-color: lightpink;
}
@media screen and (max-width: 420px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>
If screen size is less than 420px, then it will show lightblue
color, or else it will show light pink color
</p>
</body>
</html>Cela produira le résultat suivant -
Conception Web réactive Bootstrap
Bootstrap est le cadre de conception Web le plus populaire basé sur des scripts HTML, CSS et Java et vous aide à concevoir des pages Web de manière réactive pour tous les appareils.
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body {
color:green;
}
</style>
</head>
<body>
<div class = "container">
<div class = "jumbotron">
<h1>Tutorials point</h1>
<p>
Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
</p>
</div>
<div class = "row">
<div class = "col-md-4">
<h2>Android</h2>
<p>
Android is an open source and Linux-based operating system for mobile
devices such as smartphones and tablet computers. Android was developed
by the Open Handset Alliance, led by Google, and other companies.
</p>
</div>
<div class = "col-md-4">
<h2>CSS</h2>
<p>
Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages presentable.
</p>
</div>
<div class = "col-md-4">
<h2>Java</h2>
<p>
Java is a high-level programming language originally developed by Sun
Microsystems and released in 1995. Java runs on a variety of platforms,
such as Windows, Mac OS, and the various versions of UNIX. This tutorial
gives a complete understanding of Java.
</p>
</div>
</div>
</body>
</html>Cela produira le résultat suivant -