Cara Menyasarkan Bahagian Halaman Web Menggunakan Pemilih CSS

Cascading Style Sheets (CSS) membolehkan anda mengubah rupa halaman web anda. Daripada fon dan warna kepada jarak dan susun atur keseluruhan, semua jenis alatan reka bentuk berada di hujung jari anda. Walaupun CSS adalah bahasa yang rumit secara keseluruhannya, hanya terdapat dua konsep asas yang perlu anda fahami untuk bermula.

Semuanya bermula dengan mengenal pasti bahagian mana halaman yang anda mahu gayakan.

CSS = Pemilih + Pengisytiharan

Fail CSS mengandungi satu siri peraturan yang menerangkan cara fail HTML harus diformatkan. Setiap peraturan terdiri daripada dua bahagian: apa yang hendak digayakan, dan cara menggayakannya. Bahagian pertama dikawal menggunakan satu siri istilah yang dikenali sebagai "pemilih."

Cara Menyasarkan Bahagian Halaman Web Menggunakan Pemilih CSS

Contoh dalam artikel ini termasuk pengisytiharan gaya, tetapi ia bukan tumpuan: pemilih itu sendiri.

Dari segi sejarah, terdapat tiga peringkat pemilih CSS (atau versi) dengan tahap sokongan penyemak imbas yang berbeza-beza. Pada tahun 2020, menurut Can I Use , ini semua tersedia kepada lebih 99 peratus pengguna di seluruh dunia.

Pemilih Tahap 1

Tahap 1 memperkenalkan empat jenis pemilih asas yang merangkumi sejumlah besar kes, malah hari ini.

Corak	Perlawanan
`E`	semua elemen E
`.c`	semua elemen dengan class="c"
`#myid`	elemen dengan id="myid"
`E F`	unsur F di dalam unsur E
Kelas pseudo
`E:link`	hiperpautan ke halaman yang belum pernah dilawati sebelum ini
`E:visited`	hiperpautan ke halaman yang telah dilawati
`E:active`	hiperpautan yang sedang dipilih
Unsur-unsur pseudo
`E::first-line`	baris pertama yang diformatkan bagi elemen E
`E::first-letter`	huruf terformat pertama bagi elemen E

Jenis Pemilih

Pemilih yang paling mudah ialah "pemilih jenis". Ia menyasarkan semua contoh elemen, seperti perenggan atau teks tebal:

p { margin-bottom: 0; } b { font-family: sans-serif; }

Pemilih Kelas

Atribut kelas membenarkan semantik lanjut ditambahkan pada elemen HTML, seperti jenis perenggan tertentu. Elemen tersebut boleh dipilih dalam CSS seperti berikut:

.intro { font-weight: bold; }

Pemilih ini akan sepadan dengan:

…

Tetapi ambil perhatian bahawa ia juga akan sepadan:

…

Jika anda hanya mahu ia digunakan pada perenggan intro, anda boleh menggabungkan pemilih jenis dan pemilih kelas:

p.intro { font-weight: bold; }

Pemilih ID

Atribut id HTML hendaklah unik dalam dokumen, contohnya jika anda mempunyai:

…

Itu sepatutnya satu-satunya elemen dengan id "kandungan". Pemilih ID membolehkan anda menyasarkan elemen khusus tersebut dalam dokumen:

#contents { color: #333; }

Pemilih Keturunan

Tegasnya, "penggabung" kerana pemilih ini adalah mengenai ruang di antara dua yang lain. HTML adalah hierarki, seperti yang dijelaskan dalam gambaran keseluruhan kami tentang DOM . Pemilih turunan membenarkan elemen dikenal pasti mengikut konteksnya di dalam elemen lain:

table b { font-weight: normal; }

Kelas dan Unsur Pseudo

Pemilih pseudo menyasarkan kelas atau elemen yang tidak wujud secara eksplisit tetapi tetap tersedia. Anggap mereka sebagai bonus kandungan istimewa:

