masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Sintaks asas CSS

Peraturan sintaks asas

Peraturan CSS terdiri daripada dua bahagian utama: pemilih dan satu atau lebih pengisytiharan. 

selector {
    declaration1; 
    declaration2;
    ... 
    declarationN;
}

Pemilih biasanya elemen HTML yang anda perlukan untuk menukar gaya. Setiap pengisytiharan terdiri daripada harta dan nilai. Setiap atribut mempunyai nilai. Sifat dan nilai dipisahkan oleh titik bertindih. 

selector {property: value

Contohnya: 

h1{
   color:red;
   font-size:14px;
}

Jika terdapat lebih daripada 1 atribut, gunakan titik bertitik untuk memisahkannya. Apa yang dilakukan oleh baris kod ini ialah mentakrifkan warna teks dalam elemen h1 sebagai merah dan tetapkan saiz fon kepada 14 piksel.

Rajah di bawah menunjukkan kepada anda struktur kod di atas:

QQ截图20161011103552.png

Nota: Jika nilai lebih besar daripada 1 perkataan, anda perlu menambah petikan, seperti berikut 

p{font-family:"sans serif"}

Contoh:

Klik kanan di kawasan penyuntingan untuk mencipta dua fail, index.html dan MyCss.css

Masukkan kod berikut untuk kedua-dua fail masing-masing (tanda kurung menyokong pelengkapan kod): index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引外部资源 MyCss.css-->
        <link rel="stylesheet" href="MyCss.css" type="text/css">
    </head>
    <body>
        <h1>
            PHP中文网
        </h1>
    </body>
</html>

MyCss.css

h1{
    color: red;font-size: 50px;
}

h1 Warna teks dalam elemen ditakrifkan sebagai merah dan saiz fon ditetapkan kepada 50 piksel.

Ctrl+s simpan dua fail, klik index.html untuk melihat kesan berjalan:

QQ截图20161203142306.png

Meneruskan pembelajaran
||
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引外部资源 MyCss.css--> <link rel="stylesheet" href="MyCss.css" type="text/css"> </head> <body> <h1> PHP中文网 </h1> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya 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)  492874 permainan