คลิกที่นี่เพื่อกลับไปที่คอลัมน์การสอน Wulin.com HTML
ด้านบน: ภาษามาร์กอัป - พูดคุยเกี่ยวกับรายการอีกครั้ง
ต้นฉบับต้นฉบับบทที่ 9 แท็ก lite
ก่อนหน้านี้เรายังคงกล่าวถึงเนื้อหาที่มีโครงสร้างสามารถจำแนกโครงสร้างและรายละเอียดการออกแบบและปรับปรุงแท็กได้ เราควรทำอย่างไร? เราสามารถใช้ XHTML และ CSS ที่ตรงตามมาตรฐานแทนตารางและรูปภาพเพื่อสร้างเค้าโครงที่เราต้องการ
เมื่อใช้เทคโนโลยีมาตรฐานเพื่อสร้างเว็บไซต์ (โดยเฉพาะเว็บไซต์ที่พึ่งพา CSS เป็นอย่างมาก) เรามักจะพัฒนานิสัยที่ไม่ดีซึ่งคือการเพิ่มแท็กพิเศษและคุณลักษณะของคลาสและเทคโนโลยีไม่จำเป็นต้องใช้เลย
โดยการใช้ตัวเลือกลูกหลานใน CSS เราสามารถกำจัด <div>, <span> และคุณสมบัติการจำแนกประเภทที่ไม่จำเป็น แท็กที่เรียบง่ายหมายความว่าหน้าเว็บจะอ่านได้เร็วขึ้นและง่ายต่อการบำรุงรักษา ในบทนี้เราจะหารือเกี่ยวกับวิธีง่ายๆหลายวิธีในการทำภารกิจนี้ให้สำเร็จ จะปรับปรุงแท็กได้อย่างไรเมื่อสร้างเว็บไซต์ด้วยเทคโนโลยีมาตรฐาน
แท็กที่เรียบง่ายเป็นหัวข้อสำคัญที่ควรค่าแก่การพูดคุย เมื่อสร้างเว็บไซต์หนึ่งในประโยชน์ที่ยิ่งใหญ่ที่สามารถรับได้โดยการเขียนใน XHTML ที่ถูกกฎหมายและการตั้งค่าเอฟเฟกต์การแสดงผลด้วย CSS คือแท็กที่มีความคล่องตัว รหัสสั้นแสดงถึงความเร็วในการดาวน์โหลดที่เร็วขึ้นซึ่งเป็นกุญแจสำคัญสำหรับผู้ใช้ที่ใช้การโทรแบบ 56K เพื่อเข้าถึงอินเทอร์เน็ต รหัสสั้นยังแสดงถึงความต้องการพื้นที่เซิร์ฟเวอร์และลดการใช้แบนด์วิดท์ซึ่งสามารถทำให้เจ้านายและผู้จัดการระบบมีความสุข
ปัญหาคือการยืนยันว่าหน้าเว็บเป็นไปตามข้อกำหนดมาตรฐาน W3C ไม่ได้หมายความว่ารหัสที่ใช้ในเนื้อหาจะสั้นลง แน่นอนคุณสามารถเพิ่มแท็กที่ไม่พึงประสงค์ต่างๆในเนื้อหาแท็กที่ตรงตามมาตรฐาน ใช่มันเป็นไปตามมาตรฐาน แต่อาจเพิ่มรหัสที่ไม่จำเป็นจำนวนมากเพื่อให้ง่ายต่อการออกแบบ CSS
อย่ากลัว! มีเคล็ดลับบางอย่างที่นี่ที่ช่วยให้คุณสามารถออกแบบกระชับและมีเนื้อหาแท็กมาตรฐาน แต่ยังรักษาความสามารถในการควบคุมสไตล์ CSS ที่เพียงพอ จากนั้นมาเรียนรู้เคล็ดลับง่ายๆสองสามข้อเพื่อปรับปรุงแท็ก ตัวเลือกมรดก
ที่นี่เราจะดูสองวิธีในการทำเครื่องหมายแถบด้านข้าง (รวมถึงข้อมูลลิงก์และสิ่งอื่น ๆ ) ในเว็บไซต์ส่วนตัว สิ่งที่ดีทั้งหมดลงใน <div> ด้วย ID เป็นแถบด้านข้างเพื่อให้สามารถวางไว้ในหน้าต่างเบราว์เซอร์ในภายหลัง (ส่วนที่สองจะหารือเกี่ยวกับการทำงานของเค้าโครง/ประเภท CSS) วิธี A: การจำแนกประเภทมีความสุข
<div id = แถบด้านข้าง>
<h3 class = sidheading> เกี่ยวกับเว็บไซต์นี้ </h3>
<p> นี่คือเว็บไซต์ของฉัน </p>
<h3 class = sidheading> ลิงค์ของฉัน </h3>
<ul class = sidelinks>
<li class = link> <a href = archives.html> จดหมายเหตุ </a> </li>
<li class = link> <a href = about.html> เกี่ยวกับฉัน </a> </li>
</ul>
</div>
ฉันเคยเห็นเนื้อหาที่ติดแท็กคล้ายกับวิธี A บนเว็บไซต์หลายแห่ง เมื่อนักออกแบบค้นพบพลังของ CSS เป็นครั้งแรกมันเป็นเรื่องง่ายที่จะจมและระบุคลาสสำหรับแต่ละแท็กที่ต้องการสร้างสไตล์พิเศษ
ในตัวอย่างก่อนหน้านี้เราอาจคิดว่า <H3> ระบุ class = sideheading เพื่อช่วยให้พวกเขาระบุสไตล์ที่แตกต่างจากชื่ออื่น ๆ ภายในหน้า; การระบุคลาสสำหรับ <ul> และ <li> ก็มีเหตุผลเดียวกัน การจำแนกประเภท CSS
เมื่อระบุสไตล์สมมติว่าเราต้องการให้ชื่อเรื่องเปลี่ยนสีส้มใช้แบบอักษร Serif ด้วยขอบสีเทาอ่อนที่ด้านล่างและรายการที่ไม่ได้เรียงลำดับของ Sidelinks จำเป็นต้องลบสัญลักษณ์จุดเล็ก ๆ และเปลี่ยนรายการเป็นตัวหนา
เนื้อหา CSS ที่ต้องการโดยวิธี A จะเป็นแบบนี้:
. ด้านข้าง {
Font-Family: Georgia, Serif;
สี: #c63;
ขอบด้านล่าง: 1px Solid #CCC;
-
.Sidelinks {
ประเภทรายการประเภท: ไม่มี;
-
.link {
Font-Weight: ตัวหนา;
-
เราสามารถอ้างถึงชื่อคลาส (คลาส) ที่จัดตั้งขึ้นในแท็กเพื่อระบุสไตล์พิเศษสำหรับแท็กเหล่านี้และคุณสามารถจินตนาการได้ว่าส่วนอื่น ๆ ของหน้านั้นถูกจัดระเบียบด้วยวิธีนี้: แถบนำทางปลายหน้าและพื้นที่เนื้อหาแต่ละแท็กจะรก
ใช่มันใช้งานได้ แต่มีวิธีง่ายๆในการบันทึกแอตทริบิวต์คลาสเหล่านี้ในขณะที่ทำให้ CSS ของคุณอ่านง่ายขึ้นและจัดระเบียบมากขึ้น จากนั้นดูที่วิธี B วิธี B: ทางเลือกตามธรรมชาติ
<div id = แถบด้านข้าง>
<H3> เกี่ยวกับไซต์นี้ </h3>
<p> นี่คือเว็บไซต์ของฉัน </p>
<H3> ลิงก์ของฉัน </h3>
<ul>
<li> <a href = Archives.html> จดหมายเหตุ </a> </li>
<li> <a href = เกี่ยวกับ. html> เกี่ยวกับฉัน </a> </li>
</ul>
</div>
วิธี B นั้นสั้นและกระชับ! แต่เดี๋ยวก่อนหมวดหมู่จะไปไหน? อืม ... ในไม่ช้าคุณจะพบว่าเราไม่ต้องการพวกเขาจริงๆเพราะเราใส่แท็กเหล่านี้เป็นความสัมพันธ์ <div> กับชื่อที่ไม่ซ้ำกัน (ในกรณีนี้แถบด้านข้าง)
นี่คือที่ใช้ตัวเลือกการสืบทอด เราเพียงแค่ต้องระบุแท็กที่อยู่ภายในแถบด้านข้างโดยตรงด้วยชื่อฉลากเพื่อลบคุณสมบัติการจำแนกประเภทที่ไม่จำเป็นเหล่านี้ ระบุ CSS กับเนื้อหาก่อนและหลังความสัมพันธ์
ลองดูสไตล์เดียวกับวิธี A แต่คราวนี้เราใช้ตัวเลือกการสืบทอดเพื่อระบุแท็กที่อยู่ในแถบด้านข้าง
#SidesBar H3 {Font-Family: Georgia, Serif;
สี: #c63;
ขอบด้านล่าง: 1px Solid #CCC;
-
#SideBar ul {ประเภทรายการประเภท: ไม่มี;
-
#SideBar Li {Font-Weight: ตัวหนา;
-
โดยอ้างถึง #SidesBar ID คุณสามารถระบุสไตล์พิเศษสำหรับแท็กที่มีอยู่ในนั้น ตัวอย่างเช่นแท็ก <h3> ที่อยู่ภายใน <div id = sidebar> จะตั้งค่ากฎ CSS ด้านบน
วิธีการระบุรูปแบบนี้ขึ้นอยู่กับความสัมพันธ์ระหว่างเนื้อหาก่อนและหลังเป็นกุญแจสำคัญในการทำให้เนื้อหาสั้นลง โดยปกติหลังจากออกแบบโครงสร้างความหมายสำหรับเนื้อหาไม่จำเป็นต้องเพิ่มแอตทริบิวต์การจำแนกประเภทลงในฉลาก ไม่เพียง แต่ใช้ในแถบด้านข้าง
เราแสดงเฉพาะย่อหน้าของหน้า (นั่นคือแถบด้านข้าง) แต่วิธีการนี้สามารถนำไปใช้กับโครงสร้างหน้าทั้งหมดได้ เพียงแบ่งเนื้อหาแท็กออกเป็นหลายย่อหน้าตามตรรกะ (อาจ #NAV, #CONTENT, #SidesBar, #Footer) จากนั้นใช้ตัวเลือกการสืบทอดเพื่อสร้างสไตล์พิเศษสำหรับแท็กในย่อหน้านี้
ตัวอย่างเช่นสมมติว่าย่อหน้า #content และ #sidesbar ภายในหน้าใช้แท็ก <h3> และคุณต้องการให้พวกเขาใช้แบบอักษร Serif อย่างไรก็ตามคุณต้องการ <h3> ของหนึ่งย่อหน้าที่จะแสดงเป็นสีม่วงและอีกอันหนึ่งเป็นสีส้ม
สิ่งนี้ไม่จำเป็นต้องมีการปรับเปลี่ยนแท็กใด ๆ รวมถึงคุณสมบัติการจำแนกประเภท เราสามารถระบุกฎสำหรับแท็ก <H3> ทั้งหมดที่จะใช้ร่วมกันโดยสไตล์ระดับโลกจากนั้นใช้ตัวเลือกการสืบทอดเพื่อตั้งค่าสีตามตำแหน่งของแท็ก
H3 {
Font-Family: Georgia, Serif; / * H3s ทั้งหมดเป็น serif */
-
#Content H3 {
สี: สีม่วง;
-
#SidesBar H3 {
สี: สีส้ม;
-
ระบุว่าแท็ก <h3> ทั้งหมดใช้แบบอักษร Senif และต้องเลือกสีให้ใช้สีม่วงหรือสีส้มตามบริบทของเนื้อหา ในเวลานี้เราไม่จำเป็นต้องทำซ้ำกฎการแชร์ (ในตัวอย่างนี้ Font-Family) ดังนั้นเนื้อหาของ CSS สามารถสั้นลงและกฎซ้ำสามารถป้องกันไม่ให้เกิดขึ้นในหลายข้อความ
ไม่เพียง แต่เราสามารถลดพื้นที่การทำเครื่องหมายพิเศษที่ต้องการโดยแอตทริบิวต์คลาส แต่โครงสร้าง CSS ยังมีความหมายมากขึ้นทำให้เราอ่านเนื้อหาและจัดระเบียบได้ง่ายขึ้นตามเซ็กเมนต์หน้า นอกจากนี้ยังกลายเป็นเรื่องง่ายมากที่จะปรับเปลี่ยนกฎเฉพาะซึ่งเห็นได้ชัดโดยเฉพาะอย่างยิ่งสำหรับการเรียงพิมพ์ขนาดใหญ่และซับซ้อนเพราะในเวลานี้คุณอาจมีกฎ CSS หลายร้อยตัวในเวลาเดียวกัน
ตัวอย่างเช่นในตัวอย่างนี้หากคุณเพิ่มกฎการแชร์ในการประกาศแต่ละครั้งและต้องการแทนที่ทั้งหมด <h3> ด้วยแบบอักษร Sans Serif ในภายหลังคุณต้องแก้ไขสามสถานที่และไม่มีวิธีที่จะทำในครั้งเดียว การจำแนกประเภทน้อยลงการบำรุงรักษาที่ดีขึ้น
นอกเหนือจากการลดพื้นที่ซอร์สโค้ดที่ต้องใช้แล้วการแทนที่หมวดหมู่ที่ซ้ำซ้อนด้วยตัวเลือกการสืบทอดยังแสดงให้เห็นถึงความสะดวกในการทำเครื่องหมายเนื้อหาในอนาคต
ตัวอย่างเช่นสมมติว่าคุณต้องการให้ลิงก์ภายในแถบด้านข้างเปลี่ยนเป็นสีแดงแทนที่จะใช้สีน้ำเงินเหมือนส่วนที่เหลือของหน้าดังนั้นคุณจึงสร้างคลาสสีแดงที่เพิ่มลงในแท็กสมอเช่นนี้:
<div id = แถบด้านข้าง>
<H3> เกี่ยวกับไซต์นี้ </h3>
<p> นี่คือเว็บไซต์ของฉัน </p>
<H3> ลิงก์ของฉัน </h3>
<ul>
<li> <a href = Archives.html class = Red> Archives </a> </li>
<li> <a href = about.html class = red> เกี่ยวกับฉัน </a> </li>
</ul>
</div>
ในการเปลี่ยนลิงก์เหล่านี้ให้เป็นสีแดง (สมมติว่าสีลิงค์ที่ตั้งไว้ไม่ได้เป็นสีแดง) ต้องใช้ CSS เช่นนี้:
A: link.red {
สี: สีแดง;
-
การกระทำเหล่านี้ดีและสามารถทำงานได้ตามปกติ แต่ถ้าคุณเปลี่ยนใจในอนาคตและต้องการเปลี่ยนลิงก์เหล่านี้เป็นสีเขียว หรือใช้งานได้จริงเจ้านายของคุณบางครั้งบอกว่าสีแดงในปีนี้ล้าสมัยดังนั้นเปลี่ยนลิงก์แถบด้านข้างเหล่านี้เป็นสีเขียว! ไม่มีปัญหาคุณเพียงแค่ต้องปรับเปลี่ยนคลาสสีแดงใน CSS และทำเสร็จ แต่แอตทริบิวต์คลาสในเนื้อหาการทำเครื่องหมายยังคงเป็นสีแดง เห็นได้ชัดว่านี่ไม่สอดคล้องกับความหมายเช่นเดียวกับการใช้สีอื่นเป็นชื่อการจำแนกประเภท
นี่ไม่ใช่สถานที่ที่ดีในการใช้เอฟเฟกต์การแสดงผลเป็นชื่อการจำแนกประเภท แต่ถ้าเราไม่ได้ระบุการจำแนกประเภทเราสามารถประหยัดความพยายาม (และรหัส) ได้อย่างมากในการจัดการการจำแนกประเภทและทำให้ความหมายของเนื้อหามีเหตุผลมากขึ้น เราอาจเลือกลิงก์ไปยังแถบด้านข้างเหล่านี้ด้วยตัวเลือกการสืบทอดและระบุสไตล์ตามต้องการ
เนื้อหาแท็กนั้นเหมือนกับวิธี B และ CSS ที่จำเป็นในการตั้งค่าลิงก์ในแถบด้านข้างจะเป็นเช่นนี้:
#sidesbar li a: ลิงค์ {สี: สีแดง;
-
โดยทั่วไปหมายความว่าเฉพาะแท็กสมอที่ใช้แอตทริบิวต์ HREF ในแท็ก <li> ภายใน <div id = sidebar> ควรแสดงเป็นสีแดง
ตอนนี้เรารักษาเนื้อหาการติดแท็กระยะสั้นและยืดหยุ่นและการอัปเดตในอนาคตต้องใช้ CSS เท่านั้นไม่ว่าเราต้องการให้ลิงก์เปลี่ยนเป็นสีแดงสีเขียวตัวหนาหรือตัวเอียง
ถัดไปลองมาดูอีกวิธีหนึ่งในการปรับปรุงแท็ก: กำจัดแท็ก <div> ที่ไม่จำเป็นและใช้แท็กระดับบล็อกที่มีอยู่โดยตรง
หน้าก่อนหน้า 1 2 3 หน้าถัดไปอ่านข้อความเต็ม