Rumah > Artikel > hujung hadapan web > kaedah penulisan gaya css
kaedah penulisan gaya css
- PHPzasal
- 2023-05-27 10:13:071119semak imbas
Gaya CSS (Cascading Style Sheets) ialah teknologi penting untuk pembangunan bahagian hadapan. Ia boleh mengawal susun atur, fon, warna dan gaya lain halaman web untuk mencapai penyatuan gaya halaman web. Artikel ini akan memberi tumpuan kepada cara menulis gaya CSS untuk membantu pembaca memahami dan menggunakan CSS dengan lebih mendalam.
1. Helaian gaya terbenam
Helaian gaya terbenam ialah cara untuk menulis gaya CSS secara langsung dalam kod HTML. Gunakan teg c9ccee2e6ea535a969eb3f532ad9fe89 dalam 93f0f5c25f18dab9d176bd4f6de5d30e Contohnya:
<head>
<style>
body {
background-color: #f2f2f2;
color: #262626;
}
h1 {
font-size: 36px;
font-weight: bold;
}
</style>
</head>Dalam contoh di atas, warna latar belakang elemen badan ialah #f2f2f2, warna teks ialah #262626 dan saiz fon bagi elemen h1 ialah 36 piksel, yang dipaparkan dalam huruf tebal .
2. Helaian gaya luaran
Helaian gaya luaran ialah cara untuk menulis gaya CSS secara berasingan dalam fail CSS luaran. Gunakan teg 261f5faa98205db566fb261e4276ef68 dalam a801d9c20ab268ecdf000c4cd37b7338 pada dokumen HTML untuk memperkenalkan helaian gaya luaran. Contohnya:
<head>
<link rel="stylesheet" href="style.css">
</head>Kandungan dalam fail style.css ialah:
body {
background-color: #f2f2f2;
color: #262626;
}
h1 {
font-size: 36px;
font-weight: bold;
}Dengan cara ini, semua elemen dalam HTML boleh mendapatkan maklumat gaya daripada helaian gaya luaran, mencapai HTML yang lebih jelas dan ringkas kod.
3. Gaya sebaris
Gaya sebaris ialah cara untuk menulis gaya CSS secara langsung dalam atribut gaya teg HTML. Contohnya:
<h1 style="color: red; font-size: 36px;">Hello, world!</h1>
Dalam contoh di atas, warna fon bagi elemen h1 ialah merah dan saiz fon ialah 36 piksel.
4. Pemilih CSS
Pemilih CSS ialah mekanisme untuk memilih elemen HTML dan menggunakan gaya. Ia boleh mencari elemen berdasarkan nama, nama kelas, ID dan atribut lain serta mewarisi atau mengatasi gaya CSS yang sepadan. Berikut ialah kegunaan biasa pemilih CSS:
- Pemilih teg: Cari elemen mengikut nama tegnya dan gunakan gaya. Contohnya:
h1 {
color: red;
}- Pemilih kelas: Cari elemen dan gunakan gaya melalui atribut kelas elemen. Contohnya:
.red {
color: red;
}Dalam kod HTML, tetapkan atribut kelas bagi elemen yang perlu digayakan kepada "merah" untuk menjadikan warna fon merah.
- Pemilih ID: Cari elemen dan gunakan gaya melalui atribut ID mereka. Dalam kod HTML, tetapkan atribut ID bagi elemen yang gaya perlu digunakan pada "id" untuk mencapai kesan gaya. Contohnya:
#header {
background-color: #f2f2f2;
}Dalam contoh di atas, ID elemen ialah "header", dan warna latar belakang ialah #f2f2f2.
- Pemilih atribut: Letakkan elemen dan gunakan gaya berdasarkan nilai atributnya. Contohnya:
input[type="text"] {
border: 1px solid #ccc;
}Dalam contoh di atas, sempadan semua elemen input dengan nilai atribut jenis "teks" ialah garis kelabu pepejal setebal 1 piksel.
- Pemilih keturunan: Cari elemen dan gunakan gaya melalui hubungan ibu bapa-anak mereka. Contohnya:
div p {
color: #262626;
}Dalam contoh di atas, warna fon bagi semua elemen p di dalam elemen div ialah #262626.
Di atas adalah cara biasa untuk menulis pemilih CSS. Aplikasi fleksibel mereka boleh merealisasikan pelarasan gaya yang membosankan dan menjadikan reka letak, fon, warna, dll. halaman web lebih cantik.
5. Ringkasan
Artikel ini memperkenalkan cara biasa menulis gaya CSS seperti helaian gaya terbenam, helaian gaya luaran, gaya sebaris, pemilih CSS, dll. Ia boleh membantu pembangun mencapai penyatuan gaya halaman web dan cipta Menghasilkan pengalaman pengguna yang lebih cantik dan selesa. Dalam pembangunan sebenar, adalah perlu untuk memilih kaedah penulisan gaya CSS yang sesuai mengikut keperluan khusus untuk meningkatkan kebolehbacaan dan kebolehselenggaraan kod.
Atas ialah kandungan terperinci kaedah penulisan gaya css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!