คุณกำลังเรียนรู้เค้าโครง CSS หรือไม่? คุณยังไม่สามารถเชี่ยวชาญเค้าโครง CSS ล้วนๆ ได้อย่างสมบูรณ์หรือไม่ โดยปกติมีสองสถานการณ์ที่ขัดขวางการเรียนรู้ของคุณ:
ความเป็นไปได้ประการแรกคือคุณยังไม่เข้าใจหลักการของหน้าการประมวลผล CSS ก่อนที่คุณจะพิจารณาประสิทธิภาพโดยรวมของเพจ คุณควรพิจารณาความหมายและโครงสร้างของเนื้อหาก่อน จากนั้นจึงเพิ่ม CSS สำหรับความหมายและโครงสร้าง บทความนี้จะบอกวิธีจัดโครงสร้าง HTML
อีกเหตุผลหนึ่งก็คือ คุณสูญเสียคุณสมบัติของเลเยอร์การนำเสนอที่คุ้นเคย (เช่น cellpadding, hspace, align=left ฯลฯ) และไม่รู้ว่าจะต้องแปลงคำสั่ง CSS ใดเป็นคำสั่งใด เมื่อคุณแก้ไขปัญหาแรกได้และรู้วิธีจัดโครงสร้าง HTML ของคุณแล้ว ฉันจะให้รายการรายละเอียดว่า CSS ใดที่จะใช้แทนที่แอตทริบิวต์การนำเสนอดั้งเดิม
HTML ที่มีโครงสร้าง
เมื่อเราเรียนรู้การผลิตหน้าเว็บครั้งแรก เราจะคำนึงถึงวิธีการออกแบบก่อนเสมอ โดยพิจารณาจากรูปภาพ แบบอักษร สี และแผนผังเค้าโครง จากนั้นเราใช้ Photoshop หรือ Fireworks เพื่อวาดและตัดเป็นภาพขนาดเล็ก สุดท้าย แก้ไข HTML เพื่อคืนค่าการออกแบบทั้งหมดไปยังเพจ
หากคุณต้องการให้หน้า HTML ของคุณถูกจัดวางด้วย CSS (เป็นมิตรกับ CSS) คุณต้องกลับไปเริ่มต้นใหม่ อย่าคิดถึง "รูปลักษณ์ภายนอก" ก่อน แต่ให้คิดถึงความหมายและโครงสร้างของเนื้อหาหน้าของคุณก่อน
หน้าตาไม่ใช่สิ่งที่สำคัญที่สุด หน้า HTML ที่มีโครงสร้างดีสามารถนำเสนอในรูปแบบใดก็ได้ และ CSS Zen Garden เป็นตัวอย่างคลาสสิก CSS Zen Garden ช่วยให้เราตระหนักถึงพลังของ CSS ในที่สุด
HTML ไม่ใช่แค่การอ่านบนหน้าจอคอมพิวเตอร์เท่านั้น รูปภาพที่คุณออกแบบอย่างระมัดระวังใน Photoshop อาจไม่แสดงบน PDA โทรศัพท์มือถือ และโปรแกรมอ่านหน้าจอ แต่หน้า HTML ที่มีโครงสร้างดีสามารถแสดงได้ทุกที่และทุกอุปกรณ์เครือข่ายผ่านคำจำกัดความที่แตกต่างกันของ CSS
เริ่มคิด
เริ่มต้นด้วยการเรียนรู้ว่าโครงสร้างคืออะไร ซึ่งนักเขียนบางคนเรียกว่าความหมาย ความหมายของคำนี้ก็คือ คุณต้องวิเคราะห์บล็อกเนื้อหาและวัตถุประสงค์ของเนื้อหาแต่ละชิ้นที่ให้บริการ จากนั้นจึงสร้างโครงสร้าง HTML ที่เกี่ยวข้องตามวัตถุประสงค์ของเนื้อหาเหล่านี้
หากคุณนั่งลงและวิเคราะห์และวางแผนโครงสร้างเพจของคุณอย่างรอบคอบ คุณอาจพบสิ่งนี้:
โลโก้และชื่อเว็บไซต์
เนื้อหาหน้าหลัก
การนำทางไซต์ (เมนูหลัก)
เมนูย่อย
ช่องค้นหา
พื้นที่ใช้งาน (เช่น รถเข็นช็อปปิ้ง ชำระเงิน)
ส่วนท้าย (ประกาศเกี่ยวกับลิขสิทธิ์และกฎหมายที่เกี่ยวข้อง)
เรามักจะใช้องค์ประกอบ DIV เพื่อกำหนดโครงสร้างเหล่านี้ คล้ายกับสิ่งนี้:
<div id=ส่วนหัว></div>
<div id=content></div>
<div id=globalnav></div>
<div id=subnav></div>
<div id=ค้นหา></div>
<div id=shop></div>
<div id=ส่วนท้าย</div>
มันไม่ใช่เค้าโครง แต่เป็นโครงสร้าง นี่คือคำอธิบายเชิงความหมายของบล็อกเนื้อหา เมื่อคุณเข้าใจโครงสร้างของคุณแล้ว คุณสามารถเพิ่ม ID ที่เกี่ยวข้องลงใน DIV ได้ บล็อกเนื้อหาใดๆ สามารถบรรจุอยู่ภายในคอนเทนเนอร์ DIV และ DIV อื่นสามารถซ้อนอยู่ภายในได้ บล็อกเนื้อหาสามารถมีองค์ประกอบ HTML ใดก็ได้ --- ชื่อ ย่อหน้า รูปภาพ ตาราง รายการ ฯลฯ
จากที่กล่าวมาข้างต้น คุณรู้วิธีจัดโครงสร้าง HTML แล้ว และตอนนี้คุณสามารถกำหนดเค้าโครงและสไตล์ได้แล้ว แต่ละบล็อกเนื้อหาสามารถวางที่ใดก็ได้บนหน้า และสามารถระบุสี แบบอักษร เส้นขอบ พื้นหลัง คุณสมบัติการจัดตำแหน่ง ฯลฯ ของบล็อกได้
การใช้ตัวเลือกเป็นสิ่งที่ยอดเยี่ยม
ชื่อของรหัสเป็นวิธีการควบคุมบล็อกเนื้อหาบางอย่าง ด้วยการล้อมบล็อกเนื้อหานี้ด้วย DIV และเพิ่มรหัสที่ไม่ซ้ำกัน คุณสามารถใช้ตัวเลือก CSS เพื่อกำหนดลักษณะที่ปรากฏของแต่ละองค์ประกอบของหน้าได้อย่างแม่นยำ รวมถึงชื่อเรื่อง รายการ รูปภาพ , ลิงก์หรือย่อหน้า ฯลฯ ตัวอย่างเช่น หากคุณเขียนกฎ CSS สำหรับ #header กฎนั้นอาจแตกต่างจากกฎรูปภาพใน #content โดยสิ้นเชิง
อีกตัวอย่างหนึ่ง: คุณสามารถใช้กฎที่แตกต่างกันเพื่อกำหนดสไตล์ลิงก์ในบล็อกเนื้อหาต่างๆ บางอย่างเช่นนี้: #globalnav a:link หรือ #subnav a:link หรือ #content a:link คุณยังสามารถกำหนดสไตล์ที่แตกต่างกันสำหรับองค์ประกอบเดียวกันในบล็อกเนื้อหาที่แตกต่างกันได้ ตัวอย่างเช่น กำหนดสไตล์ของ p ใน #content และ #footer ตามลำดับผ่าน #content p และ #footer p ตามโครงสร้างแล้ว เพจของคุณประกอบด้วยรูปภาพ ลิงก์ รายการ ย่อหน้า ฯลฯ องค์ประกอบเหล่านี้ไม่ส่งผลต่ออุปกรณ์เครือข่ายที่แสดงบน (PDA โทรศัพท์มือถือ หรืออินเทอร์เน็ตทีวี) ซึ่งสามารถกำหนดเป็นลักษณะที่ปรากฏด้านประสิทธิภาพได้
หน้า HTML ที่มีโครงสร้างอย่างระมัดระวังนั้นง่ายมาก และทุกองค์ประกอบจะถูกใช้เพื่อจุดประสงค์ด้านโครงสร้าง เมื่อคุณต้องการเยื้องย่อหน้า คุณไม่จำเป็นต้องใช้แท็ก blockquote เพียงใช้แท็ก p และเพิ่มกฎระยะขอบ CSS ที่ p เพื่อให้บรรลุวัตถุประสงค์ของการเยื้อง p เป็นแท็กที่มีโครงสร้างและมาร์จิ้นเป็นแอตทริบิวต์การนำเสนอ แท็กแรกเป็นของ HTML และแท็กหลังเป็นของ CSS (นี่คือการแยกโครงสร้างและการแสดงออก)
หน้า HTML ที่มีโครงสร้างดีแทบจะไม่มีแท็กแอตทริบิวต์เลย รหัสสะอาดและกระชับมาก ตัวอย่างเช่น โค้ดต้นฉบับ <table width=80% cellpadding=3 border=2 align=left> สามารถเขียนได้เฉพาะ <table> ใน HTML เท่านั้น และทุกสิ่งที่ควบคุมประสิทธิภาพจะถูกเขียนใน CSS ในโครงสร้าง HTML ตารางคือ ตาราง ไม่ใช่สิ่งอื่นใด (เช่น ใช้สำหรับเค้าโครงและการวางตำแหน่ง)
ฝึกจัดโครงสร้างตัวเอง
ข้างต้นเป็นเพียงโครงสร้างพื้นฐานที่สุด ในการใช้งานจริง คุณสามารถปรับบล็อกเนื้อหาได้ตามความต้องการของคุณ การซ้อน DIV มักเกิดขึ้น และคุณจะเห็นว่ามีเลเยอร์อื่นๆ ในเลเยอร์คอนเทนเนอร์ โดยมีโครงสร้างคล้ายกับสิ่งนี้:
<div id=navcontainer>
<div id=globalnav>
<ul>รายการ</ul>
</div>
<div id=subnav>
<ul>รายการอื่น</ul>
</div>
</div>
องค์ประกอบ div ที่ซ้อนกันทำให้คุณสามารถกำหนดกฎ CSS ได้มากขึ้นเพื่อควบคุมการนำเสนอ ตัวอย่างเช่น คุณสามารถตั้งกฎ #navcontainer เพื่อจัดกึ่งกลางรายการทางด้านขวา ให้กฎ #globalnav เพื่อจัดกึ่งกลางรายการไปทางซ้าย และให้ #subnav อีกกฎหนึ่ง กฎเพื่อจัดรายการให้อยู่ตรงกลางโดยสิ้นเชิง
แทนที่วิธีการแบบเดิมด้วย CSS
รายการต่อไปนี้จะช่วยคุณแทนที่วิธีการแบบเดิมด้วย CSS:
แอตทริบิวต์ HTML และวิธีการ CSS ที่เกี่ยวข้อง
คำอธิบายวิธีการ CSS แอตทริบิวต์ HTML
จัดตำแหน่ง=ซ้าย
align=right ลอย: ซ้าย;
float: ขวา; ใช้ CSS เพื่อลอยองค์ประกอบใด ๆ : รูปภาพ, ย่อหน้า, div, ชื่อเรื่อง, ตาราง, รายการ ฯลฯ
เมื่อคุณใช้แอตทริบิวต์ float คุณต้องกำหนดความกว้างสำหรับองค์ประกอบ float
Marginwidth=0 leftmargin=0 Marginheight=0 topmargin=0 Margin: 0; การใช้ CSS สามารถตั้งค่า Margin บนองค์ประกอบใดก็ได้ ไม่ใช่แค่องค์ประกอบเนื้อหาเท่านั้น แยกมูลค่ามาร์จิ้น
vlink=#333399 alink=#000000 link=#3333FF a:link #3ff;
ตอบ: เยี่ยมชมแล้ว: #339;
a:โฮเวอร์: #999;
ก:ใช้งานอยู่: #00f;
ใน HTML สีของลิงค์ถูกกำหนดให้เป็นค่าแอตทริบิวต์ของเนื้อหา รูปแบบลิงก์จะเหมือนกันทั่วทั้งหน้า การใช้ตัวเลือก CSS สไตล์ลิงก์อาจแตกต่างกันในส่วนต่างๆ ของหน้า
bgcolor=#FFFFFF background-color: #fff; ใน CSS สีพื้นหลังสามารถกำหนดให้กับองค์ประกอบใดๆ ก็ได้ ไม่ใช่แค่องค์ประกอบเนื้อหาและตาราง
bordercolor=#FFFFFF border-color: #fff; องค์ประกอบใด ๆ ก็สามารถกำหนดเส้นขอบได้ (boeder) คุณสามารถกำหนดบน ขวา ล่าง และซ้าย ตามลำดับ
เส้นขอบ=3
cellspacing=3 border-width: 3px; เมื่อใช้ CSS คุณสามารถกำหนดเส้นขอบของตารางให้เป็นสไตล์แบบรวม หรือคุณสามารถกำหนดสี ขนาด และรูปแบบของเส้นขอบด้านบน ขวา ล่าง และซ้ายตามลำดับ
คุณสามารถใช้ตัวเลือกตาราง td หรือ th
หากคุณต้องการตั้งค่าเอฟเฟกต์ไร้ขอบ คุณสามารถใช้คำจำกัดความ CSS: border-collapse:ยุบ;
<br clear=ซ้าย>
<br ชัดเจน=ขวา>
<br ชัดเจน=ทั้งหมด>
ชัดเจน: ซ้าย;
ชัดเจน: ถูกต้อง;
ชัดเจน: ทั้งสอง;
เค้าโครงแบบ 2 คอลัมน์หรือ 3 คอลัมน์จำนวนมากใช้แอตทริบิวต์ float สำหรับการวางตำแหน่ง หากคุณกำหนดสีพื้นหลังหรือรูปภาพพื้นหลังในเลเยอร์ลอย คุณสามารถใช้แอตทริบิวต์ clear ได้
เซลล์แพ็ด = 3
วีสเปซ=3
hspace=3 padding: 3px; การใช้ CSS สามารถตั้งค่าแอตทริบิวต์ padding บนองค์ประกอบใดก็ได้ ในทำนองเดียวกัน padding สามารถตั้งค่าได้ที่ด้านบน ขวา ล่าง และซ้าย ตามลำดับ ช่องว่างภายในมีความโปร่งใส
align=center text-align: center;
ขอบขวา: อัตโนมัติ; ขอบซ้าย: อัตโนมัติ;
การจัดแนวข้อความใช้ได้กับข้อความเท่านั้น
องค์ประกอบระดับบล็อก เช่น div และ p สามารถจัดกึ่งกลางแนวนอนได้โดยใช้ Margin-right: auto; และ Margin-left: auto;
เทคนิคและสภาพแวดล้อมการทำงานที่น่าเสียใจบางประการ
เนื่องจากเบราว์เซอร์รองรับ CSS ได้ไม่สมบูรณ์ บางครั้งเราจึงต้องนำเทคนิคบางอย่าง (แฮ็ก) หรือสร้างสภาพแวดล้อม (วิธีแก้ปัญหา) เพื่อให้ CSS บรรลุผลเช่นเดียวกับวิธีการแบบเดิม ตัวอย่างเช่น องค์ประกอบระดับบล็อกบางครั้งจำเป็นต้องใช้เทคนิคการจัดกึ่งกลางแนวนอน เทคนิคข้อผิดพลาดของโมเดลกล่อง ฯลฯ เทคนิคทั้งหมดเหล่านี้มีรายละเอียดอยู่ในบทความของ Molly Holzschlag เรื่อง Integrated Web Design: Strategies for Long-Term CSS Hack Management
แหล่งข้อมูลอื่นเกี่ยวกับเทคนิค CSS คือ "ตำแหน่งคือทุกสิ่งทุกอย่าง" โดย Big John และ Holly Bergevin
ทำความเข้าใจกับพฤติกรรมโฟลต
"Containing Floats" ของ Eric Meyer จะช่วยให้คุณเชี่ยวชาญวิธีใช้แอตทริบิวต์ float สำหรับเลย์เอาต์ บางครั้งจำเป็นต้องล้างองค์ประกอบโฟลต การอ่าน "วิธีล้างโฟลตโดยไม่มีมาร์กอัปโครงสร้าง" จะมีประโยชน์มาก