Penciptaan CSS

Penciptaan CSS

Apabila helaian gaya dibaca, penyemak imbas akan memformat dokumen HTML mengikutnya.


Cara memasukkan helaian gaya

Terdapat tiga cara untuk memasukkan helaian gaya:

  • Helaian gaya luaran

  • Lembaran gaya dalaman

  • Gaya sebaris


Lembaran gaya luaran

Helaian gaya luaran adalah sesuai apabila gaya perlu digunakan pada banyak halaman. Dengan helaian gaya luaran, anda boleh menukar rupa keseluruhan tapak anda dengan menukar satu fail. Setiap halaman menggunakan teg untuk memaut ke helaian gaya. Teg berada di kepala (dokumen):

<head>
<link rel="stylesheet" type="text/css" href ="mystyle .css">
</head>

Pelayar akan membaca pengisytiharan gaya daripada fail mystyle.css dan memformatkannya mengikut dokumen itu.

Helaian gaya luaran boleh diedit dalam mana-mana penyunting teks. Fail tidak boleh mengandungi sebarang tag html. Helaian gaya hendaklah disimpan dengan sambungan .css. Berikut ialah contoh fail lembaran gaya:

jam {color:sienna;}
p {margin-left:20px;}
body {background-image:url ("../style/images/back40.gif");}

lamp.gifJangan tinggalkan ruang antara nilai atribut dan unit. Jika anda menggunakan "margin-left: 20 px" dan bukannya "margin-left: 20px" ia hanya akan berfungsi dalam IE 6, tetapi tidak dalam Mozilla/Firefox atau Netscape.


Helaian gaya dalaman

Apabila satu dokumen memerlukan penggayaan khas, helaian gaya dalaman hendaklah digunakan. Anda boleh menggunakan teg <style> untuk menentukan helaian gaya dalaman di bahagian atas dokumen, seperti ini: jam {color:sienna;}
p {margin-left:20px;}

body {background-image:url ("../style/images/back40.gif");}




<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}

body {background-image:url("../style/images/back40.gif");}
</ gaya>
</head>

Gaya sebaris

Kerana keperluan mencampurkan prestasi dan kandungan Bersama-sama, gaya sebaris kehilangan banyak kelebihan helaian gaya. Gunakan pendekatan ini dengan berhati-hati, contohnya apabila gaya hanya perlu digunakan sekali pada elemen.

Untuk menggunakan gaya sebaris, anda perlu menggunakan atribut gaya dalam teg yang berkaitan. Sifat Style boleh mengandungi sebarang sifat CSS. Contoh ini menunjukkan cara menukar warna dan jidar kiri perenggan:


<p style="color:sienna;margin-left:20px">Ini ialah perenggan</p>

Keutamaan

Jika dalam helaian gaya luaran, Helaian gaya dalaman (terletak di dalam teg),

Gaya sebaris (di dalam elemen HTML), jika gaya elemen HTML yang sama ditetapkan, gaya gaya sebaris (di dalam elemen HTML) akan berkuat kuasa Jadi keutamaan mereka ialah

  • Gaya sebaris (dalam elemen HTML) adalah yang tertinggi
  • Kedua ialah helaian gaya dalaman (terletak di dalam teg)
Akhirnya Helaian Gaya luaran


<🎜><🎜><🎜>
Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p {color: #e22c5e } </style> </head> <body> <p STYLE="color: #1c10b4">css的优先级</p> </body> </html>
  • Cadangan kursus
  • Muat turun perisian kursus