p::first-line { text-transform: uppercase; }

Senarai Pemilih

Gunakan koma untuk menggabungkan pemilih ke dalam senarai jika anda ingin menggunakan set peraturan yang sama pada setiap satu. Daripada:

th { padding: 1em; } td { padding: 1em; }

Anda boleh menulis:

th, td { padding: 1em; }

Kekhususan

Helaian gaya ialah satu siri peraturan yang menggunakan pemilih untuk memadankan elemen, tetapi apakah yang berlaku apabila lebih daripada satu peraturan sepadan dengan elemen tertentu? Tingkah laku yang terhasil dikawal oleh "kekhususan" yang mentakrifkan peraturan yang digunakan dalam kes seperti:

p.intro { color: black; } p { color: gray; }

Dalam kes sedemikian, peraturan yang diutamakan ditakrifkan oleh kekhususannya, seperti berikut:

Pemilih ID (`#contents`) adalah yang paling khusus.
Pemilih kelas (`.author`) adalah kurang khusus.
Pemilih jenis (`p`) adalah yang paling kurang spesifik.

Semasa mengira kekhususan, setiap tahap hanya dipertimbangkan jika dua pemilih mempunyai skor yang sama pada tahap yang lebih tinggi, jadi "#contents" adalah lebih khusus daripada "article.news p.author.special" kerana yang pertama "menang" pada pemilih ID.

Pemilih Tahap 2

Semakan seterusnya bagi pemilih CSS memperkenalkan pemilih atribut, dikembangkan pada kelas pseudo & elemen pseudo, dan menambah dua penggabung baharu.

Corak	Perlawanan
`*`	sebarang unsur
`E > F`	anak unsur F bagi unsur E
`E + F`	unsur F serta-merta didahului oleh unsur E
Pemilih atribut
`E[foo]`	elemen E dengan atribut "foo".
`E[foo="bar"]`	elemen E yang atribut "foo" betul-betul "bar"
`E[foo~="bar"]`	elemen E yang atribut "foo" ialah senarai nilai yang dipisahkan ruang putih, salah satunya ialah "bar"
`E[foo\|="en"]`	elemen E yang atribut "foo" mempunyai senarai nilai yang dipisahkan sempang bermula dengan "en"
Kelas pseudo
`E:first-child`	unsur E, anak pertama ibu bapanya
`E:lang(fr)`	unsur jenis E dalam bahasa "fr"
Unsur-unsur pseudo
`E::before`	kandungan yang dijana sebelum kandungan unsur E
`E::after`	kandungan yang dijana selepas kandungan unsur E

Pemilih Universal

“*” sepadan dengan mana-mana elemen. Ia tidak selalunya berguna, tetapi jika anda ingin menetapkan semula mana-mana margin lalai, sebagai contoh, anda boleh berbuat demikian:

* { margin: 0; }

Pemilih Atribut

Pemilih atribut membenarkan gaya disasarkan dengan sangat khusus, ditapis mengikut atribut elemen:

a[title] { text-decoration: underline dotted; }

Child Combinator: Satu Elemen Serta-merta Di Dalam Yang Lain

Sama seperti penggabung keturunan, tetapi yang ini hanya sepadan dengan anak terdekat, bukan keturunan di bawah pokok. Sebagai contoh, "ul > li" hanya akan sepadan dengan teks "Bahagian 1" di sini dan bukan "Bahagian 1.1":

Section 1
- Section 1.1
- Section 1.2

Kombinator Adik Beradik Bersebelahan: Adik Beradik Seterusnya

h1 + p { font-weight: bold; }

Selalunya berguna untuk mengawal margin, atau perenggan pengenalan tanpa kelas tertentu, pemilih ini memadankan satu elemen hanya jika ia mengikuti yang lain serta-merta. Dalam contoh, hanya perenggan pertama di sini akan dipadankan, bukan perenggan kedua:

Contents

some extra text

Introductory paragraph

Following paragraph

