Bagaimanakah kita boleh menggunakan tag split untuk menggayakan elemen HTML?-html tutorial-php.cn

Bagaimanakah kita boleh menggunakan tag split untuk menggayakan elemen HTML?

WBOY

Lepaskan： 2023-09-06 13:45:05

ke hadapan

1342 orang telah melayarinya

Teg

berfungsi sebagai bekas untuk elemen HTML. Dengan bantuan teg ini, kami boleh dengan mudah menentukan sebahagian daripada dokumen HTML. Ia juga digunakan untuk mengumpulkan kebanyakan elemen HTML bersama-sama dan memformatnya dengan mudah. Teg digunakan dengan elemen peringkat blok.

Teg

menerima semua sifat CSS dan menggunakan sifat seperti class dan id untuk menggayakan elemen di dalamnya.

Bagaimanakah kita boleh menggunakan tag split untuk menggayakan elemen HTML?

Tatabahasa

Berikut ialah sintaks tag.

<div class='division'>Content…</div>

Salin selepas log masuk

Contoh 1

Diberikan di bawah ialah contoh menambah gaya pada teg div dalam HTML.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .parent {
         border: 1rem solid green;
         margin: 1rem;
         padding: 1rem 1rem;
         text-align: center;
         box-shadow: 2px 2px 20px 23px aquamarine;
      }
      .division {
         display: inline-block;
         border: 1px solid aquamarine;
         padding: 1rem 1rem;
         background-color: #2ecc71;
         color: white;
      }
   </style>
</head>
<body>
   <div class='parent'>
      <div class='division'>div tag 1</div>
      <div class='division'>div tag 2</div>
      <div class='division'>div tag 3</div>
   </div>
</body>
</html>

Salin selepas log masuk

Berikut ialah output program contoh di atas.

Kami boleh menambah lebih banyak gaya pada label.

Contoh 2

Diberikan di bawah ialah satu lagi contoh menambah gaya pada teg div dalam HTML.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .parent {
         border: 1rem solid green;
         margin: 1rem;
         padding: 1rem 1rem;
         text-align: center;
         box-shadow: 2px 2px 20px 23px aquamarine;
      }
      .division {
         display: inline-block;
         border: 1px solid aquamarine;
         padding: 1rem 1rem;
         background-color: #2ecc71;
         color: white;
         text-transform: uppercase;
         text-decoration: underline;
         font-family: cursive;
         font-size: 1.2rem;
         font-weight: bolder;
         font-style: italic;
      }
   </style>
</head>
<body>
   <div class='parent'>
      <div class='division'>div tag 1</div>
      <div class='division'>div tag 2</div>
      <div class='division'>div tag 3</div>
   </div>
</body>
</html>

Salin selepas log masuk

Berikut ialah output program contoh di atas.

Contoh 3

Anda boleh cuba menjalankan kod berikut untuk menggayakan elemen HTML menggunakan teg. Peraturan gaya tambahan akan digunakan pada elemen dengan id="content". Id di sini ialah pemilih CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      #container p {
         line-height: 15px;
         margin: 20px;
         padding-bottom: 15px;
         text-align: justify;
         width: 130px;
         color: blue;
      }
   </style>
   <title>HTML div Tag</title>
   <link rel = "stylesheet" href = "style.css">
</head>
<body>
   <div id = "container">
      <p>Welcome to our website. We provide tutorials on various subjects.</p>
   </div>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah kita boleh menggunakan tag split untuk menggayakan elemen HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!