Apakah Helaian Gaya Cascading dan Apa CSS Digunakan?

CSS tergolong dalam segitiga teknologi web teras bersama HTML dan JavaScript. Dengan perancangan yang teliti, CSS menyumbang kepada pemisahan masalah. Sumber bebas mengawal struktur kandungan, persembahannya dan tingkah lakunya.

Helaian Gaya memainkan peranan penting dalam kebolehaksesan, skalabiliti, dan juga prestasi web. Sebagai pengarang kandungan atau pereka web, mereka memberi anda kawalan tentang bagaimana peranti membuat kandungan. Dari susun atur hingga saiz dan warna fon, CSS mengubah kandungan menjadi halaman yang cantik.

Seperti apa CSS?

CSS adalah bahasa yang besar - terdapat banyak perkara yang berbeza untuk digayakan! Tetapi sintaksnya mudah, dengan hanya beberapa peraturan yang perlu dipelajari.

Elemen HTML mempunyai pelbagai sifat yang boleh digayakan oleh CSS. The warna sifat menetapkan warna latar depan (mis. teks). Saiz fon bergantung pada Saiz huruf harta benda.

Setiap harta boleh ditetapkan ke nilai yang disokong. Pemberian nilai kepada harta tanah adalah 'deklarasi.' Secara amnya, mereka kelihatan seperti ini:

property: value

Sebagai contoh:

kaedah terbaik untuk berkongsi gambar dalam talian secara tertutup

color: red

Nilai untuk sifat yang berbeza boleh kelihatan sangat berbeza, bahkan nilai untuk harta yang sama. Sebagai contoh, berikut adalah dua cara menulis deklarasi sebelumnya:

color: #ff0000  
color: rgb(255, 0, 0)

Bagaimana Helaian HTML dan Gaya Berganding

Anda boleh menggabungkan HTML dan CSS dengan beberapa cara yang berbeza, masing-masing dengan kelebihannya.

Gaya Penulisan Sebaris

Kaedah paling mudah adalah melampirkan deklarasi gaya secara langsung ke elemen dalam fail HTML. Anda boleh melakukan ini dengan menggunakan gaya atribut seperti itu:

  
 Most of this text is red …
  
 … but this isn’t!

Walaupun elemen gaya sebaris seperti ini boleh digunakan, ia mempunyai beberapa kelemahan. Sebagai permulaan, ini menyulitkan HTML, menjadikannya sukar dibaca sekilas. Juga canggung untuk dikekalkan: bayangkan dokumen panjang di mana kita ingin menetapkan warna setiap perenggan. Ini adalah CSS, tetapi bukan 'Helaian Gaya.'

Menanamkan Gaya di Kepala

Anda boleh mula melihat seperti apa Helaian Gaya dengan mekanisme kedua, pembenihan . Dengan menggunakan pendekatan ini, kami mengumpulkan semua deklarasi gaya bersama di dalam a gaya unsur dalam kepala dokumen kami. Ia akan kelihatan seperti ini:

  
  
  
  
 /* style instructions go here */  
  
  
  
 ...

Arahan gaya kami memerlukan sedikit lebih terperinci daripada sebelumnya. Oleh kerana kami memindahkannya ke kepala, setiap aturan tidak lagi dikaitkan dengan elemen. Kami mungkin telah menyatakan warna: merah , tetapi apa yang harus mempunyai warna itu?

Di sinilah pemilih CSS masuk. Mereka membolehkan kita menargetkan bahagian halaman tertentu dan menentukan gaya mereka di satu tempat, menggunakan sintaks ini:

bagaimana saya mengosongkan memori di komputer saya

selector {  
 declaration1;  
 declaration2;  
 /* etc. */  
}

Sebagai contoh, untuk menggayakan teks perenggan menjadi biru, kita dapat menentukan yang berikut:

p {  
 color: blue;  
}

Dalam contoh ini, pemilih adalah sederhana hlm , yang sesuai dengan semua elemen perenggan dalam dokumen kami. Ia akan mewarnai semua teks berwarna biru, selagi ia masuk

Menghubungkan Lembaran Gaya Luar

Kaedah terakhir untuk membuat liputan adalah menghubungkan. Sejauh ini, ini adalah pendekatan yang paling berguna dan paling sering anda pilih. Daripada menanamkan peraturan CSS di gaya elemen secara langsung dalam dokumen anda, anda boleh memindahkannya ke fail yang berasingan.

Tampal kod ini di dalam tag fail HTML anda untuk memautkan helaian gaya luaran anda.

Kekuatan CSS

Dengan kaedah terpaut, kami memanfaatkan kekuatan utama CSS: pemisahan kebimbangan. Semua maklumat semantik — maksud kandungannya — terdapat dalam dokumen HTML. Gaya - seperti apa itu - ada dalam fail terpisah, helaian gaya.

Berikut adalah beberapa faedah pemisahan ini:

