มันไปโดยไม่บอกว่าการพัฒนาเว็บมีขนาดใหญ่มาก ส่วนใหญ่เป็นเพราะเกือบทุกคนอยู่บนเว็บ อย่างไรก็ตามมีปัญหาการขาดแคลนนักพัฒนาในด้านและนั่นคือเหตุผลที่หลักสูตรการพัฒนาเว็บพร้อมใช้งานและฟรีเช่นกัน โดยที่ในใจเราจะแสดงให้คุณเห็นว่า HTML และ CSS เกี่ยวกับอะไร โดยเฉพาะอย่างยิ่งเราจะแสดงให้คุณเห็นว่า "คลาส" ทำงานอย่างไร
เราไม่ได้เริ่มต้นคุณตั้งแต่เริ่มต้นเนื่องจากมีหลักสูตรฟรีมากมายอยู่แล้ว เราจะแสดงให้คุณเห็นว่าคลาสทำงานอย่างไรโดยเฉพาะเนื่องจากเป็นส่วนประกอบที่จำเป็นในการออกแบบเว็บไซต์ของคุณ นอกจากนี้เรายังคิดว่ามันคุ้มค่าที่จะครอบคลุมก่อนที่เราจะโพสต์ดู Bootstrap API ของ Twitter เนื่องจากคลาสเป็นองค์ประกอบที่จำเป็นในการทำเช่นนั้น
ตามข้อจำกัดความรับผิดชอบหากคุณเพิ่งเริ่มใช้ HTML และ CSS อย่างสมบูรณ์นี่อาจไม่ใช่จุดเริ่มต้นที่ดีสำหรับคุณ หากคุณคุ้นเคยกับมันก็ไม่ควรยากเกินกว่าที่จะรับ แต่ถ้าคุณกำลังมองหาบทช่วยสอนสำหรับผู้เริ่มต้นสมบูรณ์มีตัวเลือกที่ยอดเยี่ยมมากมายออนไลน์ เพื่อชื่อไม่กี่มี FreeCodeCamp, โครงการโอดิน, CodeAcademy, โรงเรียนรหัส, Team Treehouse, Udacity และอื่น ๆ อีกมากมาย หากคุณเลือกที่จะเริ่มขุดเป็นหนึ่งในนั้นฉันขอแนะนำให้ติดกับหนึ่ง (เช่นค่ายรหัสฟรี) และจบก่อนที่จะเริ่มอีกเพราะเนื้อหา "พื้นฐาน" จำนวนมากสามารถทำซ้ำสวย
ลองคิดดูว่าคลาสนั้นเป็นอย่างไร
วิธีการเรียน
คลาสมีประโยชน์อย่างยิ่ง พวกเขานำความซ้ำซ้อนออกจากการออกแบบ HTML หากไม่มีคลาสคุณจะจัดองค์ประกอบแต่ละอย่างในมาร์กอัปของคุณแยกกัน และถ้าคุณมีองค์ประกอบสองอย่างเดียวกัน แต่ต้องการจัดองค์ประกอบแต่ละแบบให้แตกต่างกัน มันคงเป็นเรื่องยุ่งเหยิงไปหมด นั่นเป็นเหตุผลที่เรามีชั้นเรียน ชั้นเรียนเพิ่มโครงสร้างองค์กร HTML ของคุณเพื่อให้คุณรักษารหัสของคุณค่อนข้างสะอาด ไม่เพียงแค่นั้น แต่สามารถใช้คลาสได้มากกว่าหนึ่งครั้ง กล่าวอีกนัยหนึ่งคุณไม่จำเป็นต้องสร้างกฎการกำหนดสไตล์เดียวกันสองครั้ง
นี่คือลักษณะของคลาสที่อยู่ภายในของเรา
แท็ก:
อย่างที่คุณเห็นภายใต้แท็กร่างกายของเราเรามีสองอย่าง
องค์ประกอบที่มีคลาสที่แตกต่างกัน ครั้งแรกแท็กมีคลาส“ head1” ในขณะที่แท็กที่สองมีคลาส“ head2” ดังนั้นใน CSS ของเราแทนที่จะใช้สไตล์เพื่อเพียงองค์ประกอบเราสามารถใช้สไตล์กับคลาสบุคคลเหล่านั้น ทำไมเราต้องการทำเช่นนั้น?
องค์ประกอบเราสามารถใช้สไตล์กับคลาสบุคคลเหล่านั้น ทำไมเราต้องการทำเช่นนั้น?
เหตุผลหลักคือคุณไม่ต้องการทั้งหมด
องค์ประกอบที่มีสไตล์เดียวกัน มันจะสร้างความปวดหัวจำนวนมากเมื่อสร้างเว็บไซต์และนอกจากนั้นเว็บไซต์จะไม่ดูดีมาก คลาสทำให้เราสามารถใช้สไตล์กับแท็กอินสแตนซ์เดียวเท่านั้นไม่ใช่ทั้งหมดแท็กทั่วทั้งเอกสาร ดังนั้นคุณจะเขียนคลาสใน HTML ได้อย่างไร แบบนี้:
เนื้อหาบางส่วน
คุณสามารถเพิ่มคุณสมบัติ "คลาส" ให้กับองค์ประกอบ HTML เกือบทุกชนิด
ที่ดี! ดังนั้นเราจึงมีคลาส แต่ในสถานะปัจจุบันพวกเขาไม่ได้ทำอะไรเลย นั่นเป็นเพราะเรายังไม่ได้เพิ่มกฎการจัดแต่งทรงผมให้กับชั้นเรียน ในการทำเช่นนั้นเราจะต้องสร้างเอกสาร. css แยกต่างหาก ฉันแค่จะเรียกมันว่า main.css ในเอกสารนั้นเราจะจัดชั้นเรียนแบบนี้:
ในการเลือกชั้นเรียนที่เราต้องการสไตล์เราทำได้ดังนี้:
.head1 {color: red; จัดเรียงข้อความ: กึ่งกลาง; }
ภายในวงเล็บปีกกาคือ "กฎ" (หรือการจัดแต่งทรงผม) ทั้งหมดที่เราใช้กับคลาสนั้น มีกฎต่าง ๆ มากมายที่คุณสามารถใส่ในชั้นเรียนนั้น ในกรณีของฉันฉันเปลี่ยนสีของข้อความเป็นสีแดงโดยใช้กฎ“ color” และฉันจัดกึ่งกลางข้อความโดยใช้กฎ“ text-align” คุณสามารถค้นหารายการทั้งหมดของกฎ CSS รวมถึงเอกสารของพวกเขาจาก Mozilla Network Developer
ตอนนี้สไตล์ของเรายังไม่ได้นำไปใช้กับคลาสในเอกสาร HTML ของเราและนั่นเป็นเพราะเรายังไม่ได้เชื่อมโยงสองไฟล์เข้าด้วยกัน กลับไปที่ไฟล์ HTML ของคุณและใน
แท็กคุณจะต้องลิงก์ไฟล์ CSS ของคุณโดยทำสิ่งนี้:
เอกสาร HTML ของคุณควรมีลักษณะดังนี้:
และโครงการทดสอบของเราควรมีลักษณะเช่นนี้บนเว็บ:
สำหรับวิดีโอรายละเอียดเพิ่มเติมที่ดำเนินการตามขั้นตอนเหล่านี้โปรดดูด้านล่าง
วีดีโอ
ข้อสรุป
และนั่นคือทั้งหมดที่มีในชั้นเรียน! พวกเขาเข้าใจง่ายจริงๆ เห็นได้ชัดว่าในเว็บไซต์ขนาดใหญ่และเป็นที่นิยมที่คุณเยี่ยมชมกฎในชั้นเรียนนั้นซับซ้อนกว่าที่เราพูดถึง แต่ในรูปแบบพื้นฐานที่สุดนั่นคือวิธีที่พวกเขาทำงาน
หากคุณมีคำถามหรือมีปัญหาในการติดตามนานโปรดแจ้งให้เราทราบในความคิดเห็นด้านล่างหรือมากกว่าในฟอรัม PCMech! หรือหากคุณสนใจคู่มือเริ่มต้น HTML / CSS ฉบับสมบูรณ์ใน PCMech อย่าลืมแจ้งให้เราทราบด้วยเช่นกัน!
