1 - Comment utiliser W3.CSS ?
Il existe deux façons d'utiliser W3.CSS:
- Installation locale: Vous pouvez télécharger le fichier W3.CSS sur votre machine locale et l'inclure dans votre code HTML.
- Version basée sur CDN: Vous pouvez inclure le fichier W3.CSS dans votre code HTML directement à partir du réseau de distribution de contenu (CDN).
1.1 - Installation locale
Télécharger la dernière version disponible de W3CSS depuis l'adresse: https://www.w3schools.com/w3css/4/w3.css.
Ensuite, placez le fichier w3.css téléchargé dans un répertoire de votre site Web, par exemple /w3css:
Exemple
Vous pouvez maintenant inclure le fichier css dans votre fichier HTML comme suit:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>The W3.CSS Example</title> <link rel = "stylesheet" href = "w3.css"> </head> <body> <div class="w3-container"> <!-- Button with shadow hover effect --> <h2 class="w3-text-blue"> Button With Hover Effect & Shadow: </h2> <input class="w3-btn w3-teal" type="button" value="Button W3CSS"> </div> </body> </html> |
1.2 - Version basée sur CDN
Vous pouvez inclure le fichier W3.CSS dans votre code HTML directement depuis le Content Delivery Network (CDN). W3Schools.com fournit le contenu pour la dernière version.
Exemple
Reprenons maintenant l'exemple ci-dessus en utilisant la bibliothèque CDN de W3Schools.com:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>The W3.CSS Example</title> <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css"> </head> <body> <div class="w3-container"> <!-- Button with shadow hover effect --> <h2 class="w3-text-blue"> Button With Hover Effect & Shadow: </h2> <input class="w3-btn w3-teal" type="button" value="Button W3CSS"> </div> </body> </html> |
Younes Derfoufi
CRMEF OUJDA
