-html tutorial-php.cn

Pautan HTML dan CSS boleh mencipta halaman web interaktif dan mesra pengguna dengan menggunakan HTML untuk mentakrifkan struktur halaman dan kemudian menggunakan CSS untuk penggayaan dan reka letak. Langkah pautan adalah seperti berikut: Gunakan teg untuk memautkan CSS ke dokumen HTML. Gunakan pemilih untuk memilih elemen HTML tertentu dalam CSS. Gunakan sifat gaya untuk menetapkan teks, warna, jidar dan banyak lagi.

HTML 与 CSS 联动全解析

Analisis penuh kaitan HTML dan CSS

Pengenalan:

HTML dan CSS ialah dua teknologi penting dalam pembangunan web. HTML mentakrifkan struktur halaman, manakala CSS bertanggungjawab untuk penggayaan dan reka letak. Menghubungkan kedua-dua teknologi ini boleh mencipta halaman Web yang interaktif dan mesra pengguna.

Asas HTML:

HTML menggunakan teg untuk menentukan jenis elemen yang berbeza, seperti tajuk, perenggan dan senarai. Teg ini ditafsirkan oleh penyemak imbas untuk memaparkan halaman pada skrin. Contohnya:

<h1>这是标题</h1>
<p>这是一段文本</p>
<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
</ul>

Salin selepas log masuk

Asas CSS:

CSS Gunakan pemilih untuk memilih elemen tertentu dan menggunakan gaya. Gaya boleh termasuk atribut seperti warna, fon dan jidar. Contohnya:

h1 {
  color: red;
}

p {
  font-size: 12px;
}

Salin selepas log masuk

Pautan HTML dan CSS:

Untuk memautkan HTML dan CSS, anda boleh menggunakan teg <link>, seperti ini: <link> 标签，如下所示：

<head>
  <link rel="stylesheet" href="style.css">
</head>

Salin selepas log masuk

这将加载名为 style.cssrreee

Ini akan memuatkan fail yang dipanggil Fail CSS luaran style.css.

Kes Praktikal:

Jom buat borang web mudah untuk mengumpul input pengguna.

<h1>用户注册</h1>
<form>
  <label for="name">姓名：</label>
  <input type="text" name="name">
  <br>
  <label for="email">邮箱：</label>
  <input type="email" name="email">
  <br>
  <input type="submit">
</form>

Salin selepas log masuk

form {
  background-color: #f0f0f0;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"] {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
}

input[type="email"] {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
}

input[type="submit"] {
  background-color: #008000;
  color: white;
  padding: 5px 10px;
  border: none;
}

Salin selepas log masuk

Dalam kod HTML kami, kami mentakrifkan borang dengan dua medan input (nama dan e-mel) dan butang hantar. Dalam kod CSS kami, kami menggunakan gaya untuk memberikan warna latar belakang borang, penjajaran teks label dan sempadan medan input.

Menjalankan kod ini akan membuat borang pendaftaran pengguna dalam penyemak imbas, digayakan mengikut keperluan CSS kami. 🎜

Atas ialah kandungan terperinci . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!