Apakah CSS dan Dimana Ia Digunakan?

Apakah yang dimaksudkan dengan Lembaran Gaya Cascading?

Laman web terdiri daripada beberapa keping individu, termasuk imej, teks, dan pelbagai dokumen. Dokumen-dokumen ini bukan sahaja termasuk orang-orang yang boleh dihubungkan dari pelbagai halaman, seperti fail PDF, tetapi juga dokumen yang digunakan untuk membina halaman itu sendiri, seperti dokumen HTML untuk menentukan struktur halaman dan CSS (Cascading Style Sheet) dokumen untuk menentukan rupa halaman. Artikel ini akan menyelidiki CSS, meliputi apa yang ada dan di mana ia digunakan di laman web hari ini.

Pelajaran Sejarah CSS

CSS mula dibangunkan pada tahun 1997 sebagai cara untuk pemaju web untuk menentukan penampilan visual halaman web yang mereka buat. Ia bertujuan untuk membolehkan para profesional web memisahkan kandungan dan struktur kod laman web dari reka bentuk visual, sesuatu yang tidak dapat dilakukan sebelum ini.

Pemisahan struktur dan gaya membolehkan HTML untuk melaksanakan lebih banyak fungsi yang pada asalnya berdasarkan - markup kandungan, tanpa perlu risau tentang reka bentuk dan tata letak laman itu sendiri, sesuatu yang biasanya dikenali sebagai "rupa dan nuansa" halaman.

CSS tidak mendapat populariti sehingga sekitar 2000, apabila pelayar web mula menggunakan lebih daripada font asas dan aspek warna bahasa markup ini. Hari ini, semua penyemak imbas moden menyokong semua CSS Level 1, kebanyakan CSS Level 2, dan bahkan kebanyakan aspek CSS Level 3. Oleh kerana CSS terus berubah dan gaya baru diperkenalkan, pelayar web telah mula melaksanakan modul yang membawa sokongan CSS baru ke dalam pelayar tersebut dan memberikan pereka web alat-alat gaya baru yang kuat untuk berfungsi.

Dalam tahun-tahun yang lalu, ada pereka web terpilih yang enggan menggunakan CSS untuk reka bentuk dan pembangunan laman web, tetapi amalan itu hanya keluar dari industri hari ini. CSS kini menjadi standard yang banyak digunakan dalam reka bentuk web dan anda akan ditekan keras untuk mencari sesiapa yang bekerja di industri hari ini yang tidak mempunyai sekurang-kurangnya pemahaman asas mengenai bahasa ini.

CSS adalah Singkatan

Sebagaimana disebutkan, istilah CSS bermaksud "Lembaran Gaya Cascading." Mari pecahkan frasa ini sedikit demi sedikit untuk lebih jelaskan apa yang dilakukan oleh dokumen-dokumen ini.

Perkataan "helaian gaya" merujuk kepada dokumen itu sendiri (seperti HTML, fail CSS adalah benar-benar hanya dokumen teks yang boleh diedit dengan pelbagai program). Helaian gaya telah digunakan untuk reka bentuk dokumen selama bertahun-tahun. Mereka adalah spesifikasi teknikal untuk susun atur, sama ada cetakan atau dalam talian. Pereka cetak telah lama menggunakan helaian gaya untuk memastikan bahawa reka bentuk mereka dicetak dengan betul mengikut spesifikasi mereka. Satu helaian gaya untuk halaman web berfungsi dengan tujuan yang sama, tetapi dengan fungsi tambahan juga memberitahu penyemak imbas web bagaimana membuat dokumen yang dilihat. Hari ini, helaian gaya CSS juga boleh menggunakan pertanyaan media untuk mengubah cara halaman mencari peranti dan saiz skrin yang berbeza . Ini sangat penting kerana ia membenarkan dokumen HTML tunggal diberikan secara berbeza mengikut skrin yang digunakan untuk mengaksesnya.

Cascade adalah bahagian yang sangat istimewa dari istilah "lembaran gaya cascading". Lembaran gaya web dimaksudkan untuk melaraskan satu siri gaya dalam lembaran itu, seperti sungai di atas air terjun. Air di sungai menyentuh semua batu di air terjun, tetapi hanya yang di bahagian bawah mempengaruhi tepat di mana air akan mengalir. Begitu juga dengan kaskade dalam helaian laman web.

