คุณสมบัติ CSS ตำแหน่งพื้นหลังใช้เพื่อกำหนดตำแหน่งเริ่มต้นสำหรับรูปภาพพื้นหลังที่สัมพันธ์กับที่มา ไวยากรณ์ ไวยากรณ์ของคุณสมบัติตำแหน่งพื้นหลัง CSS มีดังต่อไปนี้ - Selector { background-position: /*value*/ } ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS พื้นหลังตำแหน่ง - ตัวอย่าง <!DOC
ไฟล์ CSS สามารถฝังภายในได้โดยการประกาศในแท็ก ซึ่งจะทำให้เวลาในการโหลดหน้าเว็บลดลง แม้ว่าการประกาศ CSS ที่ฝังไว้จะอนุญาตให้ใช้รูปแบบไดนามิกได้ แต่ควรดาวน์โหลดทุกครั้งที่คำขอของเพจ เนื่องจากแคช CSS ภายในไม่ได้ CSS ภายในถูกประกาศใน tag ภายในแท็ก ไวยากรณ์ ไวยากรณ์สำหรับการฝังไฟล์ CSS มีดังต่อไปนี้ - &
CSS ช่วยให้เราเชื่อมโยงสไตล์ชีตภายนอกกับไฟล์ของเราได้ ซึ่งช่วยให้เราทำการเปลี่ยนแปลง CSS แยกกัน และปรับปรุงเวลาในการโหลดหน้าเว็บ ไฟล์ภายนอกระบุไว้ในแท็ก ภายใน ของเอกสาร ไวยากรณ์ ไวยากรณ์สำหรับการรวม CSS ภายนอกมีดังนี้ <link rel="stylesheet" href="#location"> ตัวอย่าง ตั
CSS Pseudo-classes สามารถรวมเข้ากับคลาส CSS มากกว่าที่จะรวมเอาองค์ประกอบเองเพื่อจัดเตรียมวิธีการที่เลือกสรรมากขึ้นสำหรับองค์ประกอบ Html ตัวอย่าง มาดูตัวอย่างการรวมคลาส CSS Pseudo และคลาส CSS กัน − <!DOCTYPE html> <html> <head> <style> div { margin: 10px;
คุณสมบัติ CSS border-collapse ใช้เพื่อระบุว่า องค์ประกอบมีการแบ่งใช้หรือแบ่งเส้นขอบ ใช้ได้ 2 ค่า คือ แยกและยุบ ไวยากรณ์ ไวยากรณ์ของคุณสมบัติ CSS border-collapse มีดังนี้ - ตัวเลือก { border-collapse:/*value*/} ตัวอย่างต่อไปนี้แสดงให้เห็นถึง CSS border-collapse - ตัวอย่าง #cdem { border-collapse:di
คุณสมบัติ CSS background-image ใช้เพื่อตั้งค่ารูปภาพเป็นพื้นหลังสำหรับองค์ประกอบที่เลือก ไวยากรณ์ ไวยากรณ์ของคุณสมบัติ CSS background-image มีดังนี้ - Selector { background-image: /*value*/ } ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS background-image - ตัวอย่าง <!DOCTYPE html>
คุณสมบัติชวเลขโครงร่างสามารถกำหนดเพื่อวาดเส้นที่มีสไตล์เฉพาะ (จำเป็น) ความหนา และสีรอบๆ เส้นขอบขององค์ประกอบ แต่โครงร่างไม่ได้เป็นส่วนหนึ่งของมิติข้อมูลขององค์ประกอบซึ่งแตกต่างจากคุณสมบัติของเส้นขอบ ไวยากรณ์ ไวยากรณ์ของคุณสมบัติชวเลขโครงร่าง CSS มีดังต่อไปนี้ - Selector { outline: /*va
เราสามารถลบพฤติกรรมเริ่มต้นของไฮเปอร์ลิงก์ซึ่งจะแสดงโครงร่างจุดรอบ ๆ ตัวเมื่อใช้งานหรือโฟกัสโดยการประกาศคุณสมบัติโครงร่าง CSS บนลิงก์ที่ใช้งาน/โฟกัสเป็นไม่มี วิธีแก้ปัญหา a, a:active, a:focus { outline: none; } ตัวอย่าง มาดูวิธีการลบเส้นประรอบ ๆ ลิงค์ที่ใช้งานพร้อมตัวอย่าง - <!DOCTY
เราสามารถสร้างภาพเคอร์เซอร์แบบกำหนดเองที่มีนามสกุลเช่น .cur (สำหรับ Internet Explorer), .gif และ .png (สำหรับ Chrome, Firefox, Safari) และนำไปใช้กับองค์ประกอบโดยใช้คุณสมบัติเคอร์เซอร์ CSS และตั้งค่าเป็น url และใน เพิ่มค่าเคอร์เซอร์ทั่วไป เช่น อัตโนมัติ ค่าเริ่มต้น ตัวชี้ ฯลฯ วิธีแก้ปัญหา Selector {
คุณสมบัติ CSS Display ที่มีค่า inline-block แสดงผลองค์ประกอบตามความกว้างของเนื้อหาหรือความกว้างที่ระบุแล้วแต่จำนวนใดจะมากกว่า จะไม่บังคับให้แบ่งบรรทัดจนกว่าความกว้างขององค์ประกอบหลักจะถูกใช้อย่างเต็มที่ ไวยากรณ์ ต่อไปนี้เป็นไวยากรณ์ของ CSS ที่แสดงแบบอินไลน์บล็อก - Selector { display: i
เราสามารถกำหนดตำแหน่งขององค์ประกอบใน CSS เป็นญาติซึ่งแสดงองค์ประกอบตามปกติ องค์ประกอบที่มีวิธีการกำหนดตำแหน่งแบบสัมพัทธ์จะถูกจัดตำแหน่งโดยคุณสมบัติการจัดตำแหน่ง CSS (ซ้าย ขวา บนและล่าง) ตัวอย่าง มาดูตัวอย่าง CSS Relative Positioning Method กัน − <!DOCTYPE html> <html> <head> <s
คุณสมบัติชวเลขพื้นหลัง CSS ใช้เพื่อกำหนดพื้นหลังสำหรับองค์ประกอบ background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin และ background-attachment รวมกันประกอบเป็นคุณสมบัติพื้นหลัง CSS ไวยากรณ์ ไวยากรณ์ของคุณสมบัติพื้นหลัง CSS
CSS มีบทบาทสำคัญในการจัดรูปแบบฟอนต์ คุณสมบัติฟอนต์ CSS ช่วยให้เราสามารถเปลี่ยนฟอนต์ตระกูล ขนาดฟอนต์ น้ำหนักฟอนต์ การจัดฟอนต์ และคุณสมบัติอื่น ๆ อีกมากมาย คุณสมบัติฟอนต์ CSS เป็นชวเลขสำหรับฟอนต์สไตล์ ฟอนต์ตัวแปร น้ำหนักฟอนต์ ขนาดฟอนต์/บรรทัดความสูง และตระกูลฟอนต์ นอกจากนี้ เราสามารถใช้สไตล์กับข้อความ
คุณสมบัติแบบอักษร CSS ช่วยให้เราปรับเปลี่ยนลักษณะที่ปรากฏของข้อความได้ คุณสมบัติต่อไปนี้ช่วยให้เราจัดรูปแบบข้อความได้ ตระกูลแบบอักษร คุณสมบัตินี้ใช้เพื่อกำหนดแบบอักษรสำหรับองค์ประกอบ การจัดรูปแบบแบบอักษร เพื่อให้การเว้นวรรคอักขระสม่ำเสมอและเพิ่มความสามารถในการอ่าน จะใช้คุณสมบัติการจัดรูปแบบแบบ
คุณสมบัติตระกูลแบบอักษร CSS ใช้เพื่อตั้งค่าแบบอักษรเฉพาะสำหรับองค์ประกอบที่เลือก ขอแนะนำให้ใช้แบบอักษรที่ปลอดภัยสำหรับเว็บโดยการระบุแบบอักษรเพิ่มเติมเพื่อให้แน่ใจว่าสามารถใช้งานข้ามเบราว์เซอร์ได้ ไวยากรณ์ ไวยากรณ์ของคุณสมบัติตระกูลฟอนต์ CSS มีดังต่อไปนี้ &mins; Selector { font-family:
ทุกองค์ประกอบในเอกสาร HTML จะแสดงเป็นกล่องสี่เหลี่ยมโดยเบราว์เซอร์ ความกว้าง ความสูง ช่องว่างภายใน และระยะขอบจะกำหนดพื้นที่ที่จัดสรรในองค์ประกอบรอบๆ ไดอะแกรมต่อไปนี้แสดงแนวคิดโมเดลกล่อง - ที่มา:w3.org เนื้อหา ซึ่งรวมถึงข้อมูลจริงในรูปแบบข้อความ รูปภาพ หรือเนื้อหาสื่ออื่นๆ คุณสมบัติความกว้างแ
CSS Media Types and Queries ช่วยให้ผู้ใช้กำหนดรูปแบบบางอย่างตามประเภททั่วไปของอุปกรณ์ (หน้าจอ การพิมพ์ ฯลฯ) หรือลักษณะของอุปกรณ์ (ความละเอียดหน้าจอ ขนาดวิวพอร์ต ฯลฯ) ไวยากรณ์ ต่อไปนี้เป็นรูปแบบการสืบค้นสื่อ - @media ไม่ใช่ | เฉพาะประเภทสื่อและ (นิพจน์) { CSS-Code;} ในที่นี้ จะใช้การสืบค้นสื่อหาก −
องค์ประกอบระดับอินไลน์มีคุณสมบัติการแสดง CSS ที่ตั้งค่าเป็น inline, inline-table หรือ inline-block และองค์ประกอบเหล่านี้ไม่ได้บังคับให้เส้นแบ่งด้านบนและด้านล่างตัวเอง กล่องระดับอินไลน์ถูกสร้างขึ้นโดยแต่ละองค์ประกอบระดับอินไลน์ซึ่งเป็นส่วนหนึ่งของรูปแบบการจัดตำแหน่งและประกอบด้วยกล่องย่อย กล่องอินไลน
คุณสมบัติสไตล์เค้าร่างสามารถกำหนดเพื่อวาดเส้นรอบ ๆ เส้นขอบขององค์ประกอบ แต่เค้าร่างไม่ได้เป็นส่วนหนึ่งของมิติข้อมูลขององค์ประกอบซึ่งแตกต่างจากคุณสมบัติของเส้นขอบ ไวยากรณ์ ไวยากรณ์ของคุณสมบัติรูปแบบเค้าร่าง CSS มีดังต่อไปนี้ - Selector { outline-style: /*value*/ } ตัวอย่าง มาดูตัวอย่าง
องค์ประกอบ HTML ทั้งหมดมีการตั้งค่าเริ่มต้นสำหรับคุณสมบัติ CSS Display คุณสมบัตินี้ระบุว่าจะแสดงผลองค์ประกอบในเอกสารอย่างไร หมายเหตุ − คุณสมบัติการแสดงผลเริ่มต้นสามารถแทนที่ได้ แต่นั่นจะไม่เปลี่ยนประเภทขององค์ประกอบเพียงแค่ลักษณะการแสดงผลในเอกสาร ต่อไปนี้เป็นค่าบางส่วนสำหรับคุณสมบัติ CSS Display -
