CSS หรือ Cascading Style Sheets เป็นสิ่งที่ใช้ในการออกแบบเว็บไซต์สมัยใหม่เพื่อใช้รูปลักษณ์ไปยังหน้าเว็บ แม้ว่า HTML จะสร้างโครงสร้างของเพจและจาวาสคริปต์สามารถจัดการกับพฤติกรรมลักษณะและความรู้สึกของเว็บไซต์เป็นโดเมนของ CSS เมื่อใช้รูปแบบเหล่านี้มักใช้สไตล์ชีตภายนอกบ่อยที่สุด แต่คุณสามารถใช้สไตล์ CSS กับองค์ประกอบเฉพาะแบบเฉพาะได้โดยใช้สิ่งที่เรียกว่า "รูปแบบอินไลน์"
สไตล์อินไลน์คือสไตล์ CSS ที่ใช้โดยตรงใน HTML ของหน้า มีข้อดีและข้อเสียของวิธีนี้ ขั้นแรกให้ดูว่ารูปแบบเหล่านี้เขียนอย่างไร
วิธีการเขียนสไตล์อินไลน์
ในการสร้างสไตล์ CSS แบบอินไลน์คุณจะเริ่มต้นด้วยการเขียนคุณสมบัติสไตล์ของคุณเหมือนกับลักษณะที่คุณต้องการในสไตล์ชีท แต่ต้องเป็นบรรทัดเดียวทั้งหมด แยกคุณสมบัติหลายอย่างด้วยเครื่องหมายอัฒภาคเช่นเดียวกับที่คุณทำในสไตล์ชีต
พื้นหลัง: # CCC; สี: # fff; เส้นขอบ: ทึบสีดำ 1px;
วางแนวของสไตล์ไว้ในแอตทริบิวต์ style ขององค์ประกอบที่คุณต้องการให้จัดรูปแบบ ตัวอย่างเช่นถ้าคุณต้องการใช้สไตล์นี้กับย่อหน้าใน HTML องค์ประกอบแบบนั้นจะมีลักษณะดังนี้:
ในตัวอย่างนี้ย่อหน้านี้จะปรากฏขึ้นพร้อมกับพื้นหลังสีเทาอ่อน (นั่นคือสิ่งที่ #ccc จะแสดงผล) ข้อความสีดำ (จากสี # 000) และมีขอบสีดำที่เป็นของ 1 พิกเซลทั่วทั้งสี่ด้านของย่อหน้า .
ข้อดีของ Inline Styles
ด้วย น้ำตก ของ Cascading Style Sheet สไตล์อินไลน์มีลำดับความสำคัญสูงสุดหรือความจำเพาะในเอกสาร ซึ่งหมายความว่าจะใช้งานได้ไม่ว่าจะเป็นเรื่องใดในสไตล์ชีตภายนอกของคุณ (ยกเว้นข้อใดข้อหนึ่งที่ได้รับการประกาศสำคัญว่าแผ่นงาน แต่นี่ไม่ใช่สิ่งที่ควรทำในไซต์การผลิตถ้าเป็นเช่นนั้น สามารถหลีกเลี่ยงได้)
สไตล์เดียวที่มีความสำคัญสูงกว่าสไตล์แบบอินไลน์คือ สไตล์ผู้ ใช้ที่ผู้อ่านอ่านเอง หากคุณประสบปัญหาในการเปลี่ยนแปลงการนำไปใช้คุณสามารถลองตั้งค่ารูปแบบอินไลน์บนองค์ประกอบ หากสไตล์คุณยังไม่แสดงโดยใช้สไตล์อินไลน์คุณจะรู้ว่ามีบางอย่างที่เกิดขึ้น
สไตล์แบบอินไลน์เป็นเรื่องง่ายและรวดเร็วในการเพิ่มและคุณไม่จำเป็นต้องกังวลกับการเขียนตัวเลือก CSS ที่เหมาะสมเนื่องจากคุณกำลังเพิ่มสไตล์ให้กับองค์ประกอบที่คุณต้องการเปลี่ยนแปลงโดยตรง (ส่วนที่เป็นหลักแทนที่ตัวเลือกที่คุณจะเขียนในสไตล์ชีตภายนอก ) คุณไม่จำเป็นต้องสร้างเอกสารใหม่ทั้งหมด (เช่นเดียวกับสไตล์ชีตภายนอก) หรือแก้ไของค์ประกอบใหม่ในส่วนหัวของเอกสาร (เช่นเดียวกับสไตล์ชีทภายใน) คุณเพียงเพิ่มแอตทริบิวต์ style ที่ถูกต้องในเกือบทุกองค์ประกอบ HTML นี่คือเหตุผลทั้งหมดที่คุณอาจถูกล่อลวงให้ใช้รูปแบบอินไลน์ แต่คุณต้องตระหนักถึงข้อเสียที่สำคัญมากบางประการสำหรับวิธีนี้
ข้อเสียของ Inline Styles
เนื่องจากรูปแบบอินไลน์มีความเฉพาะเจาะจงมากที่สุดในน้ำตกจึงสามารถขับรถไปตามสิ่งที่คุณไม่ต้องการได้ นอกจากนี้ยังลบล้างแง่มุมที่มีประสิทธิภาพมากที่สุดของ CSS ด้วยเช่นกันความสามารถในการจัดรูปแบบและหน้าเว็บจำนวนมากจากไฟล์ CSS กลางหนึ่งเพื่อปรับปรุงในอนาคตและการเปลี่ยนแปลงสไตล์ที่ง่ายขึ้นในการจัดการ
ถ้าคุณต้องใช้รูปแบบอินไลน์เอกสารของคุณจะกลายเป็นเรื่องอ้วนและยากที่จะรักษา เนื่องจากรูปแบบอินไลน์ต้องถูกนำไปใช้กับองค์ประกอบทั้งหมดที่คุณต้องการ ถ้าคุณต้องการให้ย่อหน้าทั้งหมดของคุณมี แบบอักษร "Arial" คุณต้องเพิ่มสไตล์อินไลน์ให้กับแท็ก
แต่ละรายการในเอกสารของคุณ สิ่งนี้จะเพิ่มทั้งงานบำรุงรักษาสำหรับนักออกแบบและเวลาในการดาวน์โหลดสำหรับผู้อ่านเนื่องจากคุณจำเป็นต้องเปลี่ยนแปลงข้อมูลนี้ในทุกๆหน้าในไซต์ของคุณเพื่อเปลี่ยนแบบอักษรตระกูลนี้ หรือหากคุณใช้สไตล์ชีทที่แยกจากกันคุณอาจสามารถเปลี่ยนได้ในจุดเดียวและทุกหน้าจะได้รับการปรับปรุงนั้น
ความจริงนี่เป็นขั้นตอนย้อนกลับในการออกแบบเว็บ - หลังวันที่ของแท็ก !
ข้อเสียเปรียบอีกประการหนึ่งของรูปแบบอินไลน์ก็คือว่ามันเป็นไปไม่ได้ที่จะใช้องค์ประกอบปลอมและชั้นเรียนกับพวกเขา ตัวอย่างเช่นเมื่อ ใช้ สไตล์ชีท ภายนอก คุณสามารถกำหนดลักษณะสีเยี่ยมชมปักหมุดและใช้งานและ สีลิงก์ ของแท็ก anchor แต่ด้วยสไตล์แบบอินไลน์คุณสามารถกำหนดลักษณะเป็นลิงก์ได้เนื่องจากนั่นคือสิ่งที่แอตทริบิวต์ style ถูกแนบมา .
ในท้ายที่สุดเรา ขอแนะนำ ไม่ ให้ใช้รูปแบบอินไลน์ สำหรับหน้าเว็บของคุณเนื่องจากทำให้เกิดปัญหาและทำให้หน้าเว็บต้องทำงานมากขึ้นเพื่อรักษา ครั้งเดียวที่เราใช้พวกเขาคือเมื่อเราต้องการตรวจสอบรูปแบบได้อย่างรวดเร็วในระหว่างการพัฒนา เมื่อเราได้มองหาองค์ประกอบที่ถูกต้องแล้วเราจะย้ายไปยังสไตล์ชีตภายนอกของเรา
บทความเกี่ยวกับธรรมชาติโดย Jennifer Krynin แก้ไขโดย Jeremy Girard