31 KiB

Raw Blame History Unescape Escape

Projek Terrarium Bahagian 2: Pengenalan kepada CSS

journey
    title Your CSS Styling Journey
    section Foundation
      Link CSS file: 3: Student
      Understand cascade: 4: Student
      Learn inheritance: 4: Student
    section Selectors
      Element targeting: 4: Student
      Class patterns: 5: Student
      ID specificity: 5: Student
    section Layout
      Position elements: 4: Student
      Create containers: 5: Student
      Build terrarium: 5: Student
    section Polish
      Add visual effects: 5: Student
      Responsive design: 5: Student
      Glass reflections: 5: Student

Sketchnote oleh Tomomi Imura

Ingat bagaimana HTML terrarium anda kelihatan agak asas? CSS adalah tempat kita mengubah struktur biasa itu menjadi sesuatu yang menarik secara visual.

Jika HTML seperti membina rangka rumah, maka CSS adalah segala-galanya yang membuatkan ia terasa seperti rumah - warna cat, susunan perabot, pencahayaan, dan bagaimana bilik-bilik disusun. Fikirkan bagaimana Istana Versailles bermula sebagai pondok memburu yang sederhana, tetapi perhatian yang teliti terhadap hiasan dan susun atur mengubahnya menjadi salah satu bangunan paling megah di dunia.

Hari ini, kita akan mengubah terrarium anda daripada berfungsi kepada yang lebih kemas. Anda akan belajar bagaimana meletakkan elemen dengan tepat, membuat susun atur yang responsif kepada pelbagai saiz skrin, dan mencipta daya tarikan visual yang menjadikan laman web menarik.

Menjelang akhir pelajaran ini, anda akan melihat bagaimana gaya CSS yang strategik boleh meningkatkan projek anda dengan ketara. Mari tambahkan gaya pada terrarium anda.

