Meninjau Tingkat Prioritas Gaya CSS

The Cascading Style Sheet (CSS) Saya kira, adalah bahasa yang paling sederhana dibandingkan dengan bahasa lain yang berhubungan dengan web, jadi tidak mengherankan untuk menemukan banyak orang yang baru mulai mempelajari cara membuat situs web kebanyakan akan mempelajari bahasa ini dan HTML terlebih dahulu.

Dalam posting ini, kita akan kembali ke dasar-dasar CSS. Kami akan meninjau bagaimana gaya CSS pada awalnya diterapkan, gaya mana yang akan berlaku, bagaimana beberapa gaya mendeklarasikan satu sama lain sementara yang lain tidak.

Jadi, posting ini secara khusus didedikasikan untuk pemula yang baru mulai memahami tantangan, mungkin masih membuat kesalahan dan kesalahan saat menyusun stylesheet pertama mereka. Jadi, mari kita mulai saja.

Gaya Peramban Default

Firefox, Chrome, Safari, Opera dan Internet Explorer saat ini adalah lima browser desktop teratas di pasar. Peramban ini dan semua peramban lainnya mengikuti aturan standar untuk menyertakan gaya bawaan bawaan untuk merender elemen HTML.

Jadi, ketika kami memasukkan beberapa elemen HTML acak tanpa menambahkan gaya, Anda akan melihat bahwa itu masih dirender dengan benar di browser.

Tetapi, jika kita memeriksa elemen-elemen itu dengan cermat, masing-masing browser memiliki (sedikit) nilai yang berbeda untuknya “standar” deklarasi yang menyebabkan inkonsistensi di seluruh browser, terutama yang lama seperti IE6, 7 dan Firefox 3.0.

Sebagai contoh, seperti yang dapat Anda lihat dari tangkapan layar di atas, Firefox terbaru menampilkan blokir secara default dengan margin: 16px 40px 16px 40px, sementara di sisi lain Internet Explorer 7 akan membuat blokir dengan margin: 0px 40px.

Untuk mengatasi ketidakkonsistenan yang ditunjukkan di atas, banyak perancang dan pengembang web lebih memilih untuk menimpa semua gaya tersebut Reset CSS. File CSS ini umumnya berisi hampir semua HTML Mengetik penyeleksi, mendefinisikannya dengan aturan yang sama.

Ada banyak pengaturan ulang CSS yang tersedia, tetapi inilah tiga favorit saya:

• Normalisasi.css
• Reset CSS
• HTML5 Reset Stylesheet

Penyeleksi

Anda mungkin sering membaca istilah ini di blog desain / pengembangan web yang Anda kunjungi; Penyeleksi.

Selector dalam CSS adalah sintaks yang digunakan untuk menargetkan setiap bagian pada dokumen HTML untuk gaya yang akan diterapkan. Ada tiga penyeleksi dasar yang akan kita bahas di sini, karena mereka mungkin akan menjadi penyeleksi umum yang digunakan di situs web pertama Anda. Kami akan membahas orang lain di pos selanjutnya.

Ketik Pemilih

Kami telah menyebutkan sekali di atas, pemilih Jenis akan menargetkan elemen HTML tertentu pada dokumen. Sebagai contoh:

 p / ** deklarasi ** / 

akan cocok dengan semua hal atau ayat elemen dan menggunakannya pada akhirnya akan menimpa gaya default yang diberikan dari browser.

Pemilih Kelas

Ketika Anda telah menambahkan kelas atau bahkan banyak kelas ke suatu elemen, Anda juga bisa menargetkan kelas-kelas itu. Itu Pemilih Kelas dimulai dengan a dot parameter.

 .kotak / ** deklarasi ** / 

Cuplikan di atas akan cocok dengan semua elemen yang memiliki kelas kotak, atau kami juga dapat memilih lebih spesifik.

 p.box / ** deklarasi ** / 

Ini hanya akan menargetkan hal elemen yang memiliki kotak kelas.

Ketika kita menggunakan Kelas pemilih, semua deklarasi gaya yang sama dari kedua Mengetik pemilih dan Browser tetap akan ditimpa.

Pemilih ID

Itu ID adalah atribut yang sangat terbatas, kita hanya dapat memiliki satu id pada elemen dan itu harus unik juga.

 
Konten
 

Dalam kasus kami memiliki id dalam suatu elemen, kita bisa menggunakan pemilih id untuk menargetkan elemen itu; pemilih id didefinisikan dengan hash # parameter.

 #uniqueID / ** deklarasi ** / 

Sejak ID unik, ia memiliki tingkat prioritas terkuat dari jenis pemilih. Jadi, ketika kita mendeklarasikan gaya dengan ID pemilih itu akhirnya akan menimpa semua deklarasi yang sama dari Kelas, Mengetik penyeleksi dan Browser tetap gaya.

Menanamkan Gaya

Kami telah melalui semua penyeleksi dasar yang penting dan sekarang kami akan melihat bagaimana gaya-gaya tersebut tertanam dalam dokumen HTML.

