โครงสร้าง Div+CSS
คุณกำลังเรียนรู้เค้าโครง CSS หรือไม่? คุณไม่สามารถควบคุมเค้าโครง CSS บริสุทธิ์ได้อย่างเต็มที่หรือไม่? มักจะมีสองสถานการณ์ที่ขัดขวางการศึกษาของคุณ:
ความเป็นไปได้แรกคือคุณยังไม่เข้าใจหลักการของหน้าประมวลผล CSS ก่อนที่คุณจะพิจารณาประสิทธิภาพโดยรวมของหน้าคุณควรพิจารณาความหมายและโครงสร้างของเนื้อหาก่อนจากนั้นเพิ่ม CSS ลงในความหมายและโครงสร้าง บทความนี้จะบอกวิธีการจัดโครงสร้าง HTML
อีกเหตุผลหนึ่งคือคุณทำอะไรไม่ถูกเกี่ยวกับแอตทริบิวต์เลเยอร์การนำเสนอที่คุ้นเคยเหล่านั้น (เช่น CellPadding, HSPACE, Align = ซ้าย ฯลฯ ) และไม่ทราบว่าคำสั่ง CSS จะเปลี่ยนเป็นอะไร เมื่อคุณแก้ปัญหาแรกและรู้วิธีการจัดโครงสร้าง HTML ของคุณฉันจะให้รายละเอียดเกี่ยวกับสิ่งที่ CSS เพื่อแทนที่แอตทริบิวต์ประสิทธิภาพดั้งเดิม
HTML ที่มีโครงสร้าง
เมื่อเราเรียนรู้การผลิตเว็บเพจครั้งแรกเราจะพิจารณาวิธีการออกแบบและพิจารณารูปภาพแบบอักษรสีและเค้าโครงเป็นครั้งแรกเสมอ จากนั้นเราใช้ Photoshop หรือดอกไม้ไฟเพื่อวาดและตัดเป็นภาพเล็ก ๆ ในที่สุดการออกแบบทั้งหมดจะถูกกู้คืนบนหน้าโดยการแก้ไข HTML
หากคุณต้องการให้หน้า HTML ของคุณถูกจัดวางใน CSS (ซึ่งเป็นมิตรกับ CSS) คุณต้องเริ่มต้นใหม่โดยไม่คำนึงถึงลักษณะที่ปรากฏและก่อนอื่นให้คิดถึงความหมายและโครงสร้างของเนื้อหาหน้าเว็บของคุณ
ลักษณะที่ปรากฏไม่ใช่สิ่งที่สำคัญที่สุด หน้า HTML ที่มีโครงสร้างที่ดีสามารถแสดงได้ในทุกรูปลักษณ์และ CSS Zen Garden เป็นตัวอย่างคลาสสิก CSS Zen Garden ช่วยให้เรารู้จักพลังของ CSS ในที่สุด
HTML ไม่เพียง แต่อ่านบนหน้าจอคอมพิวเตอร์ รูปภาพที่คุณออกแบบอย่างระมัดระวังด้วย Photoshop อาจไม่แสดงบน PDAs โทรศัพท์มือถือและเครื่องอ่านหน้าจอ แต่หน้า HTML ที่มีโครงสร้างที่ดีสามารถแสดงได้ทุกที่บนอุปกรณ์เครือข่ายใด ๆ ผ่านคำจำกัดความที่แตกต่างกันของ CSS
เริ่มคิด
ก่อนอื่นเราต้องเรียนรู้ว่าโครงสร้างคืออะไรซึ่งนักเขียนบางคนเรียกความหมาย คำว่าหมายความว่าคุณต้องวิเคราะห์บล็อกเนื้อหาของคุณและวัตถุประสงค์ของบริการเนื้อหาแต่ละรายการจากนั้นสร้างโครงสร้าง HTML ที่สอดคล้องกันตามวัตถุประสงค์ของเนื้อหาเหล่านี้
หากคุณนั่งวิเคราะห์และวางแผนโครงสร้างหน้าของคุณอย่างระมัดระวังคุณอาจได้รับชิ้นส่วนเช่นนี้:
โลโก้และชื่อไซต์
เนื้อหาหน้าหลัก
การนำทางไซต์ (เมนูหลัก)
เมนูย่อย
ช่องค้นหา
พื้นที่ใช้งาน (เช่นตะกร้าสินค้าแคชเชียร์)
ส่วนท้าย (ข้อความลิขสิทธิ์และคำสั่งทางกฎหมายที่เกี่ยวข้อง)
เรามักจะใช้องค์ประกอบ Div เพื่อกำหนดโครงสร้างเหล่านี้เช่นนี้:
＜div id = ส่วนหัว ＞＜/div＞
＜div id = เนื้อหา ＞＜/div＞
＜div id = globalnav ＞＜/div＞
＜div id = subnav ＞＜/div＞
＜div id = ค้นหา ＞＜/div＞
＜div id = shop ＞＜/div＞
＜div id = ส่วนท้าย ＞＜/div＞
นี่ไม่ใช่เลย์เอาต์ แต่เป็นโครงสร้าง นี่คือคำอธิบายความหมายของบล็อกเนื้อหา เมื่อคุณเข้าใจโครงสร้างของคุณคุณสามารถเพิ่ม ID ที่เกี่ยวข้องใน DIV คอนเทนเนอร์ DIV สามารถมีบล็อกเนื้อหาใด ๆ หรือทำรังอื่น ๆ บล็อกเนื้อหาสามารถมีองค์ประกอบ HTML ใด ๆ - ชื่อเรื่องย่อหน้ารูปภาพตารางรายการ ฯลฯ
ตามสิ่งที่อธิบายไว้ข้างต้นคุณรู้วิธีการจัดโครงสร้าง HTML และตอนนี้คุณสามารถทำคำจำกัดความเลย์เอาต์และสไตล์ได้ แต่ละบล็อกเนื้อหาสามารถวางได้ทุกที่บนหน้าจากนั้นระบุสีตัวอักษรเส้นขอบพื้นหลังคุณสมบัติการจัดตำแหน่ง ฯลฯ ของบล็อกจะถูกระบุ
การใช้ตัวเลือกเป็นสิ่งที่ยอดเยี่ยม
ชื่อของ ID เป็นวิธีการควบคุมบล็อกเนื้อหาที่แน่นอน ด้วยการวาง DIV ในบล็อกเนื้อหานี้และเพิ่ม ID ที่ไม่ซ้ำกันคุณสามารถใช้ตัวเลือก CSS เพื่อกำหนดลักษณะที่ปรากฏของแต่ละองค์ประกอบรวมถึงชื่อเรื่องรายการรูปภาพลิงก์หรือย่อหน้า ฯลฯ ตัวอย่างเช่นหากคุณเขียนกฎ CSS สำหรับ #Header
อีกตัวอย่างหนึ่งคือ: คุณสามารถกำหนดรูปแบบการเชื่อมโยงในบล็อกเนื้อหาที่แตกต่างกันผ่านกฎที่แตกต่างกัน คล้ายกับสิ่งนี้: #Globalnav A: ลิงก์หรือ #Subnava: ลิงก์หรือ #Content A: ลิงก์ คุณยังสามารถกำหนดองค์ประกอบเดียวกันในบล็อกเนื้อหาที่แตกต่างกันด้วยสไตล์ที่แตกต่างกัน ตัวอย่างเช่นรูปแบบของ P ใน #Content และ #Footer ถูกกำหนดโดย #Content P และ #Footerp ตามลำดับ การพูดอย่างมีโครงสร้างหน้าของคุณประกอบด้วยรูปภาพลิงก์รายการย่อหน้า ฯลฯ องค์ประกอบเหล่านี้ไม่มีผลต่ออุปกรณ์เครือข่าย (PDA หรือโทรศัพท์มือถือหรือทีวีเครือข่าย) พวกเขาสามารถกำหนดเป็นรูปลักษณ์ใด ๆ
หน้า HTML ที่มีโครงสร้างอย่างระมัดระวังนั้นง่ายมากและแต่ละองค์ประกอบจะใช้เพื่อวัตถุประสงค์เชิงโครงสร้าง เมื่อคุณต้องการเยื้องย่อหน้าคุณไม่จำเป็นต้องใช้แท็ก blockquote เพียงใช้แท็ก P และเพิ่มกฎข้อมาร์จิ้น CSS ลงใน P เพื่อให้บรรลุวัตถุประสงค์การเยื้อง P เป็นแท็กที่มีโครงสร้างระยะขอบเป็นคุณลักษณะการเป็นตัวแทนอดีตเป็นของ HTML และหลังเป็นของ CSS (นี่คือการแยกเฟสของโครงสร้างและการแสดงออก)
แทบไม่มีแท็กที่แสดงถึงแอตทริบิวต์ในหน้า HTML ที่มีโครงสร้างที่ดี รหัสสะอาดและกระชับมาก ตัวอย่างเช่นรหัสต้นฉบับ <TableWidth = 80% CellPadding = 3 border = 2Align = ซ้าย> สามารถเขียนได้ใน HTML เท่านั้นและทุกสิ่งที่ควบคุมการเป็นตัวแทนจะถูกเขียนลงใน CSS ใน HTML ที่มีโครงสร้างตารางเป็นตารางไม่ใช่อย่างอื่น (เช่นใช้สำหรับการจัดวางและการวางตำแหน่ง)
ฝึกโครงสร้างตัวเอง
สิ่งที่กล่าวถึงข้างต้นเป็นเพียงโครงสร้างพื้นฐานที่สุด ในแอปพลิเคชันจริงคุณสามารถปรับบล็อกเนื้อหาได้ตามต้องการ มักจะมีสถานการณ์การทำรังและคุณจะเห็นว่ามีเลเยอร์อื่น ๆ ในชั้นคอนเทนเนอร์ที่มีโครงสร้างคล้ายกับสิ่งนี้:
＜div id = navcontainer＞
＜div id = globalnav＞
＜ul＞ รายการ ＜/ul＞
＜/div＞
＜div id = subnav＞
ul ul＞ รายการอื่น ＜/ul＞
＜/div＞
＜/div＞
องค์ประกอบ Div ที่ซ้อนกันช่วยให้คุณกำหนดกฎ CSS เพิ่มเติมเพื่อควบคุมประสิทธิภาพเช่น: คุณสามารถให้ #NavContainer กฎเพื่อทำให้รายการถูกต้องจากนั้นให้ #Globalnav กฎเพื่อทำให้รายการซ้ายและให้ #Subnav รายการอื่นที่แตกต่างอย่างสิ้นเชิง
แทนที่วิธีการดั้งเดิมด้วย CSS
รายการต่อไปนี้จะช่วยให้คุณแทนที่วิธีดั้งเดิมด้วย CSS:
แอตทริบิวต์ HTML และวิธี CSS ที่สอดคล้องกัน
คุณลักษณะ HTML
คำอธิบายวิธี CSS
จัดตำแหน่ง = ซ้าย
Align = Float ขวา: ซ้าย;
ลอย: ขวา; ใช้ CSS เพื่อลอยองค์ประกอบใด ๆ : รูปภาพ, ย่อหน้า, div, ชื่อ, ตาราง, รายการ, ฯลฯ
เมื่อคุณใช้แอตทริบิวต์ Float คุณต้องกำหนดความกว้างสำหรับองค์ประกอบลอยตัว
marginWidth = 0leftmargin = 0 marginheight = 0 topMargin = 0 ระยะขอบ: 0; การใช้ CSS นั้นสามารถตั้งค่าได้ในองค์ประกอบใด ๆ ไม่ใช่แค่องค์ประกอบของร่างกาย แต่ที่สำคัญกว่านั้นคือคุณสามารถระบุค่ามาร์จิ้นของด้านบนขวาด้านล่างและซ้ายขององค์ประกอบตามลำดับ
vlink =#333399 link =#000000 link =#3333ff A: ลิงก์#3ff;
A: เยี่ยมชม: #339;
A: โฮเวอร์: #999;
A: Active: #00F;
ใน HTML สีของลิงค์ถูกกำหนดเป็นค่าแอตทริบิวต์ของร่างกาย รูปแบบการเชื่อมโยงของทั้งหน้าเหมือนกัน การใช้ตัวเลือก CSS รูปแบบการเชื่อมโยงของส่วนต่าง ๆ ของหน้าอาจแตกต่างกัน
bgColor = #fffff พื้นหลังสี: #ffff; ใน CSS องค์ประกอบใด ๆ สามารถกำหนดสีพื้นหลังไม่ใช่แค่องค์ประกอบของร่างกายและตาราง
BorderColor = #FFFFFF สีชายแดน: #FFFF; องค์ประกอบใด ๆ สามารถตั้งค่าเส้นขอบ (Boeder) คุณสามารถกำหนดด้านบนขวาด้านล่างและซ้ายตามลำดับ
Border = 3CellSpacing = 3 ความกว้างชายแดน: 3PX; ด้วย CSS คุณสามารถกำหนดเส้นขอบของตารางเป็นสไตล์แบบครบวงจรหรือคุณสามารถกำหนดสีขนาดและรูปแบบของพรมแดนด้านบนขวาล่างและด้านซ้ายตามลำดับ
คุณสามารถใช้ตารางตัวเลือก TD หรือ TH
หากคุณต้องการตั้งค่าเอฟเฟกต์ไร้พรมแดนคุณสามารถใช้คำจำกัดความ CSS: การล่มสลายของชายแดน: การล่มสลาย;
＜br clear = ซ้าย＞
＜br clear = ขวา＞
＜br clear = ทั้งหมด＞
ชัดเจน: ซ้าย;
ชัดเจน: ขวา;
ชัดเจน: ทั้งสอง;
เลย์เอาต์ 2 คอลัมน์หรือ 3 คอลัมน์จำนวนมากใช้แอตทริบิวต์ลอยเพื่อค้นหา หากคุณกำหนดสีพื้นหลังหรือภาพพื้นหลังในชั้นลอยคุณสามารถใช้แอตทริบิวต์ที่ชัดเจน
CellPadding = 3
vspace = 3
hspace = 3 ช่องว่าง: 3px; ด้วย CSS องค์ประกอบใด ๆ สามารถตั้งค่าแอตทริบิวต์การขยายได้ ในทำนองเดียวกันช่องว่างสามารถตั้งค่าด้านบนขวาล่างและซ้ายตามลำดับ ช่องว่างภายในโปร่งใส
Align = Center Text-Ag-Ag: Center;
มาร์จิ้น-ขวา: อัตโนมัติ; ขอบซ้าย: อัตโนมัติ;
การจัดตำแหน่งข้อความทำงานกับข้อความเท่านั้น
ระดับบล็อกเช่น div และ p สามารถอยู่กึ่งกลางในแนวนอนผ่านมาร์จิ้น-ขวา: อัตโนมัติ; และระยะขอบซ้าย: อัตโนมัติ;
เคล็ดลับที่น่าเศร้าและสภาพแวดล้อมการทำงาน
เนื่องจากการสนับสนุนที่ไม่สมบูรณ์ของ CSS โดยเบราว์เซอร์บางครั้งเราต้องใช้แฮ็คหรือสร้างวิธีแก้ปัญหาเพื่อให้ CSS สามารถบรรลุผลเช่นเดียวกับวิธีการดั้งเดิม ตัวอย่างเช่นองค์ประกอบระดับบล็อกบางครั้งต้องใช้เทคนิคการจัดศูนย์แนวนอนเทคนิคข้อผิดพลาดแบบจำลองกล่อง ฯลฯ เคล็ดลับทั้งหมดเหล่านี้มีรายละเอียดในบทความของ Mollyholzschlag "การออกแบบเว็บแบบบูรณาการ: กลยุทธ์สำหรับการจัดการ CSS ระยะยาว"
เว็บไซต์ทรัพยากรอื่นสำหรับเคล็ดลับ CSS คือ Big John และ Holly Bergevin ตำแหน่งคือทุกสิ่ง
เข้าใจพฤติกรรมลอยตัว
การลอยตัวของ Eric Meyer จะช่วยให้คุณเชี่ยวชาญวิธีการใช้เลย์เอาต์แอตทริบิวต์ Float บางครั้งองค์ประกอบลอยต้องได้รับการล้างและการอ่านวิธีการล้างลอยโดยไม่มีมาร์กอัปโครงสร้างจะมีประโยชน์มาก