Pemilih asas tu...LOGIN

Pemilih asas tutorial asas CSS

Pemilih CSS

1. >

(1) Pemilih "*": Kad liar



Penerangan
: akan sepadan dengan Semua teg HTML , semua tag akan berubah.

  • Sintaks: *{ color:red; }

  • Nota: Gunakan "*" sedikit mungkin, kerana IE6 tidak menyokongnya.

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>php.cn</title>
        <style type="text/css">
         *{
             color:red;
         }
        </style>
        </head>
        <body>
            <h1>习近平心中的互联网</h1>
            <p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
        </body>
    </html>

(2) Pemilih teg



Penerangan : Akan sepadan dengan teg HTML yang ditentukan.

Sintaks

: h1{ color:red; }

Nota: Pemilih teg CSS mempunyai nama yang sama dengan teg HTML, tetapi kurungan sudut tidak boleh tambah.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     h1{
         color:red;
     }
     p{
         color:blue;
     }
    </style>
    </head>
    <body>
        <h1>习近平心中的互联网</h1>
        <p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

(3) pemilih kelas (pemilih kelas) - pemilih kelas adalah yang paling kerap digunakan



Penerangan: Tambahkan gaya pada jenis teg HTML. "Satu kelas" yang dirujuk di sini ialah: setiap teg HTML mempunyai atribut kelas dan nilai kelas adalah sama. Atribut kelas ialah atribut awam yang ada pada setiap teg HTML.
Nama pemilih kelas mesti bermula dengan "." dan terhad kepada nilai atribut kelas teg HTML. Contohnya: .box{ color:red; }

Nota: Nilai atribut kelas teg HTML tidak boleh bermula dengan nombor.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     .NO1{
         color:red;
         background-color:#88ff66;
     }
    </style>
    </head>
    <body>
        <h1 class="NO1">习近平心中的互联网</h1>
        <p class="NO1">互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

(4) pemilih id



Penerangan : Tambahkan gaya pada elemen dengan id yang ditentukan.

Nota

:

Nilai atribut id teg HTML dalam halaman web mestilah unik.

    Setiap teg HTML mempunyai atribut awam id.
  • Atribut id biasanya digunakan untuk JS, bukan untuk anda menambah gaya. Atribut kelas hanya boleh digunakan untuk CSS, bukan JS.
  • Nama pemilih id mesti bermula dengan "#", diikuti dengan nilai atribut id teg HTML.
  • <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>php.cn</title>
        <style type="text/css">
        #NO1{
            color:blue;
            background-color:#88ff99;
        }
        .NO1{
             color:red;
             background-color:#88ff66;
         }
        </style>
        </head>
        <body>
            <h1 id="NO1">习近平心中的互联网</h1>
            <p class="NO1">互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
        </body>
    </html>
  • bahagian seterusnya

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> *{ color:red; } </style> </head> <body> <h1>习近平心中的互联网</h1> <p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </body> </html>
babperisian kursus