Bagaimana untuk menulis gaya css

WBOY
Lepaskan: 2023-05-27 11:02:37
asal
891 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
  • 5 Atribut gaya

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
  • 6. Kelas pseudo dan unsur pseudo

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan