Penjelasan Kembali Ke Dasar-Dasar CSS Dijelaskan
CSS atau Cascading Stylesheets melengkapi bahasa yang mendefinisikan aturan desain untuk web kami. Artis di mana-mana menggunakan CSS setiap hari untuk membuat, mengatur, dan menyandikan serangkaian aturan untuk tata letak situs web dasar. Ini telah menjadi bahasa yang paling populer untuk desain front-end dan memberikan kemampuan luar biasa dengan rilis terbaru CSS3. Tapi apa sebenarnya arti dari semua kode ini?
Bahasa itu sendiri telah dikembangkan sepenuhnya selama beberapa tahun sekarang. Kebingungan dapat timbul terutama karena miskomunikasi dan penyalahgunaan istilah yang serupa. CSS membawa banyak konsep baru. Kami akan membahas beberapa terminologi paling populer untuk dikuasai sebagai guru CSS.
Mengapa Mengkhususkan dengan CSS?
Pertanyaan ini telah diajukan sebelumnya, dan bahkan memasuki 2011 kita dapat melihat hasil yang sama muncul. CSS adalah bahasa yang kuat tidak dalam suka scripting atau pemrograman. Ini adalah bahasa gaya, lebih khusus kode yang digunakan untuk menggambarkan bagaimana suatu halaman web harus berperilaku.
Menggunakan CSS, kita dapat secara langsung memanipulasi atribut dari elemen HTML individual. Semua blok, paragraf, tautan, dan gambar dapat dipengaruhi melalui aturan CSS. Menyempurnakan semantik presentasi untuk web selalu menjadi langkah besar. Ini adalah alasan utama mengapa CSS masih menjadi pemain terkemuka untuk desainer - tidak ada yang menciptakan sesuatu yang lebih baik!
Properti dan Nilai
Ini adalah cara paling sederhana untuk masuk ke CSS. Semua kode terbagi menjadi dua tindakan: memilih elemen untuk menerapkan desain dan apa yang harus diterapkan. Yang terakhir ini dibuat melalui pasangan properti / nilai.
Sebagai contoh warna merah; adalah pasangan properti / nilai yang sangat sederhana. Properti yang kami gunakan adalah warna yang memungkinkan kita untuk melewati setiap yang dapat diterima nilai untuk mengubah warna teks. Ini juga bisa berupa kode heks atau data warna RGB (Merah-Hijau-Biru). Banyak kali desainer tidak akan menyebutkan gagasan nilai karena dapat menyesatkan.
Properti dan nilai benar-benar satu ide. Setiap deklarasi properti membutuhkan nilai, dan nilai mereka sendiri tidak ada artinya. Ada banyak dokumentasi online yang membahas berbagai properti dan bagaimana pengaruhnya terhadap elemen HTML. Saya akan merekomendasikan membeli buku referensi CSS dari toko buku terdekat. Mereka cukup murah dan menampung semua informasi yang Anda butuhkan.
Nilai Pemilih
Selektor diperlukan untuk melengkapi seluruh baris kode CSS. Inilah yang kami nyatakan untuk menetapkan jenis elemen apa yang kami targetkan. Ada banyak penyeleksi dan banyak yang berbelit-belit sehingga desainer rata-rata tidak membutuhkan keterampilan. Periksa dokumen pemilih W3 jika Anda ingin mengetahui lebih lanjut.
Cara paling sederhana untuk memulai definisi gaya adalah dengan menggunakan elemen kosong sebagai pemilih properti. Ini berarti memanipulasi kode root seperti hal untuk paragraf, div untuk divisi, dan bahkan tubuh dan html dapat digunakan untuk memanipulasi seluruh dokumen halaman web. Di bawah ini adalah contoh cepat untuk menata semua elemen paragraf.
p font-family: Arial, sans-serif; warna: # 222; font-weight: bold;
Apa yang memberi CSS bobot nyata adalah seberapa akurat sniping pemilih dapat. Cara terbaik untuk mencapai gaya yang ditargetkan adalah melalui 2 metode yang dikenal sebagai kelas dan ID. Ini adalah gagasan umum dalam HTML di mana Anda dapat mengatur elemen apa pun untuk memiliki ID dan nilai kelas melalui atribut. Kemudian menggunakan CSS, sangat mudah untuk menerapkan gaya ke blok tertentu.
p # firstpar ukuran font: 14px; / * style paragraf dengan ID "firstpar" * / p.comment font-size: 1.0em; garis-tinggi: 1.3em; / * gaya paragraf dengan kelas "komentar" * /
Unit dan Nilai Panjang
Seringkali istilah-istilah ini campur aduk, bukan kejutan besar. Nilai dijelaskan sebelumnya sebagai penempatan yang kami gunakan untuk menggambarkan properti. Unit panjang juga merupakan nilai yang digunakan untuk menggambarkan properti.
Perbedaannya adalah nilai-nilai ini memerlukan data numerik dan karenanya harus mengembalikan beberapa bentuk unit. Piksel (px) adalah yang paling umum dan dapat digunakan untuk hampir semua hal: lebar / tinggi, ukuran font, bantalan / margin, untuk beberapa nama.
Selain ini, Anda mungkin melihat persentase (%) sering digunakan melalui tata letak cairan. Saat menetapkan nilai lebar ke persen, kompiler akan menganggap 100% sebagai keseluruhan lebar browser web. Ini memberikan banyak presisi bagi desainer ketika menerapkan gaya ke struktur tata letak dan bahkan tipografi halaman.
Blok Deklarasi
Sekarang setelah menggabungkan semua istilah ini, kami akhirnya dapat mendiskusikan gagasan inti di balik stylesheet. Blok kode digunakan untuk menggambarkan area topik dan menentukan detail elemen. Misalnya, di bawah ini adalah baris kode untuk wadah navigasi sederhana:
div # nav display: block; lebar: 100%; padding: 3px 6px; margin-bottom: 20px;
Cara termudah untuk menampilkan kode ini adalah dengan melapisi properti satu demi satu. Pengembang CSS telah menggunakan blok kode untuk memecah setiap properti ke barisnya sendiri. Agenda ini tidak hanya membutuhkan lebih banyak ruang tetapi juga mengurangi kemampuan “meluncur” lembar Anda untuk menemukan apa yang Anda butuhkan.
Cara yang lebih baik untuk memecah blok kode adalah dengan memisahkan elemen yang berbelit-belit menjadi milik mereka setelah mereka mencapai ambang batas. Nomor ini bersifat pribadi dan akan berbeda antara pengembang. Ini adalah titik kritis di mana logika menentukan konyol untuk menjaga semuanya tetap pada satu baris, sebagian besar karena keterbacaan.
Di bawah ini saya telah menulis contoh blok properti navigasi bersama-sama. Praktik ini menjaga elemen yang lebih dalam di lokasi yang sama sehingga pengeditan untuk semua elemen navigasi jauh lebih sederhana.
div # nav display: block; lebar: 100%; padding: 3px 6px; margin-bottom: 20px; div # nav ul list-style: none; display: blok; div # nav ul li float: left; margin-right: 10px; ukuran font: 12px; div # nav ul li a color: # 0f0f0f; teks-dekorasi: tidak ada; display: inline-block; padding: 2px 5px;
Kemungkinan Kemajuan dari CSS2 / CSS3
Dalam tajuk berita baru-baru ini telah menjadi pembicaraan tanpa henti tentang manfaat luar biasa dari CSS3. Tapi apa yang sebenarnya berubah dalam bahasa? Jelas kode lama masih akan berjalan dengan baik. Ini setidaknya menunjukkan kompatibilitas mundur lengkap antara kompiler (selalu merupakan hal yang baik).
Perbedaan utama sebagian besar terkait dengan properti baru. Ini memungkinkan sudut bulat dan efek drop-shadow di-browser-kan. CSS3 juga menawarkan alat baru untuk menggambarkan warna dalam dokumen. HSL (Hue-Saturation-Lightness) adalah yang terbaru selain HSLA yang mencakup saluran Alpha untuk mengurangi opacity.
Selektor atribut adalah langkah besar ke depan dalam hal penandaan gaya lurus. Dengan gaya kode ini Anda dapat menargetkan nama elemen tertentu yang berisi atribut dengan nilai-nilai tertentu. Ini sebagian besar berguna ketika bekerja dengan markup seperti XML di mana tidak ada prinsip desain standar untuk memanipulasi node. Contoh di bawah ini adalah ide yang relatif sederhana:
div [attrib ^ = "1"] / * gaya di sini * /
Kode di atas adalah bagian dari perpustakaan penyeleksi CSS. Ini akan memengaruhi semua elemen div dengan atribut “attrib” yang juga memegang nilai “1”. Jika referensi ini masih membingungkan, contoh di bawah ini untuk menjelaskan. Secara teori, dua penyeleksi ini harus melakukan tindakan yang sama.
p [id ^ = "primer"] / * styles * / p # primary / * styles * /
Kesimpulan
Setelah memecah beberapa istilah yang terlalu membingungkan CSS sepertinya berjalan-jalan di taman. Bahasa ini sangat intuitif dan pemula dapat mulai merancang dalam beberapa jam pertama di tangan. Inilah yang membuat CSS sangat populer di kalangan pengembang web.
Manfaat CSS3 baru saja mulai berlaku. Selama beberapa tahun baru tren web yang berkembang akan menunjukkan kepada kita seberapa besar kendali yang kita miliki atas desain halaman web. CSS saat ini berdiri dengan bangga sebagai bahasa yang dominan untuk gaya situs web front-end. Berlatih bahkan dalam keterampilan tingkat menengah yang belum sempurna dapat menghasilkan pengalaman desain yang melimpah dan pengetahuan lebih lanjut.
