Menguasai CSS dalam Panduan CSS Definitif untuk Semua Orang

Mastering CSS in The Definitive CSS Guide for Everyone | Part-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;
    }
}

Salin selepas log masuk

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;
    }
}

Salin selepas log masuk

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;
    }
}

Salin selepas log masuk

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);
}

Salin selepas log masuk

Latihan Praktikal: Pembolehubah CSS untuk Tema dan Kebolehgunaan Semula

<body>
    <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;
        }

Salin selepas log masuk

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;
    }
}

Salin selepas log masuk

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;
    }
}

Salin selepas log masuk

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;
    }
}

Salin selepas log masuk

Animasi Kerangka Kunci Lanjutan:

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

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

Salin selepas log masuk

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;
    }
}

Salin selepas log masuk

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;
    }
}

Salin selepas log masuk

Latihan Praktikal: Amalan Terbaik untuk Seni Bina CSS

<!DOCTYPE html>
<html lang="en">
<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 -->
</head>
<badan>
    <pengepala>



<h3>
  
  
  Rujukan:
</h3>

Salin selepas log masuk

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

Masa untuk Membina! ?

Kini giliran anda untuk mempraktikkan pembelajaran anda! Inilah cabaran anda:

Buat CodePen baharu (Percuma di codepen.io)
Bina contoh dan latihan yang kami bincangkan
Kongsi ciptaan anda! Lepaskan pautan CodePen anda dalam ulasan di bawah

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

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

Apa Seterusnya? ?

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:

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

Mari Berhubung! ?

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

Jumpa anda di Bahagian 3! Selamat mengekod! ?‍???‍?

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!