简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Tutorial asas CSS: Bagaimana untuk memperkenalkan CSS

Terbenam

Memperkenalkan gaya CSS melalui teg <style>

Format tatabahasa: <style type = “text/css”></style>

Petua: Gaya CSS dalam <style> hanya boleh digunakan untuk web semasa muka surat .

Dalam halaman web yang sama, teg <style> 

<!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;
     }
    </style>
    </head>
    <body>
        <h1>习近平心中的互联网</h1>
        <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
        <style type="text/css">
   p{
         color:blue;
     }
    </style>
</html>

Kerangka

Perkenalkan fail CSS luaran melalui teg <link> kes ini, kod CSS biasa boleh dikongsi oleh berbilang halaman web.

<link rel = “stylesheet” type = “text/css” href = “css/public.css” />

<link>Atribut biasa teg

  • rel: Iaitu, jenis fail yang diimport. Nilai: lembaran gaya

  • jenis: jenis kandungan.

  • href: Alamat fail CSS yang diimport.

Nota:

  • <pautan>

  • Halaman web yang sama boleh menggunakan berbilang <pautan> untuk memaut ke berbilang fail gaya luaran.


gaya sebaris (terutama digunakan Untuk gaya elemen kawalan JS)

Setiap teg HTML mempunyai beberapa atribut biasa: kelas, id, tajuk, gaya.

Nilai atribut gaya dalam teg HTML adalah sama dengan gaya dalam CSS.

Nota:

  • Dalam gaya sebaris, anda tidak boleh menulis terlalu banyak kod CSS;

    • Dalam gaya sebaris, berbilang atribut CSS tidak boleh dibalut, iaitu, ia boleh ditulis dalam satu baris.

    • Gaya sebaris mempunyai keutamaan tertinggi, malah lebih tinggi daripada pemilih ID.

  • Dalam contoh keutamaan sebelum ini, kami menggunakan kaedah pengenalan ini 
    • <!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:green;
     }
    .hclass{
        color:bule;
    }
    #hid{
        color:black;
    }
    </style>
    </head>
    <body>
        <div>
        <h1 class="hclass" id="hid"  style="color:red">习近平心中的互联网</h1>
        </div>
    </body>
</html>


Meneruskan pembelajaran
||
<!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; } </style> </head> <body> <h1>习近平心中的互联网</h1> <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </body> <style type="text/css"> p{ color:blue; } </style> </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)  492164 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！