Gaya Eksternal

Gaya eksternal adalah gaya yang ditambahkan dalam file terpisah, biasanya dalam .css file yang kemudian ditautkan ke dokumen HTML menggunakan tag untuk menerapkan gaya tersebut.

Dan semua gaya yang dideklarasikan dalam file akan berperilaku seperti apa yang telah kami sebutkan di Penyeleksi bagian di atas, yaitu akan ditimpa terutama browser default gaya, dan menimpa deklarasi gaya lain tergantung pada tingkat prioritas pemilih.

Praktik ini adalah cara yang paling direkomendasikan untuk melampirkan gaya, terutama ketika Anda memiliki ribuan baris kode CSS dengan banyak halaman untuk dilampirkan.

Dengan melakukannya, gaya juga akan mudah dikelola, misalnya, Anda dapat memisahkan file CSS menjadi beberapa file tergantung pada peran spesifiknya, seperti tipografi.css untuk mengontrol semua gaya yang terkait dengan Tipografi dan sebagainya..

Gaya Internal

Gaya internal adalah gaya yang tertanam langsung dalam dokumen HTML, umumnya di dalam menandai.

Tetapi praktik ini tidak disarankan ketika Anda akan memiliki ratusan baris gaya karena halaman HTML Anda terlalu panjang dan gaya hanya akan mempengaruhi di mana gaya tertanam. Ketika Anda telah mengatakan sepuluh halaman, Anda perlu menyalin gaya-gaya itu dan menanamkannya di semua halaman dan ketika Anda perlu mengubah gaya Anda harus mengubahnya ke sepuluh halaman yang berbeda, yang jelas merupakan tugas yang membosankan.

Berdasarkan tingkat prioritasnya, gaya internal lebih tinggi, sehingga akan menimpa gaya eksternal.

Gaya sebaris

Gaya sebaris adalah gaya yang langsung disematkan dalam elemen HTML.

 
Ini adalah paragraf
 

Contoh di atas akan ditambahkan 5px margin ke elemen paragraf dan juga akan menimpa margin yang telah dideklarasikan untuk elemen tersebut baik dalam gaya internal maupun eksternal.

Tapi jangan lakukan ini, karena markup Anda akan berantakan dengan semua deklarasi gaya tersebut; jika Anda memiliki banyak gaya yang disematkan, itu bahkan akan menjadi mimpi buruk untuk melihat dan mempertahankan semua html dan gaya Anda.

Bacaan lebih lanjut: Tiga cara untuk memasukkan CSS - W3CSchools.

Aturan yang penting!

Ada beberapa keadaan ketika kita harus menerapkan gaya tertentu untuk suatu elemen tetapi gaya yang sama untuk elemen itu juga telah dinyatakan di tempat lain di stylesheet atau dalam dokumen. Sebagai contoh:

Kami memiliki tag anchor berikut dengan gaya tertanam

 Ini sebuah tautan 

Dan kami juga memiliki gaya terpisah untuk tag jangkar di lembar gaya.

 a border: 1px solid # 333; warna latar: # 555;  

Dalam contoh itu, kita bisa menggunakan !penting aturan untuk memaksa browser untuk menggunakan gaya dalam style sheet alih-alih yang ada di elemen.

 a border: 1px solid # 333! important; background-color: # 555! penting;  

Itu !penting aturan akan menunjukkan bahwa gaya ini adalah yang paling penting dan harus diterapkan di atas gaya lain bahkan ketika itu langsung tertanam dalam elemen (Gaya Inline).

Bacaan lebih lanjut:! deklarasi CSS penting: Bagaimana dan Kapan Menggunakannya - Majalah Smashing.

Kesimpulan

Kami telah membahas seluruh pokok bahasan dalam artikel ini. Kita dapat melihat sekarang bahwa setiap pemilih dan cara kami menanamkan gaya memiliki tingkat prioritas yang berbeda dalam mekanisme browser. Seperti yang saya sebutkan sebelumnya, subjek ini ditujukan untuk level pemula sehingga mereka jelas bukan sesuatu yang baru untuk desainer web berpengalaman.

Tapi, saya pikir setiap perancang web pada umumnya akan setuju bahwa kembali ke dasar kadang-kadang diperlukan untuk meninjau kembali pengetahuan dasar kita tentang suatu subjek. Bahkan, kita sering kehilangan beberapa hal mendasar, karena kita cenderung lebih terkesan dengan hal-hal yang luar biasa (dan gila) seperti ini.

Terakhir, saya telah menyediakan file demo dan sumber bagi Anda untuk memeriksa diskusi kami di artikel ini lebih lanjut.

• Demo
• Sumber Unduhan

Saya harap Anda menikmati posting ini dan jika Anda menemukan beberapa ketidaktepatan di dalamnya, atau saya telah melewatkan beberapa poin penting, jangan ragu untuk memberi tahu saya di bagian komentar di bawah ini.