Meninjau Tahap Keutamaan Gaya CSS

Lembaran Gaya Cascading (CSS) adalah, saya fikir, bahasa yang paling mudah dibandingkan dengan bahasa yang berkaitan dengan web, jadi tidak menghairankan untuk mencari ramai orang yang baru mulai belajar bagaimana membuat laman web yang kebanyakannya akan mempelajari bahasa ini dan HTML terlebih dahulu.

Dalam catatan ini, kami akan kembali kepada asas CSS. Kami akan mengkaji bagaimana gaya CSS pada mulanya digunakan, gaya yang akan digunakan, bagaimana beberapa deklarasi gaya menimpa satu sama lain sementara yang lain tidak.

Oleh itu, jawatan ini khusus didedikasikan untuk pemula yang baru sahaja mula mendapat cabaran, mungkin masih membuat kesilapan dan kesilapan ketika menyusun lembaran gaya pertama mereka. Jadi, mari kita mulakan.

Gaya Penyemak Imbas Lalai

Firefox, Chrome, Safari, Opera dan Internet Explorer saat ini adalah lima pelayar desktop teratas di pasaran. Pelayar ini dan semua pelayar lain mengikuti peraturan standard untuk memasukkan gaya lalai terbina dalam untuk menjadikan elemen HTML.

Oleh itu, apabila kita memasukkan beberapa elemen HTML secara rawak tanpa apa-apa gaya ditambah, anda akan melihat bahawa ia masih diberikan dengan betul dalam penyemak imbas.

Tetapi, jika kita memeriksa elemen tersebut dengan berhati-hati, setiap penyemak imbas mempunyai (sedikit) nilai yang berbeza untuk mereka “lalai” perisytiharan yang menyebabkan ketidakkonsistenan melintasi pelayar, terutamanya dalam yang lama seperti IE6, 7 dan Firefox 3.0.

Contohnya, seperti yang anda dapat lihat dari tangkapan skrin di atas, Firefox terbaru memberikannya blockquote secara lalai dengan margin: 16px 40px 16px 40px, manakala di pihak yang lain pula Internet Explorer 7 akan menyebabkan blockquote dengan margin: 0px 40px.

Untuk mengatasi ketidakkonsistenan yang ditunjukkan di atas, banyak pereka web dan pemaju lebih suka menimpa semua gaya tersebut dengan CSS Reset. Fail CSS ini biasanya mengandungi hampir semua HTML Taipkan pemilih, mentakrifkan mereka dengan peraturan yang sama.

Terdapat banyak seting CSS yang tersedia, tetapi di sini terdapat tiga pilihan kegemaran saya:

• Normalize.css
• CSS Reset
• Lembaran Hamparan HTML5

Pemilih

Anda mungkin sering membaca istilah ini di seluruh reka bentuk / blog pembangunan web yang anda lawati; Pemilih.

Pemilih dalam CSS adalah sintaks yang digunakan untuk menyasarkan mana-mana bahagian pada dokumen HTML untuk gaya yang digunakan. Terdapat tiga pemilih asas yang akan dibincangkan di sini, kerana mereka mungkin akan menjadi pemilih umum yang digunakan pada laman web pertama anda. Kami akan melindungi orang lain dalam siaran masa depan.

Jenis Pemilih

Kami telah menyebutkan sekali di atas, Pemilih jenis akan menyasarkan sebarang elemen HTML yang dinyatakan pada dokumen itu. Sebagai contoh:

 p / ** deklarasi ** / 

akan memadankan semua p atau perenggan unsur-unsur dan menggunakannya akhirnya akan menimpa gaya lalai yang diberikan dari pelayar.

Pemilih Kelas

Apabila anda telah menambah kelas atau bahkan banyak kelas kepada elemen, anda juga boleh menargetkan kelas tersebut. The Pemilih Kelas bermula dengan a titik parameter.

 .kotak / ** deklarasi ** / 

Potongan di atas akan sepadan dengan semua elemen yang mempunyai kelas kotak, atau kami juga boleh memilih lebih khusus.

 p.box / ** declaration ** / 

Ia hanya akan menyasarkan p unsur yang mempunyai kotak kelas.

Apabila kami menggunakan Kelas pemilih, semua deklarasi gaya yang sama dari kedua-dua Taipkan pemilih dan Pelayar lalai akan ditindih.

Pemilih ID

The ID adalah sifat yang sangat ketat, kita hanya boleh mempunyai satu ID pada elemen dan ia mesti unik juga.

 
Kandungan
 

Sekiranya kita mempunyai ID dalam satu elemen, kita boleh menggunakannya pemilih id untuk mensasarkan elemen tersebut; pemilih id ditakrifkan dengan hash # parameter.

 #uniqueID / ** deklarasi ** / 

Sejak itu ID adalah unik, ia mempunyai tahap keutamaan yang kuat dari jenis pemilih. Jadi, apabila kita mengisytiharkan gaya dengan ID pemilih ia akan menimpa semua perisytiharan yang sama dari Kelas, Taipkan pemilih dan Pelayar lalai gaya.

