Cascading Style Sheets (CSS) ช่วยให้คุณสามารถกำหนดรูปลักษณ์ขององค์ประกอบโดยยึดติดกับแอตทริบิวต์ที่คุณใช้กับองค์ประกอบนั้น แอ็ตทริบิวต์เหล่านี้สามารถเป็นได้ทั้ง ID หรือคลาสและเช่นเดียวกับคุณลักษณะทั้งหมดพวกเขาจะเพิ่มข้อมูลที่เป็นประโยชน์ลงในองค์ประกอบที่แนบ
ขึ้นอยู่กับแอตทริบิวต์ที่คุณเพิ่มลงในองค์ประกอบคุณสามารถเขียนตัวเลือก CSS เพื่อใช้รูปแบบภาพที่จำเป็นซึ่งจำเป็นเพื่อให้ได้รูปลักษณ์และองค์ประกอบขององค์ประกอบนั้นและเว็บไซต์โดยรวม
แม้ว่า ID หรือชั้นเรียนจะทำงานเพื่อจุดประสงค์ในการติดตั้ง CSS ด้วยวิธีการออกแบบเว็บแบบใหม่นั้นสนับสนุนการเรียนผ่าน ID เนื่องจากบางส่วนมีความเฉพาะเจาะจงน้อยกว่าและง่ายต่อการทำงานโดยรวม ใช่คุณจะยังพบไซต์จำนวนมากที่ใช้รหัส แต่แอตทริบิวต์เหล่านี้มีการใช้งานมากขึ้นกว่าในอดีตในขณะที่ชั้นเรียนได้ดำเนินการผ่านหน้าเว็บที่ทันสมัย
ชั้นเรียนเดี่ยวหรือหลายชั้นใน CSS?
ในกรณีส่วนใหญ่คุณจะกำหนดแอตทริบิวต์ชั้นเดียวให้กับองค์ประกอบ แต่จริงๆแล้วคุณไม่ จำกัด เพียงแค่ชั้นเดียวเท่านั้นที่มีรหัส ในขณะที่องค์ประกอบสามารถมีแอตทริบิวต์ ID เดียวได้คุณสามารถให้องค์ประกอบหลายคลาสได้อย่างสมบูรณ์และในบางกรณีการทำเช่นนี้จะทำให้หน้าของคุณง่ายขึ้นและมีความยืดหยุ่นมากขึ้น!
ถ้าคุณต้องการมอบหมายหลายชั้นให้กับองค์ประกอบคุณสามารถเพิ่มชั้นเรียนเพิ่มเติมและแยกพวกเขาออกจากกันด้วยช่องว่างในแอตทริบิวต์ของคุณ
ตัวอย่างเช่นวรรคนี้มีสามชั้นเรียน:
นี่จะเป็นข้อความในย่อหน้า
ชุดนี้ตั้งสามชั้นต่อไปนี้ในแท็กวรรค:
- Pullquote
- แนะนำ
- ซ้าย
สังเกตเว้นวรรคระหว่างแต่ละค่าชั้นเรียนเหล่านี้ ช่องว่างเหล่านี้คือสิ่งที่กำหนดให้แต่ละชั้นแตกต่างกัน นี่เป็นเหตุผลว่าทำไมชื่อชั้นจึงไม่สามารถมีช่องว่างได้เพราะการทำเช่นนี้จะกำหนดให้เป็นชั้นเรียนแยกต่างหาก ตัวอย่างเช่นถ้าคุณใช้ "pullquote-featured-left" โดยไม่มีเนื้อที่จะเป็นค่าระดับเดียว แต่ตัวอย่างข้างต้นซึ่งคำทั้งสามนี้ถูกแยกออกจากกันด้วยช่องว่างให้กำหนดเป็นค่าแต่ละอย่าง สิ่งสำคัญคือต้องทำความเข้าใจกับแนวคิดนี้เมื่อคุณตัดสินใจว่าจะใช้ค่าเรียนใดในหน้าเว็บของคุณ
เมื่อคุณมีค่าชั้นเรียนใน HTML แล้วคุณสามารถกำหนดสิ่งเหล่านี้เป็นชั้นเรียนใน CSS ของคุณและใช้สไตล์ที่คุณต้องการเพิ่ม ตัวอย่างเช่น.
.pullquote {… }.featured {… }p.left {… }
ในตัวอย่างเหล่านี้ CSS และค่า declarations คู่จะอยู่ภายในวงเล็บปีกกาซึ่งเป็นวิธีการที่รูปแบบเหล่านั้นจะถูกนำไปใช้กับตัวเลือกที่เหมาะสม
ถ้าคุณตั้งค่าคลาสเป็นองค์ประกอบเฉพาะ (ตัวอย่างเช่นp.left) คุณยังสามารถใช้เป็นส่วนหนึ่งของรายการชั้นเรียน อย่างไรก็ตามโปรดทราบว่าจะมีผลกับองค์ประกอบเหล่านี้ที่ระบุไว้ใน CSS เท่านั้น กล่าวอีกนัยหนึ่งคือ p.left จะใช้เฉพาะกับย่อหน้ากับคลาสนี้เนื่องจากตัวเลือกของคุณเป็นจริงที่จะนำไปใช้กับ "ย่อหน้าที่มีค่าระดับของ" ซ้าย "" ในทางตรงกันข้ามอีกสอง selectors ในตัวอย่างไม่ได้ระบุองค์ประกอบบางอย่างดังนั้นจะใช้กับองค์ประกอบที่ใช้ค่าชั้นเรียนเหล่านั้น
ข้อดีของชั้นเรียนหลายชั้น
หลายชั้นเรียนสามารถทำให้ง่ายต่อการเพิ่มเอฟเฟ็กต์พิเศษให้กับองค์ประกอบต่างๆโดยไม่ต้องสร้างสไตล์ใหม่สำหรับองค์ประกอบนั้น
ตัวอย่างเช่นคุณอาจต้องการที่จะสามารถลอยองค์ประกอบไปทางซ้ายหรือขวาได้อย่างรวดเร็ว คุณอาจเขียนสองชั้น
ซ้าย และ
ขวา มีเพียง
ลอย: ด้านซ้าย; และ
ลอย: ขวา; ในพวกเขา จากนั้นเมื่อใดก็ตามที่คุณมีองค์ประกอบที่ต้องการลอยซ้ายคุณก็เพิ่มคลาส "ซ้าย" ลงในรายการชั้นเรียน
มีสายดีที่จะเดินไปได้ที่นี่ โปรดจำไว้ว่ามาตรฐานเว็บกำหนดการแยกลักษณะและโครงสร้าง โครงสร้างถูกจัดการผ่าน HTML ขณะที่สไตล์อยู่ใน CSS หากเอกสาร HTML ของคุณเต็มไปด้วยองค์ประกอบที่มีชื่อชั้นเช่น "แดง" หรือ "ซ้าย" ซึ่งเป็นชื่อที่กำหนดให้องค์ประกอบควรมีลักษณะมากกว่าสิ่งที่เป็นคุณจะข้ามเส้นแบ่งระหว่างโครงสร้างและสไตล์ ฉันพยายาม จำกัด ชื่อชั้นเรียนที่ไม่ใช่ความหมายของฉันให้มากที่สุดเท่าที่จะเป็นไปได้ด้วยเหตุผลนี้
หลายคลาส Semantics และ JavaScript
ประโยชน์อีกประการหนึ่งของการใช้คลาสหลาย ๆ คือการให้โอกาสในการโต้ตอบกับคุณมากขึ้น
คุณสามารถใช้ชั้นเรียนใหม่กับองค์ประกอบที่มีอยู่โดยใช้ JavaScript โดยไม่ต้องลบชั้นเรียนเริ่มต้น นอกจากนี้คุณยังสามารถใช้คลาสเพื่อกำหนดความหมายขององค์ประกอบ ซึ่งหมายความว่าคุณสามารถเพิ่มชั้นเรียนเพิ่มเติมเพื่อกำหนดว่าองค์ประกอบนั้นหมายถึงความหมายได้อย่างไร นี่เป็นวิธีการทำงานของไมโครฟอร์แมต
ข้อเสียของหลายชั้นเรียน
ข้อเสียที่ใหญ่ที่สุดในการใช้ชั้นเรียนหลายชั้นในองค์ประกอบของคุณคือสามารถทำให้พวกเขาดูเทอะทะได้และจัดการกับช่วงเวลา อาจเป็นเรื่องยากที่จะระบุว่ารูปแบบใดมีผลต่อองค์ประกอบและถ้าสคริปต์ใด ๆ ส่งผลกระทบต่อองค์ประกอบ หลายกรอบที่มีอยู่ในปัจจุบันเช่น Bootstrap ทำให้การใช้องค์ประกอบที่มีหลายชั้นเรียนเป็นอย่างมาก โค้ดดังกล่าวลุกออกจากมือและทำงานได้อย่างรวดเร็วหากไม่ระมัดระวัง
เมื่อคุณใช้หลายชั้นเรียนคุณจะเสี่ยงต่อการมีลักษณะสำหรับชั้นเรียนเดียวกันกับรูปแบบอื่นแม้ว่าคุณจะไม่ต้องการทำเช่นนี้ก็ตาม การทำเช่นนี้อาจทำให้ยากที่จะทราบได้ว่าทำไมรูปแบบของคุณจึงไม่ได้ถูกนำมาใช้แม้ในเวลาที่ปรากฏว่าควรทำ คุณต้องตระหนักถึงความจำเพาะแม้จะมีแอตทริบิวต์ที่ใช้กับองค์ประกอบแบบนั้นก็ตาม!
เมื่อใช้เครื่องมือเช่นเครื่องมือของผู้ดูแลเว็บใน Google Chrome คุณจะสามารถดูได้ง่ายขึ้นว่าชั้นเรียนของคุณมีผลต่อสไตล์ของคุณอย่างไรและหลีกเลี่ยงปัญหาที่มีลักษณะและลักษณะที่ขัดแย้งกัน
