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>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <body style="background-color:pink;"> <h2 style="background-color:red;">好好学习</h2> <p style="background-color:green;">天天向上</p> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Style HTML

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]