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中文网(php.cn)</title>
    <style>
        body {color:red;}
        h1 {color:#00ff00;}
        p.ex {color:rgb(0,0,255);}
    </style>
</head>

<body>
<h1>这是标题</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义的默认文本颜色选择器。</p>
<p class="ex">这是一段使用class选择器定义的p。这段文字是蓝色的。</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中文网(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">“当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。”</p>
<p><b>注意:</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</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中文网(php.cn)</title>
    <style>
        a {text-decoration:none;}
    </style>
</head>

<body>
<p>链接到: <a href="//m.sbmmt.com">链接到: php中文网</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中文网(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中文网(php.cn)</title>
    <style>
        p {text-indent:50px;}
    </style>
</head>
<body>

<p> php中文网(m.sbmmt.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。同时本站中
    也提供了大量的在线实例,通过实例,您可以更好的学习编程。..</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中文网(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设置文本颜色
direction设置文本方向。
letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本
text-decoration向文本添加修饰
text-indent缩进元素中文本的首行
text-shadow设置文本阴影
text-transform控制元素中的字母
unicode-bidi设置或返回文本是否被重写 
vertical-align设置元素的垂直对齐
white-space设置元素中空白的处理方式
word-spacing设置字间距



Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p {text-indent:50px;} </style> </head> <body> <p>php中文网(m.sbmmt.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例,通过实例,您可以更好的学习编程。..</p> </body> </html>
soumettreRéinitialiser le code
  • Recommandations de cours
  • Téléchargement du didacticiel
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!