cari

Rumah  >  Artikel  >  hujung hadapan web  >  cara menggunakan css

cara menggunakan css

PHPz
PHPzasal
2023-04-24 09:07:33638semak imbas
<p>Cara menggunakan CSS

<p>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.

  1. Sintaks CSS asas
<p>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;
    ...
}
<p> 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>
<p>Dalam contoh ini, kami menyediakan pemilih p yang menentukan gaya untuk semua <p> elemen. Pernyataan color digunakan untuk menentukan warna teks menjadi biru, dan pernyataan font-size digunakan untuk menentukan saiz teks menjadi 20 piksel.

  1. Pemilih CSS
<p>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 <p> 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 <p>.
  • 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 <p>.
<p>Sebagai contoh, kod CSS berikut menggayakan semua elemen perenggan dalam elemen my-div dengan ID <div>: 

#my-div p {
    color: red;
}
  1. Model Kotak CSS
<p>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.
<p>Berikut ialah rajah skematik model kotak CSS: 

+----------------------------------+
|               Margin             |
|    +------------------------+    |
|    |        Border          |    |
|    |    +---------------+   |    |
|    |    |   Padding    |   |    |
|    |    |               |   |    |
|    |    +---------------+   |    |
|    |       Content          |    |
|    +------------------------+    |
|               Margin             |
+----------------------------------+
<p>Apabila menggunakan model kotak CSS, anda boleh mengawal empat kawasan elemen melalui gaya berikut : 

选择器 {
    margin: 上 右 下 左;
    border: 厚度 样式 颜色;
    padding: 上 右 下 左;
    width: 宽度;
    height: 高度;
}
<p>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;
}
  1. Reka Letak CSS
<p>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.
<p>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;
}
  1. Animasi CSS
<p>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;
    }
}
<p>Menggunakan contoh di atas, animasi berkelip di atas boleh digunakan pada elemen: 

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

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

css bootstrap html class 选择器 样式表 盒子模型 外边距 内边距 position background transform transition animation flex
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk melimpah dan menyembunyikan teks cssArtikel seterusnya：Bagaimana untuk melimpah dan menyembunyikan teks css

Artikel berkaitan

Lihat lagi