Rumah > Artikel > hujung hadapan web > langkah gaya css
langkah gaya css
- PHPzasal
- 2023-05-21 09:11:071290semak imbas
Langkah Gaya CSS
Kata Pengantar
CSS (Cascading Style Sheets) ialah bahagian yang amat diperlukan dalam pembangunan web Ia boleh menambah gaya pada elemen dalam dokumen HTML untuk mencantikkan halaman web pengalaman pengguna. Sebelum menggunakan CSS, kita perlu pastikan kita telah menguasai asas HTML. Artikel ini akan memperkenalkan langkah dan penggunaan gaya CSS.
Langkah 1: Tulis gaya CSS
Dalam fail HTML, terdapat dua cara untuk menambah gaya CSS. Yang pertama ialah menulis gaya CSS dalam teg fail HTML melalui helaian gaya dalaman. Kodnya adalah seperti berikut:
<head>
<style>
/* CSS代码 */
</style>
</head>Yang kedua ialah memperkenalkan fail CSS ke dalam fail HTML melalui helaian gaya luaran. Kodnya adalah seperti berikut:
<head> <link rel="stylesheet" type="text/css" href="styles.css"> </head>
Tidak kira apa cara sekalipun, kita perlu menulis kod gaya CSS. Sintaks asas CSS adalah seperti berikut:
selector {property: value;}Antaranya, pemilih menunjukkan elemen gaya yang digunakan, sifat menunjukkan atribut yang perlu ditetapkan dan nilai menunjukkan nilai atribut. Contohnya:
h1 {
color: red;
font-size: 24px;
}Langkah 2: Pemilih
Apabila menulis gaya CSS, pertimbangkan jenis, kategori, ID, dsb. elemen yang gaya itu perlu digunakan. Elemen berbeza ini boleh dipilih menggunakan pemilih dan digayakan secara berbeza. Berikut ialah beberapa pemilih biasa.
- Pemilih elemen
Pemilih elemen memilih elemen yang sepadan dengan namanya.
p {
font-size: 16px;
color: #333;
}- Pemilih kelas
Pemilih kelas memilih elemen yang sepadan mengikut nama kelas.
.class {
color: #f00;
}Dalam HTML, tambahkan nama kelas pada elemen melalui atribut kelas:
<p class="class">这是一个段落</p>
- Pemilih ID
Pemilih ID lulus ID bagi elemen Atribut untuk memilih elemen yang sepadan.
#id {
font-weight: bold;
color: #000;
}Dalam HTML, tambahkan ID pada elemen melalui atribut id:
<p id="id">这是一个段落</p>
Langkah 3: Reka letak dan model kotak
Gaya CSS bukan sahaja boleh menetapkan warna dan saiz elemen dan gaya lain, dan juga boleh memberikan sokongan untuk reka letak dan reka bentuk struktur halaman web. Memahami model kotak adalah asas penting untuk susun atur dan reka bentuk.
- Model kotak
Model kotak boleh menganggap elemen sebagai kotak, dibahagikan kepada jidar (sempadan), padding (margin dalam) dan jidar (margin luar) ) tiga bahagian .
Kita boleh menetapkan sifat yang berbeza untuk tiga bahagian ini, contohnya:
.box {
border: 1px solid #000;
padding: 10px;
margin: 10px;
}- Layout
CSS disediakan Terdapat banyak cara untuk melaksanakan susun atur dan reka bentuk Berikut adalah beberapa cara biasa.
- Terapung
Apungkan satu elemen ke kiri atau kanan elemen lain melalui atribut apungan untuk mencapai reka letak berbilang elemen. Contohnya:
.box1 {
float: left;
}
.box2 {
float: right;
}- Kedudukan
Atribut kedudukan boleh digunakan untuk meletakkan elemen pada kedudukan berbeza pada halaman web, seperti relatif kepada bahagian atas, kiri, dsb. . Atribut kedudukan mempunyai empat nilai iaitu statik (nilai lalai), relatif, mutlak dan tetap.
.box {
position: relative;
top: 10px;
left: 20px;
}- Reka Letak Fleksibel
Model kotak fleksibel boleh melaksanakan reka letak penyesuaian melalui atribut flex. Bekas yang ditetapkan untuk melentur akan secara automatik melaraskan kedudukan dan saiz elemen kanak-kanak mengikut saiz yang berbeza.
.container {
display: flex;
justify-content: center;
align-items: center;
}Langkah 4: Reka Bentuk Responsif
Reka bentuk responsif ialah bahagian yang semakin penting dalam pembangunan web. Memandangkan jenis peranti dan saiz skrin terus berubah, terdapat keperluan untuk menyediakan reka letak dan gaya yang berbeza untuk peranti dan saiz skrin yang berbeza. Berikut ialah dua kaedah reka bentuk responsif yang biasa.
- Pertanyaan Media
Pertanyaan media membolehkan anda menetapkan gaya berbeza untuk peranti dan saiz skrin yang berbeza. Contohnya:
@media (max-width: 768px) {
.box {
width: 100%;
margin: 0;
}
}Apabila lebar skrin kurang daripada atau sama dengan 768px, gaya akan digunakan secara automatik.
- Reka Letak Fleksibel
Model kotak fleksibel boleh melaksanakan reka letak responsif melalui pertanyaan media. Contohnya:
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}Apabila lebar skrin kurang daripada atau sama dengan 768px, bekas flex akan menyusun elemen anak secara menegak.
Ringkasan
Langkah gaya CSS termasuk menulis gaya CSS, pemilih, reka letak dan model kotak serta reka bentuk responsif. Dalam pembangunan sebenar, kita perlu menentukan gaya dan susun atur yang sesuai berdasarkan keperluan khusus untuk mencapai pengindahan dan reka bentuk struktur halaman web. Mahir dalam pengetahuan asas dan teknik biasa CSS boleh meningkatkan kecekapan pembangunan web.
Atas ialah kandungan terperinci langkah gaya css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!