CSS2 และ CSS3

ความแตกต่างที่ใหญ่ที่สุดระหว่าง CSS2 และ CSS3 คือ CSS3 ถูกแยกออกเป็นส่วนต่างๆเรียกว่าโมดูล แต่ละโมดูลเหล่านี้จะผ่านทาง W3C ในขั้นตอนต่างๆของกระบวนการแนะนำ กระบวนการนี้ทำให้หลาย ๆ ชิ้นส่วนของ CSS3 ได้รับการยอมรับและนำไปใช้งานในเบราว์เซอร์โดยผู้ผลิตรายอื่น ๆ ได้ง่ายขึ้น

ถ้าคุณเปรียบเทียบกระบวนการนี้กับสิ่งที่เกิดขึ้นกับ CSS2 ซึ่งทุกอย่างถูกส่งมาเป็นเอกสารเดียวพร้อมข้อมูล Cascading Style Sheets ทั้งหมดภายในเนื้อหาคุณจะเห็นข้อดีของการแบ่งคำแนะนำออกเป็นส่วนเล็ก ๆ แต่ละชิ้น เนื่องจากแต่ละโมดูลมีการทำงานเป็นรายบุคคลเราจึงมีช่วงกว้างของการสนับสนุนเบราว์เซอร์สำหรับโมดูล CSS3

เช่นเดียวกับข้อกำหนดใหม่และการเปลี่ยนแปลงใด ๆ โปรดตรวจสอบหน้าเว็บ CSS3 ของคุณอย่างละเอียดในเบราเซอร์และระบบปฏิบัติการเท่าที่คุณสามารถทำได้ โปรดจำไว้ว่าเป้าหมายไม่ใช่การสร้างหน้าเว็บที่มีลักษณะเหมือนกันในทุกเบราว์เซอร์ แต่เพื่อให้แน่ใจว่ารูปแบบใด ๆ ที่คุณใช้รวมถึงรูปแบบ CSS3 ดูดีในเบราว์เซอร์ที่สนับสนุนพวกเขาและพวกเขาจะกลับมาอย่างสง่างามสำหรับเบราว์เซอร์รุ่นเก่า อย่า.

ตัวเลือก CSS3 ใหม่

CSS3 นำเสนอรูปแบบใหม่ ๆ ที่คุณสามารถเขียนกฎ CSS กับ CSS selectors ใหม่รวมถึง combinator แบบใหม่และองค์ประกอบหลอก ๆ ใหม่ ๆ

ตัวเลือกคุณลักษณะใหม่สามรายการ:

• การจับคู่แอตทริบิวต์ตรงกับ

  องค์ประกอบ foo ^ = "บาร์" องค์ประกอบมีแอตทริบิวต์ที่เรียกว่า foo ซึ่งขึ้นต้นด้วย "bar" เช่น

• แอตทริบิวต์ที่ลงท้ายตรงทั้งหมด

  องค์ประกอบ foo $ = "บาร์" องค์ประกอบมีแอตทริบิวต์ที่เรียกว่า foo ซึ่งลงท้ายด้วย "bar" เช่น

• แอตทริบิวต์มีการจับคู่

  องค์ประกอบ foo * = "บาร์" องค์ประกอบมีแอตทริบิวต์ที่เรียกว่า foo ที่มีสตริง "บาร์" เช่น

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
  • ขอบด้านบนขวารัศมี, ขอบล่างขวารัศมี, ขอบล่างซ้ายรัศมี, ขอบด้านบนซ้ายรัศมี
  • คุณสมบัติเหล่านี้ช่วยให้คุณสามารถสร้างมุมโค้งมนบนเส้นขอบของคุณได้
• ขอบภาพแหล่งที่มา
  • ระบุไฟล์ต้นฉบับของภาพที่จะใช้แทนรูปแบบเส้นขอบที่กำหนดไว้แล้ว
• ขอบภาพชิ้น
  • แสดงการชดเชยขาเข้าจากขอบภาพขอบ