Menanamkan Gaya

Kami telah melalui semua pemilih asas penting dan sekarang kita akan melihat bagaimana gaya-gaya tersebut tertanam dalam dokumen HTML.

Gaya Luar

Gaya luaran adalah gaya yang ditambah dalam fail berasingan, biasanya dalam a .css fail yang kemudiannya dikaitkan dengan dokumen HTML menggunakan tag untuk menggunakan gaya tersebut.

Dan semua gaya yang diisytiharkan dalam fail akan berkelakuan seperti apa yang telah kita sebutkan di dalam Pemilih seksyen di atas, iaitu ia akan menggantikan tulisan pelayar lalai gaya, dan menimpa kepada perisytiharan gaya lain bergantung pada tahap keutamaan pemilih.

Amalan ini adalah cara yang paling disyorkan untuk melampirkan gaya, terutamanya apabila anda mempunyai beribu-ribu baris kod CSS dengan banyak halaman untuk dilampirkan.

Dengan berbuat demikian, gaya juga akan mudah diurus, contohnya, anda boleh memisahkan fail CSS ke dalam beberapa fail bergantung kepada peranan khususnya, seperti typography.css untuk mengawal semua gaya yang berkaitan dengan Typography dan sebagainya.

Gaya Dalaman

Gaya dalaman adalah gaya yang tertanam secara langsung dalam dokumen HTML, secara amnya di dalam tag.

Tetapi amalan ini tidak disyorkan apabila anda akan mempunyai beratus-ratus garis gaya kerana halaman HTML anda akan menjadi terlalu lama dan gaya hanya akan menjejaskan tempat gaya tertanam. Apabila anda telah membiarkan sepuluh muka surat, anda perlu menyalin gaya tersebut dan menyematkannya dalam semua halaman dan apabila anda perlu mengubah gaya yang anda perlu mengubahnya kepada sepuluh halaman yang berbeza, yang jelas merupakan tugas yang membosankan.

Berdasarkan tahap keutamaannya, gaya dalaman lebih tinggi, jadi ia akan menimpa gaya luaran.

Gaya Dalam Talian

Gaya inline adalah gaya yang tertanam secara langsung dalam elemen HTML.

 
Ini adalah perenggan
 

Contoh di atas akan menambah 5px margin kepada elemen perenggan dan ia juga akan menulis ganti margin yang telah diisytiharkan untuk unsur itu dalam gaya dalaman dan luaran.

Tetapi jangan elakkan melakukan ini, kerana markup anda akan berantakan dengan semua deklarasi gaya; jika anda mempunyai sekumpulan gaya yang tertanam, ia bahkan akan menjadi mimpi ngeri untuk melihat dan mengekalkan semua html dan gaya anda.

Bacaan lanjut: Tiga cara untuk memasukkan CSS - W3CSchools.

Peraturan yang penting!

Terdapat beberapa keadaan apabila kita perlu menggunakan gaya tertentu untuk elemen tetapi gaya yang sama untuk unsur itu juga telah diisytiharkan di tempat lain dalam lembaran gaya atau dalam dokumen. Sebagai contoh:

Kami mempunyai tag jangkitan berikut dengan gaya tertanam

 Ini adalah pautan 

Dan kita juga mempunyai gaya yang berasingan untuk tag anchor itu dalam helaian gaya.

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

Contohnya, kita boleh menggunakannya !penting untuk memaksa penyemak imbas untuk menggunakan gaya dalam helaian gaya dan bukannya dalam elemen.

 a border: 1px solid # 333! important; warna latar belakang: # 555! penting;  

The !penting Peraturan akan menunjukkan bahawa gaya ini adalah yang paling banyak penting dan mesti diterapkan ke atas gaya lain walaupun ia secara langsung tertanam dalam elemen (Gaya Dalam Talian).

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

Kesimpulannya

Kami telah melalui keseluruhan perkara dalam artikel ini. Kita dapat melihat sekarang bahawa setiap pemilih dan cara kita membenamkan gaya mempunyai tahap prioriti yang berbeza dalam mekanisme penyemak imbas. Seperti yang telah saya nyatakan sebelum ini, subjek ini bertujuan untuk tahap pemula supaya mereka pastinya bukan sesuatu yang baru untuk pereka web yang berpengalaman.

Tetapi, saya fikir setiap pereka web secara amnya akan bersetuju bahawa kembali kepada asas-asas kadang-kadang perlu untuk mengkaji pengetahuan asas kita tentang subjek. Sebenarnya, kita sering terlepas beberapa perkara asas, kerana kita cenderung lebih kagum dengan perkara yang hebat (dan gila) seperti ini.

Terakhir, saya telah menyediakan fail demo dan sumber untuk anda untuk meneliti perbincangan kami dalam artikel ini selanjutnya.

• Demo
• Muat turun Sumber

Saya harap anda menikmati post ini dan jika anda mendapati beberapa ketidaktepatan di dalamnya, atau saya telah terlepas beberapa perkara penting, jangan teragak-agak untuk memaklumkan saya di bahagian komen di bawah.