cara menggunakan css-Soal Jawab bahagian hadapan-php.cn

cara menggunakan css

PHPz

Lepaskan： 2023-04-24 09:23:50

asal

655 orang telah melayarinya

Cara menggunakan CSS

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk mereka bentuk gaya halaman web CSS boleh mengawal warna, fon, reka letak, dll. halaman web, menjadikan halaman web lebih cantik dan lebih mudah dibaca. Dalam artikel ini, kita akan membincangkan cara menggunakan CSS untuk menggayakan halaman web.

Sintaks CSS asas

Sebelum menggunakan CSS, anda perlu menguasai beberapa peraturan tatabahasa asas. CSS terdiri daripada dua bahagian utama: pemilih dan pengisytiharan, seperti ditunjukkan di bawah:

选择器 {
    声明1;
    声明2;
    ...
}

Salin selepas log masuk

Antaranya, pemilih digunakan untuk menentukan elemen HTML untuk digayakan, manakala pengisytiharan digunakan untuk menentukan gaya yang akan ditetapkan . Contoh mudah kelihatan seperti ini:

<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menyediakan pemilih p yang menentukan gaya untuk semua  elemen. Pernyataan color digunakan untuk menentukan warna teks menjadi biru, dan pernyataan font-size digunakan untuk menentukan saiz teks menjadi 20 piksel.

Pemilih CSS

Dalam CSS, pemilih digunakan untuk menentukan elemen HTML untuk digayakan. Beberapa jenis pemilih yang biasa digunakan disenaraikan di bawah:

Pemilih teg: Tentukan semua elemen dengan nama teg yang sama, seperti p bermaksud semua  elemen.
Pemilih ID: Menentukan elemen dengan ID tertentu, seperti #my-id menentukan elemen dengan ID my-id.
pemilih kelas: menentukan elemen dengan kelas tertentu, seperti .my-class menentukan semua elemen dengan kelas my-class.
Pemilih Gabungan: Gabungkan pelbagai jenis pemilih bersama-sama untuk mengecilkan elemen yang akan digayakan.
Pemilih Keturunan: Memilih semua elemen turunan bagi elemen yang ditentukan Contohnya, div p akan memilih semua <div> elemen dalam elemen .
Pemilih elemen anak: Memilih elemen anak langsung bagi elemen yang ditentukan Contohnya, div > p akan memilih semua <div> elemen yang merupakan elemen anak langsung bagi elemen .

Sebagai contoh, kod CSS berikut menggayakan semua elemen perenggan dalam elemen my-div dengan ID <div>:

#my-div p {
    color: red;
}

Salin selepas log masuk

Model Kotak CSS

Model kotak CSS ialah model yang digunakan untuk mereka bentuk reka letak halaman web mana-mana elemen HTML boleh dianggap sebagai kotak, yang terdiri daripada kawasan kandungan, kawasan padding, kawasan sempadan dan kawasan jidar. Pelbagai bahagian model kotak disenaraikan di bawah:

Kawasan kandungan: Mengandungi kandungan sebenar elemen, seperti teks, imej, video, dsb.
Kawasan padding: Terletak di luar kawasan kandungan, ia digunakan untuk mengawal jarak antara kandungan dan sempadan.
Kawasan sempadan: Sempadan yang mengelilingi elemen dan menentukan saiz dan bentuknya.
Kawasan margin: Terletak di luar kawasan sempadan, ia digunakan untuk mengawal jarak antara elemen bersebelahan.

Berikut ialah rajah skematik model kotak CSS:

+----------------------------------+
|               Margin             |
|    +------------------------+    |
|    |        Border          |    |
|    |    +---------------+   |    |
|    |    |   Padding    |   |    |
|    |    |               |   |    |
|    |    +---------------+   |    |
|    |       Content          |    |
|    +------------------------+    |
|               Margin             |
+----------------------------------+

Salin selepas log masuk

Apabila menggunakan model kotak CSS, anda boleh mengawal empat kawasan elemen melalui gaya berikut :

选择器 {
    margin: 上 右 下 左;
    border: 厚度 样式 颜色;
    padding: 上 右 下 左;
    width: 宽度;
    height: 高度;
}

Salin selepas log masuk

Sebagai contoh, kod CSS berikut mentakrifkan elemen dengan jidar merah, padding biru dan jidar hijau:

.box {
    margin: 10px;
    border: 2px solid red;
    padding: 20px;
    background-color: blue;
}

Salin selepas log masuk

Reka Letak CSS

Susun atur CSS merujuk kepada mengawal kedudukan dan saiz elemen halaman web melalui CSS untuk mencapai kesan reka letak halaman web yang diingini. Di bawah disenaraikan beberapa teknik reka letak CSS yang biasa digunakan:

Reka letak bendalir: Gunakan saiz relatif dan susun atur peratusan untuk melaraskan saiz dan kandungan reka letak halaman. Contohnya, menetapkan lebar elemen <div> kepada 50% akan menjadikannya merentangi separuh daripada skrin.
Reka Letak Tetap: Letakkan elemen pada halaman menggunakan saiz tetap dan kedudukan mutlak. Contohnya, gunakan position: absolute; left: 0; top: 0; untuk melabuhkan elemen ke penjuru kiri sebelah atas.
Reka letak fleksibel: Gunakan model kotak fleksibel untuk mentakrifkan perhubungan antara elemen Anda boleh menggunakan atribut seperti flex-direction, justify-content dan align-item untuk mengawal penjajaran dan susunan elemen.
Reka Letak Grid: Gunakan sistem grid untuk meletakkan dan menjajarkan kandungan. Sebagai contoh, reka letak grid responsif boleh dibina dengan mudah menggunakan rangka kerja Bootstrap.

Berikut ialah contoh kod susun atur CSS yang menggunakan susun atur grid untuk membahagikan berbilang elemen kepada dua dan tiga lajur:

.row {
    display: flex;
    flex-wrap: wrap;
}
.col-2 {
    width: calc(50% - 20px);
    margin-right: 20px;
}
.col-3 {
    width: calc(33.33% - 20px);
    margin-right: 20px;
}

Salin selepas log masuk

Animasi CSS

Animasi CSS mengubah penampilan dan tingkah laku elemen HTML dengan menggunakan kesan animasi padanya. Berikut ialah beberapa sifat animasi CSS yang biasa digunakan:

peralihan: digunakan untuk menetapkan kesan peralihan antara keadaan elemen, seperti menukar warna apabila tetikus berguling. Contohnya, gunakan transition: background-color 0.5s ease; untuk membuat peralihan warna latar belakang dengan lancar dalam 0.5 saat.
transformasi: digunakan untuk mengubah bentuk, saiz dan kedudukan elemen. Contohnya, gunakan transform: rotate(90deg); untuk memutarkan elemen 90 darjah.
animasi: digunakan untuk mencipta kesan animasi CSS tersuai. Contohnya, animasi berkelip mudah boleh dibuat menggunakan kod berikut:

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Salin selepas log masuk

Menggunakan contoh di atas, animasi berkelip di atas boleh digunakan pada elemen:

.blink {
    animation: blink 1s infinite;
}

Salin selepas log masuk

总的来说，CSS是一门非常强大的语言，可以用于实现各种网页设计效果。通过掌握CSS的基本语法和常用技巧，您可以创建出优美、灵活、易于维护的网页样式，并提高您的网页设计水平。

Atas ialah kandungan terperinci cara menggunakan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!