CSS :nth-child() pseudo-class เลือกองค์ประกอบที่เป็นองค์ประกอบลูกที่ n ขององค์ประกอบอื่นๆ ไวยากรณ์ ต่อไปนี้เป็นไวยากรณ์ - :nth-child(){ /*declarations*/ } ตัวอย่าง มาดูตัวอย่าง CSS :nth-child() Pseudo class − <!DOCTYPE html> <html> <head> <title>CSS :nth-child(
CSS Pseudo-element โดยพื้นฐานแล้วจะเป็นตัวเลือกสำหรับส่วนเฉพาะขององค์ประกอบ เช่น อักษรตัวแรก บรรทัดแรก เป็นต้น :after และ :before องค์ประกอบหลอกสามารถใช้เพื่อแทรกหลังและก่อนองค์ประกอบตามลำดับ ไวยากรณ์ ต่อไปนี้เป็นรูปแบบการใช้ CSS Pseudo องค์ประกอบ - Selector::pseudo-element { css-prope
เราสามารถรวม CSS ในหน้า HTML ได้สามวิธี เหล่านี้คือ − อินไลน์ ที่นี่เราระบุสไตล์ CSS ในแอตทริบิวต์ style ขององค์ประกอบ อย่างไรก็ตาม ขอแนะนำให้เชื่อมโยง CSS ภายในหรือภายนอกกับไฟล์ให้เป็นโมดูล ภายใน เราสามารถรวมข้อกำหนด CSS ของเราไว้ในแท็ก ภายใน ของเอกสาร HTML ภายนอก เราสามารถเชื่อมโยงไฟล์ .cs
หากต้องการรวม CSS ในเอกสาร HTML เราสามารถรวมไว้ภายใน แบบอินไลน์ หรือลิงก์ไฟล์ภายนอกได้ ไวยากรณ์ ไวยากรณ์สำหรับการรวมไฟล์ CSS ใน HTML มีดังต่อไปนี้ /*inline*/ <element style="/*declarations*/"></element> /*internal*/ <head> <style> /*declarations*/ </style> &l
ตัวเลือกประเภทองค์ประกอบ CSS ใช้เพื่อเลือกองค์ประกอบทั้งหมดของประเภท ไวยากรณ์สำหรับตัวเลือกประเภทองค์ประกอบ CSS มีดังต่อไปนี้ ไวยากรณ์ element { /*declarations*/ } ตัวอย่าง ตัวอย่างต่อไปนี้แสดงตัวเลือกประเภทองค์ประกอบ CSS <!DOCTYPE html> <html> <head> <style> li
ตัวเลือกองค์ประกอบ CSS ใช้เพื่อเลือกลูกหลานขององค์ประกอบแรกที่มีชื่อองค์ประกอบตรงกับตัวเลือกที่สอง ไวยากรณ์ ไวยากรณ์สำหรับตัวเลือกลูกหลาน CSS มีดังต่อไปนี้ - element element { /*declarations*/ } ตัวอย่าง ตัวอย่างต่อไปนี้แสดงให้เห็นถึงตัวเลือกลูกหลาน CSS - <!DOCTYPE html> <htm
คุณสมบัติ outline-width สามารถกำหนดเพื่อวาดเส้นที่มีความหนาเฉพาะรอบ ๆ ขอบขององค์ประกอบ แต่เค้าร่างไม่ได้เป็นส่วนหนึ่งของมิติขององค์ประกอบ ซึ่งแตกต่างจากคุณสมบัติของเส้นขอบ ไวยากรณ์ ไวยากรณ์ของคุณสมบัติความกว้างโครงร่าง CSS มีดังต่อไปนี้ - Selector { outline-width: /*value*/ } หมายเหตุ
เราสามารถกำหนดความกว้างขั้นต่ำคงที่สำหรับกล่องเนื้อหาขององค์ประกอบโดยใช้คุณสมบัติความกว้างขั้นต่ำของ CSS ซึ่งไม่อนุญาตให้กล่องเนื้อหาขององค์ประกอบแคบลงแม้ว่าความกว้างจะน้อยกว่าความกว้างขั้นต่ำ ไวยากรณ์ ไวยากรณ์ของคุณสมบัติความกว้างขั้นต่ำของ CSS มีดังต่อไปนี้ - Selector { min-width: /*
ทั้ง CSS Absolute Units และ Relative Units อยู่ภายใต้หมวดหมู่ หน่วย Distance. CSS Relative Units กำหนดความยาวขององค์ประกอบโดยอ้างอิงถึงองค์ประกอบอื่น ตัวอย่างเช่น vh หน่วยสัมพันธ์สัมพันธ์กับความสูงของวิวพอร์ต ต่อไปนี้เป็นหน่วยสัมพันธ์ CSS - Sr.No หน่วย &เทียบกับ 1 % ขนาดองค์ประกอบหลัก 2 em
เราสามารถกำหนดความสูงขั้นต่ำคงที่สำหรับกล่องเนื้อหาขององค์ประกอบโดยใช้คุณสมบัติ CSS ความสูงขั้นต่ำ ซึ่งไม่อนุญาตให้กล่องเนื้อหาขององค์ประกอบมีขนาดเล็กลงแม้ว่าความสูงจะน้อยกว่าความสูงต่ำสุดก็ตาม ไวยากรณ์ ไวยากรณ์ของคุณสมบัติ CSS min-height มีดังนี้ - Selector { min-height: /*value*/ } ต
เราสามารถใช้คุณสมบัติ CSS clear เพื่อระบุด้านขององค์ประกอบ float ซึ่งจะถูกล้างจากเนื้อหาที่ไหลลื่น ตัวอย่าง มาดูตัวอย่างคุณสมบัติ CSS ที่ชัดเจนกัน − <!DOCTYPE html> <html> <head> <title>CSS Clear</title> <style type="text/css"> .clear { cle
เราสามารถจัดแนวองค์ประกอบหรือเนื้อหาภายในได้โดยใช้ CSS ซึ่งมีตัวเลือกต่างๆ สำหรับการจัดตำแหน่งขององค์ประกอบและเนื้อหาในแนวนอน แนวตั้ง หรือตรงกลาง การจัดแนวในแนวนอน องค์ประกอบอินไลน์ องค์ประกอบแบบอินไลน์หรือองค์ประกอบแบบอินไลน์บล็อก เช่น ข้อความ สมอ สแปน ฯลฯ สามารถจัดแนวในแนวนอนได้โดยใช้คุณสมบัติ C
เราสามารถกำหนดตำแหน่งขององค์ประกอบใน CSS เป็นแบบสัมบูรณ์ ซึ่งแสดงองค์ประกอบที่สัมพันธ์กับพาเรนต์ตำแหน่งแรก (ยกเว้นแบบคงที่) องค์ประกอบที่มีวิธีการกำหนดตำแหน่งแบบสัมบูรณ์จะถูกจัดตำแหน่งโดยคุณสมบัติการจัดตำแหน่ง CSS (ซ้าย ขวา บนและล่าง) ตัวอย่าง มาดูตัวอย่างสำหรับ CSS Absolute Positioning Method - &l
คุณสมบัติ CSS float ใช้สำหรับวางตำแหน่งหรือจัดรูปแบบกล่องหรือเนื้อหา นักพัฒนาสามารถวางตำแหน่งองค์ประกอบไปทางซ้ายหรือขวาด้วย CSS float คุณสมบัติ float สามารถมีค่าใดค่าหนึ่งดังต่อไปนี้ - ซ้าย − องค์ประกอบลอยอยู่ทางด้านซ้ายของภาชนะ ถูกต้อง − องค์ประกอบลอยอยู่ทางด้านขวาของภาชนะ ไม่มี − องค์ประกอบไม่ลอ
CSS :first-child pseudo-class เลือกองค์ประกอบที่เป็นองค์ประกอบลูกแรกขององค์ประกอบอื่นๆ ไวยากรณ์ ต่อไปนี้เป็นไวยากรณ์ - :first-child{ /*declarations*/ } ตัวอย่าง มาดูตัวอย่าง CSS first-child Pseudo class กัน − <!DOCTYPE html> <html> <head> <style> table {
เราสามารถกำหนดตำแหน่งขององค์ประกอบใน CSS แบบคงที่ ซึ่งแสดงองค์ประกอบที่สัมพันธ์กับวิวพอร์ตของผู้ใช้ องค์ประกอบที่มีวิธีการกำหนดตำแหน่งเป็นตายตัวจะไม่เคลื่อนที่แม้ในการเลื่อนและถูกจัดตำแหน่งตามคุณสมบัติการจัดตำแหน่ง CSS (ซ้าย ขวา บนและล่าง) ตัวอย่าง มาดูตัวอย่าง CSS Fixed Positioning Method กัน − &l
คุณสมบัติ CSS height and width ใช้เพื่อระบุความสูงและความกว้างขององค์ประกอบตามลำดับ เรายังกำหนดค่าสูงสุดและต่ำสุดสำหรับคุณสมบัติเหล่านี้ได้โดยใช้คุณสมบัติ max-height, max-width, min-height และ min-width ไวยากรณ์ ไวยากรณ์ของคุณสมบัติความสูง CSS และความกว้าง CSS มีดังต่อไปนี้ - ตัวเลือก { ความสูง:/*v
คุณสมบัติขอบ CSS ใช้เพื่อตั้งค่าพื้นที่ขอบรอบองค์ประกอบที่เลือกรอบขอบ คุณสมบัติระยะขอบเป็นตัวย่อสำหรับระยะขอบบน ระยะขอบขวา ระยะขอบล่าง และระยะขอบซ้าย ไวยากรณ์ ไวยากรณ์ของคุณสมบัติขอบ CSS มีดังต่อไปนี้ - Selector { margin: /*value*/ } ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติระยะขอบ CSS
คุณสมบัติระยะขอบ CSS เป็นชวเลขสำหรับระยะขอบบน ระยะขอบขวา ระยะขอบล่าง และระยะขอบซ้าย ทำให้เราสามารถระบุพื้นที่รอบ ๆ องค์ประกอบได้ นอกจากนี้เรายังสามารถกำหนดระยะขอบสำหรับแต่ละด้านได้ ไวยากรณ์ ไวยากรณ์ของคุณสมบัติขอบ CSS มีดังต่อไปนี้ - Selector { margin: /*value*/ } ตัวอย่าง ตัวอย่างต่อ
คุณสมบัติ background-attachment ใน CSS ใช้เพื่อระบุตำแหน่งของภาพพื้นหลังเมื่อเลื่อนหน้าตามวิวพอร์ต มันสามารถมีค่าเลื่อน คงที่และท้องถิ่น ไวยากรณ์ ไวยากรณ์ของคุณสมบัติไฟล์แนบพื้นหลัง CSS มีดังต่อไปนี้ - Selector { background-attachment: /*value*/ } ตัวอย่าง ตัวอย่างต่อไปนี้แสดงคุณสมบัต
