Cascading Style Sheets คืออะไร?
เว็บไซต์ประกอบด้วยชิ้นส่วนแต่ละชิ้นประกอบด้วยรูปภาพข้อความและเอกสารต่างๆ เอกสารเหล่านี้ไม่เพียง แต่รวมถึงเอกสารที่สามารถเชื่อมโยงจากหน้าเว็บต่างๆเช่นไฟล์ PDF แต่ยังเป็นเอกสารที่ใช้ในการสร้างหน้าเว็บด้วยเช่นเอกสาร HTML เพื่อพิจารณาโครงสร้างของเพจและเอกสาร CSS (Cascading Style Sheet) เพื่อกำหนดรูปลักษณ์ของหน้าเว็บ บทความนี้จะเจาะลึก CSS ครอบคลุมสิ่งที่เป็นอยู่และตำแหน่งที่ใช้ในเว็บไซต์ในปัจจุบัน
บทเรียนประวัติ CSS
CSS ได้รับการพัฒนาเป็นครั้งแรกในปีพ. ศ. 2540 เพื่อช่วยให้นักพัฒนาเว็บสามารถกำหนดลักษณะที่ปรากฏของหน้าเว็บที่สร้างขึ้นได้ มีจุดมุ่งหมายเพื่อให้ผู้เชี่ยวชาญด้านเว็บสามารถ แยกเนื้อหา และโครงสร้างของรหัสเว็บไซต์ออกจากการออกแบบภาพซึ่งเป็นสิ่งที่ไม่สามารถทำได้ก่อนเวลานี้
การแยกโครงสร้างและสไตล์ช่วยให้ HTML สามารถทำงานได้มากขึ้นจากเดิมซึ่งขึ้นอยู่กับ - มาร์กอัพของเนื้อหาโดยไม่ต้องกังวลเกี่ยวกับการออกแบบและเค้าโครงของหน้าเว็บสิ่งที่เรียกว่า "รูปลักษณ์" ของหน้าเว็บ
CSS ไม่ได้รับความนิยมจนกระทั่งประมาณปี 2000 เมื่อเบราว์เซอร์เริ่มใช้แบบอักษรและสีพื้นฐานของภาษามาร์กอัปนี้ วันนี้เบราว์เซอร์ที่ทันสมัยทั้งหมดสนับสนุน CSS ระดับ 1 ส่วนใหญ่ของ CSS Level 2 และแม้แต่แง่มุมต่างๆของ CSS Level 3 เนื่องจาก CSS ยังคงมีวิวัฒนาการและมีการเปิดตัวรูปแบบใหม่เว็บเบราเซอร์จึงเริ่มใช้โมดูลที่สนับสนุน CSS ใหม่ในเบราว์เซอร์เหล่านั้นและมอบเครื่องมือออกแบบใหม่ ๆ ที่มีประสิทธิภาพในการทำงานร่วมกับนักออกแบบเว็บ
ในหลายปีที่ผ่านมามีนักออกแบบเว็บรายหนึ่งที่ปฏิเสธที่จะใช้ CSS ในการออกแบบและพัฒนาเว็บไซต์ แต่การปฏิบัติดังกล่าวได้หายไปจากอุตสาหกรรมทุกวันนี้ CSS เป็นมาตรฐานที่นิยมใช้กันอย่างแพร่หลายในการออกแบบเว็บและคุณจะพยายามอย่างยิ่งที่จะหาคนที่ทำงานในอุตสาหกรรมในปัจจุบันซึ่งไม่ได้มีความเข้าใจพื้นฐานเกี่ยวกับภาษานี้มาก่อน
CSS เป็นคำย่อ
ดังที่กล่าวมาแล้วคำว่า CSS ย่อมาจาก "Cascading Style Sheet" ขอแบ่งวลีนี้ลงเล็กน้อยเพื่ออธิบายอย่างเต็มที่ว่าเอกสารเหล่านี้ทำอะไร
คำว่า "สไตล์ชีต" หมายถึงเอกสารเอง (เช่นไฟล์ HTML, CSS เป็นเพียงเอกสารข้อความที่สามารถแก้ไขได้โดยใช้โปรแกรมต่างๆ) สไตล์ชีตถูกนำมาใช้สำหรับ การออกแบบ เอกสารเป็นเวลาหลายปี ข้อกำหนดทางเทคนิคสำหรับเค้าโครงไม่ว่าจะเป็นการพิมพ์หรือออนไลน์ นักออกแบบสิ่งพิมพ์ได้ใช้แผ่นงานสไตล์มานานแล้วเพื่อให้แน่ใจว่าการออกแบบของพวกเขาได้รับการพิมพ์ตามข้อกำหนดของพวกเขา สไตล์ชีตสำหรับเว็บเพจมีจุดประสงค์เดียวกัน แต่ด้วยฟังก์ชันเพิ่มเติมที่บอกได้ว่าเว็บเบราเซอร์แสดงเอกสารที่กำลังดูอยู่ วันนี้สไตล์ชีต CSS สามารถใช้ ข้อความค้นหาสื่อ เพื่อเปลี่ยนวิธีที่หน้าเว็บมองหา อุปกรณ์และขนาดหน้าจอที่ต่าง กัน นี่เป็นสิ่งสำคัญอย่างไม่น่าเชื่อเนื่องจากจะช่วยให้เอกสาร HTML แบบเดียวสามารถแสดงผลได้ตามหน้าจอที่ใช้ในการเข้าถึง
Cascade เป็นส่วนพิเศษที่แท้จริงของคำว่า "cascading style sheet" แผ่นชีทเว็บ มีจุดมุ่งหมายเพื่อให้น้ำตกผ่านชุดรูปแบบต่างๆในแผ่นงานเช่นแม่น้ำเหนือน้ำตก น้ำในแม่น้ำกระทบหินทั้งหมดในน้ำตก แต่เฉพาะที่ด้านล่างจะมีผลต่อการไหลของน้ำ เช่นเดียวกับน้ำตกในสไตล์ชีตเว็บไซต์
ทุกๆหน้าเว็บได้รับผลกระทบจากสไตล์ชีตอย่างน้อยหนึ่งรูปแบบแม้ว่านักออกแบบเว็บไซต์จะไม่ใช้สไตล์ใดก็ตาม สไตล์ชีตนี้เป็นสไตล์ชีต ของเอเจนต์ผู้ใช้ - เรียกอีกอย่างว่าสไตล์ดีฟอลต์ที่เว็บเบราเซอร์จะใช้เพื่อแสดงหน้าเว็บถ้าไม่มีคำแนะนำอื่น ๆ ตัวอย่างเช่นโดยค่าเริ่มต้นการเชื่อมโยงหลายรูปแบบจะมีสีฟ้าและขีดเส้นใต้ สไตล์เหล่านั้นมาจากแผ่นงานสไตล์เริ่มต้นของเว็บเบราเซอร์ หากนักออกแบบเว็บไซต์ให้คำแนะนำอื่น ๆ เบราว์เซอร์จะต้องทราบว่าคำแนะนำใดมีลำดับความสำคัญ เบราว์เซอร์ทั้งหมดมีสไตล์เริ่มต้นของตัวเอง แต่หลายค่าเริ่มต้นเหล่านี้ (เช่นลิงก์ข้อความที่ขีดเส้นใต้สีฟ้า) จะมีการแบ่งปันกันในเบราว์เซอร์และเวอร์ชันหลัก ๆ ทั้งหมดหรือส่วนใหญ่
สำหรับตัวอย่างอื่นของเบราว์เซอร์เริ่มต้นในเว็บเบราเซอร์ของฉันแบบอักษรเริ่มต้นคือ " Times New Roman " ที่มีขนาด 16 แต่แทบจะไม่มีหน้าใดที่ฉันเข้าชมแสดงในตระกูลและขนาดแบบอักษรนั้น เนื่องจาก cascade กำหนดว่าแผ่นงานสไตล์ที่สองซึ่งกำหนดโดยนักออกแบบเองเพื่อกำหนด ขนาดตัวอักษร และครอบครัวใหม่แทนที่ค่าเริ่มต้นของเว็บเบราเซอร์ของฉัน ชีตสไตล์ใด ๆ ที่คุณสร้างขึ้นสำหรับเว็บเพจจะมีความจำเพาะมากกว่าสไตล์เริ่มต้นของเบราว์เซอร์ดังนั้นค่าดีฟอลต์เหล่านี้จะใช้ได้เฉพาะเมื่อสไตล์ชีตของคุณไม่ได้แทนที่ หากคุณต้องการให้ลิงก์เป็นสีน้ำเงินและขีดเส้นใต้คุณไม่จำเป็นต้องทำอะไรเนื่องจากเป็นค่าเริ่มต้น แต่ถ้าไฟล์ CSS ของไซต์ระบุว่าลิงก์ควรเป็นสีเขียวสีนั้นจะแทนที่สีน้ำเงินเริ่มต้น ขีดเส้นใต้จะยังคงอยู่ในตัวอย่างนี้เนื่องจากคุณไม่ได้ระบุไว้เป็นอย่างอื่น
CSS ใช้ที่ไหน?
CSS สามารถนำมาใช้เพื่อกำหนดหน้าเว็บที่ควรดูเมื่อดูในสื่ออื่น ๆ นอกเหนือจากเว็บเบราเซอร์ ตัวอย่างเช่นคุณสามารถสร้างสไตล์ชีตการพิมพ์ที่จะกำหนดวิธีการพิมพ์หน้าเว็บ เนื่องจากรายการในเว็บเพจเช่นปุ่มนำทางหรือแบบฟอร์มบนเว็บจะไม่มีจุดประสงค์ใด ๆ ในหน้าพิมพ์จึงสามารถใช้สไตล์ชีตพิมพ์เพื่อ "ปิด" พื้นที่เหล่านั้นเมื่อพิมพ์หน้าเว็บ แม้ว่าจะไม่ใช่แนวทางปฏิบัติทั่วไปในหลาย ๆ ไซต์ แต่ตัวเลือกในการสร้างสไตล์ชีตการพิมพ์ก็มีประสิทธิภาพและน่าสนใจ (จากประสบการณ์ของผม - ผู้เชี่ยวชาญด้านเว็บส่วนใหญ่ไม่ได้ทำเช่นนี้เนื่องจากขอบเขตงบประมาณของเว็บไซต์ไม่เรียกร้องให้มีการเพิ่มเติมงานนี้ )
เหตุใด CSS จึงสำคัญ?
CSS เป็นหนึ่งในเครื่องมือที่มีประสิทธิภาพมากที่สุดที่นักออกแบบเว็บไซต์สามารถเรียนรู้ได้เพราะด้วยคุณลักษณะนี้คุณสามารถส่งผลต่อรูปลักษณ์ภายนอกทั้งหมดของเว็บไซต์ได้ ชีตสไตล์ที่เขียนได้ดีสามารถอัปเดตได้อย่างรวดเร็วและอนุญาตให้ไซต์เปลี่ยนแปลงสิ่งที่จัดลำดับความสำคัญบนหน้าจอซึ่งจะแสดงมูลค่าและมุ่งเน้นไปที่ผู้เข้าชมโดยไม่ต้องมีการเปลี่ยนแปลงใด ๆ ที่จำเป็นต้องทำในมาร์กอัพ HTML พื้นฐาน
ความท้าทายหลักของ CSS คือการเรียนรู้ไม่น้อยและเบราว์เซอร์จะเปลี่ยนทุกวันสิ่งที่ทำงานได้ดีในวันนี้อาจไม่ได้รับความรู้สึกในวันพรุ่งนี้เนื่องจากรูปแบบใหม่ ๆ จะได้รับการสนับสนุนและคนอื่น ๆ ก็ตกหลุมรักกัน .
เนื่องจาก CSS สามารถสร้างน้ำตกและรวมเข้าด้วยกันและพิจารณาว่าเบราว์เซอร์ต่างๆสามารถตีความและใช้คำสั่งต่างๆได้อย่างไร CSS จึงสามารถทำได้ยากกว่า HTML ธรรมดาเพื่อใช้เป็นหลัก CSS ยังมีการเปลี่ยนแปลงในเบราว์เซอร์ในลักษณะที่ HTML ไม่เป็นจริง เมื่อคุณเริ่มใช้ CSS แล้วคุณจะเห็นว่าการควบคุมพลังของสไตล์ชีตจะทำให้คุณมีความยืดหยุ่นในการจัดวางหน้าเว็บและกำหนดรูปลักษณ์ของพวกเขาได้อย่างไม่น่าเชื่อ ในระหว่างนี้คุณจะรวบรวม "กระเป๋าแฟชั่น" สไตล์และวิธีการที่เคยใช้กับคุณมาก่อนและคุณสามารถหันไปใช้อีกครั้งในขณะที่คุณสร้างหน้าเว็บใหม่ในอนาคต
บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 7/5/17,