คลิกที่นี่เพื่อกลับไปที่คอลัมน์การสอน Wulin.com HTML หากคุณต้องการเรียกดูบทช่วยสอน CSS โปรดคลิกที่นี่
ด้านบน: ภาษามาร์กอัป - แท็ก lite บทที่ 10 ใช้ CSS
ในส่วนแรกโฟกัสหลักคือตัวอย่างของ TAG Syntax และเรายังสำรวจวิธีการใช้ CSS บนแท็กสำหรับการออกแบบและระบุรายละเอียดสไตล์ ในบทที่สองเราจะหารือกันหลายวิธีในการใช้ CSS กับเอกสารเว็บไซต์หรือแม้แต่แท็กเดียว นอกจากนี้เราจะหารือเกี่ยวกับวิธีการซ่อนเนื้อหา CSS จากเบราว์เซอร์รุ่นก่อนหน้าเพื่อให้เราสามารถใช้เทคนิคขั้นสูงโดยไม่ส่งผลกระทบต่อโครงสร้างแท็กที่สามารถอ่านได้โดยเบราว์เซอร์และอุปกรณ์ทั้งหมด
ในชุดส่วนขยายสุดท้ายของบทเราจะแนะนำการฝึกฝนการสลับแบบอักษรสีและการสร้างธีมหลายชุดโดยไม่ต้องเขียนสคริปต์ - แทนที่แผ่นสไตล์ จะใช้ CSS กับไฟล์ได้อย่างไร?
ตอนนี้เราจะหารือสี่วิธีที่แตกต่างกันในการใช้ CSS กับเอกสาร แต่ละวิธีมีข้อดีและข้อเสียของตัวเอง ขึ้นอยู่กับสถานการณ์ทั้งสี่วิธีอาจเป็นตัวเลือกที่ดีที่สุด แต่ละวิธีที่แสดงให้เห็นที่นี่ใช้โครงสร้างไวยากรณ์ XHTML 1.0 ตามกฎหมาย, แท็ก <Html> และ <head> การกำหนดค่า
เริ่มต้นด้วยวิธี A. วิธี A: <style> แท็ก
<! doctype html สาธารณะ -// w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = เนื้อหาประเภทเนื้อหา = text/html; charset = utf-8 />
<title> ใช้ CSS </title>
<style type = text/css> <! [cdata [... คำสั่ง CSS ถูกใส่ไว้ที่นี่ ...
- </style></head>
วิธีการนี้ยังกลายเป็นสไตล์ชีทที่ฝังอยู่ซึ่งช่วยให้คุณสามารถเขียนคำประกาศ CSS ทั้งหมดลงในไฟล์ (x) HTML ได้โดยตรงและแท็ก <style> ตั้งอยู่ในหน้า <head> และสามารถวางในรูปแบบใด ๆ ที่คุณต้องการ
ข้อความ/CSS ที่ระบุไว้สำหรับแอตทริบิวต์ประเภทช่วยให้มั่นใจได้ว่าเบราว์เซอร์เข้าใจภาษาสไตล์ที่เราใช้และไม่สามารถละเว้นได้ นอกจากนี้เรายังใช้ไวยากรณ์คำอธิบายประกอบ CDATA ที่แนะนำโดย W3C เพื่อซ่อนเนื้อหาเหล่านี้จากเบราว์เซอร์ที่ไม่สามารถจัดการกับกฎสไตล์ (http://www.w3.org/tr/xhtml1/#h-4.8)
หนึ่งในข้อเสียที่สำคัญของการใช้วิธี A คือเบราว์เซอร์เก่า (โดยเฉพาะ Internet Explorer 4.x และ Netscape 4.x) จะทำให้ดีที่สุดในการแสดงผล CSS ที่ระบุไว้ในแท็ก <style> หากคุณใช้เลย์เอาต์ CSS ขั้นสูงและกฎการวางตำแหน่งที่รองรับเฉพาะเบราว์เซอร์ล่าสุดอาจทำให้เกิดปัญหาได้ หากคุณใส่กฎ CSS ที่ซับซ้อนในแท็ก <style> มันอาจทำให้เกิดความสับสนและยากที่จะอ่านผลลัพธ์การเรียงพิมพ์สำหรับผู้ใช้เบราว์เซอร์เก่า ไม่สามารถแคชได้
ข้อเสียอีกประการหนึ่งของแผ่นสไตล์ฝังคือ: หากวางไว้ในหน้าคุณต้องดาวน์โหลดด้วยกันทุกครั้งที่คุณอ่านหน้า ในทางตรงกันข้ามวิธีอื่น ๆ ที่ให้ไว้ในภายหลังสามารถอนุญาตให้ดาวน์โหลดแผ่นสไตล์เพียงครั้งเดียวเท่านั้นจากนั้นใช้แคชของเบราว์เซอร์โดยตรง แก้ไขหลายครั้ง
เนื่องจากแผ่นสไตล์ฝังตัวถูกเก็บไว้ในหน้า XHTML หากมีการใช้สไตล์เดียวกันในหลาย ๆ หน้าของเว็บไซต์หมายความว่าสไตล์เหล่านี้จะมีสำเนาที่เหมือนกันมากมาย หากคุณต้องการเปลี่ยนสไตล์เหล่านี้คุณต้องแก้ไขทุกหน้าที่ใช้สไตล์เดียวกัน จดจำ! การแก้ไขเอกสารจำนวนมากพร้อมกันจะเป็นงานที่น่าเบื่อ สะดวกในการพัฒนา
เมื่อพูดถึงประโยชน์ฉันพบว่าเมื่อฉันเริ่มเขียนและทดสอบ CSS เป็นครั้งแรกมันสะดวกมากที่จะเขียนกฎทั้งหมดในหน้าฉันใช้สำหรับการทดสอบโดยใช้วิธี A สิ่งนี้ทำให้ฉันสามารถใส่เครื่องหมายและสไตล์ในเอกสารเดียวกันซึ่งสะดวกสำหรับการดัดแปลงบ่อยครั้ง หลังจากการทดสอบเสร็จสิ้นฉันจะใช้ CSS กับเวอร์ชันสาธารณะในรูปแบบที่แตกต่างกัน ลองมาดูวิธีการหลายวิธี วิธี B: แผ่นสไตล์ภายนอก
<! doctype html สาธารณะ -// w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = เนื้อหาประเภทเนื้อหา = text/html; charset = utf-8 />
<title> ใช้ CSS </title>
<link rel = stylesheet type = text /css href = styles.css _fcksavedurl = styles.css /></head>
วิธี B แสดงให้เห็นถึงการฝึกฝนการเชื่อมต่อชีตสไตล์ภายนอก: ใส่เนื้อหาการประกาศ CSS ทั้งหมดในเอกสารแยกต่างหากจากนั้นอ้างอิงเนื้อหาโดยใช้แท็ก <Link> ใน (x) HTML <head>
เราใช้แอตทริบิวต์ HREF เพื่อระบุตำแหน่งของเอกสาร แอตทริบิวต์นี้สามารถเป็นเส้นทางสัมพัทธ์ (เช่นตัวอย่างด้านบน) หรือเส้นทางสัมบูรณ์ (กรอกข้อมูลใน http: // ตำแหน่งของแผ่นสไตล์) ในเวลาเดียวกันโปรดทราบว่า <link> เป็นแท็กเดียวหรือแท็กที่ว่างเปล่าและจะต้องปิดใน / ในตอนท้าย แยกเอกสาร = สะดวกสำหรับการบำรุงรักษา
มีข้อได้เปรียบที่ชัดเจนในการวางกฎ CSS ทั้งหมดในเอกสารที่แตกต่างจากเนื้อหาที่ติดแท็กนั่นคือการเปลี่ยนแปลงสไตล์ใด ๆ ที่เกิดขึ้นกับเว็บไซต์ทั้งหมดสามารถแก้ไขได้เพื่อให้ไฟล์เสร็จสมบูรณ์โดยไม่ต้องปรับเปลี่ยนคำสั่ง CSS ซ้ำ ๆ สำหรับแต่ละหน้าเว็บ
แน่นอนว่านี่เป็นสิ่งสำคัญมากสำหรับเว็บไซต์ขนาดใหญ่ หลายร้อยหรือหลายพันหน้าสามารถแบ่งปันสไตล์เดียวกันในเอกสารเดียว ดาวน์โหลดครั้งเดียว
หนึ่งในข้อได้เปรียบเพิ่มเติมของการเชื่อมโยงแผ่นสไตล์ภายนอกคือเอกสารนี้มักจะดาวน์โหลดได้เพียงครั้งเดียวและเบราว์เซอร์จะใช้แคชซึ่งสามารถบันทึกเวลาดาวน์โหลดที่จำเป็นเมื่อเรียกดูหน้าเดียวกันหรือหน้าอื่น ๆ ซ้ำ ๆ ที่อ้างอิงแผ่นสไตล์เดียวกัน มันยังไม่สามารถซ่อนได้อย่างสมบูรณ์
เช่นวิธี A วิธี B ยังคงเก่าและรองรับฟังก์ชั่น CSS บางอย่างเพื่อตีความเบราว์เซอร์ สไตล์ใด ๆ ที่ออกแบบมาสำหรับเบราว์เซอร์ล่าสุดอาจทำให้เกิดความสับสนอย่างมากในเบราว์เซอร์ที่ไม่ได้รับการสนับสนุน
ดี ... นี่เป็นครั้งที่สองที่ฉันได้กล่าวถึงปัญหานี้วิธีต่อไปจะต้องแก้ปัญหาใช่ไหม? วิธี C: @Import
<! doctype html สาธารณะ -// w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = เนื้อหาประเภทเนื้อหา = text/html; charset = utf-8 />
<title> ใช้ CSS </title>
<style type = text/css> <! [cdata [ @Import Styles.css; - </style></head>
คล้ายกับวิธี B การใช้ @IMPORT สามารถนำเข้าคำจำกัดความ CSS จากไฟล์ภายนอกที่มีเส้นทางสัมพัทธ์ (เช่นตัวอย่างด้านบน) หรือเส้นทางสัมบูรณ์
Method C มีข้อได้เปรียบเช่นเดียวกับการใช้แท็ก <link> เนื่องจากแผ่นสไตล์ถูกวางไว้ในเอกสารภายนอกการแก้ไขและการอัปเดตเอกสารเดียวสามารถเปลี่ยนเว็บไซต์ทั้งหมดและสามารถทำให้เสร็จได้อย่างง่ายดายและรวดเร็ว แผ่นสไตล์ภายนอกจะถูกแคชโดยเบราว์เซอร์ประหยัดเวลาดาวน์โหลดสำหรับการนำเข้าทุกหน้าของแผ่นสไตล์เดียวกัน
ประโยชน์ที่สำคัญของการใช้วิธี C คือ NetScape 4.x รุ่นต่อไปนี้ไม่รองรับไวยากรณ์ @import ดังนั้นมันจะซ่อนเนื้อหา CSS ที่อ้างอิง นี่เป็นเคล็ดลับที่มีประโยชน์อย่างแน่นอนเพราะเราสามารถเขียนไวยากรณ์ CSS ขั้นสูงเพื่อจัดการรายละเอียดการออกแบบเช่นเลย์เอาต์เพื่อให้เบราว์เซอร์ล่าสุดที่สามารถจัดการแสดงได้และทำให้เบราว์เซอร์เก่าไม่สนใจไวยากรณ์เหล่านี้
ปัญหาของ Netscape 4.x คือมันคิดว่าความสามารถในการสนับสนุน CSS นั้นดีพอ ๆ กับที่ได้รับการสนับสนุนจริง ดังนั้นยกเว้น NetScape 4.x เราสามารถปล่อยให้เบราว์เซอร์ตัดสินใจว่าจะแสดงผลที่ถูกต้องด้วยตัวเองหรือไม่
นี่คือจุดสำคัญเมื่อออกแบบเว็บไซต์ตามการออกแบบมาตรฐาน ลองแยกรหัสแท็กที่มีโครงสร้างออกจากโหมดแสดงผลและให้รายละเอียดเค้าโครงและสไตล์อื่น ๆ สำหรับเบราว์เซอร์ที่รองรับ เบราว์เซอร์เก่าใช้เนื้อหาที่มีโครงสร้างซึ่งสามารถอ่านและแสดงผลได้อย่างง่ายดาย แต่จะไม่จัดการกับกฎ CSS ขั้นสูงที่ซ่อนอยู่สำหรับพวกเขา สไตล์เปิดและสไตล์ปิด
ดูรูปที่ 10-1 และ 10-2 และเปรียบเทียบ นี่คือเว็บไซต์ส่วนตัวของฉันโดยใช้ CSS เต็มรูปแบบจากนั้นปิดเอฟเฟกต์การแสดงผลของ CSS (ควรใกล้เคียงกับเอฟเฟกต์การแสดงผลของเบราว์เซอร์เก่า) โครงสร้างเมื่อไม่ได้ใช้ CSS ยังคงชัดเจนมากและมันก็ยังง่ายสำหรับทุกคนที่จะอ่านและใช้งาน หากเราไม่ซ่อน CSS ที่จำเป็นสำหรับเค้าโครงการแสดงผลผู้ใช้เบราว์เซอร์เก่าอาจได้รับเนื้อหาที่อ่านยาก
รูปที่ 10-1 เว็บไซต์ส่วนตัวของฉันโดยใช้ CSS
รูปที่ 10-2: ลบ CSS ในหน้าเดียวกันและเบราว์เซอร์เก่าอาจแสดงเป็นวิธีการรวมกันของวิธี B และวิธี C เพื่อใช้แผ่นหลายสไตล์
บางครั้งมันอาจเป็นประโยชน์ในการแนะนำแผ่นสไตล์หลายรูปแบบลงในเอกสารเดียวตัวอย่างเช่นคุณสามารถใส่กฎเลย์เอาต์ทั้งหมดลงในเอกสารหนึ่งและการตั้งค่าตัวอักษรลงในเอกสารอื่นซึ่งสามารถทำให้การรักษากฎจำนวนมากง่ายขึ้นสำหรับการออกแบบที่ซับซ้อนขนาดใหญ่ กิ้งก่าเอฟเฟกต์
เมื่อฉันสร้างเว็บไซต์สำหรับนิตยสาร Fast Company ฉันต้องการเปลี่ยนโทนสีของเว็บไซต์ทุกเดือนเพื่อให้ตรงกับภาพหน้าปกของนิตยสารปัจจุบัน เพื่อลดความซับซ้อนของงานการปรับเปลี่ยนปกติฉันใส่กฎ CSS ที่เกี่ยวข้องกับสีทั้งหมดลงในเอกสารหนึ่งและใส่กฎอื่น ๆ ที่จะไม่ได้รับการแก้ไขทุกเดือนลงในเอกสารอื่น
มันจะง่ายขึ้นและรวดเร็วในการครอบคลุมทุกสีทุกเดือนโดยไม่ต้องค้นหาเนื้อหาที่ต้องเปลี่ยนในกฎอื่น ๆ หลายร้อยรายการที่ประกอบขึ้นเป็นการออกแบบ ตราบใดที่เอกสารนี้ได้รับการแก้ไขสีของเว็บไซต์ทั้งหมดจะเปลี่ยนไปทันที ทำอย่างไร
ในการแนะนำแผ่นสไตล์หลายรูปแบบร่วมกับวิธี B และวิธี C วิธีการคือการใช้แท็ก <link> ในหน้าเพื่ออ้างอิงเอกสารหลัก CSS เหมือนกับการสาธิตวิธี B และลิงก์ไปยัง Styles.css
เนื้อหาของ styles.css มีเพียงไม่กี่กฎ @Import และแนะนำไฟล์ CSS อื่น ๆ ที่จำเป็น
ตัวอย่างเช่นหากคุณต้องการแนะนำสามสไตล์แผ่นหนึ่งเพื่อประมวลผลเค้าโครงหนึ่งเพื่อกำหนดฟอนต์และหนึ่งเพื่อกำหนดสีเนื้อหาของ styles.css อาจมีลักษณะเช่นนี้:
/*เบราว์เซอร์เก่าจะไม่ตีความกฎการนำเข้าเหล่านี้*//
@import url (layout.css);
@import url (fonts.css);
@import url (color.css);
ด้วยวิธีนี้แท็ก <link> เดียวกันสามารถใช้ได้ทั่วทั้งเว็บไซต์และมีเฉพาะไฟล์ styles.css เท่านั้น เอกสารนี้สามารถนำเข้าแผ่นสไตล์อื่น ๆ ต่อไปด้วยกฎ @Import ตราบใดที่แผ่นสไตล์ใหม่ถูกเพิ่มลงในเอกสารนี้ก็สามารถมีบทบาทในเว็บไซต์ทั้งหมด
ทำให้ง่ายต่อการอัปเดตและแทนที่ CSS ตัวอย่างเช่นหากคุณต้องการตัด CSS เป็น 4 ไฟล์บนท้องถนนคุณจะต้องเปลี่ยนกฎ @IMPORT ของเอกสารนี้โดยไม่ต้องแก้ไขรหัสซอร์ส XHTML ทั้งหมด
มีเคล็ดลับอีกประการหนึ่งในการซ่อน CSS จากเบราว์เซอร์เก่าโดยใช้กฎ @Import ของวิธี C นั่นคือใช้ผลกระทบของ CSS และใช้วิธี A หรือวิธี B เพื่อให้เบราว์เซอร์เก่าและใหม่ล่าสุดเพื่อรองรับเอฟเฟกต์ LO-FI จากนั้นใช้ @IMPORT เพื่อให้เอฟเฟกต์ขั้นสูง
เบราว์เซอร์รุ่นเก่าจะได้รับเนื้อหาที่สามารถรองรับได้เท่านั้นในขณะที่เบราว์เซอร์รุ่นใหม่จะได้รับสไตล์ทั้งหมดที่ต้องการใช้
มาดูกันว่ารหัสของเทคนิคนี้เป็นอย่างไร:
<! doctype html สาธารณะ -// w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = เนื้อหาประเภทเนื้อหา = text/html; charset = utf-8 />
<title> ใช้ CSS </title>
<link rel = stylesheet type = text /css href = lofi.css _fcksavedurl = lofi.css /> <style type = text/css> @Import hifi.css; </style></head>
ที่นี่ lofi.css ควรมีกฎ CSS พื้นฐานเช่นสีลิงค์และขนาดตัวอักษร; ในขณะที่ hifi.css มีกฎขั้นสูงเช่นเลย์เอาต์การวางตำแหน่งรูปภาพพื้นหลัง ฯลฯ
เราสามารถส่งรูปแบบเวอร์ชัน LO-FI และ Hi-Fi ได้โดยไม่ต้องเขียนสคริปต์หรือระบุรุ่นเบราว์เซอร์ในด้านเซิร์ฟเวอร์ คำสั่งเป็นสิ่งสำคัญ
มันเป็นสิ่งสำคัญที่จะระบุลำดับของ <link> และ <style> แท็กในแท็กซอร์สซอร์ส น้ำตกของ CSS หมายถึงลำดับความสำคัญของกฎซึ่งพิจารณาตามลำดับของการเกิดขึ้น
ตัวอย่างเช่นเนื่องจากเบราว์เซอร์ล่าสุดรองรับทั้งสองวิธีแผ่นสไตล์ทั้งหมดจะถูกดาวน์โหลดและทุกสไตล์ในนั้นจะถูกนำไปใช้ ในเวลานี้กฎสไตล์ใน hifi.css จะแทนที่สไตล์ที่ระบุโดย lofi.css สำหรับแท็กเดียวกัน เหตุผลคืออะไร? เนื่องจากในรหัสซอร์สแท็ก hifi.css จะปรากฏขึ้นหลังจาก lofi.css
เบราว์เซอร์ที่เก่ากว่าไม่สนใจ hifi.css เนื่องจากกฎ @import ไม่รองรับดังนั้นพวกเขาจึงใช้สไตล์ที่กำหนดโดย lofi.css เท่านั้น โอบกอดคุณสมบัติ Cascade
ประโยชน์ของ CSS cascadedity นั้นเกิดขึ้นได้หลายวิธี ตัวอย่างเช่นสมมติว่าเว็บไซต์ทั้งหมดของคุณแชร์ CS ภายนอกสำหรับเค้าโครงการวางตำแหน่งการตั้งค่าแบบอักษรสี ฯลฯ จากนั้นคุณควรใช้แผ่น @Import Style Sheet ในแต่ละหน้าเพื่อซ่อนกฎเหล่านี้สำหรับเบราว์เซอร์เก่า
หากมีหน้าเว็บบนเว็บไซต์ที่ต้องการแบ่งปันการตั้งค่าเค้าโครงและการตั้งค่าตำแหน่ง แต่จำเป็นต้องปรับฟอนต์หรือสี ในหน้านี้ (แตกต่างจากหน้าอื่น ๆ ในเว็บไซต์) เอกสารหลัก CSS ยังสามารถแนะนำได้ หลังจากเสร็จสิ้นการอ้างอิงเราจะอ้างถึงเอกสาร CSS ที่สองที่กำหนดสไตล์พิเศษสำหรับหน้านี้ กฎใด ๆ ในไฟล์ CSS ที่สองจะเป็นที่ต้องการโดยเขียนทับกฎสไตล์ที่ระบุโดยไฟล์ CSS แรกสำหรับป้ายกำกับเดียวกัน
ลองดูตัวอย่าง Master.css มีโครงสร้างเว็บไซต์ทั้งหมดฟอนต์และกฎ CSS อื่น ๆ ในขณะที่ Custom.css จะอ้างอิงเฉพาะในหน้าเฉพาะครอบคลุมการตั้งค่าสไตล์ของแท็กพิเศษหลายแท็ก
<! doctype html สาธารณะ -// w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = เนื้อหาประเภทเนื้อหา = text/html; charset = utf-8 />
<title> ใช้ CSS </title>
<style type = text/css> @Import Master.css; @Import Custom.css; </style></head>
เนื่องจาก custom.css เป็นอันที่สองในซอร์สโค้ดแท็กสไตล์ที่ระบุไว้สำหรับแท็กเดียวกันจะแทนที่สิ่งที่เป็นสูตรภายใน master.css
ตัวอย่างเช่นสมมติว่าภายใน main.css เราต้องการแท็ก <h1> เพื่อใช้ตัวอักษร Serif สีแดงและ <H2> เพื่อใช้ตัวอักษร Serif สีน้ำเงิน
H1 {
Font-Family: Georgia, Serif;
สี: สีแดง;
-
H2 {
Font-Family: Georgia, Serif;
สี: สีน้ำเงิน;
-
ในหน้าเฉพาะเราต้องการเปลี่ยนการตั้งค่าสไตล์ของแท็ก <H1> และติดตามสไตล์ของ <H2> จากนั้นใน custom.css เราจำเป็นต้องประกาศสไตล์ใหม่สำหรับ <h1>
H1 {
Font-Family: Verdana, Sans-Serif;
สี: สีส้ม;
-
การประกาศนี้จะแทนที่การประกาศใน master.css (เพราะ custom.css ถูกนำมาใช้ในภายหลัง) หากหน้าแรกแนะนำ master.css แล้ว custom.css แท็ก <h1> จะใช้ตัวอักษรสีส้ม Verdana ในขณะที่ <h2> ยังคงเป็นตัวอักษรสีน้ำเงิน Serif เพราะการประกาศครั้งต่อไปใน Master.css ไม่ได้ถูกแทนที่โดย custom.css
ฟังก์ชั่นการเรียงซ้อนของ CSS เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการแบ่งปันสไตล์ทั่วไปช่วยให้คุณสามารถครอบคลุมเฉพาะกฎที่จำเป็นต้องแก้ไข
<h1 style = font-family: Georgia, serif; สี: สีส้ม;> นี่คือชื่อ </h1>
นี่เป็นวิธีการใช้งาน CSS ที่สี่ที่เราได้สัมผัสกับ - สไตล์อินไลน์ เกือบทุกแท็กสามารถเพิ่มได้ด้วยแอตทริบิวต์สไตล์ช่วยให้คุณสามารถใช้กฎสไตล์ CSS กับแท็กได้โดยตรงเช่นเดียวกับตัวอย่างด้านบน
เนื่องจากสไตล์อินไลน์เป็นชั้นที่ต่ำที่สุดของการซ้อนกันจึงแทนที่การประกาศรูปแบบภายนอกทั้งหมดและกฎที่ประกาศภายในแท็ก <style> ของ <head>
นี่เป็นวิธีง่ายๆในการเพิ่มสไตล์ตลอดทั้งหน้า แต่ต้องจ่ายเงินสำหรับการใช้งาน สไตล์เชื่อมโยงกับฉลาก
หากคุณพึ่งพาวิธี D มากเกินไปเมื่อสร้างสไตล์สำหรับหน้าคุณจะไม่แยกเนื้อหาและวิธีการแสดง เมื่อคุณย้อนกลับและแก้ไขคุณต้องทำเครื่องหมายซอร์สโค้ดในเชิงลึกและใส่ CSS ลงในไฟล์แยกต่างหากซึ่งจะง่ายต่อการบำรุงรักษา
วิธีการละเมิด D ไม่แตกต่างจากการใช้ฉลากเอฟเฟกต์การแสดงผลเช่น <font> เพื่อปนเปื้อนซอร์สโค้ด รายละเอียดการออกแบบเหล่านี้ควรวางไว้ที่อื่นเสมอ ระวังใช้
ในความเป็นจริงบางครั้งโอกาสที่จะใช้สไตล์อินไลน์คือการช่วยชีวิตของคุณเมื่อคุณต้องการเพิ่มสไตล์ลงในหน้า แต่คุณไม่สามารถเข้าถึงไฟล์ภายนอกหรือคุณไม่สามารถแก้ไข <head> หรือคุณสามารถใช้สไตล์ชั่วคราวและคุณจะใช้เมื่อคุณไม่ได้ตั้งใจจะแชร์กับแท็กอื่น ๆ
ตัวอย่างเช่นหากมีหน้าเว็บบนเว็บไซต์ที่แสดงตัวอย่างการขายการกุศลที่จะถูกลบออกในภายหลังและคุณต้องการออกแบบสไตล์ที่ไม่เหมือนใครสำหรับหน้านี้แล้วอาจฝังกฎสไตล์เหล่านี้ไว้ในแท็กโดยไม่เพิ่มลงในแผ่นสไตล์ถาวร
มาทำตอนนี้ แต่โปรดทราบว่ารูปแบบเหล่านี้ไม่สามารถเปลี่ยนแปลงได้อย่างง่ายดายหรือใช้ทั่วทั้งหน้าสำหรับทั้งเว็บไซต์
หน้าก่อนหน้า 1 2 3 หน้าถัดไปอ่านข้อความเต็ม