CSS Media Types คือประเภทอุปกรณ์ที่ใช้แสดงเอกสาร และสามารถกำหนดรูปแบบเฉพาะสำหรับสื่อทุกประเภทได้ ต่อไปนี้คือประเภทสื่อใน CSS3 และ Media Queries 4 - ซีเนียร์ คุณค่าและรายละเอียด 1 ทั้งหมด สไตล์ชีตใช้กับอุปกรณ์ประเภทสื่อทั้งหมด 2 พิมพ์ สไตล์ชีตใช้กับเครื่องพิมพ์ 3 หน้าจอ สไตล์ชีตใช้กับหน้า
CSS Image Sprite เป็นไฟล์รูปภาพรวมของรูปภาพทั้งหมดในหน้าเอกสาร สไปรท์รูปภาพมีประโยชน์เนื่องจากจะต้องโหลดทรัพยากรรูปภาพเพียงครั้งเดียว การใช้ตำแหน่งพื้นหลัง CSS สามารถแสดงส่วนต่างๆ ของภาพที่รวมกันได้ มาดูตัวอย่าง CSS Image Sprites กัน − ตัวอย่าง <!DOCTYPE html> <html> <head> <ti
CSS :last-child pseudo-class เลือกองค์ประกอบที่เป็นองค์ประกอบลูกสุดท้ายขององค์ประกอบอื่นๆ ไวยากรณ์ ต่อไปนี้เป็นไวยากรณ์ - :last-child{ /*declarations*/ } มาดูตัวอย่างคลาส Pseudo CSS Last-Child กัน − ตัวอย่าง <!DOCTYPE html> <html> <head> <style> table {
CSS Visual Formatting เป็นโมเดลที่สอดคล้องกับอัลกอริธึมที่ประมวลผลและแปลงแต่ละองค์ประกอบของเอกสารเพื่อสร้างกล่องอย่างน้อยหนึ่งกล่องที่สอดคล้องกับ CSS Box Model CSS Box การสร้างองค์ประกอบที่ประมวลผล - ระดับบล็อก องค์ประกอบเหล่านี้บังคับให้เส้นแบ่งด้านบนและด้านล่างตัวเอง และใช้ความกว้างทั้งหมดที่ม
เราสามารถลอยองค์ประกอบด้วยคุณสมบัติ CSS float ไปทางซ้ายหรือขวาขององค์ประกอบหลักที่มีอยู่ องค์ประกอบอื่นๆ จะถูกวางไว้รอบๆ เนื้อหาที่ลอยอยู่ องค์ประกอบหลายรายการที่เปิดใช้งานคุณสมบัติ float มีค่าเท่ากันทั้งหมดวางอยู่ติดกัน ตัวอย่าง มาดูตัวอย่างคุณสมบัติ CSS Float กัน − <!DOCTYPE html> <html
เราสามารถจัดองค์ประกอบระดับบล็อกในแนวนอนโดยใช้คุณสมบัติระยะขอบ CSS แต่ควรตั้งค่าคุณสมบัติความกว้าง CSS ขององค์ประกอบนั้น มาดูตัวอย่างการจัดองค์ประกอบโดยใช้คุณสมบัติระยะขอบ CSS - ตัวอย่าง <!DOCTYPE html> <html> <head> <title>Center Alignment using CSS Margin</title> <
เราสามารถระบุขนาดตัวอักษรเป็นพิกเซลเพื่อให้ข้อความใช้จำนวนพิกเซลที่กำหนดเท่านั้น ขนาดพิกเซลขึ้นอยู่กับความละเอียดของหน้าจอและอัลกอริทึมที่เบราว์เซอร์ใช้ในการคำนวณ ไวยากรณ์ ไวยากรณ์ของคุณสมบัติขนาดแบบอักษร CSS มีดังต่อไปนี้ - Selector { font-size: /*value*/ } ตัวอย่าง ตัวอย่างต่อไปนี้แ
คุณสมบัติ CSS table-layout คือการกำหนดอัลกอริทึมที่จะใช้โดยเบราว์เซอร์สำหรับการจัดวางแถว คอลัมน์ และเซลล์ของตาราง ด้วยวิธีนี้ คุณจะควบคุมการจัดวางตารางได้ ไวยากรณ์ ไวยากรณ์ของคุณสมบัติเค้าโครงตาราง CSS มีดังต่อไปนี้ - Selector { table-layout: /*value*/ } ตัวอย่างต่อไปนี้แสดงให้เห็นถึง
หน่วย CSS มีหลายประเภท เช่น ขนาดฟอนต์ ขนาดอักขระ ขนาดวิวพอร์ต ฯลฯ โดยทั่วไปแล้วจะมีหน่วยสัมบูรณ์และหน่วยที่เกี่ยวข้องกัน 2 หมวดหมู่ซึ่งประกอบด้วยหมวดหมู่ย่อยที่กล่าวถึงข้างต้น ต่อไปนี้เป็นหน่วยสัมบูรณ์ CSS - ซีเนียร์ หน่วยและชื่อ 1 ซม. เซนติเมตร (1 ซม. =100 มม.) 2 ใน นิ้ว (1 นิ้ว =2.54 ซม.)
คุณสมบัติ CSS เซลล์ว่างใช้เพื่อระบุการแสดงเซลล์ว่างของตาราง ไวยากรณ์ของคุณสมบัติ CSS เซลล์ว่างมีดังต่อไปนี้ - ไวยากรณ์ Selector { empty-cells: /*value*/ } ตัวอย่าง ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS เซลล์ว่าง - <!DOCTYPE html> <html> <head> <style> tabl
ตัวเลือก CSS ใช้เพื่อเลือกองค์ประกอบ HTML โดยจับคู่แต่ละองค์ประกอบของรูปแบบที่กำหนด เรากำหนดรูปแบบโดยการประกาศคุณสมบัติและค่าภายในตัวเลือก ไวยากรณ์ ไวยากรณ์สำหรับการประกาศรูปแบบมีดังนี้ − Selector { property: value; } CSS มีตัวเลือกอย่างง่าย ตัวเลือกแอตทริบิวต์ คลาสหลอก องค์ประกอบหลอก และการรวมกันข
CSS :lang() pseudo-class selector ใช้สำหรับเลือกองค์ประกอบที่มีแอตทริบิวต์ lang ระบุไว้ ซึ่งช่วยให้เรากำหนดเป้าหมายภาษาเฉพาะที่เกี่ยวข้องกับเนื้อหาและจัดรูปแบบตามนั้น ไวยากรณ์ ต่อไปนี้เป็นไวยากรณ์ - :lang(){ /*declarations*/ } มาดูตัวอย่างสำหรับ CSS :lang() pseudo-class selector - ตัว
เราสามารถเขียนความคิดเห็นสำหรับการประกาศ CSS เพื่อช่วยปรับปรุงความสามารถในการอ่านและทำให้เข้าใจง่ายขึ้น CSS เป็นไปตามรูปแบบภาษา C สำหรับความคิดเห็นที่ขึ้นต้นและลงท้ายด้วยเครื่องหมายทับระหว่างเนื้อหาที่อยู่ในเครื่องหมายดอกจัน การประกาศใดๆ ที่เขียนอยู่ภายใน /**/ จะถูกละเว้น ไวยากรณ์ ไวยากรณ์ของความคิ
ด้วยการใช้ตัวเลือก CSS เราสามารถจัดรูปแบบองค์ประกอบที่ต้องการโดยเฉพาะตามความต้องการของเรา มีหลายวิธีในการเลือกองค์ประกอบใน HTML DOM ไวยากรณ์ ไวยากรณ์สำหรับตัวเลือก CSS มีดังต่อไปนี้ - ตัวเลือก { /*การประกาศ*/} ตัวอย่างต่อไปนี้แสดงตัวเลือก CSS สำหรับองค์ประกอบการจัดรูปแบบ - ตัวอย่าง #one { filter:i
เราสามารถจัดรูปแบบเฉพาะบางส่วนขององค์ประกอบ เช่น อักษรตัวแรก บรรทัดแรก หรือแม้แต่แทรกก่อน/หลัง เพื่อจุดประสงค์เหล่านี้ใช้องค์ประกอบหลอก CSS หมายเหตุ − ในการแยก CSS Pseudo Classes ออกจาก Pseudo Elements ใน CSS3 องค์ประกอบหลอกใช้สัญกรณ์เครื่องหมายทวิภาค ไวยากรณ์ ต่อไปนี้เป็นรูปแบบการใช้ CSS Pseudo อ
องค์ประกอบ HTML ทั้งหมดมีการตั้งค่าการแสดงผลเริ่มต้น และสามารถแทนที่ด้วยคุณสมบัติ CSS Display ในทำนองเดียวกันการมองเห็นองค์ประกอบทั้งหมดจะถูกตั้งค่าให้มองเห็นเป็นค่าเริ่มต้น แต่สิ่งนี้สามารถแทนที่ด้วยคุณสมบัติการมองเห็น CSS ต่อไปนี้เป็นค่าสำหรับคุณสมบัติ CSS Display - ซีเนียร์ คุณค่าและรายละเอียด
เราสามารถใช้คุณสมบัติล้น CSS เพื่อจัดการ/จัดการเนื้อหาที่ล้นขององค์ประกอบ คุณสมบัตินี้อนุญาตให้ผู้ใช้ตัดเนื้อหา จัดเตรียมแถบเลื่อนเพื่อดูเนื้อหาที่ตัดแล้ว แสดงเนื้อหาภายนอกคอนเทนเนอร์ ดังนั้นชื่อจะล้น ไวยากรณ์ ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติ CSS Overflow - Selector { overflow: /*va
คุณสมบัติเส้นขอบ CSS ใช้เพื่อกำหนดคุณสมบัติเส้นขอบสำหรับองค์ประกอบ มันเป็นชวเลขสำหรับความกว้างของเส้นขอบ สไตล์เส้นขอบ และสีเส้นขอบ กำหนดรูปแบบเส้นขอบสำหรับแต่ละด้านได้ และกำหนดรัศมีเส้นขอบได้ ในทางกลับกัน โครงร่าง CSS จะไม่กินเนื้อที่และจะแสดงรอบๆ เส้นขอบหากมีการตั้งค่าไว้ รองรับการชดเชย นอกจากนี้
คุณสมบัติหลายอย่าง เช่น ความกว้าง ความสูง ความสูงสูงสุด ฯลฯ ใน CSS ทำให้ผู้ใช้สามารถควบคุมขนาดของกล่องเนื้อหาองค์ประกอบได้ มาดูตัวอย่างคุณสมบัติ CSS max-height กัน − ตัวอย่าง <!DOCTYPE html> <html> <head> <title>CSS max-height</title> <style> form {
ความสูงของเส้นสามารถกำหนดได้โดยคุณสมบัติ CSS line-height รับเฉพาะค่าบวกเท่านั้น ไวยากรณ์ ไวยากรณ์ของคุณสมบัติ CSS line-height มีดังนี้ - Selector { line-height: /*value*/ } ตัวอย่าง ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS line-height <!DOCTYPE html> <html> <head> <style
