Rumah > Artikel > hujung hadapan web > Bagaimana untuk menulis gaya css

Bagaimana untuk menulis gaya css

WBOYasal: 2023-05-27 11:02:37892semak imbas

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk menerangkan gaya halaman web. CSS menyediakan banyak atribut gaya yang membolehkan kami mengawal gaya halaman web dengan lebih fleksibel. Dalam artikel ini, saya akan berkongsi beberapa kaedah penulisan gaya CSS untuk membantu anda menguasai kawalan gaya dengan lebih baik.

1. Gaya sebaris

Gaya sebaris adalah untuk menetapkan atribut gaya dalam atribut gaya teg HTML, seperti yang ditunjukkan di bawah:

<p style="color: red;">这是一段红色的文字。</p>

Cara penulisan ini sangat intuitif, tetapi Penggunaan yang kerap tidak disyorkan kerana ia menjadikan kod HTML bertele-tele dan sukar untuk dikekalkan.

2. Gaya terbenam

Gaya terbenam menggunakan tag gaya di kepala fail HTML dan menulis kod CSS di dalamnya. Seperti yang ditunjukkan di bawah:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>嵌入式样式</title>
  <style type="text/css">
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>这是一段红色的文字。</p>
</body>
</html>

Kaedah penulisan ini lebih baik daripada gaya sebaris kerana ia boleh meletakkan semua kod gaya di kepala dan mengurangkan jumlah kod dalam halaman. Walau bagaimanapun, jika berbilang fail HTML perlu menggunakan gaya yang sama, kod gaya perlu disalin semula, menyebabkan kos penyelenggaraan meningkat.

3. Gaya luaran

Gaya luaran meletakkan kod gaya dalam fail CSS yang berasingan dan kemudian memperkenalkannya dalam fail HTML. Seperti yang ditunjukkan di bawah:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>外部样式</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <p>这是一段蓝色的文字。</p>
</body>
</html>

Kod gaya diletakkan dalam gaya fail style.css, seperti yang ditunjukkan di bawah:

p {
  color: blue;
}

Cara penulisan ini adalah yang terbaik kerana ia memisahkan kod gaya dan HTML kod, mengurangkan kod HTML Berlebihan dihapuskan, menjadikan keseluruhan susun atur halaman lebih jelas. Pada masa yang sama, jika berbilang fail HTML perlu menggunakan gaya ini, anda hanya perlu mengubah suai fail gaya dan semua halaman yang merujuk gaya ini akan dikemas kini secara automatik.

Selain itu, terdapat beberapa kaedah penulisan gaya CSS yang juga sangat biasa dalam pembangunan sebenar:

4. elemen HTML. CSS menyokong pelbagai pemilih, yang biasa ialah:

Pemilih elemen: memilih elemen HTML daripada jenis yang ditentukan.

```
p {
  color: red;
}
```

Pemilih ID: Digunakan untuk memilih elemen HTML dengan ID tertentu.

```
#myId {
  color: blue;
}
```

Pemilih Kelas: Digunakan untuk memilih elemen HTML dengan nama kelas tertentu.

```
.myClass {
  color: green;
}
```

Pemilih atribut: memilih elemen HTML dengan atribut khusus.

input[type="text"] {
  border: 1px solid red;
}

Atribut gaya digunakan untuk menerangkan gaya elemen. CSS menyokong banyak atribut gaya, berikut adalah beberapa atribut biasa:

warna: warna teks.

```
p {
  color: red;
}
```

saiz fon: saiz fon.

```
p {
  font-size: 14px;
}
```

fon-keluarga: jenis fon.

```
p {
  font-family: Arial, sans-serif;
}
```

warna latar belakang: warna latar belakang.

```
p {
  background-color: yellow;
}
```

sempadan: sempadan.

```
p {
  border: 1px solid black;
}
```

margin: jidar luar.

```
p {
  margin: 10px;
}
```

padding: Padding.

```
p {
  padding: 5px;
}
```

Kelas pseudo dan unsur pseudo digunakan untuk menambah gaya kepada keadaan atau bahagian unsur tertentu.

Kelas pseudo: digunakan untuk menerangkan keadaan istimewa unsur.

```
a:hover {
  color: red;
}
```

Unsur pseudo: digunakan untuk menerangkan bahagian istimewa unsur.

```
p::first-line {
  font-weight: bold;
}
```

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

css html 选择器样式表外边距内边距 margin padding border 伪类伪元素 background

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：unsur sembunyi cssArtikel seterusnya：unsur sembunyi css

Artikel berkaitan

Lihat lagi