mindmap
  root((CSS Fundamentals))
    Cascade
      Specificity Rules
      Inheritance
      Priority Order
      Conflict Resolution
    Selectors
      Element Tags
      Classes (.class)
      IDs (#id)
      Combinators
    Box Model
      Margin
      Border
      Padding
      Content
    Layout
      Positioning
      Display Types
      Flexbox
      Grid
    Visual Effects
      Colors
      Shadows
      Transitions
      Animations
    Responsive Design
      Media Queries
      Flexible Units
      Viewport Meta
      Mobile First

Kuiz Pra-Kuliah

Kuiz pra-kuliah

Bermula dengan CSS

CSS sering dianggap hanya untuk "mencantikkan sesuatu," tetapi ia mempunyai tujuan yang lebih luas. CSS seperti menjadi pengarah filem - anda mengawal bukan sahaja bagaimana semuanya kelihatan, tetapi bagaimana ia bergerak, bertindak balas terhadap interaksi, dan menyesuaikan diri dengan situasi yang berbeza.

CSS moden sangat berkemampuan. Anda boleh menulis kod yang secara automatik menyesuaikan susun atur untuk telefon, tablet, dan komputer meja. Anda boleh mencipta animasi yang lancar untuk memandu perhatian pengguna ke tempat yang diperlukan. Hasilnya boleh menjadi sangat mengagumkan apabila semuanya berfungsi bersama.

💡 Petua Pro: CSS sentiasa berkembang dengan ciri dan keupayaan baharu. Sentiasa semak CanIUse.com untuk mengesahkan sokongan pelayar untuk ciri CSS baharu sebelum menggunakannya dalam projek pengeluaran.

Apa yang akan kita capai dalam pelajaran ini:

Mencipta reka bentuk visual lengkap untuk terrarium anda menggunakan teknik CSS moden
Meneroka konsep asas seperti cascade, inheritance, dan selector CSS
Melaksanakan strategi kedudukan dan susun atur yang responsif
Membina bekas terrarium menggunakan bentuk dan gaya CSS

Prasyarat

Anda sepatutnya telah menyiapkan struktur HTML untuk terrarium anda dari pelajaran sebelumnya dan bersedia untuk digayakan.

📺 Sumber Video: Tonton video panduan ini

Menyediakan Fail CSS Anda

Sebelum kita mula menggaya, kita perlu menghubungkan CSS ke HTML kita. Sambungan ini memberitahu pelayar di mana untuk mencari arahan gaya untuk terrarium kita.

Dalam folder terrarium anda, buat fail baru bernama style.css, kemudian pautkannya dalam bahagian <head> dokumen HTML anda:

<link rel="stylesheet" href="./style.css" />

Apa yang dilakukan oleh kod ini:

Mewujudkan sambungan antara fail HTML dan CSS anda
Memberitahu pelayar untuk memuatkan dan menggunakan gaya dari style.css
Menggunakan atribut rel="stylesheet" untuk menentukan ini adalah fail CSS
Merujuk laluan fail dengan href="./style.css"

Memahami CSS Cascade

Pernah tertanya-tanya mengapa CSS dipanggil "Cascading" Style Sheets? Gaya mengalir seperti air terjun, dan kadang-kadang mereka bertentangan antara satu sama lain.

Fikirkan bagaimana struktur perintah tentera berfungsi - perintah umum mungkin mengatakan "semua tentera memakai hijau," tetapi perintah khusus kepada unit anda mungkin mengatakan "pakai pakaian biru untuk upacara." Arahan yang lebih spesifik akan diutamakan. CSS mengikuti logik yang serupa, dan memahami hierarki ini menjadikan penyahpepijatan lebih mudah diurus.

Mencuba Keutamaan Cascade

Mari kita lihat cascade dalam tindakan dengan mencipta konflik gaya. Pertama, tambahkan gaya inline pada tag <h1> anda:

<h1 style="color: red">My Terrarium</h1>

Apa yang dilakukan oleh kod ini:

Menerapkan warna merah secara langsung pada elemen <h1> menggunakan gaya inline
Menggunakan atribut style untuk menyematkan CSS secara langsung dalam HTML
Mencipta peraturan gaya keutamaan tertinggi untuk elemen tertentu ini

Seterusnya, tambahkan peraturan ini ke fail style.css anda:

h1 {
  color: blue;
}

Dalam kod di atas, kita telah:

Menentukan peraturan CSS yang menyasarkan semua elemen <h1>
Menetapkan warna teks kepada biru menggunakan stylesheet luaran
Mencipta peraturan keutamaan yang lebih rendah berbanding gaya inline

✅ Semak Pengetahuan: Warna apa yang dipaparkan dalam aplikasi web anda? Mengapa warna itu menang? Bolehkah anda memikirkan senario di mana anda mungkin mahu mengatasi gaya?

flowchart TD
    A["Browser encounters h1 element"] --> B{"Check for inline styles"}
    B -->|Found| C["style='color: red'"] 
    B -->|None| D{"Check for ID rules"}
    C --> E["Apply red color (1000 points)"]
    D -->|Found| F["#heading { color: green }"]
    D -->|None| G{"Check for class rules"}
    F --> H["Apply green color (100 points)"]
    G -->|Found| I[".title { color: blue }"]
    G -->|None| J{"Check element rules"}
    I --> K["Apply blue color (10 points)"]
    J -->|Found| L["h1 { color: purple }"]
    J -->|None| M["Use browser default"]
    L --> N["Apply purple color (1 point)"]
    
    style C fill:#ff6b6b
    style F fill:#51cf66
    style I fill:#339af0
    style L fill:#9775fa

💡 Susunan Keutamaan CSS (tertinggi ke terendah):

Gaya inline (atribut style)

ID (#myId)

Kelas (.myClass) dan atribut

Selector elemen (h1, div, p)

Tetapan lalai pelayar

Tindakan Pewarisan CSS

Pewarisan CSS berfungsi seperti genetik - elemen mewarisi sifat tertentu daripada elemen induknya. Jika anda menetapkan keluarga fon pada elemen body, semua teks di dalamnya secara automatik menggunakan fon yang sama. Ia serupa dengan bagaimana ciri-ciri fizikal keluarga diwarisi dari generasi ke generasi tanpa perlu ditentukan untuk setiap individu.

Namun, tidak semua perkara diwarisi. Gaya teks seperti fon dan warna diwarisi, tetapi sifat susun atur seperti margin dan sempadan tidak. Sama seperti anak-anak mungkin mewarisi ciri fizikal tetapi tidak pilihan fesyen ibu bapa mereka.

Memerhati Pewarisan Fon

Mari lihat pewarisan dalam tindakan dengan menetapkan keluarga fon pada elemen <body>:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Memecahkan apa yang berlaku di sini:

Menetapkan keluarga fon untuk seluruh halaman dengan menyasarkan elemen <body>
Menggunakan susunan fon dengan pilihan sandaran untuk keserasian pelayar yang lebih baik
Menerapkan fon sistem moden yang kelihatan hebat di pelbagai sistem operasi
Memastikan semua elemen anak mewarisi fon ini kecuali secara khusus diatasi

Buka alat pembangun pelayar anda (F12), navigasi ke tab Elemen, dan periksa elemen <h1> anda. Anda akan melihat bahawa ia mewarisi keluarga fon dari body:

✅ Masa Eksperimen: Cuba tetapkan sifat lain yang boleh diwarisi pada <body> seperti color, line-height, atau text-align. Apa yang berlaku pada tajuk dan elemen lain anda?

📝 Sifat yang Boleh Diwarisi Termasuk: color, font-family, font-size, line-height, text-align, visibility

Sifat yang Tidak Boleh Diwarisi Termasuk: margin, padding, border, width, height, position

🔄 Semakan Pedagogi

Pemahaman Asas CSS: Sebelum bergerak ke selector, pastikan anda boleh:

✅ Jelaskan perbezaan antara cascade dan pewarisan
✅ Ramalkan gaya mana yang akan menang dalam konflik kekhususan
✅ Kenal pasti sifat mana yang diwarisi daripada elemen induk
✅ Sambungkan fail CSS ke HTML dengan betul

Ujian Pantas: Jika anda mempunyai gaya ini, warna apa yang akan dipaparkan pada <h1> di dalam <div class="special">?

div { color: blue; }
.special { color: green; }
h1 { color: red; }

Jawapan: Merah (selector elemen secara langsung menyasarkan h1)

Menguasai Selector CSS

Selector CSS adalah cara anda menyasarkan elemen tertentu untuk digayakan. Ia berfungsi seperti memberikan arahan yang tepat - bukannya mengatakan "rumah itu," anda mungkin mengatakan "rumah biru dengan pintu merah di Jalan Maple."

CSS menyediakan pelbagai cara untuk menjadi spesifik, dan memilih selector yang betul adalah seperti memilih alat yang sesuai untuk tugas tersebut. Kadang-kadang anda perlu menggaya setiap pintu di kawasan kejiranan, dan kadang-kadang hanya satu pintu tertentu.

Selector Elemen (Tag)

Selector elemen menyasarkan elemen HTML berdasarkan nama tag mereka. Ia sesuai untuk menetapkan gaya asas yang digunakan secara meluas di seluruh halaman anda:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: #3a241d;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

Memahami gaya ini:

Menetapkan tipografi yang konsisten di seluruh halaman dengan selector body
Menghapuskan margin dan padding lalai pelayar untuk kawalan yang lebih baik
Menggayakan semua elemen tajuk dengan warna, penjajaran, dan jarak
Menggunakan unit rem untuk saiz fon yang boleh diskalakan dan boleh diakses

Walaupun selector elemen berfungsi dengan baik untuk gaya umum, anda memerlukan selector yang lebih spesifik untuk menggaya komponen individu seperti tumbuhan dalam terrarium anda.

Selector ID untuk Elemen Unik

Selector ID menggunakan simbol # dan menyasarkan elemen dengan atribut id tertentu. Oleh kerana ID mesti unik pada satu halaman, ia sesuai untuk menggaya elemen individu yang istimewa seperti bekas tumbuhan kiri dan kanan kita.

Mari kita cipta gaya untuk bekas sisi terrarium kita di mana tumbuhan akan diletakkan:

#left-container {
  background-color: #f5f5f5;
  width: 15%;
  left: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#right-container {
  background-color: #f5f5f5;
  width: 15%;
  right: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

Apa yang dicapai oleh kod ini:

Meletakkan bekas di tepi kiri dan kanan menggunakan kedudukan absolute
Menggunakan unit vh (ketinggian viewport) untuk ketinggian responsif yang menyesuaikan diri dengan saiz skrin
Menerapkan box-sizing: border-box supaya padding termasuk dalam jumlah lebar
Menghapuskan unit px yang tidak diperlukan dari nilai sifar untuk kod yang lebih bersih
Menetapkan warna latar belakang yang lembut yang lebih mudah pada mata daripada kelabu terang

✅ Cabaran Kualiti Kod: Perhatikan bagaimana CSS ini melanggar prinsip DRY (Don't Repeat Yourself). Bolehkah anda merombaknya menggunakan ID dan kelas?

Pendekatan yang Diperbaiki:

<div id="left-container" class="container"></div>
<div id="right-container" class="container"></div>

.container {
  background-color: #f5f5f5;
  width: 15%;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#left-container {
  left: 0;
}

#right-container {
  right: 0;
}

Selector Kelas untuk Gaya Boleh Digunakan Semula

Selector kelas menggunakan simbol . dan sesuai apabila anda ingin menerapkan gaya yang sama pada pelbagai elemen. Tidak seperti ID, kelas boleh digunakan semula di seluruh HTML anda, menjadikannya ideal untuk corak gaya yang konsisten.

Dalam terrarium kita, setiap tumbuhan memerlukan gaya yang serupa tetapi juga memerlukan kedudukan individu. Kita akan menggunakan gabungan kelas untuk gaya bersama dan ID untuk kedudukan unik.

Berikut adalah struktur HTML untuk setiap tumbuhan:

<div class="plant-holder">
  <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.ms.png" />
</div>

Elemen utama dijelaskan:

Menggunakan class="plant-holder" untuk gaya bekas yang konsisten di semua tumbuhan
Menerapkan class="plant" untuk gaya dan tingkah laku imej bersama
Termasuk id="plant1" unik untuk kedudukan individu dan interaksi JavaScript
Menyediakan teks alt deskriptif untuk kebolehaksesan pembaca skrin

Sekarang tambahkan gaya ini ke fail style.css anda:

.plant-holder {
  position: relative;
  height: 13%;
  left: -0.6rem;
}

.plant {
  position: absolute;
  max-width: 150%;
  max-height: 150%;
  z-index: 2;
  transition: transform 0.3s ease;
}

.plant:hover {
  transform: scale(1.05);
}

Memecahkan gaya ini:

Mencipta kedudukan relatif untuk pemegang tumbuhan untuk mewujudkan konteks kedudukan
Menetapkan setiap pemegang tumbuhan kepada ketinggian 13%, memastikan semua tumbuhan muat secara menegak tanpa menatal
Mengalihkan pemegang sedikit ke kiri untuk lebih memusatkan tumbuhan dalam bekas mereka
Membolehkan tumbuhan berskala responsif dengan sifat max-width dan max-height
Menggunakan z-index untuk melapisi tumbuhan di atas elemen lain dalam terrarium
Menambah kesan hover halus dengan peralihan CSS untuk interaksi pengguna yang lebih baik

✅ Pemikiran Kritikal: Mengapa kita memerlukan kedua-dua selector .plant-holder dan .plant? Apa yang akan berlaku jika kita cuba menggunakan hanya satu?

💡 Corak Reka Bentuk: Bekas (.plant-holder) mengawal susun atur dan kedudukan, manakala kandungan (.plant) mengawal penampilan dan penskalaan. Pemisahan ini menjadikan kod lebih mudah diselenggara dan fleksibel.

Memahami Kedudukan CSS

Kedudukan CSS seperti menjadi pengarah pentas untuk sebuah drama - anda mengarahkan di mana setiap pelakon berdiri dan bagaimana mereka bergerak di sekitar pentas. Sesetengah pelakon mengikuti formasi standard, manakala yang lain memerlukan kedudukan tertentu untuk kesan dramatik.

Setelah anda memahami kedudukan, banyak cabaran susun atur menjadi lebih mudah diurus. Perlu bar navigasi yang kekal di bahagian atas semasa pengguna menatal? Kedudukan mengendalikan itu. Mahu tooltip yang muncul di lokasi tertentu? Itu juga kedudukan.

Lima Nilai Kedudukan

quadrantChart
    title CSS Positioning Strategy
    x-axis Document Flow --> Removed from Flow
    y-axis Static Position --> Precise Control
    quadrant-1 Absolute
    quadrant-2 Fixed
    quadrant-3 Static
    quadrant-4 Sticky
    
    Static: [0.2, 0.2]
    Relative: [0.3, 0.6]
    Absolute: [0.8, 0.8]
    Fixed: [0.9, 0.7]
    Sticky: [0.5, 0.9]

Nilai Kedudukan	Tingkah Laku	Kes Penggunaan
`static`	Aliran lalai, mengabaikan top/left/right/bottom	Susun atur dokumen biasa
`relative`	Diletakkan relatif kepada kedudukan normalnya	Pelarasan kecil, mewujudkan konteks kedudukan
`absolute`	Diletakkan relatif kepada nenek moyang yang diposisikan terdekat	Penempatan tepat, overlay
`fixed`	Diletakkan relatif kepada viewport	Bar navigasi, elemen terapung
`sticky`	Beralih antara relative dan fixed berdasarkan tatalan	Header yang melekat semasa menatal

Kedudukan dalam Terrarium Kita

Terrarium kita menggunakan gabungan strategik jenis kedudukan untuk mencipta susun atur yang diingini:

/* Container positioning */
.container {
  position: absolute; /* Removes from normal flow */
  /* ... other styles ... */
}

/* Plant holder positioning */
.plant-holder {
  position: relative; /* Creates positioning context */
  /* ... other styles ... */
}

/* Plant positioning */
.plant {
  position: absolute; /* Allows precise placement within holder */
  /* ... other styles ... */
}

Memahami strategi kedudukan:

Bekas absolute dikeluarkan dari aliran dokumen biasa dan dipasangkan ke tepi skrin
Pemegang tumbuhan relatif mencipta konteks kedudukan sambil kekal dalam aliran dokumen
Tumbuhan absolute boleh diletakkan dengan tepat dalam bekas relatif mereka
Gabungan ini membolehkan tumbuhan disusun secara menegak sambil boleh diposisikan secara individu

🎯 Mengapa Ini Penting: Elemen plant memerlukan kedudukan absolute untuk menjadi boleh diseret dalam pelajaran seterusnya. Kedudukan absolute mengeluarkan mereka dari aliran susun atur biasa, menjadikan interaksi seret dan lepas boleh dilakukan.

✅ Masa Eksperimen: Cuba ubah nilai kedudukan dan perhatikan hasilnya:

Apa yang berlaku jika anda menukar .container daripada absolute kepada relative?
Bagaimana susun atur berubah jika .plant-holder menggunakan absolute dan bukannya relative?
Apa yang berlaku apabila anda menukar .plant kepada kedudukan relative?

🔄 Semakan Pedagogi

Penguasaan Kedudukan CSS: Berhenti sejenak untuk mengesahkan pemahaman anda:

✅ Bolehkah anda menerangkan mengapa tumbuhan memerlukan kedudukan absolute untuk seret dan lepas?
✅ Adakah anda memahami bagaimana bekas relative mencipta konteks kedudukan?
✅ Mengapa bekas sisi menggunakan kedudukan absolute?
✅ Apa yang akan berlaku jika anda menghapuskan deklarasi kedudukan sepenuhnya?

Hubungan Dunia Sebenar: Fikirkan bagaimana kedudukan CSS mencerminkan susun atur dunia sebenar:

Static: Buku di rak (susunan semula jadi)
Relative: Menggerakkan buku sedikit tetapi mengekalkan tempatnya
Absolute: Meletakkan penanda buku pada nombor halaman tertentu
Fixed: Nota lekat yang kekal kelihatan semasa anda membalik halaman

Membina Terrarium dengan CSS

Sekarang kita akan membina balang kaca menggunakan CSS sahaja - tanpa imej atau perisian grafik.

Mencipta kaca yang kelihatan realistik, bayang-bayang, dan kesan kedalaman menggunakan kedudukan dan ketelusan menunjukkan keupayaan visual CSS. Teknik ini mencerminkan bagaimana arkitek dalam gerakan Bauhaus menggunakan bentuk geometri mudah untuk mencipta struktur yang kompleks dan indah. Setelah anda memahami prinsip ini, anda akan mengenali teknik CSS di sebalik banyak reka bentuk web.

flowchart LR
    A[Jar Top] --> E[Complete Terrarium]
    B[Jar Walls] --> E
    C[Dirt Layer] --> E
    D[Jar Bottom] --> E
    F[Glass Effects] --> E
    
    A1["50% width<br/>5% height<br/>Top position"] --> A
    B1["60% width<br/>80% height<br/>Rounded corners<br/>0.5 opacity"] --> B
    C1["60% width<br/>5% height<br/>Dark brown<br/>Bottom layer"] --> C
    D1["50% width<br/>1% height<br/>Bottom position"] --> D
    F1["Subtle shadows<br/>Transparency<br/>Z-index layering"] --> F
    
    style E fill:#d1e1df,stroke:#3a241d
    style A fill:#e8f5e8
    style B fill:#e8f5e8
    style C fill:#8B4513
    style D fill:#e8f5e8

Membina Komponen Balang Kaca

Mari kita bina balang terrarium secara berperingkat. Setiap bahagian menggunakan kedudukan absolute dan saiz berdasarkan peratusan untuk reka bentuk responsif:

.jar-walls {
  height: 80%;
  width: 60%;
  background: #d1e1df;
  border-radius: 1rem;
  position: absolute;
  bottom: 0.5%;
  left: 20%;
  opacity: 0.5;
  z-index: 1;
  box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}

.jar-top {
  width: 50%;
  height: 5%;
  background: #d1e1df;
  position: absolute;
  bottom: 80.5%;
  left: 25%;
  opacity: 0.7;
  z-index: 1;
  border-radius: 0.5rem 0.5rem 0 0;
}

.jar-bottom {
  width: 50%;
  height: 1%;
  background: #d1e1df;
  position: absolute;
  bottom: 0;
  left: 25%;
  opacity: 0.7;
  border-radius: 0 0 0.5rem 0.5rem;
}

.dirt {
  width: 60%;
  height: 5%;
  background: #3a241d;
  position: absolute;
  border-radius: 0 0 1rem 1rem;
  bottom: 1%;
  left: 20%;
  opacity: 0.7;
  z-index: -1;
}

Memahami pembinaan terrarium:

Menggunakan dimensi berdasarkan peratusan untuk penskalaan responsif di semua saiz skrin
Meletakkan elemen secara absolute untuk menyusun dan menyelaraskannya dengan tepat
Mengaplikasikan nilai ketelusan yang berbeza untuk mencipta kesan ketelusan kaca
Melaksanakan lapisan z-index supaya tumbuhan kelihatan di dalam balang
Menambah bayang-bayang kotak halus dan border-radius yang diperhalusi untuk penampilan yang lebih realistik

Reka Bentuk Responsif dengan Peratusan

Perhatikan bagaimana semua dimensi menggunakan peratusan dan bukannya nilai piksel tetap:

Mengapa ini penting:

Memastikan terrarium berskala secara berkadar pada mana-mana saiz skrin
Menjaga hubungan visual antara komponen balang
Memberikan pengalaman yang konsisten dari telefon bimbit ke monitor desktop besar
Membolehkan reka bentuk menyesuaikan tanpa merosakkan susun atur visual

Unit CSS dalam Tindakan

Kami menggunakan unit rem untuk border-radius, yang berskala relatif kepada saiz fon akar. Ini mencipta reka bentuk yang lebih mudah diakses yang menghormati keutamaan fon pengguna. Ketahui lebih lanjut tentang unit relatif CSS dalam spesifikasi rasmi.

✅ Eksperimen Visual: Cuba ubah nilai ini dan perhatikan kesannya:

Tukar ketelusan balang dari 0.5 ke 0.8 – bagaimana ini mempengaruhi penampilan kaca?
Laraskan warna tanah dari #3a241d ke #8B4513 – apakah kesan visualnya?
Ubah z-index tanah kepada 2 – apa yang berlaku pada lapisan?

🔄 Semakan Pedagogi

Pemahaman Reka Bentuk Visual CSS: Sahkan pemahaman anda tentang visual CSS:

✅ Bagaimana dimensi berdasarkan peratusan mencipta reka bentuk responsif?
✅ Mengapa ketelusan mencipta kesan ketelusan kaca?
✅ Apakah peranan z-index dalam melapisi elemen?
✅ Bagaimana nilai border-radius mencipta bentuk balang?

Prinsip Reka Bentuk: Perhatikan bagaimana kita membina visual kompleks daripada bentuk mudah:

Segi empat → Segi empat bulat → Komponen balang
Warna rata → Ketelusan → Kesan kaca
Elemen individu → Komposisi berlapis → Penampilan 3D

Cabaran Ejen GitHub Copilot 🚀

Gunakan mod Ejen untuk melengkapkan cabaran berikut:

Penerangan: Cipta animasi CSS yang membuatkan tumbuhan terrarium bergoyang perlahan-lahan, mensimulasikan kesan angin semula jadi. Ini akan membantu anda berlatih animasi CSS, transformasi, dan keyframe sambil meningkatkan daya tarikan visual terrarium anda.

Arahan: Tambahkan animasi keyframe CSS untuk membuat tumbuhan dalam terrarium bergoyang perlahan dari sisi ke sisi. Cipta animasi bergoyang yang memutar setiap tumbuhan sedikit (2-3 darjah) ke kiri dan kanan dengan durasi 3-4 saat, dan aplikasikan pada kelas .plant. Pastikan animasi berulang tanpa henti dan mempunyai fungsi easing untuk pergerakan semula jadi.

Ketahui lebih lanjut tentang mod ejen di sini.

🚀 Cabaran: Menambah Refleksi Kaca

Bersedia untuk meningkatkan terrarium anda dengan refleksi kaca yang realistik? Teknik ini akan menambah kedalaman dan realisme pada reka bentuk.

Anda akan mencipta sorotan halus yang mensimulasikan bagaimana cahaya memantul dari permukaan kaca. Pendekatan ini serupa dengan bagaimana pelukis Renaissance seperti Jan van Eyck menggunakan cahaya dan pantulan untuk membuat kaca yang dilukis kelihatan tiga dimensi. Berikut adalah apa yang anda sasarkan:

Cabaran anda:

Cipta bentuk bujur putih atau warna terang untuk refleksi kaca
Letakkan mereka secara strategik di sebelah kiri balang
Aplikasikan kesan ketelusan dan kabur yang sesuai untuk pantulan cahaya yang realistik
Gunakan border-radius untuk mencipta bentuk organik seperti gelembung
Eksperimen dengan gradien atau bayang-bayang kotak untuk realisme yang lebih baik

Kuiz Selepas Kuliah

Kuiz selepas kuliah

Luaskan Pengetahuan CSS Anda

CSS mungkin terasa kompleks pada awalnya, tetapi memahami konsep asas ini memberikan asas yang kukuh untuk teknik yang lebih maju.

Bidang pembelajaran CSS seterusnya:

Flexbox - memudahkan penjajaran dan pengagihan elemen
CSS Grid - menyediakan alat yang kuat untuk mencipta susun atur kompleks
CSS Variables - mengurangkan pengulangan dan meningkatkan kebolehselenggaraan
Reka bentuk responsif - memastikan laman web berfungsi dengan baik di pelbagai saiz skrin

Sumber Pembelajaran Interaktif

Amalkan konsep ini dengan permainan interaktif yang menyeronokkan:

🐸 Flexbox Froggy - Kuasai Flexbox melalui cabaran yang menyeronokkan
🌱 Grid Garden - Belajar CSS Grid dengan menanam lobak maya
🎯 CSS Battle - Uji kemahiran CSS anda dengan cabaran pengkodan

Pembelajaran Tambahan

Untuk asas CSS yang komprehensif, lengkapkan modul Microsoft Learn ini: Gayakan aplikasi HTML anda dengan CSS

⚡ Apa yang Anda Boleh Lakukan dalam 5 Minit Seterusnya

Buka DevTools dan periksa gaya CSS di mana-mana laman web menggunakan panel Elemen
Cipta fail CSS ringkas dan pautkan ke halaman HTML
Cuba tukar warna menggunakan kaedah yang berbeza: hex, RGB, dan warna bernama
Amalkan model kotak dengan menambah padding dan margin pada div

🎯 Apa yang Anda Boleh Capai Dalam Satu Jam

Lengkapkan kuiz selepas pelajaran dan semak asas CSS
Gayakan halaman HTML anda dengan fon, warna, dan jarak
Cipta susun atur ringkas menggunakan flexbox atau grid
Eksperimen dengan peralihan CSS untuk kesan yang lancar
Amalkan reka bentuk responsif dengan media queries

📅 Pengembaraan CSS Anda Selama Seminggu

Lengkapkan tugasan gaya terrarium dengan kreativiti
Kuasai CSS Grid dengan membina susun atur galeri foto
Belajar animasi CSS untuk menghidupkan reka bentuk anda
Terokai preprocessor CSS seperti Sass atau Less
Kajian prinsip reka bentuk dan aplikasikan pada CSS anda
Analisis dan cipta semula reka bentuk menarik yang anda temui dalam talian

🌟 Penguasaan Reka Bentuk Anda Selama Sebulan

Bina sistem reka bentuk laman web responsif yang lengkap
Belajar CSS-in-JS atau rangka kerja utiliti seperti Tailwind
Sumbang kepada projek sumber terbuka dengan penambahbaikan CSS
Kuasai konsep CSS lanjutan seperti sifat tersuai CSS dan containment
Cipta perpustakaan komponen boleh guna semula dengan CSS modular
Bimbing orang lain yang belajar CSS dan kongsi pengetahuan reka bentuk

🎯 Garis Masa Penguasaan CSS Anda

timeline
    title CSS Learning Progression
    
    section Foundation (10 minutes)
        File Connection: Link CSS to HTML
                       : Understand cascade rules
                       : Learn inheritance basics
        
    section Selectors (15 minutes)
        Targeting Elements: Element selectors
                          : Class patterns
                          : ID specificity
                          : Combinators
        
    section Box Model (20 minutes)
        Layout Fundamentals: Margin and padding
                           : Border properties
                           : Content sizing
                           : Box-sizing behavior
        
    section Positioning (25 minutes)
        Element Placement: Static vs relative
                         : Absolute positioning
                         : Z-index layering
                         : Responsive units
        
    section Visual Design (30 minutes)
        Styling Mastery: Colors and opacity
                       : Shadows and effects
                       : Transitions
                       : Transform properties
        
    section Responsive Design (45 minutes)
        Multi-Device Support: Media queries
                            : Flexible layouts
                            : Mobile-first approach
                            : Viewport optimization
        
    section Advanced Techniques (1 week)
        Modern CSS: Flexbox layouts
                  : CSS Grid systems
                  : Custom properties
                  : Animation keyframes
        
    section Professional Skills (1 month)
        CSS Architecture: Component patterns
                        : Maintainable code
                        : Performance optimization
                        : Cross-browser compatibility

🛠️ Ringkasan Alat CSS Anda

Selepas melengkapkan pelajaran ini, anda kini mempunyai:

Pemahaman Cascade: Bagaimana gaya diwarisi dan menimpa satu sama lain
Penguasaan Pemilih: Penargetan tepat dengan elemen, kelas, dan ID
Kemahiran Kedudukan: Penempatan dan pelapisan elemen yang strategik
Reka Bentuk Visual: Mencipta kesan kaca, bayang-bayang, dan ketelusan
Teknik Responsif: Susun atur berdasarkan peratusan yang menyesuaikan dengan mana-mana skrin
Organisasi Kod: Struktur CSS yang bersih dan boleh diselenggara
Amalan Moden: Menggunakan unit relatif dan corak reka bentuk yang boleh diakses

Langkah Seterusnya: Terrarium anda kini mempunyai struktur (HTML) dan gaya (CSS). Pelajaran terakhir akan menambah interaktiviti dengan JavaScript!

Tugasan

Refaktoring CSS

Penafian:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.

31 KiB Raw Blame History Unescape Escape

Projek Terrarium Bahagian 2: Pengenalan kepada CSS

Kuiz Pra-Kuliah

Bermula dengan CSS

Prasyarat

Menyediakan Fail CSS Anda

Memahami CSS Cascade

Mencuba Keutamaan Cascade

Tindakan Pewarisan CSS

Memerhati Pewarisan Fon

🔄 Semakan Pedagogi

Menguasai Selector CSS

Selector Elemen (Tag)

Selector ID untuk Elemen Unik

Selector Kelas untuk Gaya Boleh Digunakan Semula

Memahami Kedudukan CSS

Lima Nilai Kedudukan

Kedudukan dalam Terrarium Kita

🔄 Semakan Pedagogi

Membina Terrarium dengan CSS

Membina Komponen Balang Kaca

Reka Bentuk Responsif dengan Peratusan

Unit CSS dalam Tindakan

🔄 Semakan Pedagogi

Cabaran Ejen GitHub Copilot 🚀

🚀 Cabaran: Menambah Refleksi Kaca

Kuiz Selepas Kuliah

Luaskan Pengetahuan CSS Anda

Sumber Pembelajaran Interaktif

Pembelajaran Tambahan

⚡ Apa yang Anda Boleh Lakukan dalam 5 Minit Seterusnya

🎯 Apa yang Anda Boleh Capai Dalam Satu Jam

📅 Pengembaraan CSS Anda Selama Seminggu

🌟 Penguasaan Reka Bentuk Anda Selama Sebulan

🎯 Garis Masa Penguasaan CSS Anda

🛠️ Ringkasan Alat CSS Anda

Tugasan

31 KiB

Raw Blame History Unescape Escape