Texte CSS(texte)
Format de texte CSS
Couleur du texte
La propriété color est utilisée pour définir la couleur du texte.
Les couleurs sont le plus souvent spécifiées via CSS?:
Une valeur hexadécimale - telle que "#FF0000"
Une valeur RVB - "RGB (255,0,0)"
Le nom de la couleur - tel que "rouge"
Instance
La couleur de fond d'une page Web fait référence à la sélection dans le corps?:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>這是標(biāo)題</h1>
<p>這是一個普通的段落。請注意,本文是紅色的。頁面中定義的默認(rèn)文本顏色選擇器。</p>
<p class="ex">這是一段使用class選擇器定義的p。這段文字是藍(lán)色的。</p>
</body>
</html>Exécutez le programme pour l'essayer
Alignement du texte
La propriété d'alignement du texte est utilisée pour définir l'alignement horizontal du texte.
Le texte peut être centré ou aligné à gauche ou à droite, justifié aux deux extrémités
Lorsque text-align est défini sur "justifier", chaque ligne est étendue pour avoir une largeur égale et les marges gauche et droite sont Alignées (comme les magazines et les journaux)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align 實例</h1>
<p class="date">2015 年 3 月 14 號</p>
<p class="main">“當(dāng)我年輕的時候，我夢想改變這個世界；當(dāng)我成熟以后，我發(fā)現(xiàn)我不能夠改變這個世界，我將目光縮短了些，決定只改變我的國家；當(dāng)我進(jìn)入暮年以后，我發(fā)現(xiàn)我不能夠改變我們的國家，我的最后愿望僅僅是改變一下我的家庭，但是，這也不可能。當(dāng)我現(xiàn)在躺在床上，行將就木時，我突然意識到：如果一開始我僅僅去改變我自己，然后，我可能改變我的家庭；在家人的幫助和鼓勵下，我可能為國家做一些事情；然后，誰知道呢?我甚至可能改變這個世界?！?lt;/p>
<p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的。</p>
</body>
</html>Exécutez le programme pour l'essayer
Texte-décoration
Les propriétés text-decoration sont utilisées pour définir ou supprimer la décoration du texte.
D'un point de vue design, l'attribut text-decoration est principalement utilisé pour supprimer le soulignement des liens?:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
a {text-decoration:none;}
</style>
</head>
<body>
<p>鏈接到: <a href="http://php.cn">鏈接到: php中文網(wǎng)</a></p>
</body>
</html>Exécutez le programme et essayez-le
Transformation de texte
La propriété de transformation de texte est utilisée pour spécifier les lettres majuscules et minuscules dans un texte.
peut être utilisé pour mettre tous les mots en majuscules ou minuscules, ou pour mettre en majuscule la première lettre de chaque mot.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>Exécutez le programme et essayez-le
Indentation du texte
L'attribut d'indentation du texte est utilisé pour spécifier le texte L'indentation de la première ligne.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p> php中文網(wǎng)(ipnx.cn)提供了最全的編程技術(shù)基礎(chǔ)教程, 介紹了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各種編程語言的基礎(chǔ)知識。同時本站中
也提供了大量的在線實例，通過實例，您可以更好的學(xué)習(xí)編程。..</p>
</body>
</html>Exécutez le programme et essayez-le
Exemple
Augmentez l'espace blanc entre les mots
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
p
{
word-spacing:30px;
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
</p>
</body>
</html> Exécutez le programme et essayez-le
Propriétés du texte CSS
| 屬性 | 描述 |
|---|---|
| color | 設(shè)置文本顏色 |
| direction | 設(shè)置文本方向。 |
| letter-spacing | 設(shè)置字符間距 |
| line-height | 設(shè)置行高 |
| text-align | 對齊元素中的文本 |
| text-decoration | 向文本添加修飾 |
| text-indent | 縮進(jìn)元素中文本的首行 |
| text-shadow | 設(shè)置文本陰影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 設(shè)置或返回文本是否被重寫 |
| vertical-align | 設(shè)置元素的垂直對齊 |
| white-space | 設(shè)置元素中空白的處理方式 |
| word-spacing | 設(shè)置字間距 |