Ambil perhatian bahawa pemilih ini hanya mempertimbangkan elemen—bukan teks—apabila memutuskan apakah adik-beradik seterusnya.

pusaka

Sesetengah sifat CSS mewarisi nilainya daripada unsur nenek moyang. Dalam amalan, ini bermakna—contohnya—menetapkan muka fon bagi elemen "badan" bermakna setiap perenggan, jadual, dsb. juga menggunakan muka fon yang sama.

Sudah tentu, ini adalah apa yang anda jangkakan, tetapi pertimbangkan harta yang tidak mewarisi: "margin", sebagai contoh. Anda tidak mahu setiap perenggan atau sedikit teks tebal mempunyai margin yang sama dengan keseluruhan dokumen.

Berkaitan: Contoh Kod CSS Mudah Anda Boleh Belajar dalam 10 Minit

Peraturan praktikal yang baik adalah untuk menyasarkan elemen secara umum seperti yang masuk akal—jangan sasarkan setiap elemen individu apabila pemilih "badan" mudah akan melakukannya.

Pemilih Tahap 3

Banyak lagi kelas pseudo telah ditambahkan dalam tahap ini, bersama beberapa pemilih atribut dan penggabung baharu.

Corak	Perlawanan
`E ~ F`	unsur F didahului oleh unsur E
Pemilih atribut
`E[foo^="bar"]`	elemen E yang atribut "foo"nya bermula dengan rentetan "bar"
`E[foo$="bar"]`	elemen E yang atribut "foo" berakhir dengan rentetan "bar"
`E[foo*="bar"]`	elemen E yang atribut "foo" mengandungi subrentetan "bar"
Kelas pseudo
`E:root`	elemen E, punca dokumen
`E:nth-child(n)`	unsur E, anak ke-n induknya
`E:nth-last-child(n)`	unsur E, anak ke-n induknya, dikira dari yang terakhir
`E:nth-of-type(n)`	unsur E, adik beradik ke-n dari jenisnya
`E:nth-last-of-type(n)`	unsur E, adik beradik ke-n dari jenisnya, dikira dari yang terakhir
`E:last-child`	unsur E, anak terakhir ibu bapanya
`E:first-of-type`	unsur E, adik beradik pertama dari jenisnya
`E:last-of-type`	unsur E, adik beradik terakhir dari jenisnya
`E:only-child`	unsur E, anak tunggal kepada induknya
`E:only-of-type`	unsur E, hanya adik beradik jenisnya
`E:empty`	elemen E yang tidak mempunyai anak (termasuk nod teks)
`E:target`	elemen E menjadi sasaran URI yang merujuk
`E:enabled`	elemen antara muka pengguna E yang didayakan
`E:disabled`	elemen antara muka pengguna E yang dilumpuhkan
`E:checked`	elemen antara muka pengguna E yang ditandakan
`E:not(s)`	elemen E yang tidak sepadan dengan pemilih mudah

Pemilih Atribut

Anda boleh memilih elemen dengan atribut yang bermula dengan nilai tertentu: a[href^="https:"], berakhir dengan nilai tertentu: img[src$=".gif"], atau mengandungi nilai: a[*="value"].

Kelas Pseudo

Kelas pseudo tambahan termasuk “:last-child”, “:empty” (untuk memadankan elemen tanpa kandungan) dan “:checked” yang sepadan dengan elemen seperti input kotak semak, tetapi hanya apabila ia ditanda.

Penggabung Adik Beradik Am: Adik Beradik Mengikuti

Sama seperti Combinator Adik Beradik Bersebelahan dari Tahap 2, ini sepadan dengan mana-mana adik beradik yang datang selepas yang lain, bukan hanya yang seterusnya:

h1 ~ p { font-size: 110%; }

Pemilih CSS dan Cara Menggunakannya

Kini anda tahu hampir semua perkara yang perlu diketahui tentang cara memilih sebahagian daripada halaman web menggunakan CSS. Anda kini bersedia untuk menggayakan halaman anda dengan pelbagai jenis sifat CSS yang merangkumi segala-galanya daripada warna hingga reka letak.

