Teks CSS(teks)

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> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</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="//m.sbmmt.com">链接到: 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中文网(m.sbmmt.com)提供了最全的编程技术基础教程, 介绍了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	设置字间距

Meneruskan pembelajaran

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik

Teks CSS(teks)

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]