CSS Back To Basics Terminologies Explained
CSS atau Cascading Stylesheets melengkapkan bahasa yang menentukan peraturan reka bentuk untuk web kami. Artis di mana-mana menggunakan CSS setiap hari untuk membuat, menyusun, dan menyandikan set peraturan untuk susun atur tapak web asas. Ini telah menjadi bahasa yang paling popular untuk reka bentuk front-end dan menyediakan kebolehan luar biasa dengan pembebasan CSS3 baru-baru ini. Tetapi apa yang sebenarnya bermakna semua kod ini?
Bahasa itu sendiri telah dibangunkan sepenuhnya selama beberapa tahun sekarang. Kekeliruan boleh timbul terutamanya disebabkan oleh miskomunikasi dan penyalahgunaan istilah yang sama. CSS membawa banyak konsep baru ke meja. Kami akan merangkumi beberapa istilah yang paling popular untuk menguasai sebagai guru CSS.
Mengapa Pakar dengan CSS?
Soalan ini telah ditimbulkan sebelum ini, dan walaupun memasuki 2011 kita dapat melihat hasil yang sama muncul. CSS adalah bahasa yang mantap bukan seperti skrip atau pengaturcaraan. Ia adalah bahasa gaya, kod yang lebih khusus digunakan untuk menggambarkan bagaimana halaman web harus berkelakuan.
Menggunakan CSS kita boleh terus memanipulasi atribut daripada elemen HTML individu. Semua blok, perenggan, pautan, dan imej boleh terjejas melalui peraturan CSS. Semantik penyampaian semantik untuk web sentiasa menjadi langkah besar. Inilah sebab utama mengapa CSS masih menjadi pemain utama untuk pereka - tiada siapa yang mencipta sesuatu yang lebih baik!
Hartanah dan Nilai
Ini adalah cara paling mudah untuk memecahkan CSS. Semua kod jatuh ke dalam dua tindakan: memilih elemen untuk menggunakan reka bentuk dan apa yang perlu diterapkan. Yang terakhir ini dibuat melalui pasangan hartanah / nilai.
Sebagai contoh warna: merah; adalah pasangan harta / nilai yang sangat mudah. Hartanah yang kami gunakan adalah warna yang membolehkan kita lulus apa-apa yang boleh diterima nilai untuk menukar warna teks. Ini juga boleh menjadi kod hex atau data berwarna RGB (Red-Green-Blue). Ramai kali pereka tidak akan menyebut idea nilai kerana ia boleh mengelirukan.
Sifat dan nilai sebenarnya adalah idea tunggal. Setiap perisytiharan harta memerlukan nilai, dan nilai-nilai mereka sendiri tidak bermakna. Terdapat banyak dokumentasi dalam talian yang mengatasi banyak sifat yang berbeza dan bagaimana ia mempengaruhi elemen HTML. Saya akan mengesyorkan membeli buku rujukan CSS dari mana-mana kedai buku berdekatan. Mereka agak murah dan memegang kebanyakan maklumat yang anda perlukan.
Nilai Pemilih
Pemilih diperlukan untuk melengkapkan keseluruhan baris kod CSS. Inilah yang kami menyatakan untuk menetapkan jenis elemen yang kami sasarkan. Terdapat banyak pemilih dan banyak yang begitu rumit pereka purata tidak memerlukan kemahiran. Semak dokumen pemilih W3 jika anda ingin mengetahui lebih lanjut.
Cara paling mudah untuk memulakan definisi gaya adalah dengan menggunakan unsur kosong sebagai pemilih harta. Ini bermakna memanipulasi kod root seperti p untuk perenggan, div untuk bahagian, dan juga badan dan html boleh digunakan untuk memanipulasi seluruh dokumen laman web. Di bawah ini adalah satu contoh pantas gaya semua elemen perenggan.
p font-family: Arial, sans-serif; warna: # 222; font-weight: bold;
Apa yang memberikan berat badan sebenar CSS adalah bagaimana sniper pemilihan yang tepat boleh. Cara terbaik untuk mencapai gaya yang disasarkan adalah melalui 2 kaedah yang dikenali sebagai kelas dan ID. Ini adalah idea umum dalam HTML di mana anda boleh menetapkan sebarang unsur untuk mempunyai nilai ID dan kelas melalui atribut. Kemudian menggunakan CSS mudah untuk menggunakan gaya ke blok spesifik itu.
p # firstpar font-size: 14px; / * paragraf gaya dengan ID "firstpar" * / p.comment font-size: 1.0em; garis ketinggian: 1.3em; / * gaya perenggan (s) dengan kelas "komen" * /
Panjang Unit dan Nilai
Sering kali istilah ini bercampur-campur, bukan kejutan besar. Nilai-nilai telah dijelaskan awal sebagai penempatan yang kita gunakan untuk menggambarkan harta. Unit panjang juga nilai-nilai di mana ia digunakan untuk menggambarkan harta.
Perbezaannya adalah nilai-nilai ini memerlukan data berangka dan oleh itu mesti mengembalikan beberapa bentuk unit. Piksel (px) adalah yang paling lazim dan boleh digunakan untuk kebanyakan perkara: lebar / ketinggian, saiz fon, padding / margin, untuk menamakan beberapa.
Selain itu, anda mungkin melihat peratusan (%) yang sering digunakan melalui susun atur cecair. Apabila menetapkan nilai lebar kepada satu peratus, pengkompil akan menganggap 100% sebagai lebar keseluruhan penyemak imbas web. Ini memberikan banyak ketepatan kepada pereka apabila menggunakan gaya ke susun atur struktur dan juga tipografi halaman.
Blok Deklarasi
Sekarang setelah meletakkan semua istilah ini bersama-sama, kita akhirnya dapat membincangkan idea utama di sebalik stylesheets. Blok kod digunakan untuk menggambarkan kawasan topik dan menentukan elemen terperinci. Sebagai contoh, di bawah adalah garisan kod untuk sebuah bekas pelayaran mudah:
div # nav display: block; lebar: 100%; padding: 3px 6px; margin-bottom: 20px;
Cara paling mudah untuk memaparkan kod ini adalah untuk ciri-ciri baris satu demi satu. Pemaju CSS telah menggunakan blok kod untuk memecahkan setiap harta ke baris sendiri. Agenda ini tidak hanya memakan lebih banyak ruang tetapi mengurangkan kebolehan “skim” helaian anda untuk mencari apa yang anda perlukan.
Cara yang lebih baik untuk memecahkan blok kod adalah untuk memisahkan unsur-unsur berbelit ke dalam mereka sendiri setelah mencapai ambang. Nombor ini adalah peribadi dan akan berbeza antara pemaju. Ini adalah titik tip di mana logik menentukannya bodoh untuk menyimpan segala-galanya pada satu baris, kebanyakannya kerana kebolehbacaan.
Di bawah ini saya telah menulis satu contoh blok ciri-ciri navigasi bersama-sama. Amalan ini menyimpan unsur-unsur yang lebih dalam di lokasi yang sama supaya pengeditan kepada semua elemen navigasi lebih mudah.
div # nav display: block; lebar: 100%; padding: 3px 6px; margin-bottom: 20px; div # nav ul style-list: none; paparan: blok; div # nav ul li float: left; margin-right: 10px; saiz fon: 12px; div # nav ul li a color: # 0f0f0f; teks-hiasan: tiada; paparan: blok dalam talian; padding: 2px 5px;
Kemajuan Kemungkinan daripada CSS2 / CSS3
Dalam tajuk utama baru-baru ini telah membincangkan tentang faedah luar biasa dari CSS3. Tetapi apa yang sebenarnya berubah dalam bahasa itu? Kod jelas lama masih berjalan lancar. Sekurang-kurangnya ini menunjukkan keserasian ke belakang di antara penyusun (sentiasa perkara yang baik).
Perbezaan utama kebanyakannya berkaitan dengan hartanah baru. Ini membolehkan sudut bulat dan kesan drop-shadow diberikan dalam penyemak imbas. CSS3 juga menawarkan alat baru untuk menerangkan warna dalam dokumen. HSL (Hue-Saturation-Lightness) adalah yang terbaru sebagai tambahan kepada HSLA yang merangkumi saluran Alpha untuk mengurangkan kelegapan.
Pemilih atribut adalah satu langkah besar ke hadapan untuk gaya penanda lurus. Dengan gaya kod ini anda boleh menyasarkan nama elemen tertentu yang mengandungi atribut dengan nilai tertentu. Ini kebanyakannya berguna apabila bekerja dengan markup seperti XML di mana tidak ada prinsip reka bentuk standard untuk memanipulasi nod. Contoh di bawah adalah idea yang agak mudah:
div [attrib ^ = "1"] / * styles here * /
Kod di atas adalah sebahagian daripada perpustakaan pemilih CSS. Ini akan menjejaskan semua elemen div dengan atribut “attrib” yang juga memegang nilai “1”. Jika ini masih membingungkan rujukan contoh di bawah untuk menjelaskan. Secara teorinya kedua pemilih harus melakukan tindakan yang sama.
p [id ^ = "primary"] / * styles * / p # primary / * styles * /
Kesimpulannya
Selepas memecah beberapa istilah yang paling keliru CSS kelihatan seperti berjalan kaki di taman. Bahasa ini sangat intuitif dan pemula boleh mula mereka bentuk dalam beberapa jam pertama di tangan. Inilah yang menjadikan CSS begitu popular di kalangan pemaju web.
Manfaat CSS3 baru mula mula berkuat kuasa. Sepanjang tahun-tahun baru trend web yang berkembang akan menunjukkan kepada kita betapa banyak kawalan yang kita benar-benar mempunyai melalui reka bentuk laman web. CSS kini bangga sebagai bahasa dominan untuk gaya laman web front-end. Mempraktikkan ke dalam kemahiran perantaraan peringkat rendah walaupun boleh menghasilkan pengalaman reka bentuk yang berlimpah dan pengetahuan selanjutnya.
