Apakah asas -asas tutorial CSS untuk pemula mutlak?

Pemula CSS harus terlebih dahulu memahami bagaimana mereka bekerjasama dengan HTML, menguasai peraturan dan struktur CSS, mempelajari gaya teks dan warna, dan memahami asas -asas susun atur. Artikel menunjukkan bahawa HTML membina struktur web, dan CSS bertanggungjawab untuk gaya visual, menghubungkan CSS dan HTML melalui tag pautan; Peraturan CSS terdiri daripada pemilih dan blok pengisytiharan; Atribut biasa termasuk warna, font, penjajaran, dan sebagainya; Setiap elemen terdiri daripada kandungan, margin dalaman, sempadan, dan margin luar untuk membentuk model kotak, dan jenis paparan boleh dikawal melalui blok, inline, dan blok sebaris. Adalah disyorkan untuk secara beransur -ansur meneroka susun atur flexbox atau grid bermula dari pelarasan margin mudah.

Sekiranya anda benar -benar baru kepada CSS, asas -asas mungkin kelihatan agak luar biasa pada mulanya, tetapi mereka sebenarnya agak mudah apabila anda memahami bagaimana ia sesuai dengan gambaran yang lebih besar dalam pembangunan web. CSS (Lembaran Gaya Cascading) adalah apa yang memberikan kandungan HTML anda gaya visualnya - perkara seperti warna, fon, jarak, dan susun atur. Kuncinya adalah untuk memulakan kecil, belajar bagaimana untuk menyambungkan CSS ke HTML, dan memahami struktur asas peraturan CSS.

Memahami bagaimana HTML dan CSS bekerjasama

Sebelum menyelam ke dalam gaya, penting untuk mengetahui bahawa HTML menyediakan struktur halaman web, sementara CSS mengawal bagaimana struktur itu kelihatan. Fikirkan HTML sebagai kerangka dan CSS sebagai kulit dan pakaian.

Untuk menggunakan CSS dengan HTML, anda biasanya menghubungkan fail .css ke dokumen HTML anda menggunakan tag <link> di dalam bahagian . Contohnya:

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

Ini memberitahu penyemak imbas di mana untuk mencari arahan gaya. Sebagai alternatif, anda juga boleh menulis CSS secara langsung dalam fail HTML anda menggunakan tag <style> atau bahkan memohon gaya sejajar dengan atribut style - tetapi mereka kurang biasa untuk projek yang lebih besar kerana mereka membuat penyelenggaraan lebih keras.

Mempelajari struktur peraturan CSS

Di tengah -tengah CSS adalah peraturan - unit asas yang memberitahu penyemak imbas bagaimana gaya sesuatu. Peraturan CSS terdiri daripada pemilih dan blok pengisytiharan , yang mengandungi satu atau lebih perisytiharan .

Inilah contoh mudah:

 p {
  Warna: Biru;
  saiz font: 16px;
}

• p ialah pemilih - ia mensasarkan semua elemen perenggan.
• Bahagian antara {} ialah blok pengisytiharan.
• Setiap baris di dalam blok adalah perisytiharan- color dan font-size adalah sifat, dan blue dan 16px adalah nilai mereka.

Mendapatkan membaca dan menulis sintaks ini adalah kejam kerana hampir semua yang lain dalam CSS membina di atasnya.

Teks dan warna gaya

Salah satu tugas yang paling biasa dalam CSS ialah mengubah rupa teks. Anda sering bekerja dengan sifat seperti:

• color - Menetapkan warna teks
• font-family -Mengubah Typeface
• font-size -menyesuaikan seberapa besar teks muncul
• text-align -Kawalan Alignment (kiri, kanan, tengah)

Contohnya:

 H1 {
  Warna: #333;
  font-family: arial, sans-serif;
  saiz font: 24px;
  Teks-Align: Pusat;
}

Warna boleh ditulis dalam format yang berbeza - warna yang dinamakan seperti red , kod hex seperti #ff0000 , nilai RGB seperti rgb(255, 0, 0) , atau bahkan HSL. Kod Hex adalah popular kerana mereka padat dan ketepatan.

Ia juga baik untuk diingat bahawa tidak setiap fon yang anda suka akan tersedia pada setiap peranti. Itulah sebabnya ia adalah perkara biasa untuk menyenaraikan beberapa pilihan dalam font-family , berakhir dengan keluarga generik seperti sans-serif atau serif .

Bermula dengan asas susun atur

Sebaik sahaja anda selesa dengan teks gaya, langkah seterusnya adalah belajar bagaimana meletakkan elemen pada halaman. Dua konsep asas di sini adalah model kotak dan jenis paparan .

Setiap elemen dalam CSS pada dasarnya adalah kotak yang terdiri daripada kandungan, padding, sempadan, dan margin. Anda boleh menyesuaikan bahagian ini secara individu menggunakan sifat seperti padding , border , dan margin .

Juga, elemen berkelakuan berbeza bergantung pada nilai display mereka:

• Unsur block (seperti <div> ) mengambil lebar penuh dan timbunan secara menegak.<li> Unsur -unsur <code>inline (seperti <span></span> ) duduk di dalam baris teks dan hanya mengambil ruang sebanyak yang diperlukan.
• inline-block membolehkan anda mengawal jarak sambil mengekalkan tingkah laku sebaris.

Cara yang mesra pemula untuk mula meletakkan kandungan adalah dengan menggunakan margin mudah dan padding ke ruang angkasa, dan kemudian meneroka alat seperti flexbox atau grid untuk susun atur yang lebih maju.

---

Itu pada dasarnya semua yang anda perlukan untuk memulakan dengan CSS. Ia tidak terlalu rumit, tetapi terdapat banyak butiran kecil yang membuat perbezaan besar dalam bagaimana laman web anda kelihatan dan berkelakuan. Terus berlatih dengan membina contoh -contoh kecil, dan tidak lama lagi, laman web gaya akan merasakan sifat kedua.