HTML - CSS Styles
CSS (Cascading Style Sheets) est utilisé pour de style des éléments HTML.
Regardez! Styles et couleursCe texte est en Verdana et rouge Ce texte est composé en Times et bleu Ce texte est de 30 pixels de haut |
Essayez vous-même - Exemples
Utilisation de styles en HTML
Comment ajouter des informations de style dans la section <head>.
Comment ajouter des informations de style dans la section <head>.
Lien qui n'est pas souligné
Comment faire un lien qui n'est pas soulignée, avec l'attribut style.
Comment faire un lien qui n'est pas soulignée, avec l'attribut style.
Lien vers une feuille de style externe
Comment utiliser la balise link faire un lien vers une feuille de style externe.
Comment utiliser la balise link faire un lien vers une feuille de style externe.
Styling HTML avec CSS
Le CSS a été introduit avec HTML 4, de fournir une meilleure façon de de style des éléments HTML.
CSS peut être ajoutée au format HTML dans les manières suivantes:
- Inline - en utilisant le style attribut dans les éléments HTML
- Interne - à l'aide de la <style> élément dans la section <head>
- Externe - en utilisant une CSS externe fichier
La meilleure façon d'ajouter CSS pour HTML, est de mettre la syntaxe CSS dans les fichiers CSS distincts.
Toutefois, dans ce tutoriel HTML nous allons vous présenter à la CSS en utilisant l'attribut style. Ceci est fait pour simplifier les exemples. Il rend également plus facile pour vous de modifier le code et essayer vous-même.
Vous pouvez tout apprendre sur les CSS dans notre tutoriel CSS .
Styles en ligne
Un style en ligne peut être utilisée si un style unique doit être appliqué à une seule occurrence d'un élément.
Pour utiliser des styles inline ', utilisez l'attribut de style dans la balise concernée. L'attribut style peut contenir n'importe quelle propriété CSS. L'exemple ci-dessous montre comment changer la couleur du texte et la marge de gauche d'un paragraphe:
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
Pour en savoir plus sur les feuilles de style, visitez notre tutoriel CSS .
Exemple de style HTML - Couleur de fond
La propriété background-color définit la couleur de fond pour un élément:
Exemple
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
Essayez vous-même »
La propriété background-color rend l'attribut "vieux" bgcolor obsolète.
Exemple de style HTML - Police, couleur et la taille
Le font-family, la couleur, et font-size propriétés définit la police, la couleur, et la taille du texte dans un élément:
Exemple
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
Essayez vous-même »
Le font-family, la couleur, et font-size propriétés en font la balise <font> désuet.
Exemple de style HTML - Alignement du texte
La propriété text-align spécifie l'alignement horizontal du texte dans un élément:
Exemple
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Essayez vous-même »
La propriété text-align rend le tag <center> désuet.
Feuille de style interne
Une feuille de style interne peut être utilisé si un seul document a un style unique. Styles internes sont définis dans la section <head> d'une page HTML, en utilisant la balise <style>, comme ceci:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
Feuille de style externe
Une feuille de style externe est idéal lorsque le style est appliqué à de nombreuses pages. Avec une feuille de style externe, vous pouvez modifier l'apparence d'un site Web entier en changeant un seul fichier. Chaque page doit être liée à la feuille de style en utilisant la balise link. La balise link passe à l'intérieur de la section <head>:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Balises de style HTML
| Balise | Description |
|---|---|
| <style> | Définit les informations de style pour un document |
| <link /> | Définit la relation entre un document et une ressource externe |
Balises et attributs périmés
En HTML 4, plusieurs tags et attributs ont été utilisés pour les documents de style. Ces balises ne sont pas pris en charge dans les versions plus récentes de HTML.
Évitez d'utiliser les éléments <font>, <center>, et <strike> et la couleur des attributs bgcolor et.
0 commentaires:
Post a Comment
HELLO VISITORS THANKS FOR YOUR VISIT AND COMMENT