HTML-CSS
HTML Style - CSS
CSS (Cascading Style Sheets) Style utilisé pour restituer les balises d'éléments HTML.
Regardez ! Styles et couleurs
Essayez-le - Exemple
Cet exemple montre comment utiliser add to <head> Une partie des informations de style formate le HTML.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Cet exemple montre comment utiliser les attributs de style pour créer un lien sans soulignement.
Comment utiliser l'attribut style pour créer un lien sans soulignement.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <a href="http://www.php.cn/" style="text-decoration:none;">访问 php.cn!</a> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Lien vers une feuille de style externe
Cet exemple montre comment lier une balise à une feuille de style externe.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>我使用了外部样式文件来格式化文本 </h1> <p>我也是!</p> </body> </html>
Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Comment utiliser CSS
Le CSS a été lancé dans HTML 4 et a été introduit pour mieux restituer les éléments HTML.
Le CSS peut être ajouté au HTML des manières suivantes Medium :
Styles en ligne - utilisez l'attribut "style" dans les éléments HTML
Feuilles de style internes - dans The <head> ; la zone du document HTML utilise l'élément <style> pour inclure du CSS
Références externes - utiliser des fichiers CSS externes
La meilleure façon est de référencer le fichier 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 également les exemples. facilitent la modification du code en ligne et l'exécution d'exemples en ligne.
Vous pouvez en apprendre davantage sur les connaissances CSS grâce au Tutoriel CSSTutoriel CSS sur ce site.
Style en ligne
Lorsque des styles en ligne spéciaux peuvent être utilisé lorsque les styles 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;">This is a paragraph.</p>
Pour en savoir plus sur les styles, veuillez visiter le tutoriel CSS.
Exemple de style HTML - arrière-plan color
L'attribut Background-color définit la couleur d'arrière-plan d'un élément :
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body style="background-color:yellow;"> <h2 style="background-color:red;">这是一个标题</h2> <p style="background-color:green;">这是一个段落。</p> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne
Le premier attribut background-color (background-color) est défini à l'aide de l'attribut bgcolor.
Exemple de style HTML - police, couleur de police, taille de police
Nous pouvons utiliser la famille de polices (police), la couleur (couleur) et la taille de police (taille de la police) attributs Pour définir le style de police :
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1 style="font-family:verdana;">一个标题</h1> <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour voir l'instance en ligne
Il est désormais courant d'utiliser les attributs font-family (police), color (color) et font-size (taille de la police) pour définir les styles de texte au lieu d'utiliser le < ;fonte>
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> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1 style="text-align:center;">居中对齐的标题</h1> <p>这是一个段落。</p> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
La propriété 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.<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>Balises de style HTML
Dans HTML 4, les balises et les attributs qui prenaient initialement en charge la définition des styles d'éléments HTML sont obsolètes. Ces balises ne prendront pas en charge les nouvelles versions des balises HTML. Les balises déconseillées sont : <font>, <center>, <strike>
| 标签 | 描述 |
|---|---|
| <style> | 定义文本样式 |
| <link> | 定义资源引用地址 |
Les attributs déconseillés sont : couleur et bgcolor.
