Belajar CSS dengan Betul

Belajar CSS Dengan Betul

CSS (Cascading Style Sheets) digunakan oleh pembangun web untuk menggayakan tapak web.

Apabila saya mula belajar pembangunan web, saya sangat keliru tentang CSS. Kesukaran yang paling saya hadapi adalah dalam mengingati sifat dan mengekalkan kod saya. Dalam artikel ini saya akan membantu pemula mengelakkan kesilapan yang saya lakukan semasa belajar.

1. Berlatih
Pengaturcaraan adalah sesuatu yang anda tidak dapat menghafal sepenuhnya. Ini semua tentang memahaminya dengan berlatih.
Semasa saya belajar berlatih CSS agak sukar kerana saya tidak dapat menghafal sesuatu dengan baik. Saya cuba mengelakkan "copy & paste" kerana saya fikir ia akan merosakkan kemahiran saya. Pada akhirnya saya telah menamatkan salin dan tampal kod CSS. Sekarang saya tidak mengatakan bahawa menyalin dan menampal akan menjadikan keadaan lebih baik. Tetapi jika anda cuba memahami perkara yang berlaku apabila anda menjalankan salinan dan tampal kod CSS anda. Ia akan menjadi lebih baik daripada menghafal sifat CSS.

(Sebagai Contoh) Jika anda mahu menggayakan butang bulat dan hitam dengan teks putih dan mahukan butang itu menukar latar belakang dan warna teks apabila tuding. Anda boleh melepasi blok kod CSS yang betul-betul seperti:

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

Tanpa memahami apa yang dilakukan ia tidak akan banyak membantu.
Jika anda faham bahawa:

• sempadan: 2px pepejal; menambahkan jidar pepejal 2 piksel pada butang,
• jejari sempadan: 16px menjadikannya 16 piksel lebih bulat,
• warna latar belakang: #000000; menjadikan latar belakang hitam,
• warna: #ffffff; menjadikan teks putih, :hover,
• warna latar belakang: #ffffff;
• dan warna: #000000; menjadikan latar belakang putih dan teks hitam apabila dituding.

Anda akan dapat mengekod butang pada masa akan datang tanpa perlu menyalin tampal dan lebih baik lagi anda akan mempunyai pemahaman asas tentang sempadan, jejari sempadan, warna latar belakang, warna dan :hover dan akan dapat menggunakannya pada lebih banyak lagi daripada sekadar butang. Inilah sebabnya anda harus memahami kod yang anda salin tampal.

Rekursus:
Dari mana anda menyalin dan menampal kod juga penting. Memandangkan anda memerlukan penjelasan yang baik tentang kod sebagai pemula.

Terdapat banyak tapak yang melakukan kerja ini dengan baik tetapi saya akan mengesyorkan:

1. Geeks Untuk Geeks:

GeeksforGeeks ialah platform dalam talian terkemuka yang menyediakan sumber sains komputer dan pengaturcaraan kepada berjuta-juta pembangun dan peminat teknologi di seluruh dunia dengan perpustakaan kursus yang luas, program bilik darjah luar talian, tutorial, artikel, cabaran pengekodan, masalah latihan & banyak lagi.

Platform ini memberikan kod dengan penjelasan yang baik dan ia adalah kegemaran peribadi saya.

Lawati GeeksForGeeks

2. W3Sekolah:

W3Schools ialah sekolah untuk pembangun web, merangkumi semua aspek pembangunan web: Tutorial HTML. Tutorial CSS. Tutorial JavaScript. Tutorial PHP.

Laman web ini juga hampir sama dengan "Geeks For Geeks". Tapi teknik penerangannya berbeza jadi bergantung pada anda selesa atau tidak.

Lawati W3Schools

Kebolehselenggaraan Kod:
Semasa mempelajari pembangunan web, perkara kedua yang paling menjengkelkan ialah kod CSS saya menjadi terlalu besar. Ia semakin sukar untuk mengekalkan kod CSS untuk projek tapak web yang kompleks. Terima kasih kepada rangka kerja seperti TailwindCSS anda sentiasa tidak perlu menulis CSS mentah.

TailwindCSS:

Tailwind CSS ialah rangka kerja CSS sumber terbuka. Tidak seperti rangka kerja lain, seperti Bootstrap, ia tidak menyediakan satu siri kelas yang dipratentukan untuk elemen seperti butang atau jadual. Sebaliknya, ia mencipta senarai kelas CSS "utiliti" yang boleh digunakan untuk menggayakan setiap elemen dengan mencampur dan memadankan.

TailwindCSS membuat kod CSS seperti contoh butang kami sebelum ini:

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

Ke dalam kelas seperti:

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton :hover{
    background-color: #ffffff;
    color: #000000;
}

Itu boleh ditambahkan pada Elemen Butang HTML anda seperti:

border-2 rounded-md bg-black text-white hover:bg-white hover:text-black

Pada rangka kerja lain seperti ReactJS, saya akan mengesyorkan TailwindCSS untuk pemula. Ia lebih mudah untuk dipelajari dan digunakan dalam pengeluaran. Ia menjadikan kod CSS anda lebih Boleh Diselenggara. Anda juga boleh menggunakannya dengan ReactJS meningkatkan kecekapan dan kebolehselenggaraan kod anda. TailwindCSS juga mempunyai dokumen dengan penerangan kod yang sangat terperinci dan mudah difahami.

Lawati TailwindCSS

Kesimpulan:
Walaupun mempelajari CSS mungkin sukar tetapi mengamalkannya dengan kerap sambil memahaminya akan banyak membantu.

Jangan hanya menyalin tampal kod tetapi juga memahami fungsinya kerana ia adalah cara yang betul untuk mempelajari CSS.

Atas ialah kandungan terperinci Belajar CSS dengan Betul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!