Kredit Imej: Pankaj Patel/ Unsplash

Tags: #pengaturcaraan #reka bentuk web #css

Cara Mengira Nilai nCr

Gabungan ialah konsep matematik. Ia merujuk kepada susunan beberapa objek yang susunannya tidak relevan. Formula asas menerangkan bilangan gabungan yang sah.

Cara Menulis & Menyusun Kod Soliditi Pertama Anda

Solidity ialah bahasa pengaturcaraan yang digunakan oleh kontrak pintar pada blockchain Ethereum. Ia adalah bahasa pengaturcaraan berorientasikan objek yang ditaip secara statik.

SQL vs. NoSQL: Apakah Pangkalan Data Terbaik untuk Projek Anda Seterusnya?

Cara Mencari Kiub dan Petak Sempurna N-Digit Menggunakan Python, C++ dan JavaScript

Ramai pengaturcara suka menyelesaikan masalah matematik rumit menggunakan kod. Ia membantu menajamkan minda dan meningkatkan kemahiran menyelesaikan masalah. Dalam artikel ini, anda akan belajar cara mencari petak dan kiub sempurna n-digit terkecil dan terbesar menggunakan Python, C++ dan JavaScript. Setiap contoh juga mengandungi output sampel untuk beberapa nilai yang berbeza.

Cara Menggunakan Python sebagai Kalkulator Baris Perintah

Walaupun anda boleh menggunakan kalkulator grafik pada komputer anda, penterjemah bahasa pengaturcaraan Python boleh berfungsi sebagai kalkulator meja. Ia adalah jenaka yang popular dalam komuniti Python yang disebut dalam tutorial rasmi. Inilah cara anda boleh menggunakan Python sebagai kalkulator.

Bermula Dengan Buku Nota Jupyter: Satu Tutorial

Jika anda seorang saintis data yang bercita-cita tinggi yang bekerja dengan Python atau R, anda perlu tahu cara menggunakan Jupyter Notebook. Ia adalah IDE sumber terbuka dan berasaskan pelayan untuk memanipulasi data, berkongsi kod langsung, serta mengurus aliran kerja sains data.

Pengekodan Bukan untuk Semua Orang: 9 Pekerjaan Teknologi yang Anda Boleh Dapatkan Tanpanya

Teknologi, tidak dinafikan, adalah industri masa depan. Jika anda salah seorang daripada berjuta-juta dewasa muda yang akan terjun ke peringkat pertama kerjaya anda, anda mungkin tertanya-tanya apa yang perlu dilakukan jika anda tidak suka pengekodan.

7 Perintah Penting untuk Bermula Dengan Python untuk Pemula

Mempelajari bahasa pengaturcaraan baharu seperti Python menjadi mudah jika anda mempunyai peta jalan yang komprehensif yang memperincikan konsep yang perlu dipelajari sebagai pemula dan cara untuk maju lebih jauh untuk mencapai pencapaian seterusnya. Malah pengaturcara perantaraan harus kerap meneliti asas mereka untuk membina asas yang kukuh untuk diri mereka sendiri.

Aplikasi Web ASP.NET Pertama Anda: Cara Bermula

ASP.NET ialah rangka kerja merentas platform percuma Microsoft untuk membina apl dan perkhidmatan web. Platform ASP.NET ialah sambungan kepada .NET, platform pembangun alat, bahasa pengaturcaraan dan perpustakaan yang digunakan untuk membina aplikasi yang berbeza.

9 Alternatif Docker Terbaik untuk Pengurusan Kontena

Bekas sangat bermanfaat untuk pembangunan perisian, penggunaan dan pengurusan dalam persekitaran maya. Docker berguna dalam proses kontena, tetapi ia bukan satu-satunya platform yang ada. Jika anda sedang mencari beberapa alternatif kepada Docker, jangan cari lagi. Senarai ini mempamerkan beberapa alternatif Docker yang kaya dengan ciri dan cekap untuk digunakan dalam projek anda yang seterusnya.

