ทำความเข้าใจเกี่ยวกับการเปลี่ยนแปลงที่สำคัญของ CSS3
ความแตกต่างที่ใหญ่ที่สุดระหว่าง CSS2 และ CSS3 คือ CSS3 ถูกแยกออกเป็นส่วนต่างๆเรียกว่าโมดูล แต่ละโมดูลเหล่านี้จะผ่านทาง W3C ในขั้นตอนต่างๆของกระบวนการแนะนำ กระบวนการนี้ทำให้หลาย ๆ ชิ้นส่วนของ CSS3 ได้รับการยอมรับและนำไปใช้งานในเบราว์เซอร์โดยผู้ผลิตรายอื่น ๆ ได้ง่ายขึ้น
ถ้าคุณเปรียบเทียบกระบวนการนี้กับสิ่งที่เกิดขึ้นกับ CSS2 ซึ่งทุกอย่างถูกส่งมาเป็นเอกสารเดียวพร้อมข้อมูล Cascading Style Sheets ทั้งหมดภายในเนื้อหาคุณจะเห็นข้อดีของการแบ่งคำแนะนำออกเป็นส่วนเล็ก ๆ แต่ละชิ้น เนื่องจากแต่ละโมดูลมีการทำงานเป็นรายบุคคลเราจึงมีช่วงกว้างของการสนับสนุนเบราว์เซอร์สำหรับโมดูล CSS3
เช่นเดียวกับข้อกำหนดใหม่และการเปลี่ยนแปลงใด ๆ โปรดตรวจสอบหน้าเว็บ CSS3 ของคุณอย่างละเอียดในเบราเซอร์และระบบปฏิบัติการเท่าที่คุณสามารถทำได้ โปรดจำไว้ว่าเป้าหมายไม่ใช่การสร้างหน้าเว็บที่มีลักษณะเหมือนกันในทุกเบราว์เซอร์ แต่เพื่อให้แน่ใจว่ารูปแบบใด ๆ ที่คุณใช้รวมถึงรูปแบบ CSS3 ดูดีในเบราว์เซอร์ที่สนับสนุนพวกเขาและพวกเขาจะกลับมาอย่างสง่างามสำหรับเบราว์เซอร์รุ่นเก่า อย่า.
ตัวเลือก CSS3 ใหม่
CSS3 นำเสนอรูปแบบใหม่ ๆ ที่คุณสามารถเขียนกฎ CSS กับ CSS selectors ใหม่รวมถึง combinator แบบใหม่และองค์ประกอบหลอก ๆ ใหม่ ๆ
ตัวเลือกคุณลักษณะใหม่สามรายการ:
- แอตทริบิวต์เริ่มต้นตรงกับ องค์ประกอบ [foo ^ = "bar"] องค์ประกอบมีแอตทริบิวต์ที่เรียกว่า foo ที่ขึ้นต้นด้วย "bar" เช่น
- แอตทริบิวต์ที่ มีชื่อว่า foo ที่ลงท้ายด้วย "bar" เช่น "foo" = "bar"
- แอตทริบิวต์มี องค์ประกอบการ จับคู่ [foo * = "bar"] องค์ประกอบมีแอตทริบิวต์ที่ชื่อว่า foo ที่มีสตริง "bar" เช่น
16 เทียมใหม่ชั้นเรียน:
- :ราก
- องค์ประกอบรากของเอกสาร ใน HTML นี้ก็คือเสมอ
- : ที่ n-เด็ก (n)
- ใช้ตัวเลือกนี้เพื่อจับคู่องค์ประกอบลูกที่ถูกต้องหรือใช้ตัวแปรเพื่อให้ตรงกับการสลับ
- : ที่ n-สุดท้ายเด็ก (n)
- จับคู่องค์ประกอบของเด็กที่ถูกต้องนับจากส่วนสุดท้าย
- : ที่ n ของประเภท (n)
- จับคู่องค์ประกอบพี่น้องที่มีชื่อเดียวกันก่อนที่จะอยู่ในโครงสร้างเอกสาร
- : ที่ n-สุดท้ายของชนิด (n)
- จับคู่องค์ประกอบพี่น้องที่มีชื่อเดียวกันนับจากด้านล่าง
- :ลูกคนสุดท้อง
- จับคู่องค์ประกอบลูกสุดท้ายของผู้ปกครอง
- : ครั้งแรกของชนิด
- จับคู่องค์ประกอบพี่น้องคนแรกของประเภทนั้น
- : สุดท้ายของชนิด
- จับคู่องค์ประกอบพี่น้องคนสุดท้ายของประเภทนั้น
- :ลูกคนเดียว
- จับคู่องค์ประกอบที่เป็นลูกคนเดียวของผู้ปกครอง
- เพียง แต่ของประเภท
- จับคู่องค์ประกอบที่เป็นประเภทเดียวเท่านั้น
- : ว่างเปล่า
- จับคู่องค์ประกอบที่ไม่มีลูก (รวมทั้งโหนดข้อความ)
- : เป้าหมาย
- จับคู่องค์ประกอบที่เป็นเป้าหมายของ URI ที่อ้างอิง
- : เปิดใช้งาน
- จับคู่องค์ประกอบเมื่อเปิดใช้งาน
- : คนพิการ
- จับคู่องค์ประกอบเมื่อปิดใช้งาน
- : การตรวจสอบ
- จับคู่องค์ประกอบเมื่อได้รับการตรวจสอบ (ปุ่มหรือช่องทำเครื่องหมาย)
- : ไม่ได้ (s)
- จับคู่เมื่อองค์ประกอบไม่ตรงกับ ตัวเลือก ง่ายๆ s.
หนึ่ง combinator ใหม่:
- elementA ~ elementB
- จับคู่เมื่อ elementB ไปที่ไหนสักแห่งหลังจาก elementA ไม่จำเป็นต้องรีบเลย
คุณสมบัติใหม่
CSS3 ยังได้แนะนำคุณสมบัติ CSS ใหม่ ๆ หลายคุณสมบัติเหล่านี้คือการสร้างรูปแบบภาพซึ่งน่าจะเชื่อมโยงกับโปรแกรมกราฟิกเช่น Photoshop มากขึ้น บางส่วนเช่นรัศมีขอบหรือกล่องเงาได้รับรอบตั้งแต่บทนำถ้า CSS3 อื่น ๆ เช่น flexbox หรือแม้กระทั่ง CSS Grid เป็นรูปแบบใหม่ที่ถือว่าเป็น CSS3 เพิ่มเติม
ใน CSS3 โมเดลกล่องไม่ได้เปลี่ยนแปลง แต่มีพวงของคุณสมบัติสไตล์ใหม่ที่สามารถช่วยให้คุณกำหนดลักษณะพื้นหลังและเส้นขอบของกล่องของคุณได้
ผู้วิเศษหลายคน
การใช้พื้นหลังภาพพื้นหลังตำแหน่งและพื้นหลังซ้ำรูปแบบที่คุณสามารถระบุภาพพื้นหลังหลายชั้นจะอยู่ด้านบนของอีกคนหนึ่งในกล่อง ภาพแรกคือเลเยอร์ที่ใกล้เคียงที่สุดกับผู้ใช้โดยมีภาพวาดดังต่อไปนี้ หากมีสีพื้นหลังจะมีสีด้านล่างทุกชั้นของภาพ
คุณสมบัติสไตล์พื้นหลังใหม่
นอกจากนี้ยังมีคุณสมบัติพื้นหลังใหม่ใน CSS3
- พื้นหลังคลิป
- คุณสมบัตินี้กำหนดรูปแบบภาพพื้นหลังควรถูกตัดทอน ค่าเริ่มต้นคือกล่องเส้นขอบ แต่สามารถเปลี่ยนเป็นช่อง padding หรือช่องเนื้อหาได้
- พื้นหลังกำเนิด
- พร็อพเพอร์ตี้นี้กำหนดว่าควรวางพื้นหลังไว้ในช่อง padding กล่องขอบหรือกล่องเนื้อหา
- พื้นหลังขนาด
- คุณสมบัตินี้ช่วยให้คุณระบุขนาดของภาพพื้นหลังได้ ช่วยให้คุณสามารถยืดภาพขนาดเล็กลงเพื่อให้พอดีกับหน้าเว็บ
การเปลี่ยนแปลงคุณสมบัติของสไตล์พื้นหลังที่มีอยู่
นอกจากนี้ยังมีการเปลี่ยนแปลงเล็กน้อยกับคุณสมบัติของสไตล์พื้นหลังที่มีอยู่:
- พื้นหลังซ้ำ
- มีค่าใหม่สองค่าสำหรับพื้นที่นี้คือพื้นที่และรอบ ช่องว่างจะแสดงภาพแบบเรียงซ้อนกันภายในกล่องโดยไม่ถูกตัด รอบ rescales ภาพพื้นหลังเพื่อที่จะกระเบื้องจำนวนครั้งทั้งหมดในกล่อง
- พื้นหลังแนบ
- มีการเพิ่มค่าใหม่ "ท้องถิ่น" เพื่อให้พื้นหลังจะเลื่อนไปพร้อมกับเนื้อหาขององค์ประกอบเมื่อองค์ประกอบนั้นมีแถบเลื่อน
- พื้นหลัง
- คุณสมบัติชวเลขพื้นหลังจะเพิ่มขนาดและคุณสมบัติต้นทาง
คุณสมบัติชายแดน CSS3
ในเส้นขอบ CSS3 สามารถใช้เป็นรูปแบบที่เราใช้ (แบบ solid, double, dashed ฯลฯ ) หรือสามารถเป็นภาพได้ พลัส CSS3 นำความสามารถในการสร้างมุมโค้งมน ภาพขอบเป็นสิ่งที่น่าสนใจเนื่องจากคุณสร้างภาพสี่เส้นขอบทั้งหมดแล้วบอก CSS ว่าจะใช้ภาพนั้นกับเส้นขอบของคุณอย่างไร
คุณสมบัติใหม่ของเส้นขอบ
มีบางคุณสมบัติเส้นขอบใหม่ใน CSS3:
- border-radius
- border-top-right-radius , border-bottom-right-radius , border-bottom-left รัศมี , border-top-left-radius
- คุณสมบัติเหล่านี้ช่วยให้คุณสามารถสร้างมุมโค้งมนบนเส้นขอบของคุณได้
- ขอบภาพแหล่งที่มา
- ระบุไฟล์ต้นฉบับของภาพที่จะใช้แทนรูปแบบเส้นขอบที่กำหนดไว้แล้ว
- ขอบภาพชิ้น
- แสดงการชดเชยขาเข้าจากขอบภาพขอบ
- ขอบภาพกว้าง
- กำหนดค่าของความกว้างสำหรับภาพเส้นขอบของคุณ
- ขอบภาพเริ่มแรก
- ระบุจำนวนที่พื้นที่รูปภาพชายแดนขยายออกไปนอกเขตแดน
- ขอบภาพยืด
- กำหนดว่าด้านข้างและส่วนตรงกลางของภาพขอบควรมีการปูกระเบื้องหรือปรับขนาด
- ขอบภาพ
- คุณสมบัติชวเลขสำหรับคุณสมบัติรูปภาพชายแดนทั้งหมด
คุณสมบัติ CSS3 เพิ่มเติมที่เกี่ยวข้องกับเส้นขอบและพื้นหลัง
เมื่อกล่องเสียที่แบ่งหน้า, แบ่งคอลัมน์สำหรับการแบ่งบรรทัด (สำหรับองค์ประกอบแบบอินไลน์) คุณสมบัติการตกแต่งกล่องแบ่งกำหนดวิธีที่กล่องใหม่ถูกห่อด้วยเส้นขอบและช่องว่าง พื้นหลังสามารถแบ่งออกเป็นหลายช่องโดยใช้คุณสมบัตินี้ได้
นอกจากนี้ยังมีคุณสมบัติกล่องเงาที่สามารถใช้เพื่อเพิ่มเงาให้กับองค์ประกอบของกล่อง
ด้วย CSS3 ตอนนี้คุณสามารถตั้งค่าเว็บเพจได้อย่างง่ายดายโดยมีหลายคอลัมน์โดยไม่มีตารางหรือโครงสร้างแท็ก div ที่ซับซ้อน คุณเพียงแค่บอกเบราว์เซอร์ว่าคอลัมน์ต่างๆควรมีองค์ประกอบของร่างกายเท่าใดและควรกว้างแค่ไหน นอกจากนี้คุณสามารถเพิ่มเส้นขอบ (กฎ) สีพื้นหลังที่ขยายความสูงของคอลัมน์และข้อความของคุณจะไหลผ่านคอลัมน์ทั้งหมดโดยอัตโนมัติ
คอลัมน์ CSS3 - กำหนดจำนวนและความกว้างของคอลัมน์
มีสาม คุณสมบัติ ใหม่ที่ช่วยให้คุณสามารถกำหนดจำนวนและความกว้างของคอลัมน์ของคุณ:
- คอลัมน์กว้าง
- กำหนดความกว้างที่คอลัมน์ของคุณควรมี เบราเซอร์จะไหลข้อความเพื่อเติมช่องว่างด้วยคอลัมน์ที่กว้าง
- คอลัมน์นับ
- กำหนดจำนวนคอลัมน์บนหน้าเว็บ จากนั้นเบราเซอร์จะสร้างคอลัมน์ที่กว้างพอที่จะใส่ลงในช่องว่างได้ แต่จะมีเฉพาะหมายเลขที่คุณระบุเท่านั้น
- คอลัมน์
- คุณสมบัติชวเลขที่คุณสามารถกำหนดความกว้างหรือจำนวน (หรือทั้งสองอย่าง แต่ไม่ค่อยมีเหตุผล)
ช่องว่างและกฎของคอลัมน์ CSS3
ช่องว่างและกฎจะถูกวางไว้ระหว่างคอลัมน์ในสถานการณ์ multicolumn เดียวกัน ช่องว่างจะผลักกันคอลัมน์ แต่กฎไม่ใช้พื้นที่ใด ๆ หากกฎของคอลัมน์กว้างกว่าช่องว่างของช่องคอลัมน์จะซ้อนทับกับคอลัมน์ที่อยู่ติดกัน มีห้าคุณสมบัติใหม่สำหรับกฎและช่องว่างของคอลัมน์:
- คอลัมน์ช่องว่าง
- กำหนดความกว้างของช่องว่างระหว่างคอลัมน์
- คอลัมน์กฎสี
- กำหนดสีของกฎ
- คอลัมน์กฎสไตล์
- กำหนดรูปแบบของกฎ (ของแข็งจุดคู่ ฯลฯ )
- คอลัมน์กฎกว้าง
- กำหนดความกว้างของกฎ
- คอลัมน์กฎ
- คุณสมบัติชวเลขที่กำหนดคุณสมบัติกฎทั้งสามคอลัมน์พร้อมกัน
การแบ่งคอลัมน์ CSS3 การแยกคอลัมน์และการเติมคอลัมน์
ตัวแบ่งคอลัมน์ ใช้ตัวเลือก CSS2 แบบเดียวกันที่ใช้เพื่อกำหนดช่วงพักในเนื้อหาเพจ แต่มีคุณสมบัติใหม่ 3 อย่าง ได้แก่ แบ่งก่อน แบ่งหลัง และ แบ่งภายใน
เช่นเดียวกับตารางคุณสามารถตั้งค่าองค์ประกอบให้ครอบคลุมคอลัมน์ด้วยพร็อพเพอร์ตี้ช่วงคอลัมน์ นี้ช่วยให้คุณสามารถสร้างหัวข้อที่ครอบคลุมหลายคอลัมน์มากขึ้นเช่นหนังสือพิมพ์
คอลัมน์การบรรจุจะกำหนดจำนวนเนื้อหาที่จะอยู่ในแต่ละคอลัมน์ คอลัมน์ที่มีความสมดุลพยายามที่จะใส่เนื้อหาเท่ากันในแต่ละคอลัมน์ขณะที่เนื้อหาอัตโนมัติจะทำให้เนื้อหานั้นเต็มจนกระทั่งคอลัมน์เต็มแล้วไปที่หน้าถัดไป
คุณลักษณะเพิ่มเติมใน CSS3 ที่ไม่มีอยู่ใน CSS2
มีคุณลักษณะเพิ่มเติมมากมายใน CSS3 ที่ไม่มีอยู่ใน CSS2 ได้แก่ :
- โมดูลเค้าโครงแม่แบบ CSS และโมดูลวางตำแหน่ง CSS3 : การสร้างกริดด้วย CSS
- โมดูลข้อความ CSS3 : เค้าร่างข้อความและแม้แต่สร้างเงาวางด้วย CSS
- โมดูลสี CSS3 : ขณะนี้มีความโปร่งแสง
- การเปลี่ยนแปลงรูปแบบกล่อง : รวมถึงพร็อพ เฟ็กต์ ที่ทำหน้าที่เหมือนกับแท็ก IE
- โมดูลอินเทอร์เฟซผู้ใช้ CSS3 : ให้เคอร์เซอร์ใหม่การตอบสนองต่อการกระทำเขตข้อมูลที่จำเป็นและ องค์ประกอบปรับขนาด ได้
- ข้อความค้นหาสื่อ : ข้อความค้นหา สื่อช่วยให้คุณมีความคล่องตัวมากขึ้นเมื่อกำหนดสไตล์ชีทควรใช้ ตัวอย่างเช่นคุณสามารถกำหนดสไตล์ชีตที่มีเฉพาะสำหรับอุปกรณ์มือถือที่มีวิวพอร์ตที่มีขนาดใหญ่กว่า 20EM
- โมดูลทับทิม CSS3 : ให้การสนับสนุนภาษาที่ใช้ทับทิมเดิมเพื่อใส่คำอธิบายประกอบในเอกสาร
- โมดูลเพจเพจ CSS3 : สำหรับการสนับสนุนสื่อบันทึกเพจ (กระดาษแผ่นใส ฯลฯ ) มากยิ่งขึ้น
- เนื้อหาที่สร้าง : L เรียกใช้ ส่วนหัว และท้ายกระดาษเชิงอรรถและเนื้อหาอื่น ๆ ที่สร้างขึ้นโดยทางโปรแกรมโดยเฉพาะสำหรับสื่อเพจ
- โมดูลการพูดภาษาสเปน CSS3 : เปลี่ยนเป็น CSS ทางหู