Cascading Style Sheet (CSS) adalah sistem pengekodan laman web yang membolehkan pereka memanipulasi beberapa ciri sekaligus dengan memberikan elemen tertentu kepada kumpulan. Misalnya, dengan menggunakan kode untuk latar belakang laman web, perancang dapat mengubah warna latar belakang atau gambar di semua halaman situs web dengan satu perubahan pada file CSS. Inilah cara membuat CSS untuk laman web asas.
Langkah-langkah
Bahagian 1 dari 4: Menulis CSS Sebaris
Langkah 1. Pastikan anda mempunyai pemahaman asas mengenai tag HTML
Anda harus tahu bagaimana tag berfungsi dan
src
dan
href
sifat.
Langkah 2. Ketahui beberapa sifat asas CSS
Anda akan dapati terdapat banyak harta tanah. Walau bagaimanapun, tidak perlu mempelajari semuanya.
-
Beberapa sifat asas CSS yang baik untuk diketahui adalah
warna
dan
keluarga fon
- .
Langkah 3. Ketahui mengenai nilai untuk setiap harta tanah masing-masing
Semua sifat memerlukan nilai. Untuk
warna
harta tanah, sebagai contoh, anda mungkin meletakkan
merah
nilai.
Langkah 4. Ketahui mengenai
gaya
Atribut HTML.
Ia digunakan dalam elemen seperti
href
atau
src
. Untuk menggunakannya, dalam tanda petikan selepas tanda sama, masukkan atribut CSS, titik dua, dan kemudian nilai harta tanah. Ini dikenali sebagai peraturan CSS.
Langkah 5. Fahami bahawa CSS sebaris biasanya tidak digunakan untuk laman web oleh pembangun web profesional
Inline CSS dapat menambahkan kekacauan yang tidak perlu pada dokumen HTML. Walau bagaimanapun, ini adalah cara yang baik untuk diperkenalkan kepada bagaimana CSS berfungsi.
Bahagian 2 dari 4: Menulis CSS Asas
Langkah 1. Lancarkan program yang anda mahu gunakan
Ini harus membolehkan anda membuat fail HTML dan CSS.
Sekiranya anda tidak memasang program khas, anda boleh menggunakan Notepad atau penyunting teks lain. Cukup simpan fail anda sebagai fail teks dan juga fail CSS
Langkah 2. Buka fail HTML untuk laman web anda
Anda harus membukanya dengan editor HTML juga, jika anda sudah memasangnya.
Penyunting HTML membolehkan anda mengedit HTML dan CSS pada masa yang sama
Langkah 3. Buat tag di kepala HTML anda
Ini akan membolehkan anda menulis CSS tanpa memerlukan fail yang berasingan.
Langkah 4. Pilih elemen yang ingin anda tambahkan gaya dan taipkan nama elemen diikuti dengan sekumpulan pendakap kerinting ({})
Untuk menjadikan kod anda lebih mudah dibaca, selalu letakkan pendakap keriting kedua pada barisnya sendiri.
Langkah 5. Di antara pendakap, taipkan peraturan CSS anda seperti yang anda gunakan
gaya
atribut.
Setiap baris mesti diakhiri dengan titik koma (;). Untuk membuat kod anda dapat dibaca, setiap peraturan harus bermula pada barisnya sendiri dan setiap baris harus diberi lekukan.
Sangat penting untuk diperhatikan bahawa gaya ini akan mempengaruhi semua elemen jenis yang dipilih di halaman. Gaya yang lebih khusus akan dibahas di bahagian seterusnya
Bahagian 3 dari 4: CSS Lebih Lanjut
Langkah 1. Buat fail CSS, bukan fail HTML dan simpan menggunakan
.css
sambungan.
Buka fail HTML anda juga.
Langkah 2. Buat tag di kepala HTML anda
Ini akan membolehkan anda memautkan fail CSS yang terpisah ke dokumen HTML anda. Teg pautan anda memerlukan tiga atribut:
rel
menaip
dan
href
-
rel
bermaksud "hubungan" dan memberitahu penyemak imbas apa hubungannya dengan dokumen HTML. Di sini semestinya mempunyai nilai
"helaian gaya"
- .
-
menaip
memberitahu jenis media yang dihubungkan. Di sini semestinya mempunyai nilai
"teks / css"
-
href
- di sini digunakan serupa dengan cara ia digunakan dalam elemen, tetapi di sini mesti dipaut ke fail CSS. Sekiranya fail CSS terletak di folder yang sama dengan fail HTML, hanya nama fail yang perlu ditulis dalam tanda petik.
Langkah 3. Pilih elemen dari pelbagai jenis yang anda mahu tambahkan gaya yang sama
Tambahkan
kelas
atribut kepada unsur-unsur ini dan tetapkannya sama dengan nama kelas pilihan anda. Ini akan memberi unsur anda gaya yang sama.
Langkah 4. Tetapkan gaya yang akan diterima oleh kelas
Taipkan nama kelas dalam fail CSS anda dengan titik (.) Yang mendahuluinya (iaitu
.kelas
).
Langkah 5. Pilih elemen tunggal yang anda mahu tambahkan gaya khas dan tambah
ID
atribut.
Id dibuat dalam CSS menggunakan simbol paun (#) dan bukan noktah.
Id lebih spesifik daripada kelas, jadi id akan menggantikan gaya kelas apa pun jika mempunyai atribut dengan nilai yang berbeza daripada kelas
Bahagian 4 dari 4: Belajar Lebih Banyak
Langkah 1. Lawati sekolah w3
Ini adalah laman web rasmi yang bertujuan untuk mengajar kemahiran pengembangan web. W3 mempunyai banyak rujukan yang disenaraikan untuk HTML dan CSS, serta bahasa web lain.
Langkah 2. Cari laman web lain yang bertujuan khusus untuk belajar dan mengajar HTML dan CSS
Laman web seperti CSS tricks.com secara khusus bertujuan untuk mengajar kemahiran CSS dan reka bentuk web. Mencari sumber yang bereputasi baik akan membantu anda dalam perjalanan pembelajaran anda.
Langkah 3. Hubungi pereka web dan pembangun
Pengalaman dan pengetahuan mereka dapat mengajar anda pengetahuan dan kemahiran yang berharga.
Langkah 4. Lihat kod sumber laman web yang anda temui
Melihat CSS laman web yang dibangunkan dengan baik dapat menunjukkan cara untuk merancang bahagian laman web. Menyalinnya sebagai latihan dan bermain dengan kod dapat membantu anda belajar bagaimana menggunakan atribut CSS yang berbeza.