• ขอบภาพกว้าง
  • กำหนดค่าของความกว้างสำหรับภาพเส้นขอบของคุณ
• ขอบภาพเริ่มแรก
  • ระบุจำนวนที่พื้นที่รูปภาพชายแดนขยายออกไปนอกเขตแดน
• ขอบภาพยืด
  • กำหนดว่าด้านข้างและส่วนตรงกลางของภาพขอบควรมีการปูกระเบื้องหรือปรับขนาด
• ขอบภาพ
  • คุณสมบัติชวเลขสำหรับคุณสมบัติรูปภาพชายแดนทั้งหมด

คุณสมบัติ CSS3 เพิ่มเติมที่เกี่ยวข้องกับเส้นขอบและพื้นหลัง

เมื่อกล่องเสียที่แบ่งหน้า, แบ่งคอลัมน์สำหรับการแบ่งบรรทัด (สำหรับองค์ประกอบแบบอินไลน์) คุณสมบัติการตกแต่งกล่องแบ่งกำหนดวิธีที่กล่องใหม่ถูกห่อด้วยเส้นขอบและช่องว่าง พื้นหลังสามารถแบ่งออกเป็นหลายช่องโดยใช้คุณสมบัตินี้ได้

นอกจากนี้ยังมีคุณสมบัติกล่องเงาที่สามารถใช้เพื่อเพิ่มเงาให้กับองค์ประกอบของกล่อง

ด้วย CSS3 ตอนนี้คุณสามารถตั้งค่าเว็บเพจได้อย่างง่ายดายโดยมีหลายคอลัมน์โดยไม่มีตารางหรือโครงสร้างแท็ก div ที่ซับซ้อน คุณเพียงแค่บอกเบราว์เซอร์ว่าคอลัมน์ต่างๆควรมีองค์ประกอบของร่างกายเท่าใดและควรกว้างแค่ไหน นอกจากนี้คุณสามารถเพิ่มเส้นขอบ (กฎ) สีพื้นหลังที่ขยายความสูงของคอลัมน์และข้อความของคุณจะไหลผ่านคอลัมน์ทั้งหมดโดยอัตโนมัติ

คอลัมน์ CSS3 - กำหนดจำนวนและความกว้างของคอลัมน์

มีสามคุณสมบัติใหม่ที่ช่วยให้คุณสามารถกำหนดจำนวนและความกว้างของคอลัมน์ของคุณ:

• คอลัมน์กว้าง
  • กำหนดความกว้างที่คอลัมน์ของคุณควรมี เบราเซอร์จะไหลข้อความเพื่อเติมช่องว่างด้วยคอลัมน์ที่กว้าง
• คอลัมน์นับ
  • กำหนดจำนวนคอลัมน์บนหน้าเว็บ จากนั้นเบราเซอร์จะสร้างคอลัมน์ที่กว้างพอที่จะใส่ลงในช่องว่างได้ แต่จะมีเฉพาะหมายเลขที่คุณระบุเท่านั้น
• คอลัมน์
  • คุณสมบัติชวเลขที่คุณสามารถกำหนดความกว้างหรือจำนวน (หรือทั้งสองอย่าง แต่ไม่ค่อยมีเหตุผล)

ช่องว่างและกฎของคอลัมน์ CSS3

ช่องว่างและกฎจะถูกวางไว้ระหว่างคอลัมน์ในสถานการณ์ multicolumn เดียวกัน ช่องว่างจะผลักกันคอลัมน์ แต่กฎไม่ใช้พื้นที่ใด ๆ หากกฎของคอลัมน์กว้างกว่าช่องว่างของช่องคอลัมน์จะซ้อนทับกับคอลัมน์ที่อยู่ติดกัน มีห้าคุณสมบัติใหม่สำหรับกฎและช่องว่างของคอลัมน์:

• คอลัมน์ช่องว่าง
  • กำหนดความกว้างของช่องว่างระหว่างคอลัมน์
• คอลัมน์กฎสี
  • กำหนดสีของกฎ
