Konsep CSS Lanjutan: Menguasai Teknik Reka Bentuk Web Moden

Berikut ialah kesinambungan topik CSS untuk Bahagian 2 artikel komprehensif:

---

Topik CSS Terperinci

1. Pembolehubah CSS (Sifat Tersuai):

   • Ketahui cara mentakrifkan nilai boleh guna semula dengan sintaks --property.
   • Contoh:

    :root {  
        --main-color: #3498db;  
        --font-size: 16px;  
    }  
    h1 {  
        color: var(--main-color);  
        font-size: var(--font-size);  
    }  
   

2. Susun Letak Grid CSS:

   • Induk reka bentuk berasaskan grid untuk reka letak 2D yang berkuasa.
   • Sifat utama seperti baris-templat-grid, lajur-templat-grid dan jurang-grid.
   • Contoh:

    .container {  
        display: grid;  
        grid-template-columns: 1fr 2fr;  
        grid-gap: 10px;  
    }  
   

3. Flexbox (Teknik Lanjutan):

   • Selam lebih dalam ke dalam bekas laras-kandungan, susunan dan flex bersarang.

4. Elemen Pseudo CSS dan Pemilih Lanjutan:

   • Teroka pemilih seperti :nth-child, :not(), dan gabungan mereka.
   • Contoh:

    li:nth-child(odd) { background-color: #f4f4f4; }  
    div:not(.active) { opacity: 0.5; }  
   

5. Titik Putus Pertanyaan Media untuk Reka Bentuk Responsif:

   • Amalan terbaik untuk menggunakan titik putus.
   • Contoh:

    @media (max-width: 768px) {  
        body { font-size: 14px; }  
    }  
   

6. Animasi CSS:

   • Buat peralihan lancar dengan @keyframes dan sifat animasi.
   • Contoh:

    @keyframes slideIn {  
        from { transform: translateX(-100%); }  
        to { transform: translateX(0); }  
    }  
    .box {  
        animation: slideIn 1s ease-in-out;  
    }  
   

7. Peralihan CSS (Kes Penggunaan Lanjutan):

   • Peralihan rantai dan tambah kelewatan.
   • Contoh:

    button:hover {  
        background-color: #3498db;  
        transition: background-color 0.3s ease;  
    }  
   

8. Transformasi CSS:

   • Gunakan putaran, skala, condong dan gabungan.
   • Contoh:

    .card:hover {  
        transform: scale(1.1) rotate(5deg);  
    }  
   

9. Rangka Kerja CSS (Tailwind, Bootstrap, dll.):

   • Ikhtisar masa dan cara menggunakan rangka kerja untuk pembangunan pesat.

10. CSS untuk Kebolehaksesan:

    • Menggayakan keadaan fokus, peranan ARIA dan memastikan nisbah kontras.
    • Contoh:

      a:focus { outline: 2px dashed #3498db; }  
    

11. CSS untuk Mod Gelap:

    • Memanfaatkan @media (lebih suka skema warna) untuk mod gelap.
    • Contoh:

      @media (prefers-color-scheme: dark) {  
          body { background-color: #121212; color: #fff; }  
      }  
    

12. Kaunter CSS:

    • Elemen nombor secara dinamik menggunakan penetapan semula balas dan kenaikan balas.
    • Contoh:

      ol { counter-reset: section; }  
      li::before { content: counter(section) ". "; counter-increment: section; }  
    

13. Bentuk dan Keratan CSS:

    • Gunakan laluan klip dan bentuk untuk reka letak kreatif.
    • Contoh:

      .circle {  
          clip-path: circle(50%);  
      }  
    

14. Mod Masking dan Campuran CSS:

    • Percubaan dengan imej topeng dan mod campuran-campuran.
    • Contoh:

      .image {  
          mask-image: url(mask.png);  
          mix-blend-mode: multiply;  
      }  
    

15. Css Scroll-Snapping:

    • Tatal lancar dengan jenis tatal tatal dan sejajar tatal.
    • Contoh:

     :root {  
         --main-color: #3498db;  
         --font-size: 16px;  
     }  
     h1 {  
         color: var(--main-color);  
         font-size: var(--font-size);  
     }  
    

16. Sifat Logik CSS:

    • Gunakan sifat logik untuk susun atur berbilang arah (margin-inline, padding-block).

17. CSS Houdini:

    • Teroka sifat CSS tersuai dan API lukisan penyemak imbas.

18. Pengoptimuman Prestasi CSS:

    • Petua untuk mengurangkan aliran semula, menggunakan pecutan GPU dan meminimumkan saiz CSS.

19. Alat dan Teknik Penyahpepijatan CSS:

    • Gunakan pelayar DevTools untuk mengenal pasti dan membetulkan isu reka letak.

20. Masa Depan CSS:

    • Pratonton ciri baharu seperti pertanyaan @container, subgrid dan spesifikasi percubaan.

---

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun timbunan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Konsep CSS Lanjutan: Menguasai Teknik Reka Bentuk Web Moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!