Bagaimana untuk menulis gaya css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menulis gaya css

WBOY

Lepaskan： 2023-05-27 11:02:37

asal

882 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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

p {
  color: blue;
}

Salin selepas log masuk

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;
}
```
Salin selepas log masuk
Salin selepas log masuk

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

```
#myId {
  color: blue;
}
```
Salin selepas log masuk

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

```
.myClass {
  color: green;
}
```
Salin selepas log masuk

Pemilih atribut: memilih elemen HTML dengan atribut khusus.

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

Salin selepas log masuk

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

warna: warna teks.

```
p {
  color: red;
}
```
Salin selepas log masuk
Salin selepas log masuk

saiz fon: saiz fon.

```
p {
  font-size: 14px;
}
```
Salin selepas log masuk

fon-keluarga: jenis fon.

```
p {
  font-family: Arial, sans-serif;
}
```
Salin selepas log masuk

warna latar belakang: warna latar belakang.

```
p {
  background-color: yellow;
}
```
Salin selepas log masuk

sempadan: sempadan.

```
p {
  border: 1px solid black;
}
```
Salin selepas log masuk

margin: jidar luar.

```
p {
  margin: 10px;
}
```
Salin selepas log masuk

padding: Padding.

```
p {
  padding: 5px;
}
```
Salin selepas log masuk

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;
}
```
Salin selepas log masuk

Unsur pseudo: digunakan untuk menerangkan bahagian istimewa unsur.

```
p::first-line {
  font-weight: bold;
}
```
Salin selepas log masuk
Di atas ialah cara biasa untuk menulis gaya CSS. Sudah tentu, dalam pembangunan sebenar, dalam banyak kes gaya yang berbeza perlu ditulis dalam helaian gaya yang berbeza (seperti gaya cetakan, gaya mudah alih, dll.), dan hubungan antara helaian gaya ini juga perlu diberi perhatian. Pada masa yang sama, isu prestasi gaya CSS juga perlu dipertimbangkan untuk mengelakkan pemilih bersarang yang berlebihan dan terlalu kompleks. Semoga artikel ini bermanfaat kepada anda.
Atas ialah kandungan terperinci Bagaimana untuk menulis gaya css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!