Menguasai CSS dalam Panduan CSS Definitif untuk Semua Orang | Bahagian-2

Jadual Kandungan

No.	Section	Link
1	Responsive Design Principles	Link
2	CSS Variables and Custom Properties	Link
3	Animations and Transitions	Link
4	Best Practices and Organization	Link

---

Prinsip Reka Bentuk Responsif

Dalam dunia berbilang peranti hari ini, reka bentuk responsif bukan pilihan – ia penting. Tapak web anda sepatutnya kelihatan hebat sama ada ia dilihat pada telefon pintar atau monitor desktop yang besar.

Pertanyaan Media

Pertanyaan media ialah kuasa besar reka bentuk responsif anda:

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

Unit Responsif

Menggunakan unit relatif menjadikan reka bentuk anda responsif secara semula jadi:

• rem: Berbanding saiz fon elemen akar
• em: Berbanding saiz fon elemen induk
• vw/vh: Berbanding dengan dimensi port pandangan
• %: Berbanding dengan saiz elemen induk

Latihan Amali: Bahagian Perkhidmatan Responsif

Buat bahagian perkhidmatan responsif yang menyesuaikan dengan lancar pada saiz skrin yang berbeza menggunakan pertanyaan media dan unit fleksibel.

HTML:

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

CSS: Mari kita terokai titik putus yang lebih khusus untuk Bahagian Perkhidmatan kami.

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}

Rujukan:

• Dokumen Web MDN - Asas Reka Bentuk Responsif - Pengenalan yang sangat baik kepada konsep reka bentuk responsif, meliputi ruang pandang, titik putus dan reka letak yang fleksibel.
• FreeCodeCamp - Pensijilan Reka Bentuk Web Responsif - Kursus lengkap yang merangkumi prinsip reka bentuk responsif, grid, pertanyaan media dan kebolehcapaian.
• Bolehkah Saya Gunakan - Semak keserasian penyemak imbas untuk ciri reka bentuk responsif seperti pertanyaan media dan flexbox.
• Lembaran Cheat Reka Bentuk Responsif - Merangkumi sifat dan teknik reka bentuk responsif utama dalam format yang mudah dihadam.

---

Pembolehubah CSS dan Sifat Tersuai

Pembolehubah CSS (Sifat Tersuai) membawa fleksibiliti seperti pengaturcaraan kepada helaian gaya anda. Ia menjadikan penyelenggaraan lebih mudah dan membolehkan penggayaan dinamik.

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}

Latihan Praktikal: Pembolehubah CSS untuk Tema dan Kebolehgunaan Semula

    <header>
        <h1>CSS Variables & Custom Properties</h1>
    </header>

    <main>
        <section>





<pre class="brush:php;toolbar:false">/* Define CSS variables (custom properties) in the :root selector */
        :root {
            --primary-color: #3498db; /* Main theme color */
            --secondary-color: #2ecc71; /* Accent color */
            --text-color: #333; /* Default text color */
            --font-size: 16px; /* Base font size */
            --padding: 10px; /* Base padding */
        }

        /* General styles using variables */
        body {
            font-family: Arial, sans-serif;
            font-size: var(--font-size);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            padding: var(--padding);
        }

        .card {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 20px;
            padding: var(--padding);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .card h2 {
            color: var(--primary-color);
        }

        .card p {
            color: var(--text-color);
        }

        button {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 5px;
            padding: calc(var(--padding) / 2) calc(var(--padding) * 2);
            cursor: pointer;
            font-size: var(--font-size);
        }

        button:hover {
            background-color: var(--primary-color);
        }

        /* Dark mode example by overriding variables */
        body.dark-mode {
            --primary-color: #1abc9c;
            --secondary-color: #e74c3c;
            --text-color: #f9f9f9;
            background-color: #333;
        }

Rujukan:

• Dokumen Web MDN - Menggunakan Sifat Tersuai CSS (Pembolehubah) - Penjelasan menyeluruh dan mesra pemula dengan contoh tentang mentakrif, menggunakan dan mengemas kini pembolehubah CSS.
• W3Schools - Pembolehubah CSS - Merangkumi asas pembolehubah CSS dengan contoh kod langsung untuk latihan pantas.
• Trik CSS - Panduan Lengkap untuk Sifat Tersuai - Panduan komprehensif, menampilkan kes penggunaan dunia sebenar dan petua untuk penggunaan pembolehubah lanjutan.
• Freecodecamp - Buku Panduan Penuh Pembolehubah CSS - Meneroka teknik berkuasa seperti kesan melata, pembolehubah berasaskan pertanyaan media dan pengurusan skop.

---

Animasi dan Peralihan

Menambah pergerakan pada tapak web anda mencipta pengalaman pengguna yang menarik. CSS menyediakan dua cara utama untuk mencipta animasi:

Peralihan

Sesuai untuk perubahan keadaan mudah:

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

Animasi Kerangka Utama

Untuk animasi berbilang langkah yang lebih kompleks:

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

Teknik Animasi Lanjutan

Sifat Tersuai CSS dalam Animasi:

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}

