<p>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.
<p>1. Fahami sintaks asas
<p>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.
<p>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
<p>Dalam contoh ini, kami menggunakan kedua-dua helaian gaya dalaman dan helaian gaya luaran, dan juga menggunakan helaian gaya sebaris.
<p>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.
<p>2. Penggunaan pemilih
<p>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
<p>Pemilih teg ialah salah satu pemilih yang paling biasa digunakan. Contohnya:
p {
color: red;
}Salin selepas log masuk
<p> Pemilih ini akan memilih semua
<p> elemen.
- Pemilih Kelas
<p>Pemilih kelas ditandakan dengan
. dan digunakan pada elemen dengan nama kelas yang sama. Contohnya:
.red {
color: red;
}Salin selepas log masuk
<p> Pemilih ini akan memilih semua elemen HTML dengan
class="red".
- Pemilih ID
<p>Pemilih ID dikenal pasti dengan simbol
# dan digunakan pada elemen HTML unik. Contohnya:
#header {
background-color: gray;
}Salin selepas log masuk
<p> Pemilih ini akan memilih
id="header" elemen HTML.
- Pemilih turunan
<p>Pemilih turunan menggunakan ruang untuk memilih elemen anak dalam elemen induk. Contohnya:
div p {
color: red;
}Salin selepas log masuk
<p> Pemilih ini memilih semua
<div> elemen dalam elemen
<p>.
- Pemilih kelas pseudo
<p>Pemilih kelas pseudo digunakan untuk memilih elemen HTML dalam keadaan atau kedudukan khas. Contohnya:
a:hover {
text-decoration: underline;
}Salin selepas log masuk
<p> Pemilih ini memilih keadaan apabila tetikus melayang di atas elemen
<a>.
<p>3. Kuasai atribut biasa
<p>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
<p>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
<p> Gaya ini meletakkan imej latar belakang bernama
background.jpg di penjuru kanan sebelah bawah halaman.
- Atribut fon
<p>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
<p> Gaya ini menetapkan fon semua
<h1> elemen tajuk kepada Arial, saiz fon kepada 24px dan warna kepada #333333.
- Atribut sempadan
<p>Atribut sempadan digunakan untuk mengawal sempadan elemen. Contohnya:
div {
border: 1px solid #e5e5e5;
border-radius: 10px;
}Salin selepas log masuk
<p> Gaya ini menetapkan jidar elemen
<div> kepada 1px lebar, warna kepada #e5e5e5 dan sempadan dibulatkan sudut kepada 10px.
- Atribut saiz
<p>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
<p>Gaya ini menetapkan lebar semua imej kepada 100%, ketinggian untuk dilaraskan secara automatik, jidar luar bawah kepada 10px dan jidar dalam kepada 5px.
<p>4. Gunakan warisan gaya
<p>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
<p> 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.
<p>5. Gunakan gaya gabungan
<p> 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
<p> 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.
<p>6. Gunakan prapemproses CSS
<p>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.
<p>7. Ringkasan
<p>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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
