คุณสมบัติ CSS Display พร้อมบล็อกค่าจะแสดงองค์ประกอบที่มีความกว้างเต็มของพาเรนต์ และยังบังคับให้ขึ้นบรรทัดใหม่ด้วย องค์ประกอบที่มีการแสดงเป็นบล็อกแสดงผลเป็นองค์ประกอบ หรือ ไวยากรณ์ ต่อไปนี้เป็นไวยากรณ์ของบล็อกการแสดงผล CSS - Selector { display: block; } ตัวอย่าง มาดูตัวอย่าง CSS disp
CSS Display None ช่วยให้นักพัฒนาสามารถซ่อนองค์ประกอบโดยตั้งค่าคุณสมบัติการแสดงผลเป็น none สำหรับองค์ประกอบที่มีการตั้งค่าการแสดงผลเป็นไม่มีไม่มีการสร้างกล่องสำหรับองค์ประกอบนั้นและแม้แต่องค์ประกอบย่อยที่อาจตั้งค่าการแสดงผลเป็นค่าอื่นที่ไม่ใช่ไม่มี ไวยากรณ์ ต่อไปนี้เป็นไวยากรณ์สำหรับ CSS ที่ไม่แสดงผ
เราสามารถซ่อนหรือลบองค์ประกอบในเอกสาร HTML ด้วย CSS Visibility และ CSS Display คุณสมบัติตามลำดับ สำหรับผู้ใช้ อาจดูเหมือนไม่มีความแตกต่างใดๆ ในการใช้คุณสมบัติทั้งสองอย่าง แต่มี การแสดง CSS − ไม่มีไม่แสดงองค์ประกอบในเอกสารและจึงไม่จัดสรรพื้นที่ให้ การมองเห็น CSS − ซ่อนจะทำให้องค์ประกอบในเอกสารและแม
คุณสมบัติการมองเห็น CSS ใช้เพื่อระบุค่าที่สอดคล้องกับว่าองค์ประกอบจะมองเห็นหรือไม่ในเอกสาร แม้ว่าองค์ประกอบจะถูกแสดง แต่ถ้า CSS Visibility ถูกตั้งค่าเป็นซ่อน จะไม่ปรากฏให้เห็น ต่อไปนี้เป็นค่าการมองเห็น CSS ที่ใช้ในการควบคุมการมองเห็นขององค์ประกอบ - Sr.No ค่า &คำอธิบาย 1 มองเห็นได้ เป็นค่าเริ่มต้
เราสามารถกำหนดตำแหน่งขององค์ประกอบใน CSS เป็นแบบคงที่ซึ่งไม่ได้แสดงองค์ประกอบในลักษณะพิเศษใด ๆ แต่ในลักษณะปกติ องค์ประกอบที่มีการจัดตำแหน่งเป็นแบบคงที่จะไม่ได้รับผลกระทบจากคุณสมบัติการจัดตำแหน่ง CSS ใดๆ (ซ้าย ขวา บนและล่าง) ตัวอย่าง มาดูตัวอย่าง CSS Static Positioning Method กัน − <!DOCTYPE html
คุณสมบัติ outline-color สามารถกำหนดเพื่อวาดเส้นที่มีสีเฉพาะรอบ ๆ เส้นขอบขององค์ประกอบ แต่เค้าร่างไม่ได้เป็นส่วนหนึ่งของมิติข้อมูลขององค์ประกอบซึ่งแตกต่างจากคุณสมบัติของเส้นขอบ ไวยากรณ์ ไวยากรณ์ของคุณสมบัติสีเค้าร่าง CSS มีดังต่อไปนี้ - Selector { outline-color: /*value*/ } หมายเหตุ −
CSS Pseudo Classes เป็นตัวแทนของสถานะพิเศษขององค์ประกอบที่แตกต่างกัน คลาสเหล่านี้ไม่เพียงแต่แสดงองค์ประกอบพื้นฐานในเอกสาร แต่ยังรวมถึงปัจจัยภายนอก เช่น สถานะ ตำแหน่ง ประวัติ ฯลฯ นักพัฒนาสามารถใช้คลาสหลอกเหล่านี้ได้แม้กระทั่งการจัดรูปแบบองค์ประกอบที่ไม่สามารถเลือกได้โดยตรงผ่าน ตัวเลือก CSS ไวยากรณ์
เราสามารถจัดแนวองค์ประกอบโดยใช้วิธีการจัดตำแหน่ง CSS (คงที่ สัมพันธ์ สัมบูรณ์ และคงที่) และคุณสมบัติ (ซ้าย ขวา บนและล่าง) ตัวอย่าง มาดูตัวอย่างการจัดองค์ประกอบโดยใช้แผนผังการจัดตำแหน่งกัน − <!DOCTYPE html> <html> <head> <title>Alignment using CSS Position</title> <s
เราสามารถจัดองค์ประกอบใน html โดยใช้คุณสมบัติ CSS float ซึ่งใช้สำหรับวางตำแหน่งหรือจัดรูปแบบกล่องหรือเนื้อหา นักพัฒนาสามารถวางตำแหน่งองค์ประกอบไปทางซ้ายหรือขวาด้วย CSS float ตัวอย่าง มาดูตัวอย่างคุณสมบัติ CSS float เพื่อจัดองค์ประกอบ - <!DOCTYPE html> <html> <head> <title>Al
หนึ่งในปัญหามากมายที่นักพัฒนาต้องเผชิญขณะใช้คุณสมบัติ CSS float คือหากองค์ประกอบย่อยทั้งหมดลอยอยู่ คอนเทนเนอร์หลักจะยุบ เพื่อหลีกเลี่ยงไม่ให้คอนเทนเนอร์หลักล่ม เราสามารถใช้หนึ่งในวิธีแก้ไขปัญหาต่อไปนี้ ปัญหา คอนเทนเนอร์ระดับบนสุดจะยุบลงเนื่องจากเนื้อหาทั้งหมดลอยอยู่ภายใน มีเพียงช่องว่างภายในของคอ
เราสามารถเพิ่มสไตล์เฉพาะให้กับองค์ประกอบที่มีอยู่ใน HTML โดยใช้คลาส CSS Pseudo ซึ่งเลือกองค์ประกอบที่มีสถานะเฉพาะ เช่น (โฮเวอร์ เข้าชมแล้ว ปิดการใช้งาน ฯลฯ) หมายเหตุ − ในการแยกคลาส CSS Pseudo ออกจาก Pseudo Elements ใน CSS3 คลาสหลอกใช้สัญกรณ์โคลอนเดี่ยว ไวยากรณ์ ต่อไปนี้เป็นรูปแบบการใช้ CSS Pseudo
CSS Visual Formatting เป็นโมเดลที่สอดคล้องกับอัลกอริธึมที่ประมวลผลและแปลงแต่ละองค์ประกอบของเอกสารเพื่อสร้างกล่องอย่างน้อยหนึ่งกล่องที่สอดคล้องกับ CSS Box Model เลย์เอาต์ของกล่องที่สร้างขึ้นนั้นขึ้นอยู่กับคุณสมบัติหลายประการ เช่น − ขนาด ประเภท − atomic inline-level, block, inline หรือ inline-block
กล่องอย่างน้อยหนึ่งกล่องถูกสร้างขึ้นสำหรับทุกองค์ประกอบในโครงสร้างเอกสารหลังจากประมวลผลภายใต้แบบจำลองการจัดรูปแบบภาพ กล่องที่สร้างขึ้นมีคุณสมบัติ CSS บางอย่างที่เกี่ยวข้องและแสดงผลเป็น HTML กล่องต่อไปนี้ถูกสร้างขึ้นใน CSS - องค์ประกอบระดับบล็อกและกล่องบล็อก กล่องบล็อกนิรนาม องค์ประกอบระดับอินไลน
องค์ประกอบระดับบล็อกมี CSS แสดง ตั้งค่าคุณสมบัติเป็น บล็อก, รายการ-รายการ หรือ ตาราง และองค์ประกอบเหล่านี้บังคับให้เส้นแบ่งด้านบนและด้านล่างตัวเอง กล่องระดับบล็อกถูกสร้างขึ้นโดยแต่ละองค์ประกอบระดับบล็อกซึ่งเป็นส่วนหนึ่งของรูปแบบการจัดตำแหน่งและประกอบด้วยกล่องย่อย กล่องคอนเทนเนอร์แบบบล็อกประกอบด้วย
CSS ::before และ CSS ::after Pseudo-element ใช้เพื่อแทรกเนื้อหาก่อนและหลังองค์ประกอบตามลำดับ ตัวอย่าง มาดูตัวอย่าง CSS ::before และ CSS ::after Pseudo-elements − <!DOCTYPE html> <html> <head> <style> div:nth-of-type(1) p:nth-child(2)::after { content: " BUZ
CSS Pseudo-elements สามารถใช้กับองค์ประกอบต่างๆ ได้ แต่ยังใช้ได้กับคลาส CSS ด้วยเช่นกัน ตัวอย่าง มาดูตัวอย่างการใช้องค์ประกอบ CSS Pseudo ในคลาส CSS กัน − <!DOCTYPE html> <html> <head> <title>CSS Pseudo Elements and CSS Classes</title> <style> form {
การใช้ CSS pseudo-class selector กล่าวคือ :active, :hover, :link และ :visited เราสามารถกำหนดรูปแบบสถานะต่างๆ ของลิงก์/จุดยึดได้ เพื่อการทำงานที่เหมาะสม ลำดับของตัวเลือกเหล่านี้ควรเป็น − :ลิงค์ :เยี่ยมชมแล้ว :โฮเวอร์ :ใช้งานอยู่ ไวยากรณ์ของคุณสมบัติ CSS psudo-class มีดังนี้ - a:(pseudo-selector) {
การใช้ผู้พัฒนาคุณสมบัติ CSS Z-Index สามารถซ้อนองค์ประกอบเข้าด้วยกันได้ ดัชนี Z สามารถมีค่าบวกหรือค่าลบได้ หมายเหตุ - หากองค์ประกอบที่ทับซ้อนกันไม่ได้ระบุดัชนี z องค์ประกอบนั้นจะแสดงที่กล่าวถึงล่าสุดในเอกสาร มาดูตัวอย่างคุณสมบัติดัชนี z กัน − ตัวอย่าง <!DOCTYPE html> <html> <head>
องค์ประกอบหลอก CSS นี้เลือกบรรทัดแรกของเนื้อหาขององค์ประกอบ อย่างไรก็ตาม ความยาวของบรรทัดอาจเปลี่ยนแปลงไปตามขนาดหน้าต่าง หากไม่กำหนดความกว้างของข้อความที่มีข้อความ มาดูตัวอย่าง CSS ::first-line pseudo element − ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p::first-line { &
กฎ CSS @import ใช้สำหรับการตั้งค่าข้อมูลรูปแบบสำหรับสื่อเป้าหมายเฉพาะ โดยการระบุประเภทสื่อหลัง URL ของสไตล์ชีตที่นำเข้า ไวยากรณ์ ต่อไปนี้เป็นไวยากรณ์ - @import url (/* เส้นทางไฟล์ */) ประเภทสื่อ { CSS-Code;} มาดูตัวอย่างกฎ CSS @import: เอกสาร HTML ตัวอย่าง @import url(screen.css) screen;@import ur
