Sebelum anda mula belajar CSS, anda harus memastikan anda mempunyai pengetahuan prasyarat berikut:
HTML / XHTML
Untuk mempelajari HTML dan XHTML , anda boleh mendapatkan tutorial yang berkaitan melalui laman web PHP Cina (php.cn) laman utama
Untuk mempelajari CSS, anda perlu tahu apa itu CSS?
CSS merujuk kepada Cascading Style Sheets
Gaya menentukan cara memaparkan elemen HTML
Gaya biasanya disimpan Dalam helaian gaya
Menambah gaya pada HTML 4.0 adalah untuk menyelesaikan masalah pengasingan kandungan dan persembahan
Luaran helaian gaya boleh sangat meningkatkan kecekapan kerja
Helaian gaya luaran biasanya disimpan dalam fail CSS
Takrifan gaya berbilang boleh disatukan menjadi satu
Gaya menyelesaikan masalah besar
Tag HTML pada asalnya direka untuk mentakrifkan kandungan dokumen, seperti yang ditunjukkan dalam contoh berikut :
Ini adalah perenggan.
Helaian gaya mentakrifkan cara elemen HTML dipaparkan, sama seperti teg fon dan atribut warna HTML 3.2. Gaya biasanya disimpan dalam fail .css luaran. Helaian gaya luaran memberi anda keupayaan untuk menukar reka letak dan penampilan semua halaman dalam tapak anda secara serentak dengan hanya mengedit dokumen CSS ringkas.
Untuk menyelesaikan masalah ini, World Wide Web Consortium (W3C), sebuah pakatan standardisasi bukan untung, telah mengambil misi menyeragamkan HTML dan mencipta gaya di luar HTML 4.0.
Pelayar kontemporari semuanya menyokong CSS.
Helaian gaya CSS meningkatkan kecekapan kerja dengan ketara
Jadual Gaya mentakrifkan cara Elemen HTML dipaparkan
Helaian gaya mentakrifkan cara elemen HTML dipaparkan, sama seperti tag fon HTML 3.2 dan atribut warna. Gaya biasanya disimpan dalam fail .css luaran. Lembaran gaya luaran memberi anda keupayaan untuk menukar reka letak dan penampilan semua halaman dalam tapak anda secara serentak dengan mengedit dokumen CSS mudah.
Contoh CSS
Dokumen HTML boleh memaparkan gaya yang berbeza<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网(php.cn)</title> <style> h1{color: #00a0e9} p{background-color: #8de943 } p.ex {margin-top:2cm;} p.bottommargin {margin-bottom:25%;} </style> </head> <body> <h1>标题</h1> <p>一个没有指定边距大小的段落。</p> <p class="ex">一个2厘米上边距的段落。</p> </body> </html>
Jalankan program dan cuba