Format Teks CSS
Warna Teks
Sifat warna digunakan untuk menetapkan warna teks.
Warna paling kerap ditentukan melalui CSS:
Nilai perenambelasan - seperti "#FF0000"
Nilai RGB - "RGB (255,0,0 )"
Nama warna - seperti "merah"
Instance
Warna latar belakang halaman web merujuk kepada pemilihan dalam badan:
<!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>Jalankan program untuk mencubanya
Penjajaran Teks
Sifat penjajaran teks digunakan untuk menetapkan penjajaran mendatar teks.
Teks boleh dipusatkan atau dijajarkan ke kiri atau kanan, dibenarkan pada kedua-dua hujung
Apabila penjajaran teks ditetapkan kepada "justify", setiap baris dikembangkan untuk mempunyai lebar yang sama. jidar kiri dan kanan ialah Penjajaran (seperti majalah dan surat khabar)
<!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> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
</body>
</html>Jalankan program untuk mencubanya
Hiasan teks
Sifat hiasan teks digunakan untuk menetapkan atau mengalih keluar hiasan teks.
Dari perspektif reka bentuk, atribut hiasan teks digunakan terutamanya untuk mengalih keluar garis bawah pautan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
a {text-decoration:none;}
</style>
</head>
<body>
<p>链接到: <a href="http://php.cn">链接到: php中文网</a></p>
</body>
</html>Jalankan atur cara dan cuba
Transformasi Teks
Sifat transformasi teks digunakan untuk menentukan huruf besar dan huruf kecil dalam teks.
boleh digunakan untuk menjadikan semua perkataan huruf besar atau huruf kecil, atau menggunakan huruf besar pada huruf pertama setiap perkataan.
<!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>Jalankan atur cara dan cuba
Inden teks
Atribut inden teks digunakan untuk nyatakan teks Lekukan baris pertama.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p> php中文网(www.php.cn)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。同时本站中
也提供了大量的在线实例，通过实例，您可以更好的学习编程。..</p>
</body>
</html>Jalankan program dan cuba
Contoh
Tingkatkan ruang kosong antara perkataan
<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> Jalankan program dan cuba
Sifat teks 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 | 设置字间距 |
