perkenalan:
Mengutip kutipan dari sebuah buku: "Ketika saya pertama kali belajar bahasa Mandarin, guru saya Lao Wang memberi saya kamus bahasa Mandarin-Inggris, buku tata bahasa Mandarin, dan tutorial pemula. Namun, dia akan melakukannya. Buku-buku itu ditempatkan di keranjang buku dan tidak akan digunakan sampai minggu depan. Selama minggu pertama, dia hanya mengajari saya untuk mendengarkan dan menghafal beberapa frasa, dan kemudian dia ingin saya belajar mengulangi beberapa di antaranya restoran? ". "Tolong bawakan saya nasi." "Berapa harga baju ini? ”. Selama minggu itu, saya harus menerima pengetahuan, struktur kalimat, pengucapan dan tata bahasa tanpa syarat. Namun, pada hari Jumat saya sebenarnya bisa pergi ke restoran Cina, memesan semangkuk nasi dan membayar tagihan semua frasa sederhana memberi saya tata bahasa dan kosa kata yang cukup untuk melakukan ini.
Entah sejak kapan, CSS mulai dianggap serius oleh masyarakat China. Banyak orang mulai belajar CSS, tapi tidak tahu harus mulai dari mana, jadi artikel ini ditulis untuk para pemula yang ingin mengajari mereka tentang CSS.
1. Pembelajaran CSS berfokus pada metode!
Sama halnya ketika belajar apa pun, dari SD, SMP, hingga perguruan tinggi, selain belajar ilmu, kamu juga perlu belajar metode!
Jika Anda ingin menguasai CSS, Anda harus belajar HTML terlebih dahulu. Saya mulai belajar dari awal dan menghabiskan waktu sebulan untuk mempelajari HTML. Saya tidak memiliki guru, jadi buku adalah satu-satunya guru saya, dan saya tidak memiliki akses ke Internet! Sebulan kemudian, saya mulai belajar CSS. Buku CSS pertama yang saya baca adalah "CSS Web Style Design". , dan kemudian diubah menjadi "Ensiklopedia Referensi HTML". Buku ini adalah buku referensi reguler untuk desainer halaman web! Alasan saya mengganti buku ini untuk belajar CSS adalah karena sebagian di dalamnya adalah CSS, dan menjadi buku pencerahan CSS saya. Setelah membaca beberapa paragraf, saya merasa tutorial yang ditulis oleh orang asing sangat terorganisir, mulai dari yang dangkal hingga yang lebih dalam, dan menuntun Anda maju selangkah demi selangkah, sehingga Anda memahami apa yang mereka bicarakan, tidak seperti buku-buku dalam negeri yang memilikinya. kedalaman yang berbeda dan kurangnya organisasi, seolah-olah dia takut Anda tidak tahu bahwa dia sangat berpengetahuan! Sama seperti buku "CSS Web Style Design" yang disebutkan sebelumnya, saya membacanya saat itu. Sebagai pemula di bidang CSS, saya benar-benar tidak mengerti apa yang dibicarakannya!
Mari kita bahas detail proses pembelajarannya, karena sebuah style tidak dapat dipisahkan dari halaman HTML. Jika HTML tidak digabungkan dengan style, maka CSS akan kehilangan makna keberadaannya. Oleh karena itu, buku ini biasanya akan memberikan contoh dan kemudian membiarkan Anda menguji efeknya di komputer. Hal ini karena penulis ingin Anda memiliki gambaran awal tentang style sheet CSS dan memberi tahu Anda apa yang dapat dilakukan CSS. Sebuah contoh kecil: "Meskipun seekor burung pipit kecil, ia memiliki kelima organ dalam." Anda mungkin tidak memahami arti sebenarnya dari setiap pernyataan. Namun anda bisa mengingat pola contohnya dan menggunakannya terus menerus dalam latihan kedepannya. Proses penggunaan terus menerus adalah proses menghafal terus menerus, sehingga anda tidak bisa santai dan selalu berpikir bahwa ingatan anda kurang baik, padahal tidak. Tidak peduli apakah Anda menunggangi seekor lembu atau kuda yang menempuh jarak ribuan mil. Tidak peduli apa pun yang terjadi, selama Anda memiliki ketekunan, Anda pasti akan mencapai akhir.
Saat membaca sebuah buku, secara umum, Anda harus membaca keseluruhan buku untuk pertama kalinya. Jika Anda tidak mengerti, Anda harus terus membaca, Anda mungkin menemukan jawaban atas pertanyaan itu. Setelah membacanya, Anda akan mendapat kesan umum, tapi pasti banyak hal yang belum Anda pahami.
Untuk kedua kalinya, Anda harus membuat catatan belajar saat membaca. Tuliskan bagian-bagian yang menurut Anda merupakan poin-poin penting. Tulis juga bagian-bagian yang menurut Anda memiliki pertanyaan. Teruslah membaca dengan pertanyaan , Anda dapat memposting postingan di BBS. Masih banyak orang yang bermaksud baik. Berikut ini pengingatnya: "Anda harus belajar cara bertanya!" Anda harus menggunakan komputer untuk mempraktikkan contoh-contoh di buku. Yang paling membingungkan Anda adalah: "Pertama, Anda tidak dapat mengingatnya, dan kedua, Anda salah memahami konsepnya. (Ini mungkin karena konsepnya). buku tidak diterjemahkan dengan baik, dan yang kedua adalah pemahaman Anda salah." )", untuk yang pertama, Anda harus membangun kepercayaan diri, bertahan dan bertahan. Ketika Anda mencapai akhir, Anda akan menemukan bahwa segala sesuatunya adalah hal yang biasa. Karena jika Anda bekerja keras, Anda akan dihargai dan membuahkan hasil.
Banyak juga yang sudah menontonnya, tapi belum ada kemajuan. Saya analisa alasan utamanya sebagai berikut:
Alasan 1: Tekanannya tidak cukup, karena banyak orang, seperti seniman, mempelajari CSS karena melihat orang lain mempelajarinya, jadi jika mereka tidak mempelajarinya, mereka tidak akan mendapat keuntungan! Tekanan seperti ini sangat kecil. Jika tidak belajar dengan baik, Anda akan tetap memiliki pekerjaan sebagai seniman.
Alasan kedua: Ini hanya studi paruh waktu, dan hanya untuk bersenang-senang, karena Anda tidak harus mencari nafkah dengan teknologi ini.
Alasan ketiga: Metodenya salah. Beberapa orang hanya menonton tutorial, tetapi mereka tidak melakukannya. Saya dulu terlalu banyak menonton dan melakukan terlalu sedikit, jadi hanya dengan latihan Anda dapat menerapkan hal-hal teoretis.
2. Kuasai empat tahapan pembelajaran CSS
Pernah saya bertanya kepada seorang netizen, apakah belajar CSS itu sulit?
Dia berkata, “Tidak sulit.” Saya bertanya, “Sudah berapa lama kamu belajar?” Dia berkata: "Baru belajar". Faktanya, apa yang dia katakan itu benar! Jika ada yang bertanya kepada saya apakah belajar CSS itu sulit? Saya akan berkata: "Sulit!" Mengapa saya mengatakan itu sulit?
Pembelajaran CSS dapat dibagi menjadi beberapa tahapan sebagai berikut:
Tahap 1: Halaman dapat dibuat tanpa memikirkan masalah kompatibilitas browser, tetapi halaman tersebut ditulis dengan mode TABLE DIV di mana-mana.
Tahap 2: Masalah kompatibilitas sudah dipikirkan, tetapi tidak ada cara untuk mencegahnya terlebih dahulu. Mereka hanya dapat memperbaiki masalah dan menggunakan teknologi HACK secara ekstensif (saya hanya tahu tentang teknologi HACK, tetapi jarang menggunakannya)
Tahap 3: BUG dapat dicegah terlebih dahulu, tetapi ID, CLASS banyak digunakan dalam style sheet, dan CSS diterjemahkan sebagai style sheet yang tumpang tindih, seperti "DIV P SPAN". Kode ini menandai sub-elemen SPAN dari P di sub-elemen DIV. Dengan menulis seperti ini, Anda dapat menentukan gaya SPAN tanpa menambahkan CLASS ke SPAN. Inilah kelebihan CSS. Mengapa tidak memanfaatkannya dengan baik dan pastikan untuk mendefinisikan CLASS!
Tahap 4: Tahap ini adalah yang paling sulit, struktur semantik HTML yang baik, CSS yang masuk akal, dan gaya yang dapat digunakan kembali. Ada artikel di area ini tentang semantik yang baik dan CSS yang masuk akal. Saya pasti akan menulis topik khusus untuk mempelajari kedua aspek ini di masa mendatang.
3. Pertanyaan Umum untuk Pemula CSS
Mari kita lakukan selangkah demi selangkah. Syarat pertama adalah harus ada judul tepat di bawah thumbnail. Caranya cukup mudah: masukkan gambar ke dalam HTML Anda, diikuti dengan pemisah baris (BR), lalu masukkan judul di dalam paragraf (P) dan letakkan di tengah (menggunakan CSS).
Selanjutnya kita perlu mengatur thumbnail dan judul ini secara berpasangan di jendela browser. Saat menggunakan tata letak tabel, pasangan thumbnail dan judul akan ditempatkan di TD masing-masing. Saat menggunakan tata letak CSS, kita perlu menempatkannya di DIV masing-masing. Untuk mengaturnya secara horizontal di jendela, kami menggunakan CSS untuk mengapungkan DIV ini ke kiri (FLOAT).
Pertanyaan 1: Buku apa yang harus saya pilih untuk dibaca guna mempelajari CSS?
Izinkan saya merekomendasikan beberapa buku terlebih dahulu:
"Panduan Definitif untuk CSS"
"Rekonstruksi Situs Web"
"Catatan Tata Letak Situs Web"
"Referensi HTML"
Jika Anda belum tahu banyak tentang HTML, Anda bisa membaca dulu buku "Referensi HTML". Buku ini bukan hanya buku pengajaran tetapi juga buku alat yang bagus untuk menanyakan HTML. Buku "Menguasai CSS" dan "Desain Web Sempurna" yang baru diterbitkan adalah buku yang sangat bagus, tetapi tidak cocok untuk orang yang tidak memiliki dasar dalam CSS. Jika Anda ingin menjadi Pembuat CSS yang hebat, Anda juga harus memiliki keahlian yang kuat yayasan dalam bahasa Inggris. Anda dapat membaca tutorial CSS asing dan berpartisipasi dalam forum terkait. Beberapa orang mengatakan bahwa jika Anda tidak mengerti bahasa Inggris, Anda cukup membaca kodenya, tetapi kenyataannya, buku mereka tidak hanya membahas kodenya, tetapi yang lebih penting. , mereka akan memberi tahu kita Ide pengkodean dan metode pengkodean layak untuk dipelajari dan dipahami. Selain itu, tutorial bahasa Mandarin yang saya rekomendasikan adalah: "HTML dan CSS Standard", "CSS2 Chinese Manual" milik Su Chen Xiaoyu, dan versi elektronik "Web Designer"; ada banyak e-book asing dan Inggris, jadi saya tidak akan melakukannya. Saya tidak memberi contoh satu per satu. Membaca e-book adalah tugas yang sangat membosankan. Saya tidak terbiasa membaca e-book, jadi saya sering membeli buku untuk dibaca.
Pertanyaan 2: Software apa yang digunakan untuk mengedit kode CSS?
Pertanyaan ini sepertinya paling sering ditanyakan! Izinkan saya berbicara tentang diri saya terlebih dahulu. Saya pertama kali menggunakan DreamWeaver untuk menulis kode. Karena perangkat lunak DreamWeaver itu sendiri adalah perangkat lunak yang sangat memakan CPU dan memori, Anda dapat membayangkan kecepatan pengeditan saat runtime. Setelah berjalan lama, saya beralih ke status "semi-tulisan tangan". "Semi-tulisan tangan" adalah menggunakan fungsi kode prompt yang disediakan oleh DW. Saat Anda menulis "F", gaya "F" akan langsung muncul diminta nanti. , nyaman bagi Anda untuk memilih. Jika Anda menulis beberapa surat lagi, gaya yang Anda inginkan akan ditemukan dengan cepat. Hal ini dapat mempercepat penulisan gaya Anda, tetapi salah satu kelemahannya adalah jika Anda meninggalkan perangkat lunak pengeditan yang meminta Anda, Anda tidak akan dapat menulis gaya. misalnya, ketika Anda memodifikasi gaya penyesuaian dari seorang programmer, dia mungkin tidak menggunakan perangkat lunak yang sama dengan yang Anda gunakan, dan mungkin tidak memiliki fungsi prompt kode, jadi Anda hanya dapat kembali ke mesin Anda sendiri untuk mengeditnya dan kemudian mengirimkannya ke programmer! Ini jelas tidak profesional! Jadi jika Anda ingin menjadi orang yang unggul, Anda harus profesional!
Karena itu, sepertinya topiknya belum disebutkan:
Selama Anda bisa menulis dengan tangan, Anda bisa menggunakan software apa pun. Disarankan untuk menggunakan plug-in DreamWeaver TopStyle (versi terbaru adalah Pro V3.12).
Pertanyaan 3: Haruskah saya menulis HTML atau CSS terlebih dahulu?
Ada banyak jawaban di Internet: tulis HTML dulu lalu tulis CSS; tulis CSS dulu lalu tulis HTML keduanya sekaligus. Saya cenderung menulis keduanya secara bersamaan. Menulis CSS terlebih dahulu atau menulis HTML terlebih dahulu bukanlah metode yang tepat untuk pemula. Jika Anda meminta seseorang untuk menulis kode, dan Anda menyuruhnya untuk menulis HTML terlebih dahulu, HTML tersebut tidak dapat diubah setelah ditulis, dan kemudian Anda menulis CSS. Jika dia dapat menulisnya, maka orang tersebut pastilah seorang Builder tingkat tinggi! Jadi untuk pemula, dalam banyak kasus saya sarankan menulis sekaligus saya akan menjelaskan langkah-langkah spesifiknya:
Pertama, kita perlu membangun situs dan direktori. Misalnya, kita membuat folder CSS dan GAMBAR. Keduanya adalah yang paling dasar. Kemudian kita membuat file HTML baru, style.css dan style sheet kosong, dan menghubungkan halaman HTML ke style sheet eksternal ini.
Kemudian kita tulis dulu bagian layout yang paling dasar dalam HTML, menggunakan DIV, lalu tambahkan ID atau CLASS langsung ke DIV tersebut. Bagian layout tersebut antara lain bagian luar, bagian header, bagian tengah, kiri, tengah, kanan , bagian hak cipta, dll.
Setelah menulis ini, Anda kemudian dapat pergi ke style sheet untuk menulis gaya, atau Anda dapat terus menulis bagian-bagian di layout. Mari kita ambil header sebagai contoh. Tulis bagian LOGO di header, dan tambahkan juga ID atau CLASS ke bagian NAV. Hal yang sama berlaku untuk orang lain.
Mengapa kami mengatakan bahwa tidak mungkin menulis bagian HTML sekaligus? Karena orang cenderung membuat kesalahan. Mungkin ada masalah dengan proses penulisan ide Anda, atau masalah kompatibilitas browser, beberapa di antaranya disebabkan oleh Anda pengalaman. Kekurangannya tidak diantisipasi sebelumnya, jadi ketika Anda menemukan masalah saat menulis gaya, Anda mungkin harus mengubah kode HTML Anda. Beginilah cara Anda menulisnya. Anda juga dapat menggunakan HTML/CSS secara bersamaan. Semuanya berfungsi. Saat kita menulis kode, kita sering mengujinya saat menulisnya. Bukan berarti menulis satu kalimat untuk menguji satu kalimat. Sebaliknya, kita menulis sepotong kode lalu mengujinya di browser . Seringkali, pengembang yang baik akan menguji kode mereka setelah mereka menulisnya untuk waktu yang lama. Hal ini karena jika seseorang memiliki lebih banyak pengalaman, mereka akan mengetahui dan mencegah terjadinya kesalahan browser! Jadi mereka bisa menulis kode lebih cepat dibandingkan orang yang tidak berpengalaman. Mereka telah mengatasi kesalahan yang Anda alami. Saat pertama kali Anda mengalami masalah tampilan browser yang salah, Anda harus meluangkan waktu untuk memperbaikinya, tetapi mereka dapat mencegahnya terlebih dahulu atau segera menyelesaikan masalah! Inilah salah satu perbedaan antara Anda dan mereka.
Perbedaan lain antara pemula dan ahli adalah bahwa para ahli menggunakan banyak tombol pintas, jadi pastikan untuk mengingat tombol pintas yang umum digunakan. Setiap detail kecil akan sedikit meningkat, dan bersama-sama mereka akan membuat kemajuan besar.
Selain itu, cara terbaik untuk meningkatkan level Anda adalah dengan berlatih lebih banyak dan menemukan beberapa templat HTML+CSS yang lebih baik untuk latihan pengkodean. Pilih yang lebih sederhana di awal, ambil tangkapan layar halaman, lalu gunakan ide Anda sendiri dalam hal ini gambar. Kembalikan ke halaman HTML...