masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Pengenalan kepada CSS

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 tajuk

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



Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> h1 {color:#00ff00;} p{color: #ffd4f0 } .ex {color:rgb(0,0,255);} </style> </head> <body> <h1>这是一个标题</h1> <p>这是一个普通的段落。请注意,本文是红色的。页面中定义的默认文本颜色选择器。</p> <p class="ex">这段文字是蓝色的</p> </body> </html>
serahkanTetapkan Semula Kod
tiada bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492578 permainan