Adakah ARCore atau ARKit Lebih Baik Untuk Mencipta Pengalaman Realiti Diperkukuh?

Beberapa aplikasi dan pengalaman mudah alih yang paling banyak diperkatakan hari ini menggunakan teknologi realiti tambahan. Walaupun sesetengah pengalaman ini boleh berfungsi pada hampir mana-mana peranti mudah alih, yang lain hanya berfungsi pada model yang lebih baharu dan lebih mahal. Membangunkan dan menggunakan pengalaman yang lebih mantap ini memerlukan ARCore dan ARKit.

Cara Membuat Cawangan Baharu dalam Git

Cawangan adalah teras kepada konsep kawalan versi dalam pengaturcaraan, dan Git khususnya. Artikel permulaan ini memberitahu anda apa itu cawangan dan cara menciptanya menggunakan beberapa alatan yang berbeza.

Cara Menggunakan Python if Statement

Pernyataan if adalah penggerak pengaturcaraan logik. Akibatnya, pemahaman yang lebih baik tentang Pythons adalah tambahan penting kepada kemahiran pengaturcaraan Python anda.

5 Lencana Teratas Yang Akan Mengecas Repositori GitHub Anda

Lencana GitHub boleh meningkatkan kebolehbacaan repositori dengan menyediakan pengguna dengan cara yang pantas untuk menangkap metrik repositori. Lencana boleh dibenamkan dalam README.md anda untuk menjelaskan kepentingan dan keperluan projek anda kepada pembangun lain. Akibatnya, pembaca mendapat idea yang sangat pantas tentang repositori dengan menyemak lencana yang dilampirkan.

Bermula Dengan Redis dan PHP untuk Penyimpanan Data Pantas

Enjin storan Redis yang popular ialah alat yang sangat baik dan mesti ada dalam mana-mana senjata pembangun perisian. Enjin storan dalam memori membolehkan penyimpanan dan mendapatkan semula data yang sangat pantas, sehingga 32 juta pertanyaan sesaat yang mengagumkan, menjadikannya pelengkap utama kepada mana-mana enjin pangkalan data utama.

Apakah WYSIWYG?

Sebahagian daripada keajaiban pembangunan perisian berlaku apabila baris kod berubah menjadi lebih daripada jumlah bahagiannya. Anda akan mendapati anda memerlukan sedikit visualisasi kreatif apabila cuba membina secara abstrak dengan cara ini. Ini boleh berlaku untuk pemprosesan perkataan atau reka bentuk web, sama seperti yang boleh dilakukan untuk pengaturcaraan.

Cara Memasang .NET Framework Versi 3.5 pada Windows 10

Sebagai pengguna Windows, anda mungkin sekurang-kurangnya sekali menjumpai perkataan .NET Framework. Ia merupakan rangka kerja perisian yang dibangunkan oleh Microsoft yang membolehkan anda membina dan menjalankan program C#, C++, F# dan Visual Basic. Versi .NET terkini ialah 4.8, tetapi komputer anda mungkin memerlukan versi .NET yang lebih lama (seperti .NET 3.5) untuk menjalankan beberapa apl.

WordPress vs. Wix: Perbezaan Utama

Anda sering menghadapi dilema klasik semasa membina tapak web untuk diri sendiri atau perniagaan anda. WordPress vs. Wix—yang mana satu untuk dipilih dan apakah pilihan terbaik untuk anda?

10 Distro Linux Terbaik untuk Pembangun

Walaupun Linux mungkin bukan sistem pengendalian yang digemari untuk pengguna biasa, ia adalah pilihan utama untuk kebanyakan pembangun dan pengaturcara. Linux ialah OS yang lebih praktikal yang direka secara eksplisit dengan mengambil kira pengaturcaraan dan pembangun.