Animasi Kerangka Kunci Lanjutan:

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}

Latihan Amali: Kad Interaktif

Buat kad interaktif dengan kesan tuding:

HTML:

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

Rujukan:

• Dokumen Web MDN - Peralihan CSS - Pengenalan yang jelas kepada peralihan CSS, menerangkan cara mencipta kesan lancar apabila menukar gaya.
• Dokumen Web MDN - Animasi CSS - Panduan langkah demi langkah untuk bingkai utama, sifat animasi dan mencipta animasi yang kompleks.
• W3Schools - CSS Transitions - Mesra pemula dengan editor kod langsung untuk mempraktikkan peralihan dan animasi secara interaktif.
• W3Schools - Animasi CSS - Panduan yang mudah diikuti tentang menggunakan bingkai utama dan peralihan untuk menambah animasi pada tapak web.
• Trik CSS - Animasi - Membincangkan animasi responsif, pergerakan yang dikurangkan untuk kebolehaksesan dan penyepaduan pertanyaan media.
• Animate.css - Pustaka CSS popular yang menawarkan animasi pra-bina yang boleh anda tambahkan dengan mudah pada projek anda.

---

Amalan dan Organisasi Terbaik

Seni Bina CSS

• Gunakan konvensyen penamaan yang konsisten
• Susun fail CSS mengikut komponen/ciri
• Pastikan kekhususan rendah jika boleh
• Ulas kod anda dengan berkesan

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

Latihan Praktikal: Amalan Terbaik untuk Seni Bina CSS

<kepala>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Latihan Seni Bina CSS</title>
    <link rel="stylesheet" href="styles/reset.css"> <!-- Menetapkan semula gaya penyemak imbas lalai -->
    <pautan rel="stylesheet" href="styles/layout.css"> <!-- Gaya berkaitan reka letak -->
    <link rel="stylesheet" href="styles/components/header.css"> <!-- Gaya komponen pengepala -->
    <link rel="stylesheet" href="styles/components/card.css"> <!-- Gaya komponen kad -->
    <link rel="stylesheet" href="styles/utilities.css"> <!-- Kelas utiliti untuk pembetulan pantas -->

<badan>
    <pengepala>



<h3>
  
  
  Rujukan:
</h3>

<ul>
<li>
BEM - Pengubahsuai Elemen Blok - Metodologi popular untuk menamakan kelas CSS dan menstruktur gaya anda untuk meningkatkan kebolehgunaan semula dan kebolehselenggaraan.</li>
<li>
SMACSS - Seni Bina Berskala dan Modular untuk CSS - Rangka kerja terperinci untuk menyusun CSS ke dalam kategori logik dan boleh diselenggara.</li>
<li>
Garis Panduan CSS oleh Harry Roberts - Panduan berkualiti tinggi untuk menulis CSS boleh skala, boleh diselenggara dengan struktur fail logik dan konvensyen penamaan.</li>
</ul>


<hr>

<h2>
  
  
  Masa untuk Membina! ?
</h2>

<p>Kini giliran anda untuk mempraktikkan pembelajaran anda! Inilah cabaran anda:</p><ul>
<li>Buat CodePen baharu (Percuma di codepen.io)</li>
<li>Bina contoh dan latihan yang kami bincangkan</li>
<li>
<strong>Kongsi ciptaan anda!</strong> Lepaskan pautan CodePen anda dalam ulasan di bawah</li>
</ul>

<p><strong>Mata Bonus</strong>: Tambahkan sentuhan kreatif anda sendiri pada reka bentuk! Saya sendiri akan menyemak dan membalas setiap CodePen yang dikongsi dalam ulasan.</p>

<p>? <strong>Petua Pro</strong>: Ingat untuk menambah ulasan dalam CSS anda untuk menerangkan pemikiran anda. Ia membantu orang lain belajar daripada kod anda!</p>


<hr>

<h2>
  
  
  Apa Seterusnya? ?
</h2>

<p>Ini ialah Bahagian 2 siri CSS Zero to Hero kami. Kami akan menyelam lebih dalam ke dalam konsep CSS yang lebih menarik dalam siaran akan datang. Untuk memastikan anda tidak terlepas:</p>

<ol>
<li>? <strong>Tanda halaman siaran ini</strong> untuk rujukan pantas apabila anda mengekod</li>
<li>❤️ <strong>Suka artikel ini</strong> jika anda rasa artikel ini membantu (ia juga membantu orang lain menemuinya!)</li>
<li>? <strong>Ikuti saya</strong> untuk bahagian siri seterusnya</li>
</ol>

<h3>
  
  
  Mari Berhubung! ?
</h3>

<p>Adakah anda mencuba latihan? Ada soalan? Kongsi pengalaman anda dalam komen! Saya membalas setiap komen dan suka melihat kemajuan anda.</p>

<p>Jumpa anda di Bahagian 3! Selamat mengekod! ?‍???‍?</p>


          

            
  

            
        </pengepala></badan></pautan></kepala>

Atas ialah kandungan terperinci Menguasai CSS dalam Panduan CSS Definitif untuk Semua Orang | Bahagian-2. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!