Teks CSS
CSS TeksFormat
Format Teks
Teks ini digayakan dengan beberapa sifat pemformatan teks Tajuk menggunakan penjajaran teks, teks -transformasi, dan sifat warna. Perenggan diinden, dijajarkan dan ruang antara aksara ditentukan Garis bawah dialih keluar daripada pautan "Cuba".
Warna Teks
Sifat warna digunakan untuk menetapkan warna teks.
Warna paling kerap dinyatakan melalui CSS:
Nilai hex - seperti "#FF0000"
Satu Nilai RGB - "RGB(255,0,0)"
Nama warna - seperti "merah"
Lihat Warna CSS Nilai Lihat nilai penuh warna.
Warna latar belakang halaman web merujuk kepada pemilihan dalam badan:
Instance
<!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>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>Instance Running»
Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian
Untuk CSS standard W3C: Jika anda mentakrifkan atribut warna, anda juga mesti menentukan atribut warna latar belakang .
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).
Instance
<!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>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Hiasan Teks
Atribut hiasan teks digunakan untuk menetapkan atau memadamkan hiasan teks.
Dari perspektif reka bentuk, atribut hiasan teks digunakan terutamanya untuk mengalih keluar garis bawah pautan:
Contoh
<!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://www.php.cn">php中文网</a></p>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Anda juga boleh menghiasi teks seperti ini:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html> Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Kami tidak mengesyorkan menyerlahkan teks yang bukan pautan, kerana ini sering mengelirukan pengguna.
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.
Instance
<!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>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Inden Teks
Sifat inden teks digunakan untuk menentukan lekukan baris pertama teks.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Lagi contoh
Menentukan ruang antara aksara
Contoh ini menunjukkan cara menambah atau mengurangkan ruang antara aksara.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Nyatakan ruang antara baris
Contoh ini menunjukkan cara untuk menentukan ruang antara baris dalam perenggan
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
</body>
</html>Jalankan Contoh»
Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian
Tetapkan arah teks elemen
Contoh ini menunjukkan cara menukar arah teks daripada sesuatu unsur.
Instance
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div.ex1 {direction:rtl;}
</style>
</head>
<body>
<div>一些文本。 默认书写方向</div>
<div class="ex1">一些文本。从右到左的书写方向。</div>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Tingkatkan ruang putih antara perkataan
Contoh ini menunjukkan cara menambah ruang putih antara perkataan dalam perenggan.
Instance
<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>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Lumpuhkan pembalut teks dalam elemen
Contoh ini menunjukkan cara untuk melumpuhkan pembalut teks dalam elemen.
Instance
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
p
{
white-space:nowrap;
}
</style>
</head>
<body>
<p>
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Imej Jajaran Menegak
Contoh ini menunjukkan cara menetapkan imej yang dijajarkan secara menegak untuk teks.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>
<body>
<p>An <img src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="php中文网" width="80" height="50" /> image with a default alignment.</p>
<p>An <img class="top" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="php中文网" width="80" height="50" /> image with a text-top alignment.</p>
<p>An <img class="bottom" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="php中文网" width="80" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>Jalankan contoh »
Klik butang "Jalankan contoh" untuk melihat tika dalam talian
Tambahkan bayang teks
Contoh ini menunjukkan cara untuk menetapkan teks bayang.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1 {text-shadow:2px 2px #FF0000;}
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow property.</p>
</body>
</html>Run instance »
Klik butang "Run Instance" untuk melihat instance dalam talian
Semua 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 | 设置字间距 |
