Rumah > Artikel > hujung hadapan web > Cara membuat css
Cara membuat css
- PHPzasal
- 2023-04-13 10:44:081467semak imbas
CSS, singkatan dari Cascading Style Sheets, ialah bahasa gaya yang digunakan untuk mengawal penampilan dan reka letak halaman web. Dalam reka bentuk web moden, CSS memainkan peranan yang sangat penting, menjadikan halaman web kelihatan lebih cantik, lebih mudah dibaca dan meningkatkan pengalaman pengguna. Dalam artikel ini, saya akan menerangkan bagaimana CSS dicipta.
1. Sintaks asas CSS
CSS terutamanya terdiri daripada komponen asas seperti pemilih, atribut dan nilai atribut Pembaca boleh memahami sintaks asas CSS melalui kod contoh berikut:
selector {
property1: value1;
property2: value2;
}
Antaranya, pemilih digunakan untuk menentukan elemen HTML yang akan digunakan gaya Ia boleh menjadi nama, nama kelas, ID, dsb. bagi elemen tersebut daripada gaya yang perlu ditetapkan, seperti " "font-size", "color", dsb.; nilai atribut (nilai) menentukan nilai selepas nama gaya, yang digunakan untuk menentukan nilai gaya.
2. Gaya sebaris
Gaya sebaris ialah bentuk CSS yang paling mudah Ia menulis kod CSS secara langsung dalam teg HTML. Walaupun borang ini mudah, ia tidak disyorkan kerana ia akan menyebabkan beberapa masalah pembangunan dan penyelenggaraan. Contohnya:
<p style="color:red;font-size:20px;">这是一段带有内联样式的文本。</p>
Dalam pembangunan sebenar, kami biasanya memilih untuk menulis kod CSS dalam fail CSS, dan kemudian menggunakannya pada halaman web selepas ditakrifkan.
3. Helaian gaya
- Helaian gaya dalaman
Helaian gaya dalaman ialah helaian gaya yang meletakkan kod CSS dalam teg kepala HTML dokumen. Walaupun borang ini tidak semudah gaya sebaris, ia sesuai untuk beberapa projek yang lebih kecil Contohnya, hanya gaya yang diperlukan untuk halaman web tertentu boleh dibenamkan terus ke dalam fail HTML dengan cara ini untuk mencapai keseragaman dalam penampilan halaman web. .
Berikut ialah contoh kod untuk helaian gaya dalaman:
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>这是一个带内部样式表的段落。</p>
</body>
- Helaian gaya luaran
Helaian gaya luaran menyimpan kod CSS dalam berasingan Dalam fail CSS, helaian gaya dipautkan ke helaian gaya pada halaman melalui teg pautan dokumen HTML. Borang ini sesuai untuk projek sederhana dan besar, terutamanya apabila terdapat berbilang halaman web yang perlu menggunakan gaya yang sama Sangat mudah untuk mengekalkan dan mengubah suainya secara seragam.
Berikut ialah contoh kod untuk helaian gaya luaran:
Bahagian fail HTML:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>这是一个带外部样式表的段落。</p> </body>
Bahagian fail CSS:
p {
color: red;
font-size: 20px;
}
4. Pilih Penjelasan terperinci
- Pemilih elemen
Pemilih elemen ialah pemilih yang memilih nama elemen HTML untuk menerangkan semua elemen yang menggunakan gaya elemen ini . Dalam erti kata lain, jika anda ingin menetapkan semua tag p secara seragam dalam halaman HTML kepada merah, anda boleh mencapainya melalui kod berikut:
p {
color: red;
}
- Pemilih ID
Pemilihan ID Pemilih digunakan untuk memilih elemen HTML dengan atribut ID tertentu. Dalam dokumen HTML, atribut id biasanya unik, jadi pemilih ID hanya boleh memilih satu elemen, seperti ini:
#intro {
font-size: 30px;
font-weight: bold;
}
- Pemilih kelas
Pemilih kelas ialah pemilih yang memilih elemen HTML dengan nama kelas yang sama. Dalam dokumen HTML, elemen boleh mengandungi berbilang nama kelas, atau berbilang elemen boleh ditetapkan kepada nama kelas yang sama dan digayakan secara seragam. Contohnya:
.text {
font-style: italic;
}
4. Ringkasan
Artikel ini memperkenalkan kaedah penciptaan dan sintaks asas CSS, serta dua bentuk helaian gaya dan penjelasan terperinci tentang pemilih. Ringkasnya, CSS membolehkan pembangun mengawal gaya halaman web dengan lebih mudah Melalui pelbagai bentuk CSS dan aplikasi pemilih yang berbeza, kesan halaman web yang lebih kaya dan lebih cantik boleh dicapai. Saya berharap pembaca dapat menguasai kaedah penciptaan CSS dan meningkatkan keupayaan pembangunan mereka melalui artikel ini.
Atas ialah kandungan terperinci Cara membuat css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!