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

Bagaimana untuk menulis css yang baik

PHPz

Lepaskan： 2023-04-06 14:00:30

asal

860 orang telah melayarinya

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk mengawal reka letak dan gaya halaman web. Cara menulis CSS ialah kemahiran yang perlu dikuasai oleh setiap pembangun bahagian hadapan. Artikel ini akan memperkenalkan cara menulis CSS dengan baik.

1. Fahami sintaks asas

Sebelum mula mempelajari CSS, kita perlu memahami beberapa sintaks asas. CSS boleh dibahagikan kepada helaian gaya dalaman, helaian gaya luaran dan helaian gaya sebaris. Antaranya, helaian gaya dalaman ditulis terus dalam fail HTML, helaian gaya luaran ditulis dalam fail CSS bebas, dan helaian gaya sebaris ditulis terus dalam teg HTML.

Contohnya:

<!DOCTYPE html>
<html>
  <head>
    <title>示例</title>
    <style type="text/css">
      p {
        color: red;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p style="color: blue;">这是一段文字</p>
  </body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan kedua-dua helaian gaya dalaman dan helaian gaya luaran, dan juga menggunakan helaian gaya sebaris.

Sintaks CSS terutamanya terdiri daripada pemilih dan atribut. Pemilih digunakan untuk memilih elemen HTML, dan atribut digunakan untuk mengawal gaya elemen. Sifat biasa termasuk latar belakang, warna, saiz fon, sempadan, jidar, dsb.

2. Penggunaan pemilih

Pemilih ialah salah satu konsep paling asas dalam CSS. Pemilih yang berbeza boleh memilih elemen HTML yang berbeza. Berikut ialah beberapa pemilih biasa:

Pemilih Teg

Pemilih teg ialah salah satu pemilih yang paling biasa digunakan. Contohnya:

p {
  color: red;
}

Salin selepas log masuk

Pemilih ini akan memilih semua  elemen.

Pemilih Kelas

Pemilih kelas ditandakan dengan . dan digunakan pada elemen dengan nama kelas yang sama. Contohnya:

.red {
  color: red;
}

Salin selepas log masuk

Pemilih ini akan memilih semua elemen HTML dengan class="red".

Pemilih ID

Pemilih ID dikenal pasti dengan simbol # dan digunakan pada elemen HTML unik. Contohnya:

#header {
  background-color: gray;
}

Salin selepas log masuk

Pemilih ini akan memilih id="header" elemen HTML.

Pemilih turunan

Pemilih turunan menggunakan ruang untuk memilih elemen anak dalam elemen induk. Contohnya:

div p {
  color: red;
}

Salin selepas log masuk

Pemilih ini memilih semua <div> elemen dalam elemen .

Pemilih kelas pseudo

Pemilih kelas pseudo digunakan untuk memilih elemen HTML dalam keadaan atau kedudukan khas. Contohnya:

a:hover {
  text-decoration: underline;
}

Salin selepas log masuk

Pemilih ini memilih keadaan apabila tetikus melayang di atas elemen <a>.

3. Kuasai atribut biasa

Terdapat banyak atribut dalam CSS, tetapi ada yang lebih biasa digunakan dan kita perlu mahir dalam hal tersebut. Berikut ialah beberapa atribut biasa:

Atribut latar belakang

Atribut latar belakang digunakan untuk mengawal latar belakang elemen, termasuk warna, gambar, kebolehulangan, dsb. Contohnya:

body {
  background-color: #f1f1f1;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
}

Salin selepas log masuk

Gaya ini meletakkan imej latar belakang bernama background.jpg di penjuru kanan sebelah bawah halaman.

Atribut fon

Atribut fon digunakan untuk mengawal fon, saiz fon, warna, dsb. teks. Contohnya:

h1 {
  font-family: Arial;
  font-size: 24px;
  color: #333333;
}

Salin selepas log masuk

Gaya ini menetapkan fon semua <h1> elemen tajuk kepada Arial, saiz fon kepada 24px dan warna kepada #333333.

Atribut sempadan

Atribut sempadan digunakan untuk mengawal sempadan elemen. Contohnya:

div {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}

Salin selepas log masuk

Gaya ini menetapkan jidar elemen <div> kepada 1px lebar, warna kepada #e5e5e5 dan sempadan dibulatkan sudut kepada 10px.

Atribut saiz

Atribut saiz digunakan untuk mengawal saiz elemen HTML, termasuk lebar, tinggi, jarak luar, jarak dalam, dsb. Contohnya:

img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  padding: 5px;
}

Salin selepas log masuk

Gaya ini menetapkan lebar semua imej kepada 100%, ketinggian untuk dilaraskan secara automatik, jidar luar bawah kepada 10px dan jidar dalam kepada 5px.

4. Gunakan warisan gaya

Pewarisan gaya dalam CSS boleh mengurangkan pertindihan kod dan meningkatkan kebolehselenggaraan kod. Contohnya:

body {
  color: #333333;
  font-size: 16px;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

Salin selepas log masuk

Gaya ini mentakrifkan warna semua teks menjadi #333333 dan saiz fon ialah 16px. <h1>Elemen tajuk mewarisi warna yang sama, tetapi saiz dan berat fon yang berbeza.

5. Gunakan gaya gabungan

Dalam CSS, nilai atribut berbilang boleh digabungkan menjadi gaya gabungan. Ini boleh mengurangkan jumlah kod dan menjadikan kod lebih ringkas. Contohnya:

border: 1px solid #e5e5e5;

Salin selepas log masuk

Gaya ini mentakrifkan gaya komposit yang terdiri daripada 3 nilai atribut: lebar jidar ialah 1px, gaya jidar ialah garis padat dan warna jidar ialah #e5e5e5.

6. Gunakan prapemproses CSS

Prapemproses CSS ialah alat yang menyusun kod CSS ke dalam bahasa CSS yang lebih maju. Mereka memperluaskan fungsi CSS, termasuk pembolehubah, fungsi, sarang, dll., menjadikan penulisan CSS lebih mudah dan lebih pantas. Pada masa ini, prapemproses CSS yang lebih popular termasuk Sass, Less, Stylus, dsb.

7. Ringkasan

Di atas ialah beberapa perkara asas tentang cara menulis CSS dengan baik. Menguasai sintaks asas, pemilih, atribut biasa, pewarisan gaya dan gaya komposit boleh membolehkan kami menulis kod CSS yang ringkas, fleksibel dan mudah diselenggara.

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