CSS Tidak Sukar (Anda hanya Hilang Asas Ini)

Apabila saya mula-mula memulakan pembangunan web, saya fikir cabaran terbesar saya ialah JavaScript (tidak mengatakan JS masih segelintir) tetapi kemudian datang begitu banyak wakil buruk dan cerita seram tentang CSS.

Walaupun semua ini, saya menyelami pembangunan Frontend dengan mendalam, dan budak lelaki, adakah CSS melakukan nombor pada saya. Tiada apa-apa yang berjaya dengan baik, dan jangan biarkan saya mula memusatkan div. Ia adalah mimpi ngeri.

Tetapi, kemudian, inilah yang saya sedar, CSS bukanlah Masalahnya, masalahnya ialah saya tidak memahami asas-asasnya, dan setelah saya menguasainya, penggayaan menjadi lebih mudah dan menyeronokkan.

Dalam artikel ini, saya akan membimbing anda melalui dua konsep asas yang akan menetapkan peringkat untuk menguasai CSS:

1. Pemilih CSS
2. Model Kotak
3. Kedudukan dan Reka Letak

• Pemilih CSS: Pemilih CSS ialah alatan yang membolehkan anda menyasarkan elemen HTML tertentu yang memerlukan penggayaan.

Mari terokai beberapa pemilih yang biasa digunakan:

A. Pemilih Universal: Ini digunakan untuk menyasarkan setiap elemen pada halaman. Ia diwakili oleh simbol asterisk(*) dan biasanya digunakan untuk tetapan semula global atau untuk menggunakan gaya asas.

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

B. Pemilih Kelas: Ini digunakan untuk memilih elemen HTML dengan nilai atribut kelas tertentu. Untuk memilih elemen dengan kelas tertentu, tulis titik(.) diikuti dengan nilai atribut kelas.

<div>





<pre class="brush:php;toolbar:false">.box{
  background-color: teal;
  padding: 30px;
  border-radius: 10px;
  border: 2px solid;
  text-align: center;
}

C. Pemilih Jenis: Ini digunakan untuk menyasarkan semua elemen jenis tertentu. Ia juga dipanggil pemilih elemen.

p{
text-align: center;
font-size: 1.2rem
}

Kes penggunaan: Ini menggunakan gaya seragam pada semua

teg.

D. Pemilih Atribut: Pemilih ini menyasarkan elemen HTML berdasarkan atribut dan nilainya.

input[type = "text"] {
background-color: cyan;
color: gray;
}

E. Kelas pseudo: Elemen pilih ini untuk penggayaan berdasarkan keadaannya.

a:hover{
color: blue;
transition: ease-in 0.5s;
}

Terdapat Pemilih CSS lain yang berguna tetapi ini akan berfungsi buat masa ini.

• Model Kotak

Model Kotak pada asasnya ialah kotak yang membungkus elemen HTML, pada asasnya setiap elemen dalam HTML hanyalah satu kotak segi empat tepat yang besar (atau kecil). Perkara yang dilakukan oleh model kotak adalah untuk membantu mengawal jumlah ruang yang diduduki setiap kotak dan cara ia berinteraksi dengan elemen lain.

Setiap kotak mempunyai empat bahagian utama:

1. Kandungan: Inilah yang ada di dalam kotak – teks, imej dan elemen lain.
2. Padding: Ini ialah ruang antara kandungan dan tepi kotak.
3. Sempadan: Ini adalah tepi kotak.
4. Margin: Ini ialah ruang di luar sempadan yang memisahkan kotak ini daripada kotak lain.

Berikut ialah ilustrasi yang menerangkan Model Kotak

Nota: garis putus-putus ialah sempadan kotak.

Model Kotak adalah penting untuk apa sahaja yang anda mahu lakukan dalam CSS, daripada elemen penentududukan kepada menguruskan jarak. Sebagai contoh, saya melukis Ilustrasi Model Kotak menggunakan HTML dan CSS sahaja untuk menunjukkan cara lapisan berbeza berfungsi bersama.

Berikut ialah kod yang membantu saya menghidupkan ilustrasi itu:

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

MEMBUNGUT(sudah tiba masanya)
CSS mungkin kelihatan seperti banyak pada mulanya, tetapi sebaik sahaja anda menguasai asas-asas anda sudah bersedia untuk menakluki dunia (sekurang-kurangnya dunia anda).
Berikut ialah petikan penting daripada artikel ini: CSS tidak sukar, anda hanya perlu menumpukan lebih pada asas.
Teruskan belajar dan yang paling penting teruskan berlatih, dan tidak lama lagi, anda akan menggayakan halaman web seperti profesional.

Apa Seterusnya?
Memandangkan anda telah mempelajari asas CSS Selectors dan Model Box, anda selangkah lebih dekat untuk menguasai CSS, Tetapi masih banyak lagi yang perlu diterokai.
Dalam artikel Seterusnya, kita akan menyelami kedudukan CSS dan Teknik Reka Letak seperti Flexbox dan Grid.

Selamat mengekod!!!!

Atas ialah kandungan terperinci CSS Tidak Sukar (Anda hanya Hilang Asas Ini). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!