ภาษามาร์กอัป - แท็กง่ายๆ

คลิกที่นี่เพื่อกลับไปที่คอลัมน์การสอน 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 หน้าถัดไปอ่านข้อความเต็ม