การแนะนำ:
อ้างข้อความจากหนังสือ: "เมื่อฉันเริ่มเรียนภาษาจีนครั้งแรก ครูสอนพิเศษของฉัน Lao Wang ได้ให้พจนานุกรมภาษาจีน-อังกฤษ หนังสือไวยากรณ์ภาษาจีน และแบบฝึกหัดสำหรับผู้เริ่มต้นแก่ฉัน อย่างไรก็ตาม เขาจะวางหนังสือเหล่านั้นไว้ในตะกร้าหนังสือและ ไม่ใช้จนกว่าจะถึงสัปดาห์หน้า ในช่วงสัปดาห์แรก เขาสอนให้ฉันฟังและท่องจำวลีเพียงไม่กี่ประโยคเท่านั้น จากนั้นเขาก็อยากให้ฉันเรียนรู้วิธีพูดซ้ำบางประโยค “ขอโทษที อยู่ไหน” ร้านอาหารเหรอ? ""เอาข้าวมาให้ฉันหน่อย" "ชุดนี้ราคาเท่าไหร่คะ? ” ในช่วงสัปดาห์นั้นฉันต้องยอมรับความรู้ โครงสร้างประโยค การออกเสียง และไวยากรณ์โดยไม่มีเงื่อนไข อย่างไรก็ตาม ในวันศุกร์ฉันสามารถไปร้านอาหารจีน สั่งข้าว และจ่ายเงินได้ ไม่มีทฤษฎี ไม่มีคำอธิบาย วลีง่ายๆ ทั้งหมดทำให้ฉันมีไวยากรณ์และคำศัพท์เพียงพอที่จะทำเช่นนี้
ฉันไม่รู้ว่าตั้งแต่เมื่อไหร่ที่ CSS เริ่มได้รับความสนใจจากชาวจีนอย่างจริงจัง หลายๆ คนกำลังเริ่มเรียนรู้ CSS แต่ไม่รู้ว่าจะเริ่มต้นอย่างไร บทความนี้จึงเขียนขึ้นสำหรับผู้เริ่มต้นที่ต้องการฝึกฝน CSS
1. การเรียนรู้ CSS เน้นที่วิธีการ!
การเรียนรู้อะไรก็เหมือนกัน ตั้งแต่ชั้นประถม มัธยมต้น จนถึงมหาวิทยาลัย นอกจากการเรียนรู้ความรู้แล้ว คุณยังต้องเรียนรู้วิธีการอีกด้วย!
หากคุณต้องการเชี่ยวชาญ CSS คุณต้องเรียนรู้ HTML ก่อน ฉันเริ่มเรียนรู้ตั้งแต่เริ่มต้นและใช้เวลาหนึ่งเดือนในการเรียนรู้ HTML ฉันไม่มีครู ดังนั้นหนังสือจึงเป็นครูคนเดียวของฉัน และฉันไม่สามารถเข้าถึงอินเทอร์เน็ตได้! หนึ่งเดือนต่อมา ฉันเริ่มเรียน CSS หนังสือ CSS เล่มแรกที่ฉันอ่านคือ "CSS Web Style Design" หลังจากอ่านมาได้สองสามวัน ฉันพบว่าฉันไม่เข้าใจเลย! แล้วเปลี่ยนเป็น "สารานุกรมอ้างอิง HTML" หนังสือเล่มนี้เป็นหนังสือตั้งโต๊ะทั่วไปสำหรับนักออกแบบหน้าเว็บ! เหตุผลที่ฉันเปลี่ยนหนังสือเล่มนี้เพื่อเรียนรู้ CSS ก็เนื่องมาจากส่วนหนึ่งของหนังสือเล่มนี้เป็น CSS และกลายเป็นหนังสือตรัสรู้ CSS ของฉัน หลังจากอ่านไปไม่กี่ย่อหน้าแล้ว รู้สึกว่าบทช่วยสอนที่ชาวต่างชาติเขียนนั้นเป็นระเบียบมาก เริ่มจากตื้นไปลึก และพาคุณก้าวไปทีละขั้นเพื่อให้คุณเข้าใจสิ่งที่พวกเขากำลังพูดถึง ไม่เหมือนหนังสือในประเทศที่มี ความลึกต่างกันและขาดการจัดระเบียบ ราวกับว่าเขากลัวว่าคุณไม่รู้ว่าเขามีความรู้มาก! เช่นเดียวกับหนังสือ "CSS Web Style Design" ที่กล่าวถึงก่อนหน้านี้ ฉันอ่านหนังสือนี้ในฐานะมือใหม่ใน CSS ฉันไม่รู้เลยว่ามันกำลังพูดถึงอะไร!
เรามาพูดถึงรายละเอียดของกระบวนการเรียนรู้กันดีกว่า เนื่องจากสไตล์ไม่สามารถแยกออกจากหน้า HTML ได้ หากไม่ได้รวม HTML เข้ากับสไตล์ CSS จะสูญเสียความหมายของการดำรงอยู่ ดังนั้น หนังสือมักจะยกตัวอย่างแล้วให้คุณทดสอบผลกระทบต่อคอมพิวเตอร์ เนื่องจากผู้เขียนต้องการให้คุณเห็นภาพ CSS สไตล์ชีตเบื้องต้น และบอกคุณว่า CSS ทำอะไรได้บ้าง ตัวอย่างเล็กๆ น้อยๆ: "ถึงแม้นกกระจอกจะตัวเล็ก แต่ก็มีอวัยวะภายในทั้งห้า" คุณอาจไม่เข้าใจความหมายที่แท้จริงของแต่ละข้อความ แต่คุณสามารถจำรูปแบบของตัวอย่างและนำไปใช้ในทางปฏิบัติได้อย่างต่อเนื่องในอนาคต กระบวนการใช้อย่างต่อเนื่องเป็นกระบวนการท่องจำอย่างต่อเนื่องดังนั้นคุณจึงไม่สามารถผ่อนคลายและคิดอยู่เสมอว่าความจำของคุณไม่ดี แต่ก็ไม่ ไม่ว่าคุณจะขี่วัวหรือม้าพันไมล์ก็ตาม ตราบใดที่คุณมีความเพียร คุณจะไปถึงจุดสิ้นสุดอย่างแน่นอน
เมื่ออ่านหนังสือ โดยทั่วไป คุณควรอ่านหนังสือทั้งเล่มเป็นครั้งแรก หากคุณไม่เข้าใจ คุณควรอ่านต่อ ในระหว่างการอ่าน คุณอาจพบคำตอบสำหรับคำถามนั้น อ่านแล้วจะมีความรู้สึกโดยรวมแต่ต้องมีหลายสิ่งที่คุณไม่เข้าใจ ไม่เป็นไร ก็แค่อ่านต่อไป
เป็นครั้งที่สอง คุณต้องจดบันทึกการเรียนรู้ขณะอ่าน เขียนส่วนที่คุณคิดว่าเป็นประเด็นสำคัญ และเขียนส่วนที่คุณคิดว่าคุณมีคำถามอยู่ด้วย คุณสามารถโพสต์บน BBS ได้ ยังมีคนที่มีความหมายดีอีกมากมาย นี่คือคำเตือน: "คุณต้องเรียนรู้วิธีถามคำถาม!" ฉันจะไม่ลงรายละเอียดที่นี่ คุณต้องใช้คอมพิวเตอร์เพื่อฝึกฝนตัวอย่างในหนังสือ สิ่งที่ทำให้คุณสับสนมากที่สุดคือ "อย่างแรก คุณจำไม่ได้ และอย่างที่สอง คุณเข้าใจแนวคิดนี้ผิด (อาจเป็นเพราะว่า หนังสือแปลไม่ดีเลย และอีกอย่างคือ ความเข้าใจของคุณผิด" )" อย่างแรกคุณต้องสร้างความมั่นใจ ยืนหยัด และพากเพียร เมื่อถึงจุดสิ้นสุดคุณจะพบว่าทุกสิ่งทุกอย่างเป็นเรื่องของหลักสูตร เพราะถ้าคุณทำงานหนักคุณจะได้รับรางวัลและมีผลงาน
หลายๆ คนก็ดูเรื่องนี้เหมือนกันแต่ยังไม่มีความคืบหน้าใดๆ ผมวิเคราะห์สาเหตุหลักๆ ดังนี้
เหตุผลที่ 1: มีความกดดันไม่เพียงพอ เนื่องจากผู้คนจำนวนมาก เช่น ศิลปิน เรียนรู้ CSS เพราะพวกเขาดูคนอื่นเรียนรู้ ดังนั้นพวกเขาจึงเรียนรู้มัน หากพวกเขาไม่เรียนรู้ พวกเขาก็จะไม่ได้เปรียบ! ความกดดันแบบนี้มีน้อยมาก ถ้าเรียนไม่เก่ง ก็ยังมีงานเป็นศิลปินอยู่
เหตุผลที่สอง: นี่เป็นเพียงการเรียนนอกเวลาและเพื่อความสนุกสนานเท่านั้น เพราะคุณไม่จำเป็นต้องหาเลี้ยงชีพด้วยเทคโนโลยีนี้
เหตุผลที่สาม: วิธีการนี้ผิด บางคนแค่ดูบทช่วยสอนแต่ไม่ได้ทำ ฉันเคยดูมากเกินไปและทำน้อยเกินไป ดังนั้น มีเพียงการฝึกฝนเท่านั้นที่คุณจะสามารถรวมเอาสิ่งที่เป็นทางทฤษฎีได้
2. เชี่ยวชาญสี่ขั้นตอนการเรียนรู้ของ CSS
เมื่อฉันถามชาวเน็ตว่าการเรียนรู้ CSS ยากไหม?
เธอตอบว่า “ไม่ยาก” ฉันถามว่า “คุณเรียนมานานแค่ไหนแล้ว?” เธอพูดว่า: "เพิ่งเรียนรู้" ความจริงที่เธอพูดก็ถูก! หากมีคนถามผมว่าเรียน CSS ยากไหม? ฉันจะบอกว่า: "มันยาก!" ทำไมฉันถึงบอกว่ามันยาก?
การเรียนรู้ CSS สามารถแบ่งออกเป็นขั้นตอนต่อไปนี้:
ขั้นที่ 1: สามารถสร้างเพจได้โดยไม่ต้องคำนึงถึงปัญหาความเข้ากันได้ของเบราว์เซอร์ แต่เพจนั้นเขียนด้วยโหมด TABLE DIV ทุกที่
ขั้นที่ 2: คิดถึงปัญหาความเข้ากันได้ แต่ไม่มีวิธีป้องกันล่วงหน้า พวกเขาสามารถแก้ไขปัญหาและใช้เทคโนโลยี HACK อย่างกว้างขวาง (ฉันรู้เฉพาะเทคโนโลยี HACK แต่ไม่ค่อยได้ใช้)
ขั้นที่ 3: สามารถป้องกัน BUG ได้ล่วงหน้า แต่ ID, CLASS มีการใช้กันอย่างแพร่หลายในสไตล์ชีต และ CSS ถูกแปลเป็นสไตล์ชีตที่ทับซ้อนกัน เช่น "DIV P SPAN" โค้ดนี้ทำเครื่องหมายองค์ประกอบย่อย SPAN ของ P ในองค์ประกอบย่อยของ DIV โดยการเขียนด้วยวิธีนี้ คุณสามารถกำหนดสไตล์ของ SPAN ได้โดยไม่ต้องเพิ่ม CLASS ให้กับ SPAN นี่คือข้อดีของ CSS ทำไมไม่ลองใช้มันให้เป็นประโยชน์และอย่าลืมกำหนดคลาสด้วย!
ขั้นที่ 4: ขั้นนี้เป็นโครงสร้างความหมาย HTML ที่ดีและยากที่สุด มี CSS ที่เหมาะสม และสไตล์ที่นำมาใช้ซ้ำได้ มีบทความเกี่ยวกับความหมายที่ดีและ CSS ที่สมเหตุสมผลในด้านนี้ ฉันจะเขียนหัวข้อพิเศษเพื่อศึกษาทั้งสองด้านนี้อย่างแน่นอน
3. คำถามที่พบบ่อยสำหรับผู้เริ่มต้น CSS
ลองทำทีละขั้นตอน ข้อกำหนดแรกคือควรมีชื่อเรื่องอยู่ใต้ภาพขนาดย่อพอดี ตรงไปตรงมา: ใส่รูปภาพใน HTML ของคุณตามด้วยการขึ้นบรรทัดใหม่ (BR) จากนั้นใส่ชื่อเรื่องในย่อหน้า (P) และจัดกึ่งกลาง (โดยใช้ CSS)
ต่อไปเราต้องจัดเรียงภาพขนาดย่อและชื่อเหล่านี้เป็นคู่กันในหน้าต่างเบราว์เซอร์ เมื่อใช้เค้าโครงตาราง คู่ภาพขนาดย่อและชื่อเรื่องจะถูกวางไว้ใน TD ตามลำดับ เมื่อใช้เค้าโครง CSS เราจำเป็นต้องวางไว้ใน DIV ตามลำดับ เพื่อจัดเรียงตามแนวนอนบนหน้าต่าง เราใช้ CSS เพื่อลอย DIV เหล่านี้ไปทางซ้าย (FLOAT)
คำถามที่ 1: ฉันควรเลือกอ่านหนังสือประเภทใดเพื่อเรียนรู้ CSS
ผมขอแนะนำหนังสือสองสามเล่มก่อน:
"คำแนะนำขั้นสุดท้ายสำหรับ CSS"
"การสร้างเว็บไซต์ใหม่"
"บันทึกเค้าโครงเว็บไซต์"
"การอ้างอิง HTML"
หากคุณไม่ค่อยมีความรู้เกี่ยวกับ HTML มากนัก คุณสามารถอ่านหนังสือ "HTML Reference" ได้ก่อน หนังสือเล่มนี้ไม่เพียงแต่เป็นหนังสือการสอน แต่ยังเป็นหนังสือเครื่องมือที่ดีสำหรับการสืบค้น HTML อีกด้วย "Mastering CSS" และ "Impeccable Web Design" ที่ตีพิมพ์เมื่อเร็วๆ นี้ เป็นหนังสือที่ดีมาก แต่ไม่เหมาะสำหรับผู้ที่ไม่มีพื้นฐาน CSS หากคุณต้องการเป็น CSS Builder ที่ยอดเยี่ยม คุณต้องมีพื้นฐานที่มั่นคงด้วย พื้นฐานเป็นภาษาอังกฤษ คุณสามารถอ่านบทช่วยสอน CSS ต่างประเทศและมีส่วนร่วมในฟอรั่มที่เกี่ยวข้อง บางคนบอกว่าหากคุณไม่เข้าใจภาษาอังกฤษ คุณก็สามารถอ่านโค้ดได้ แต่จริงๆ แล้ว หนังสือของพวกเขาพูดคุยไม่เพียงแต่โค้ดเท่านั้น แต่ที่สำคัญกว่านั้น พวกเขาจะเล่าให้เราฟังว่าแนวคิดในการเขียนโค้ดและวิธีการเขียนโค้ดนั้นคุ้มค่าแก่การเรียนรู้และทำความเข้าใจ นอกจากนี้ บทเรียนภาษาจีนที่ฉันแนะนำ ได้แก่ "HTML และ CSS Standard", "คู่มือภาษาจีน CSS2" ของ Su Chen Xiaoyu และ "Web Designer" เวอร์ชันอิเล็กทรอนิกส์ มี e-book ต่างประเทศและภาษาอังกฤษมากมาย ดังนั้นฉันจะ' ขอยกตัวอย่างทีละเรื่อง การอ่าน e-book เป็นงานที่น่าเบื่อมาก ฉันไม่คุ้นเคยกับการอ่าน e-book ดังนั้นฉันจึงมักจะซื้อหนังสือมาอ่าน
คำถามที่ 2: ซอฟต์แวร์ใดที่ใช้ในการแก้ไขโค้ด CSS
ดูเหมือนว่าคำถามนี้จะถูกถามบ่อยที่สุด! ให้ฉันพูดเกี่ยวกับตัวเองก่อน ฉันใช้ DreamWeaver ในการเขียนโค้ดเป็นครั้งแรก เนื่องจากซอฟต์แวร์ DreamWeaver นั้นเป็นซอฟต์แวร์ที่ใช้ CPU และหน่วยความจำมาก คุณจึงสามารถจินตนาการถึงความเร็วในการแก้ไขระหว่างรันไทม์ได้ หลังจากเดินมาเป็นเวลานานฉันก็เปลี่ยนไปใช้สถานะ "กึ่งเขียนด้วยลายมือ" คือการใช้ฟังก์ชันพร้อมท์โค้ดที่ DW ให้ไว้ แจ้งภายหลัง สะดวกให้คุณเลือก หากคุณเขียนตัวอักษรเพิ่มอีกสองสามตัว คุณจะพบสไตล์ที่คุณต้องการได้อย่างรวดเร็ว ซึ่งจะช่วยเร่งการเขียนสไตล์ของคุณ แต่ข้อเสียประการหนึ่งคือ หากคุณปล่อยให้ซอฟต์แวร์แก้ไขที่แจ้งให้คุณทราบ คุณจะไม่สามารถเขียนสไตล์ได้ เช่น เมื่อคุณปรับเปลี่ยนรูปแบบการปรับแต่งจากโปรแกรมเมอร์ เขาอาจจะไม่ได้ใช้ซอฟต์แวร์ตัวเดียวกับที่คุณใช้อยู่ และอาจไม่มีฟังก์ชั่น Code Prompt ดังนั้นคุณจึงสามารถกลับไปที่เครื่องของคุณเองเพื่อแก้ไขได้เท่านั้น แล้วส่งให้โปรแกรมเมอร์! นี่มันไม่เป็นมืออาชีพชัดๆ! ดังนั้นอยากเป็นคนเก่งก็ต้องเป็นมืออาชีพ!
เมื่อกล่าวเช่นนี้ดูเหมือนว่ายังไม่ได้กล่าวถึงหัวข้อนี้:
ตราบใดที่คุณสามารถเขียนด้วยมือ คุณสามารถใช้ซอฟต์แวร์ใดก็ได้ ขอแนะนำให้ใช้ปลั๊กอิน DreamWeaver TopStyle (เวอร์ชันล่าสุดคือ Pro V3.12)
คำถามที่ 3: ฉันควรเขียน HTML หรือ CSS ก่อนหรือไม่
มีคำตอบมากมายบนอินเทอร์เน็ต: เขียน HTML ก่อนแล้วจึงเขียน CSS; เขียน CSS ก่อนแล้วจึงเขียน HTML; ฉันมักจะเขียนทั้งสองอย่างพร้อมกัน การเขียน CSS ก่อนหรือการเขียน HTML ก่อนไม่ใช่วิธีที่เหมาะสมสำหรับผู้เริ่มต้น หากคุณขอให้บุคคลเขียนโค้ดและคุณบอกให้เขาเขียน HTML ก่อน หลังจากเขียน HTML จะไม่สามารถแก้ไขได้ จากนั้นคุณจึงเขียน CSS หากเขาสามารถเขียนได้ บุคคลนี้จะต้องเป็น Builder ระดับสูงมาก! ดังนั้นสำหรับผู้เริ่มต้น ในกรณีส่วนใหญ่ ฉันแนะนำให้เขียนไปพร้อมๆ กัน
ขั้นแรก เราต้องสร้างไซต์และไดเร็กทอรี ตัวอย่างเช่น เราสร้างโฟลเดอร์ CSS และ IMAGES ทั้งสองนี้เป็นไฟล์พื้นฐานที่สุด จากนั้น เราสร้างไฟล์ HTML ใหม่ style.css และสไตล์ชีตว่าง แล้วเชื่อมต่อ หน้า HTML ไปยังสไตล์ชีตภายนอกนี้
จากนั้นเราเขียนส่วนเค้าโครงพื้นฐานที่สุดใน HTML โดยใช้ DIV จากนั้นเพิ่ม ID หรือ CLASS ลงใน DIV โดยตรง ส่วนเค้าโครงเหล่านี้ประกอบด้วยส่วนด้านนอก ส่วนหัว ส่วนตรงกลาง ด้านซ้าย ตรงกลาง ด้านขวา , ส่วนลิขสิทธิ์ ฯลฯ .
หลังจากเขียนสิ่งเหล่านี้แล้ว คุณสามารถไปที่สไตล์ชีตเพื่อเขียนสไตล์ หรือคุณสามารถเขียนส่วนต่างๆ ต่อไปในเลย์เอาต์ก็ได้ ลองใช้ส่วนหัวเป็นตัวอย่าง เขียนส่วน LOGO ในส่วนหัว และเพิ่ม ID หรือ CLASS ไปยังส่วน NAV เช่นเดียวกับผู้อื่น
ทำไมเราถึงบอกว่าเป็นไปไม่ได้ที่จะเขียนส่วน HTML ได้ในคราวเดียว เพราะผู้คนมีแนวโน้มที่จะทำผิดพลาดในขั้นตอนการเขียนไอเดียของคุณ หรือสำหรับปัญหาความเข้ากันได้ของเบราว์เซอร์ ซึ่งบางส่วนก็เนื่องมาจากคุณ ประสบการณ์ ข้อบกพร่องไม่ได้คาดหวังไว้ล่วงหน้า ดังนั้นเมื่อคุณพบปัญหาในการเขียนสไตล์ คุณอาจต้องเปลี่ยนโค้ด HTML ของคุณ นี่คือวิธีที่คุณเขียน คุณยังสามารถใช้ HTML/CSS ได้ในเวลาเดียวกัน เมื่อเราเขียนโค้ด เรามักจะทดสอบมันในขณะที่เขียนมัน ไม่ได้หมายถึงการเขียนหนึ่งประโยคเพื่อทดสอบหนึ่งประโยค แต่เราเขียนโค้ดเพียงชิ้นเดียวแล้วทดสอบเบราว์เซอร์ที่ฉันทดสอบด้วย IE6 และ FF ในเวลาเดียวกัน . โดยส่วนใหญ่แล้ว Developer ที่ดีจะทดสอบ Code ของตัวเองหลังจากที่เขียนมาเป็นเวลานานแล้ว เพราะหากคนมีประสบการณ์มากกว่านี้ก็จะรู้และป้องกันไม่ให้เกิด Error ของ Browser ล่วงหน้า! ดังนั้นจึงสามารถเขียนโค้ดได้เร็วกว่าคนที่ไม่มีประสบการณ์ พวกเขาได้ผ่านข้อผิดพลาดที่คุณกำลังเผชิญไปแล้ว ครั้งแรกที่คุณพบปัญหาการแสดงผลเบราว์เซอร์ที่ไม่ถูกต้อง คุณต้องใช้เวลาในการแก้ไข แต่พวกเขาสามารถป้องกันได้ล่วงหน้าหรือแก้ไขปัญหาได้ทันที! นี่คือหนึ่งในความแตกต่างระหว่างคุณและพวกเขา
ความแตกต่างอีกประการหนึ่งระหว่างผู้เริ่มต้นและผู้เชี่ยวชาญก็คือผู้เชี่ยวชาญใช้ปุ่มลัดจำนวนมาก ดังนั้นอย่าลืมจำรายละเอียดเล็กๆ น้อยๆ เหล่านั้นไว้ด้วยกัน และพวกเขาก็จะร่วมกันปรับปรุงครั้งใหญ่
นอกจากนี้ วิธีที่ดีที่สุดในการปรับปรุงระดับของคุณเองคือการฝึกฝนให้มากขึ้นและค้นหาเทมเพลต HTML+CSS ที่ดีกว่าสำหรับการฝึกเขียนโค้ด ให้เลือกเทมเพลตที่ง่ายกว่าในตอนเริ่มต้น จับภาพหน้าจอของเพจ จากนั้นใช้แนวคิดของคุณเองในเรื่องนี้ รูปภาพ คืนค่าเป็นหน้า HTML...