• คอลัมน์กฎสไตล์
  • กำหนดรูปแบบของกฎ (ของแข็งจุดคู่ ฯลฯ )
• คอลัมน์กฎกว้าง
  • กำหนดความกว้างของกฎ
• คอลัมน์กฎ
  • คุณสมบัติชวเลขที่กำหนดคุณสมบัติกฎทั้งสามคอลัมน์พร้อมกัน

การแบ่งคอลัมน์ CSS3 การแยกคอลัมน์และการเติมคอลัมน์

ตัวแบ่งคอลัมน์ใช้ตัวเลือก CSS2 แบบเดียวกันที่ใช้เพื่อกำหนดช่วงพักในเนื้อหาเพจ แต่มีคุณสมบัติใหม่สามอย่าง: ทำลายก่อน, ทำลายหลัง, และ ทำลายภายใน.

เช่นเดียวกับตารางคุณสามารถตั้งค่าองค์ประกอบให้ครอบคลุมคอลัมน์ด้วยพร็อพเพอร์ตี้ช่วงคอลัมน์ นี้ช่วยให้คุณสามารถสร้างหัวข้อที่ครอบคลุมหลายคอลัมน์มากขึ้นเช่นหนังสือพิมพ์

คอลัมน์การบรรจุจะกำหนดจำนวนเนื้อหาที่จะอยู่ในแต่ละคอลัมน์ คอลัมน์ที่มีความสมดุลพยายามที่จะใส่เนื้อหาเท่ากันในแต่ละคอลัมน์ขณะที่เนื้อหาอัตโนมัติจะทำให้เนื้อหานั้นเต็มจนกระทั่งคอลัมน์เต็มแล้วไปที่หน้าถัดไป

คุณลักษณะเพิ่มเติมใน CSS3 ที่ไม่รวมอยู่ใน CSS2

มีคุณลักษณะเพิ่มเติมมากมายใน CSS3 ที่ไม่มีอยู่ใน CSS2 ได้แก่ :

• โมดูลเค้าโครงแม่แบบ CSS และโมดูลกำหนดตำแหน่ง CSS3 Grid: การสร้างกริดด้วย CSS
• โมดูลข้อความ CSS3: เค้าร่างข้อความและแม้แต่การสร้างเงาแบบเลื่อนลงด้วย CSS
• โมดูลสี CSS3: ตอนนี้มีความทึบ
• การเปลี่ยนแปลงรูปแบบกล่อง: รวมถึงพ็อตเตอร์ที่ทำหน้าที่เหมือนกับแท็ก IE
• โมดูลอินเทอร์เฟซผู้ใช้ CSS3: ให้เคอร์เซอร์ใหม่การตอบสนองต่อการกระทำเขตข้อมูลที่จำเป็นและแม้แต่องค์ประกอบการปรับขนาด
• การค้นหาสื่อ: การสืบค้นข้อมูลสื่อช่วยให้คุณมีความยืดหยุ่นมากขึ้นเมื่อกำหนดสไตล์ชีตที่ควรใช้ ตัวอย่างเช่นคุณสามารถกำหนดสไตล์ชีตที่มีเฉพาะสำหรับอุปกรณ์มือถือที่มีวิวพอร์ตที่มีขนาดใหญ่กว่า 20EM
• โมดูล Ruby ของ CSS3: ให้การสนับสนุนภาษาที่ใช้ทับทิมต้นฉบับเพื่อใส่คำอธิบายประกอบเอกสาร
• โมดูลเพจเพจ CSS3: สำหรับการสนับสนุนสื่อบันทึกเพจ (กระดาษโปร่งใส ฯลฯ ) มากยิ่งขึ้น
• เนื้อหาที่สร้าง: L เรียกใช้ส่วนหัวและท้ายกระดาษเชิงอรรถและเนื้อหาอื่น ๆ ที่สร้างขึ้นโดยทางโปรแกรมโดยเฉพาะสำหรับสื่อเพจ
• โมดูลคำพูด CSS3: การเปลี่ยนแปลง CSS ทางหู