Setiap halaman web dipengaruhi oleh sekurang-kurangnya satu helaian gaya, walaupun pereka web tidak menggunakan gaya apa pun. Helaian gaya ini adalah helaian ejen pengguna - juga dikenali sebagai gaya lalai yang akan digunakan oleh pelayar web untuk memaparkan halaman jika tiada arahan lain disediakan. Sebagai contoh, hiperpautan secara lalai digelar biru dan mereka digariskan. Gaya tersebut berasal dari helaian gaya lalai pelayar web. Jika pereka laman web memberikan arahan lain, bagaimanapun, penyemak imbas perlu mengetahui arahan yang diutamakan. Semua pelayar mempunyai gaya lalai mereka sendiri, tetapi banyak yang lalai (seperti pautan teks yang digariskan biru) dikongsi merentas semua atau kebanyakan pelayar utama dan versi.

Contoh lain bagi lalai penyemak imbas, dalam pelayar web saya, font lalai adalah " Times New Roman " yang dipaparkan pada saiz 16. Walau bagaimanapun, tidak ada satu pun halaman yang saya lawati paparan dalam font dan saiz font itu. Ini adalah kerana cascade mentakrifkan helaian gaya kedua, yang ditetapkan oleh pereka itu sendiri, untuk mentakrifkan semula saiz fon dan keluarga, mengatasi lalai penyemak imbas web saya. Sebarang helaian gaya yang anda buat untuk halaman web akan mempunyai lebih spesifik daripada gaya lalai penyemak imbas, jadi kegagalan ini hanya akan digunakan jika helaian gaya anda tidak menggantikannya. Jika anda ingin pautan menjadi biru dan digariskan, anda tidak perlu melakukan apa-apa kerana ia adalah lalai, tetapi jika fail CSS laman web anda mengatakan bahawa pautan harus berwarna hijau, warna itu akan menimpa biru lalai. Garis bawah akan kekal dalam contoh ini, kerana anda tidak menyatakan sebaliknya.

Di manakah CSS Digunakan?

CSS juga boleh digunakan untuk menentukan bagaimana halaman web harus dilihat apabila dilihat di media lain daripada pelayar web. Contohnya, anda boleh membuat helaian cetak yang akan menentukan cara halaman web hendak mencetak. Oleh kerana item laman web seperti butang navigasi atau borang web tidak mempunyai tujuan pada halaman yang dicetak, Lembaran Gaya Cetak boleh digunakan untuk "mematikan" kawasan tersebut apabila halaman dicetak. Walaupun tidak benar-benar amalan biasa di banyak laman web, pilihan untuk membuat helaian gaya cetak adalah kuat dan menarik (dalam pengalaman saya - kebanyakan profesional web tidak melakukan ini semata-mata kerana skop bajet tapak tidak memanggil kerja tambahan ini untuk dilakukan ).

Mengapa CSS Penting?

CSS adalah salah satu alat yang paling berkuasa seorang pereka web boleh belajar kerana dengan itu anda dapat mempengaruhi keseluruhan penampilan visual sebuah laman web. Lembaran gaya yang ditulis dengan baik boleh dikemas kini dengan cepat dan membenarkan laman web mengubah apa yang diprioritaskan secara visual di skrin, yang seterusnya menunjukkan nilai dan tumpuan kepada pelawat, tanpa sebarang perubahan yang perlu dibuat pada markup HTML yang mendasarinya.

Cabaran utama CSS ialah terdapat sedikit untuk belajar - dan dengan penyemak imbas berubah setiap hari, apa yang berfungsi dengan baik pada hari ini mungkin tidak masuk akal esok apabila gaya baru menjadi disokong dan yang lain dijatuhkan atau digugurkan untuk satu sebab atau yang lain .

Oleh kerana CSS boleh menyusun dan menggabungkan, dan mempertimbangkan bagaimana penyemak imbas yang berbeza dapat mentafsirkan dan melaksanakan arahan secara berbeza, CSS boleh menjadi lebih sukar daripada HTML biasa untuk menguasai. CSS juga berubah dalam pelayar dengan cara yang benar-benar tidak HTML. Sebaik sahaja anda mula menggunakan CSS, bagaimanapun, anda akan melihat bahawa memanfaatkan kekuatan helaian gaya akan memberi anda kelenturan yang sukar dipercayai bagaimana anda membuat halaman web dan menentukan rupa dan rasa mereka. Di sepanjang jalan, anda akan mengumpulkan satu "beg silap" gaya dan pendekatan yang telah bekerja untuk anda pada masa lalu dan yang anda boleh beralih lagi ketika anda membina laman web baru pada masa akan datang.

Artikel asal oleh Jennifer Krynin. Disunting oleh Jeremy Girard pada 7/5/17,