คุณสมบัติ CSS Display ด้วยค่า block เรนเดอร์องค์ประกอบด้วยความกว้างเต็มของพาเรนต์ และบังคับการขึ้นบรรทัดใหม่ องค์ประกอบที่มี display เป็น block จะเรนเดอร์เหมือนองค์ประกอบ <div> หรือ <p> ไวยากรณ์ ไวยากรณ์ของ CSS display block มีดังนี้: Selector {    display: block; } ตัวอย่าง

CSS Display None ช่วยให้นักพัฒนาสามารถซ่อนองค์ประกอบที่มีคุณสมบัติ display ตั้งค่าเป็น none ได้ สำหรับองค์ประกอบที่ display ถูกตั้งค่าเป็น none จะไม่มีกล่องถูกสร้างขึ้นสำหรับมัน และแม้แต่องค์ประกอบลูกที่อาจมี display ตั้งค่าเป็นค่าอื่นนอกจาก none ไวยากรณ์ ไวยากรณ์สำหรับ CSS display none มีดังนี้:

เราสามารถซ่อนหรือลบองค์ประกอบในเอกสาร HTML ด้วยคุณสมบัติ CSS Visibility และ CSS Display ตามลำดับ ผู้ใช้อาจไม่เห็นความแตกต่างในการใช้คุณสมบัติใดคุณสมบัติหนึ่ง แต่จริงๆ แล้วมีความแตกต่างกัน CSS Display - none ไม่ได้เรนเดอร์องค์ประกอบบนเอกสาร และจึงไม่จัดสรรพื้นที่ให้ CSS Visibility - hidden เรนเดอร

คุณสมบัติ CSS Visibility ใช้ระบุค่าที่สอดคล้องกับว่าองค์ประกอบจะมองเห็นได้หรือไม่ในเอกสาร แม้ว่าองค์ประกอบจะถูกเรนเดอร์ แต่ถ้า CSS Visibility ถูกตั้งค่าเป็น hidden จะไม่ทำให้มองเห็นได้ ค่าของ CSS Visibility ต่อไปนี้ใช้ควบคุมการมองเห็นขององค์ประกอบ: ลำดับค่า & คำอธิบาย 1Visibleค่าเริ่มต้น อ

เราสามารถกำหนดการจัดตำแหน่งขององค์ประกอบใน CSS เป็น static ซึ่งจะแสดงองค์ประกอบในวิธีปกติ ไม่ใช่วิธีพิเศษ องค์ประกอบที่มีการจัดตำแหน่งเป็น static จะไม่ได้รับผลกระทบจากคุณสมบัติการจัดตำแหน่ง CSS ใดๆ (left, right, top และ bottom) ตัวอย่าง ลองดูตัวอย่างของวิธีการจัดตำแหน่งแบบ Static ใน CSS: <!DOCT

คุณสมบัติ outline-color สามารถกำหนดเพื่อวาดเส้นรอบขอบขององค์ประกอบด้วยสีเฉพาะ แต่ outline ไม่ใช่ส่วนหนึ่งของมิติขององค์ประกอบ ต่างจากคุณสมบัติ border ไวยากรณ์ ไวยากรณ์ของคุณสมบัติ CSS outline-color มีดังนี้: Selector {    outline-color: /*value*/ } หมายเหตุ - คุณสมบัติ outline-style ต้อ

CSS Pseudo Classes เป็นการแทนสถานะพิเศษขององค์ประกอบต่างๆ คลาสเหล่านี้ไม่ได้แทนองค์ประกอบพื้นฐานในเอกสารเท่านั้น แต่ยังรวมถึงปัจจัยภายนอกเช่น สถานะ ตำแหน่ง ประวัติ ฯลฯ ด้วย การใช้ pseudo classes เหล่านี้ นักพัฒนาสามารถจัดสไตล์องค์ประกอบที่ไม่สามารถเลือกได้โดยตรงผ่าน CSS selectors ไวยากรณ์ ไวยากรณ์

เราสามารถจัดตำแหน่งองค์ประกอบโดยใช้วิธีการจัดตำแหน่ง CSS (fixed, relative, absolute และ static) และคุณสมบัติ (left, right, top และ bottom) ตัวอย่าง ลองดูตัวอย่างการจัดตำแหน่งองค์ประกอบด้วยสกีม่าการจัดตำแหน่ง: <!DOCTYPE html> <html> <head> <title>Alignment using CSS Position

เราสามารถจัดตำแหน่งองค์ประกอบใน HTML โดยใช้คุณสมบัติ CSS float ซึ่งใช้สำหรับการจัดตำแหน่งหรือจัดรูปแบบกล่องหรือเนื้อหา นักพัฒนาสามารถจัดตำแหน่งองค์ประกอบไปทางซ้ายหรือขวาได้ด้วย CSS float ตัวอย่าง ลองดูตัวอย่างการใช้งานคุณสมบัติ CSS float เพื่อจัดตำแหน่งองค์ประกอบ: <!DOCTYPE html> <html>

หนึ่งในปัญหาที่นักพัฒนาพบบ่อยขณะใช้คุณสมบัติ CSS float คือ หากองค์ประกอบลูกทั้งหมดถูก float แล้ว คอนเทนเนอร์พาเรนต์ (parent container) จะหดรวม (collapse) เพื่อป้องกันไม่ให้พาเรนต์หดรวม เราสามารถใช้วิธีแก้ไขหนึ่งในวิธีต่อไปนี้ได้ ปัญหา คอนเทนเนอร์พาเรนต์หดรวม เนื่องจากเนื้อหาทั้งหมดถูก float ไว้ภาย