Anda boleh menukar helaian gaya hanya dengan mengubah rujukan fail. Ini bahkan boleh berlaku secara dinamik. Dalam satu langkah, anda boleh mengubah keseluruhan rupa dan nuansa halaman.

Banyak halaman boleh berkongsi helaian gaya yang sama seperti yang diperlukan. Dengan menukar satu fail tunggal, anda boleh mengemas kini rupa dan rasa keseluruhan laman web.

Memisahkan halaman menjadi 'kandungan' dan 'gaya' mempunyai kelebihan teknikal. Proksi dan penyemak imbas boleh menyimpan fail individu secara berasingan. Ini bermaksud laman web dapat menghantar maklumat gaya sekali, daripada memasukkannya ke dalam setiap halaman.

Semasa berkolaborasi, pasukan yang berbeza dapat bekerja dengan kuat, membuat dan menyunting fail yang terpisah tanpa saling mempengaruhi.

Menjelaskan Cascade

Anda telah belajar banyak mengenai gaya dan kepingan gaya, tetapi bagaimana dengan bahagian CSS yang merangkumi?

Kaskade inilah yang menentukan gaya mana yang akan digunakan apabila terdapat pelbagai helaian gaya. Anda telah melihat bagaimana pengarang dapat menentukan gaya untuk kandungannya. Tetapi satu lagi ciri CSS adalah bahawa ia memberi pembaca dan pengeluar penyemak imbas juga mengatakan perkara itu.

Anda mungkin sudah tertanya-tanya tentang gaya lalai. Sebagai contoh, bagaimana cara H1 elemen kelihatan besar dan berani, walaupun tanpa helaian gaya pengarang? Ini berkat sekumpulan peraturan khas yang membentuk helaian gaya ejen pengguna. Peraturan ini pada mulanya diterapkan oleh penyemak imbas web anda ke setiap halaman yang anda kunjungi.

Kaskade menentukan bahawa helaian gaya pengarang berlaku selepas gaya ejen pengguna. Sekiranya penyemak imbas kami mengatakan tajuknya tebal tetapi pengarang halaman menyatakan tajuk pada halaman ini ringan, maka tajuk itu akan menjadi ringan.

Terdapat sumber helaian gaya lain yang menyerahkan sedikit kawalan kepada pembaca. Mana-mana pengguna web boleh, secara teori, mengekalkan lembaran gaya pengguna dengan peraturan khusus. Ini duduk di tengah: peraturan pengguna akan mengatasi tetapan penyemak imbas lalai, tetapi mereka sendiri akan diganti oleh gaya pengarang. Malangnya, sokongan untuk helaian gaya pengguna tidak pernah tersebar luas.

Menyasarkan Media yang Berbeza

Anda boleh menggunakan Helaian Gaya dalam konteks yang berbeza, di luar layar. The separuh atribut dari pautan elemen menentukan jenis media yang digunakan oleh helaian gaya. Sebagai contoh, anda boleh menentukan a helaian gaya untuk dicetak menggunakan markup seperti berikut:
Anda boleh mengumpulkan gaya umum dalam satu helaian gaya global dan gaya khusus media dalam fail yang berasingan. Bahkan ada jenis media untuk memenuhi persembahan aural atau braille kandungan anda. CSS adalah alat penting dalam meningkatkan kebolehaksesan.

Berkaitan: Cara Melayari Web Sekiranya Anda Buta atau Gangguan Penglihatan
bagaimana memulihkan mesej yang dipadam dari facebook

Laman web seperti Wikipedia menggunakan CSS untuk mengawal gaya cetakannya, menyembunyikan elemen yang tidak diingini, dan mempermudah susun aturnya.

CSS Menjadikan HTML Nampak Baik

Lembaran Gaya Cascading banyak meliputi: kaskade, pewarisan, pemilih, sumber, media, dan lain-lain. Tetapi kekuatan mereka membolehkan web moden. Ini adalah media yang menyediakan kemudahan penggunaan semula, fleksibiliti, dan kebolehcapaian yang terpasang di dalamnya.

Untuk melihat kekuatan penuh CSS dan jumlah yang ditawarkannya, periksa cheat sheet kami yang merangkumi semua sifat penting CSS3.
Berkongsi Berkongsi Tweet E-mel Lembaran Menipu Properti CSS3 Yang Penting
Kuasai sintaks CSS penting dengan helaian cheat sifat CSS3 kami.
Baca Seterusnya Topik-topik yang berkaitan

Pengaturcaraan

Pembangunan Web

CSS

Mengenai Pengarang Bobby Jack(58 Artikel Diterbitkan)
Bobby adalah peminat teknologi yang bekerja sebagai pembangun perisian selama hampir dua dekad. Dia meminati permainan, bekerja sebagai Editor Ulasan di Switch Player Magazine, dan terlibat dalam semua aspek penerbitan dalam talian & pembangunan web.
Lagi Dari Bobby Jack
Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
Klik di sini untuk melanggan