Style HTML
Prenons d'abord un exemple :
<html>
<body style="background-color:PowderBlue;">
<h1>改变颜色</h1>
<p style="font-family:verdana;color:red">
字体颜色变红色</p>
<p style="font-family:times;color:green">
字体颜色变绿色</p>
<p style="font-size:30px">字体高度变为30px</p>
</body>
</html>
Attribut de style HTML
Le rôle de l'attribut style :
Fournit un moyen courant de modifier le style de tous les éléments HTML.
Les styles ont été introduits dans HTML 4 et constituent le nouveau moyen privilégié pour modifier le style des éléments HTML. Les styles HTML vous permettent d'ajouter des styles directement aux éléments HTML à l'aide de l'attribut style, ou indirectement en les définissant dans une feuille de style distincte (fichier CSS).
Vous pouvez tout apprendre sur les styles et le CSS dans nos tutoriels CSS.
Dans notre tutoriel HTML, nous vous apprendrons les styles HTML en utilisant l'attribut style.
Comment utiliser CSS
CSS a été lancé dans HTML 4 pour mieux restituer les éléments HTML L'introduction .
Le CSS peut être ajouté au HTML des manières suivantes :
Style en ligne - en utilisant l'attribut "style" dans l'élément HTML
Feuille de style interne - dans The <head> La zone du document HTML utilise l'élément <style> pour contenir du CSS
Références externes - Utilisation de fichiers CSS externes
La meilleure façon est de référencer des fichiers CSS en externe.
Dans le didacticiel HTML de ce site, nous utilisons des styles CSS en ligne pour présenter des exemples afin de simplifier les exemples et de vous permettre de modifier plus facilement le code en ligne et d'exécuter les exemples en ligne.
Vous pouvez en apprendre davantage sur les connaissances CSS grâce au didacticiel CSS CSS sur ce site.
Style en ligne
Styles en ligne sont utilisés lorsque des styles spéciaux doivent être appliqués à des éléments individuels. La façon d'utiliser les styles en ligne consiste à utiliser l'attribut style dans la balise appropriée. Les propriétés de style peuvent contenir n'importe quelle propriété CSS. L'exemple suivant montre comment modifier la couleur et la marge gauche d'un paragraphe.
<p style="color:blue;margin-left:20px;">Ceci est un paragraphe.</p>
Exemple de style HTML - couleur d'arrière-plan
L'attribut Background-color définit la couleur d'arrière-plan d'un élément :
<!DOCTYPE html>
<html>
<body style="background-color:pink;">
<h2 style="background-color:red;">好好学习</h2>
<p style="background-color:green;">天天向上</p>
</body>
</html>
Exemple de style HTML - police, couleur de police, taille de police
Nous pouvons utiliser font-family (font ), color (color) et font-size (taille de la police) pour définir le style de police :
instance
<!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>
Utilisez désormais généralement font-family (police), color (color) et le font-size (taille de la police) pour définir les styles de texte au lieu d'utiliser la balise <font>.
Exemple de style HTML - alignement du texte
Utilisez l'attribut text-align (alignement du texte) pour spécifier l'alignement horizontal et vertical du texte :
Exemple
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
L'attribut d'alignement du texte text-align remplace l'ancienne balise <center>.
Feuille de style interne
Lorsqu'un seul fichier nécessite un style spécial, vous pouvez utiliser une feuille de style interne. Vous pouvez définir une feuille de style interne via la balise <style> dans la section <head>
Les feuilles de style externes sont idéales lorsque les styles doivent être appliqués à plusieurs pages. À l'aide de feuilles de style externes, vous pouvez modifier l'apparence de l'ensemble de votre site en modifiant un fichier.
<html>
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<body>
</body>
</html>
section suivante