Untuk apa set peraturan CSS digunakan?
CSS bermaksud Cascading Style Sheets. Ia digunakan untuk menggayakan elemen HTML. HTML digunakan untuk mencipta atau menambah kandungan pada halaman web. Selepas itu, pembangun menggunakan CSS untuk memaparkan kandungan HTML dalam gaya tertentu untuk menjadikannya kelihatan hebat.
Set peraturan CSS terutamanya mengandungi dua bahagian. Satu ialah pemilih CSS dan satu lagi ialah blok pengisytiharan.
Pemilih CSS digunakan untuk memilih elemen HTML, blok pengisytiharan mengandungi sifat CSS dalam format nilai kunci untuk digunakan pada elemen HTML.
Tatabahasa
Pengguna boleh menggunakan set peraturan CSS untuk menggayakan elemen HTML mengikut sintaks berikut.
selector {
/* declaration block */
}
Dalam sintaks di atas, 'pemilih' boleh menjadi nama kelas, id, dll. bagi elemen HTML, yang digunakan untuk memilih elemen HTML. Blok pengisytiharan mengandungi berbilang sifat CSS dan nilainya untuk digunakan pada elemen HTML.
Contoh 1 (pemilih nama kelas CSS)
Dalam contoh di bawah, kami menggunakan nama kelas sebagai pemilih CSS apabila mentakrifkan set peraturan CSS. Kod di bawah mempunyai tiga elemen div dengan nama kelas yang berbeza. Kami memilih setiap elemen div mengikut nama kelasnya dan menggunakan gaya CSS yang berbeza, yang pengguna boleh perhatikan dalam output.
<html>
<head>
<style>
.one {
background-color: red;
color: white;
padding: 10px;
margin: 10px;
border: 1px solid green;
}
.two {
background-color: green;
color: white;
padding: 10px;
margin: 10px;
border: 3px solid yellow;
}
.three {
background-color: blue;
color: white;
padding: 10px;
margin: 10px;
border: 2px solid pink;
}
</style>
</head>
<body>
<h2 id="Using-the-i-class-selector-i-in-CSS-ruleset"> Using the <i> class selector </i> in CSS ruleset </h2>
<div class = "one"> One </div>
<div class = "two"> Two </div>
<div class = "three"> Three </div>
</body>
</html>
Contoh 2 (Pemilih ID CSS)
Dalam contoh di bawah, kami menggunakan id elemen HTML sebagai pemilih CSS apabila mentakrifkan set peraturan CSS. Dalam HTML, dua elemen tidak boleh mengandungi id yang sama.
Di sini, kami mempunyai elemen div dengan id "kad" yang mengandungi dua elemen div lain dengan id bersamaan dengan "kandungan1" dan "kandungan2". Kami menggayakan semua elemen HTML dengan mengaksesnya dengan ID mereka, yang pengguna boleh perhatikan dalam output.
<html>
<head>
<style>
#card {
width: 140px;
height: 300px;
background-color: grey;
border-radius: 12px;
border: 2px solid red;
display: flex;
justify-content: space-between;
flex-direction: column;
}
#content1 {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 12px;
color: white;
border: 2px solid red;
margin: 20px;
}
#content2 {
width: 100px;
height: 100px;
color: white;
background-color: blue;
border-radius: 12px;
border: 2px solid red;
margin: 20px;
}
</style>
</head>
<body>
<h2 id="Using-the-i-id-selector-i-in-CSS-ruleset"> Using the <i> id selector </i> in CSS ruleset </h2>
<div id = "card">
<div id = "content1"> HTML </div>
<div id = "content2"> CSS </div>
</div>
</body>
</html>
Contoh 3 (Pemilih Berbilang CSS)
Dalam contoh di bawah, kami menggunakan berbilang pemilih CSS untuk menggunakan gaya CSS yang sama pada berbilang elemen HTML sekaligus.
Kami mempunyai tiga
elemen dengan nama kelas dan ID yang berbeza. Dalam CSS, kami menggunakan pemilih CSS ".text1, .text2, #para1" untuk menggunakan gaya yang sama yang ditambahkan dalam blok pengisytiharan kepada semua elemen HTML.
Selain itu, kami telah memilih ketiga-tiga elemen HTML secara individu menggunakan nama kelas dan pemilih CSS ID untuk menggunakan gaya yang berbeza pada elemen yang berbeza.
<html>
<head>
<style>
.text1,
.text2,
#para1 {
margin: 10px;
height: auto;
padding: 10px;
width: 200px;
}
.text1 {
background-color: red;
color: white;
font-size: 2rem;
}
.text2 {
background-color: green;
color: red;
font-size: 1.7rem;
}
#para1 {
background-color: blue;
color: white;
font-size: 1rem;
}
</style>
</head>
<body>
<h2 id="Using-the-i-Multiple-selector-i-in-CSS-ruleset"> Using the <i> Multiple selector </i> in CSS ruleset </h2>
<p class = "text1"> This is the first paragraph </p>
<p class = "text2"> This is a second paragraph. </p>
<p id = "para1"> This is the third paragraph. </p>
</body>
</html>
Contoh 4 (Pemilih Elemen Bersarang CSS)
Dalam contoh di bawah, kami memperkenalkan pemilih bersarang CSS. Dalam HTML, elemen div mengandungi berbilang elemen dengan nama kelas "pautan".
Dalam CSS, kami menggunakan pemilih CSS "div .link", yang memilih semua elemen HTML dengan nama kelas "pautan" dan keturunan elemen div. Jika kami menggunakan "div.link" sebagai pemilih CSS, ia akan menggunakan gaya pada semua elemen div dengan nama kelas "pautan". Oleh itu, "div.link" dan "div .link" kedua-duanya adalah pemilih CSS yang berbeza.
Dalam output, pengguna boleh melihat bahawa gaya CSS digunakan pada semua elemen HTML yang turunan daripada elemen div, tetapi bukan kepada elemen di luar elemen div.
<html>
<head>
<style>
div .link {
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<h2 id="Using-the-i-nested-selectors-i-in-CSS-ruleset"> Using the <i> nested selectors </i> in CSS ruleset </h2>
<div>
<a href = "#" class = "link"> Link1 </a>
<a href = "#" class = "link"> Link2 </a>
<a href = "#" class = "link"> Link3 </a>
</div><br>
<a href = "#" class = "link"> Link 5 </a>
</body>
</html>
Contoh 5 (pemilih pseudo CSS)
Dalam contoh ini, kami menunjukkan penggunaan pemilih pseudo CSS. Terdapat banyak jenis pemilih pseudo CSS, dan kami menggunakan beberapa daripadanya di sini.
Di sini, kami mempunyai elemen div "bekas" yang mengandungi 4 elemen anak dengan nama kelas "elemen". Kami menggunakan ":hover" pseudo-selector untuk menukar warna latar belakang elemen div "bekas" apabila pengguna menuding di atas elemen div.
Selepas itu, kami menggunakan pemilih CSS ':first-child', ':last-child' dan ':nth-child()' dan pemilih '.element' untuk memilih elemen anak pertama, elemen anak terakhir, dan anak ke-1, masing-masing.
Dalam output, pengguna dapat melihat bahawa gaya CSS yang berbeza digunakan pada anak pertama, anak terakhir dan anak kedua.
<html>
<head>
<style>
.container {
height: 100px;
width: 500px;
background-color: blue;
padding: 10px;
display: flex;
justify-content: space-around;
border-radius: 12px;
font-size: 1.2rem;
}
/* hover pseudo class */
.container:hover {
background-color: red;
}
/* first child pseudo class */
.element:first-child {
background-color: green;
color: white;
}
/* last child pseudo class */
.element:last-child {
background-color: grey;
color: black;
}
/* nth child pseudo class */
.element:nth-child(2) {
background-color: pink;
color: green;
}
</style>
</head>
<body>
<h2 id="Using-the-i-pseudo-selectors-i-in-CSS-ruleset"> Using the <i> pseudo selectors </i> in CSS ruleset </h2>
<div class = "container">
<div class = "element"> First Child </div>
<div class = "element"> Second Child </div>
<div class = "element"> Third Child </div>
<div class = "element"> Fourth Child </div>
</div>
</body>
</html>
Pengguna mempelajari cara menggunakan set peraturan CSS yang berbeza dalam tutorial ini. Kami menggunakan nama kelas dan id sebagai pemilih. Selain itu, kami belajar tentang menggunakan berbilang pemilih CSS dan pemilih CSS bersarang. Dalam contoh sebelumnya, kami mempelajari cara menggunakan pemilih pseudo daripada set peraturan CSS.
Atas ialah kandungan terperinci Untuk apa set peraturan CSS digunakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses
Mar 08, 2025 am 09:45 AM
Ini adalah jawatan ke -3 dalam siri kecil yang kami lakukan dalam kebolehcapaian bentuk. Jika anda terlepas jawatan kedua, lihat "Menguruskan Fokus Pengguna dengan: Fokus-Visible". Dalam
Buat borang hubungan JavaScript dengan rangka kerja pintar
Mar 07, 2025 am 11:33 AM
Tutorial ini menunjukkan mewujudkan bentuk JavaScript yang berpandangan profesional menggunakan rangka kerja pintar (nota: tidak lagi tersedia). Walaupun kerangka itu sendiri tidak tersedia, prinsip dan teknik tetap relevan untuk pembina bentuk lain.
Menambah bayang -bayang kotak ke blok dan elemen WordPress
Mar 09, 2025 pm 12:53 PM
CSS box-shadow dan garis besar sifat mendapat tema.json Sokongan dalam WordPress 6.1. Let ' s melihat beberapa contoh bagaimana ia berfungsi dalam tema sebenar, dan pilihan apa yang kita perlu gunakan gaya ini ke blok dan elemen WordPress.
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)
Mar 04, 2025 am 10:22 AM
Artikel ini meneroka skrip pembina bentuk PHP teratas yang terdapat di Envato Market, membandingkan ciri -ciri, fleksibiliti, dan reka bentuk mereka. Sebelum menyelam ke dalam pilihan tertentu, mari kita faham apa pembina bentuk PHP dan mengapa anda menggunakannya. Borang PHP
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
