Cara Menambah Gaya CSS pada Halaman HTML: Panduan Pemula

PENGENALAN

Bayangkan anda berada di dapur, bersedia untuk menyediakan hidangan. Anda mempunyai bahan utama (HTML) di hadapan anda: daging, sayur-sayuran, rempah ratus. Tetapi untuk mengubah bahan-bahan ini menjadi karya kulinari, anda memerlukan teknik memasak, perasa dan penyaduran – dan di sinilah CSS (Cascading Style Sheets) berperanan. CSS adalah seperti "seni perasa" anda untuk web: tanpanya, halaman HTML anda akan berkhasiat tetapi agak hambar. Dalam panduan ini, kami akan meneroka cara untuk "membumbui" tapak web anda menggunakan CSS untuk mengubah struktur HTML mudah menjadi halaman yang menarik dan harmoni secara visual.

APA ITU CSS?

CSS, atau Helaian Gaya Cascading, ialah "buku resipi" untuk reka bentuk web. Sama seperti di dapur, di mana anda boleh menggunakan teknik memasak yang berbeza untuk mencapai rasa yang unik, CSS membolehkan anda menggayakan halaman HTML anda dalam pelbagai cara. Sejarah ringkas CSS: Dilahirkan pada tahun 1990-an, CSS merevolusikan cara laman web direka bentuk dengan memisahkan "struktur" (HTML) daripada "persembahan" (CSS).

Contoh penggunaan CSS
Sama seperti anda boleh menambahkan sentuhan warna pada hidangan anda dengan beberapa sos, dengan CSS anda boleh mewarnakan teks, menyusun elemen secara kreatif dan menambah sentuhan artistik pada halaman web anda.

Kaedah untuk Menambah CSS pada Halaman HTML
Terdapat tiga kaedah utama untuk menambah CSS pada halaman HTML anda, sama seperti terdapat cara yang berbeza untuk menyediakan hidangan di dapur. Setiap kaedah mempunyai kelebihan dan kekurangan bergantung pada keperluan projek.

CSS DALAM TALIAN

Ia seperti menambah secubit garam terus pada hidangan anda: ia berfungsi untuk tweak gaya kecil tetapi tidak sesuai jika anda perlu menyedapkan keseluruhan jamuan.

Contoh:

<p style="color: blue;">Blue text</p>

Kebaikan: Mudah digunakan dan pantas untuk perubahan kecil.
Keburukan: Sukar diselenggara dalam projek besar, boleh menimbulkan kekeliruan jika digunakan terlalu kerap.

CSS DALAMAN:

Ini lebih seperti memerap bahan tertentu dalam mangkuk sebelum memasaknya. Anda menggunakan gaya khusus untuk satu halaman, tetapi semua perubahan mesti dibuat dalam dokumen itu.

Contoh:

<style>
  p {
    color: blue;
  }
</style>

Kebaikan: Semua gaya berada di satu tempat, mudah dikawal.
Keburukan: Terpakai hanya pada satu halaman, tidak sesuai untuk tapak web berbilang halaman.

CSS LUARAN:

Ini seperti menyediakan sos istimewa dalam balang dan menggunakannya untuk hidangan berbeza: helaian gaya berasingan yang boleh anda gunakan pada semua halaman tapak anda.

Contoh:

<link rel="stylesheet" href="styles.css">

Kebaikan: Boleh diguna semula, mudah diurus, bagus untuk tapak web yang besar.
Keburukan: Memerlukan pengurusan berbilang fail, tetapi itu adalah harga yang kecil untuk membayar untuk serba boleh.

Sama seperti mengikuti resipi, CSS mempunyai sintaks asasnya yang perlu anda ketahui untuk menghasilkan reka bentuk yang sempurna.

Pemilih

Pemilih ialah "bahan" khusus yang anda mahu gayakan. Anda boleh memilih semua elemen jenis tertentu (cth., p untuk perenggan), gunakan kelas (.class-name) atau ID (#id-name).

Contoh:

p {
  color: red;
}

.highlight {
  background-color: yellow;
}

#main-title {
  font-size: 2em;
}

Sifat dan Nilai

Sifat adalah seperti rempah ratus: ia menyatakan perkara yang anda mahu ubah suai (mis., warna, saiz fon), manakala nilai ialah jumlah atau jenis rempah yang anda gunakan (mis., merah, 16px).

Contoh:

p {
  color: red; /* Property: color, Value: red */
}

Membuat helaian gaya luaran
Setelah anda memahami sintaks asas, tiba masanya untuk mencipta "balang sos rahsia" anda – helaian gaya luaran yang boleh anda gunakan pada semua halaman HTML anda.

LANGKAH-LANGKAH MENCIPTA LEMBARAN GAYA LUARAN

Buat fail baharu yang dipanggil styles.css . Mula menulis gaya anda:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

h1 {
  color: #333;
  text-align: center;
}

p {
  line-height: 1.6;
}

Pautkan fail CSS ke halaman HTML anda menggunakan tag dalam :

<link rel="stylesheet" href="styles.css">

Menambahkan CSS pada Halaman HTML Anda:

Berikut ialah contoh praktikal tentang cara menggabungkan halaman HTML ringkas dengan helaian gaya luaran untuk mencipta "hidangan" siap.

HTML:

    
    
    
    <link rel="stylesheet" href="styles.css">


    
Welcome to My Web Kitchen
    
This is my first HTML page with style!

CSS:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    line-height: 1.6;
}

Amalan terbaik untuk menjadi "cef web" sejati, berikut ialah beberapa amalan terbaik untuk diikuti:

Gunakan nama kelas yang bermakna:
Seperti resipi yang ditulis dengan baik, nama kelas harus menerangkan tujuannya dengan jelas.

Susun helaian gaya anda:
Pastikan kod anda bersih dan diulas, sama seperti dapur yang kemas dan tersusun.

Elakkan CSS sebaris yang berlebihan:
Sama seperti anda tidak akan keterlaluan garam, elakkan menggunakan terlalu banyak gaya sebaris dan pilih helaian gaya luaran untuk kebolehselenggaraan yang lebih baik.

KESIMPULAN

CSS ialah sentuhan terakhir yang mengubah struktur HTML ringkas kepada karya visual. Sama seperti dalam memasak, dengan sedikit latihan dan kreativiti, anda boleh menggunakan CSS untuk "memusim" tapak web anda dan menjadikannya unik. Jadi dapatkan "balang rempah" anda dan mula bereksperimen dengan gaya anda!

Atas ialah kandungan terperinci Cara Menambah Gaya CSS pada Halaman HTML: Panduan Pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!