Untuk apa set peraturan CSS digunakan?-tutorial css-php.cn

Untuk apa set peraturan CSS digunakan?

PHPz

Lepaskan： 2023-09-09 16:01:02

ke hadapan

1246 orang telah melayarinya

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 */
}

Salin selepas log masuk

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> 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>

Salin selepas log masuk

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> 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>

Salin selepas log masuk

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> 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>

Salin selepas log masuk

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> 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>

Salin selepas log masuk

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> 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>

Salin selepas log masuk

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!