เราสามารถเพิ่มสไตล์เฉพาะให้กับองค์ประกอบที่มีอยู่ใน HTML โดยใช้ CSS Pseudo classes ซึ่งเลือกองค์ประกอบที่มีสถานะเฉพาะ เช่น (hover, visited, disabled, ฯลฯ) หมายเหตุ - เพื่อแยก CSS Pseudo Classes ออกจาก Pseudo Elements ใน CSS3 pseudo classes ใช้สัญลักษณ์ colon เดียว (single-colon notation) ไวยากรณ์

โมเดลการจัดรูปแบบภาพ (Visual Formatting) ใน CSS เป็นโมเดลที่สอดคล้องกับอัลกอริทึมซึ่งประมวลผลและแปลงแต่ละองค์ประกอบของเอกสารเพื่อสร้างกล่องหนึ่งหรือหลายกล่องที่สอดคล้องกับ CSS Box Model การจัดวางของกล่องที่สร้างขึ้นขึ้นอยู่กับคุณสมบัติหลายอย่าง เช่น: ขนาด (Dimensions) ประเภท - atomic inline-level

กล่องหนึ่งหรือหลายกล่องจะถูกสร้างขึ้นสำหรับทุกองค์ประกอบในต้นไม้เอกสาร (document tree) หลังจากประมวลผลภายใต้โมเดลการจัดรูปแบบภาพ (visual formatting model) กล่องที่สร้างขึ้นมีคุณสมบัติ CSS บางอย่างเชื่อมโยงอยู่และแสดงผลใน HTML ตามนั้น กล่องต่อไปนี้ถูกสร้างขึ้นใน CSS: องค์ประกอบระดับบล็อกและกล่องบล

องค์ประกอบระดับบล็อก (Block-level elements) มีคุณสมบัติ CSS display ตั้งค่าเป็น block, list-item, หรือ table และองค์ประกอบเหล่านี้บังคับให้เกิดการขึ้นบรรทัดใหม่ (line break) ด้านบนและด้านล่างของตัวเอง กล่องบล็อก (Block-level boxes) ถูกสร้างขึ้นโดยแต่ละองค์ประกอบระดับบล็อก ซึ่งเป็นส่วนหนึ่งของระบบกา

Pseudo-elements ::before และ ::after ใน CSS ใช้สำหรับแทรกเนื้อหาบางส่วนก่อนและหลังองค์ประกอบตามลำดับ ตัวอย่าง ลองดูตัวอย่างสำหรับ CSS ::before และ CSS ::after Pseudo-elements: <!DOCTYPE html> <html> <head> <style> div:nth-of-type(1) p:nth-child(2)::after {    cont

Pseudo-elements ใน CSS สามารถนำไปใช้กับองค์ประกอบ (elements) และ CSS classes ได้เช่นกัน ตัวอย่าง ลองดูตัวอย่างการใช้งาน CSS Pseudo elements กับ CSS Classes: <!DOCTYPE html> <html> <head> <title>CSS Pseudo Elements and CSS Classes</title> <style> form {   &n

โดยใช้ pseudo-class selectors ใน CSS ได้แก่ :active, :hover, :link และ :visited เราสามารถจัดสไตล์สถานะต่างๆ ของลิงก์/แองคอร์ได้ เพื่อให้ทำงานถูกต้อง ลำดับของ selectors ควรเป็นดังนี้: :link :visited :hover :active ไวยากรณ์ของคุณสมบัติ pseudo-class ใน CSS มีดังนี้: a:(pseudo-selector) {   &n

โดยใช้คุณสมบัติ CSS Z-Index นักพัฒนาสามารถจัดวางองค์ประกอบทับซ้อนกันได้ ค่า Z-Index สามารถเป็นค่าบวกหรือค่าลบก็ได้ หมายเหตุ - หากองค์ประกอบที่ทับซ้อนกันไม่ได้ระบุ z-index องค์ประกอบที่ถูกกล่าวถึงทีหลังในเอกสารจะแสดงอยู่ข้างบน ลองดูตัวอย่างของคุณสมบัติ z-index: ตัวอย่าง <!DOCTYPE html> <h

Pseudo-element ::first-line ใน CSS เลือกบรรทัดแรกของเนื้อหาภายในองค์ประกอบ (element) อย่างไรก็ตาม ความยาวของบรรทัดอาจเปลี่ยนแปลงตามขนาดหน้าต่างหากความกว้างของข้อความไม่ได้ถูกกำหนดไว้ล่วงหน้า ตัวอย่าง ลองดูตัวอย่างการใช้งาน pseudo-element ::first-line ด้านล่างนี้: <!DOCTYPE html> <html>

กฎ @import ใน CSS ใช้สำหรับตั้งค่าข้อมูลสไตล์สำหรับสื่อเป้าหมายเฉพาะโดยระบุ media types หลัง URL ของไฟล์สไตล์ชีทที่นำเข้า ไวยากรณ์ ไวยากรณ์ดังนี้: @import url ("/* file path */") mediatypes {    CSS-Code; } ลองดูตัวอย่างสำหรับ CSS @import rule: เอกสาร HTML ตัวอย่าง <!DOCTYPE