CSS, atau Cascading Style Sheets, adalah apa yang digunakan dalam reka bentuk laman web moden untuk menggunakan rupa visual ke halaman. Walaupun HTML mencipta struktur halaman dan Javascript boleh menangani tingkah laku, rupa dan nuansa laman web adalah domain CSS. Apabila ia datang kepada gaya ini, mereka paling sering digunakan menggunakan helaian gaya luaran, tetapi anda juga boleh menggunakan gaya CSS untuk satu, elemen khusus dengan menggunakan apa yang dikenali sebagai "gaya inline."
Gaya inline adalah gaya CSS yang digunakan secara langsung dalam HTML halaman. Terdapat kelebihan dan kekurangan untuk pendekatan ini. Pertama, mari kita melihat bagaimana gaya-gaya ini ditulis.
Cara Menulis Gaya Inline
Untuk mencipta gaya CSS sebaris, anda bermula dengan menulis harta gaya anda sama seperti bagaimana anda akan berada dalam satu helaian gaya, tetapi ia perlu menjadi satu baris. Pisahkan pelbagai harta dengan titik koma seperti yang anda lakukan dalam helaian gaya.
latar belakang: #ccc; warna: #fff; sempadan: pepejal hitam 1px;
Letakkan garis gaya di dalam gaya atribut elemen yang anda mahu ditata. Sebagai contoh, jika anda ingin menggunakan gaya ini pada perenggan dalam HTML anda, elemen tersebut akan kelihatan seperti ini:
Dalam contoh ini, perenggan tertentu ini akan muncul dengan latar belakang abu-abu yang terang (iaitu #ccc akan dipaparkan), teks hitam (dari # 000 warna), dan dengan sempadan hitam pepejal 1-piksel di sekeliling semua empat sisi paragraf .
Kelebihan Gaya Inline
Terima kasih kepada gaya lajur Gaya Cascading dalam gaya inline yang mempunyai keutamaan tertinggi atau kekhususan dalam dokumen. Ini bermakna mereka akan digunakan tidak kira apa lagi yang dikehendaki dalam lembaran gaya luar anda (dengan satu pengecualian adalah apa-apa gaya yang diberi perisytiharan penting bahawa lembaran, tetapi ini bukan sesuatu yang perlu dilakukan di tapak pengeluaran jika ia boleh dielakkan).
Satu-satunya gaya yang mempunyai keutamaan yang lebih tinggi daripada gaya inline ialah gaya pengguna yang digunakan oleh pembaca sendiri. Sekiranya anda mengalami masalah mendapatkan perubahan anda, anda boleh cuba menetapkan gaya sebaris pada elemen. Jika gaya anda masih tidak dipaparkan menggunakan gaya sebaris, anda tahu ada sesuatu yang lain berlaku.
Gaya inline mudah dan cepat ditambah dan anda tidak perlu bimbang tentang menulis pemilih CSS yang betul kerana anda menambah gaya terus ke elemen yang anda ingin ubah (elemen itu pada dasarnya menggantikan pemilih yang anda akan tulis dalam lembaran gaya luaran ). Anda tidak perlu membuat dokumen baru (seperti dengan helaian gaya luaran) atau mengedit elemen baru di kepala dokumen anda (seperti dengan helaian gaya dalaman). Anda hanya menambah atribut gaya yang sah pada hampir setiap elemen HTML. Ini adalah semua sebab mengapa anda mungkin tergoda untuk menggunakan gaya inline, tetapi anda juga harus mengetahui beberapa kelemahan yang sangat penting untuk pendekatan ini.
Kelemahan Gaya Inline
Kerana gaya inline mereka adalah yang paling khusus dalam kaskade, mereka boleh menunggang hal-hal yang anda tidak mahu. Mereka juga menafikan salah satu aspek CSS yang paling berkuasa - kebolehan untuk gaya banyak dan banyak halaman web dari satu fail CSS pusat untuk membuat perubahan masa depan dan perubahan gaya lebih mudah untuk diurus.
Sekiranya anda terpaksa menggunakan gaya inline sahaja, dokumen anda dengan cepat akan menjadi kembung dan sangat sukar dijaga. Ini kerana gaya inline mesti digunakan untuk setiap elemen yang anda mahu. Jadi jika anda mahu semua perenggan anda mempunyai keluarga font "Arial", anda perlu menambah gaya sebaris untuk setiap tag
dalam dokumen anda. Ini menambah kedua-dua kerja penyelenggaraan untuk pereka dan masa muat turun untuk pembaca kerana anda perlu menukar ini di setiap halaman di laman web anda untuk menukar keluarga font itu. Sebagai alternatif, jika anda menggunakan lembaran gaya berasingan, anda mungkin dapat mengubahnya di satu tempat dan mempunyai setiap halaman menerima kemas kini itu.
Benar, ini adalah langkah mundur dalam reka bentuk web - kembali pada hari tag !
Satu lagi kelemahan kepada gaya inline adalah bahawa mustahil untuk gaya unsur-unsur pseudo-dan-kelas dengan mereka. Sebagai contoh, dengan helaian gaya luaran , anda boleh menyusun warna yang dilawati, berlegar, aktif, dan menghubungkan tag anchor, tetapi dengan gaya sebaris, semua gaya anda boleh menjadi pautan itu sendiri, kerana itulah gaya atribut dilampirkan kepada .
Pada akhirnya, kami mengesyorkan supaya tidak menggunakan gaya sebaris untuk laman web anda kerana ia menyebabkan masalah dan menjadikan halaman lebih banyak berfungsi untuk dijaga. Satu-satunya masa yang kita gunakan ialah apabila kita ingin menyemak gaya dengan cepat semasa pembangunan. Sebaik sahaja kita dapat melihatnya dengan betul untuk elemen itu, kita memindahkannya ke helaian gaya luaran kita.
Artikel Orginal oleh Jennifer Krynin. Diedit oleh Jeremy Girard.