หน้าแรก
หน้าแรก
ในการตั้งค่าสไตล์เป็นลิงก์ปัจจุบันในแถบนำทาง ให้เพิ่มสไตล์เป็น .active คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อกำหนดรูปแบบลิงก์ปัจจุบัน: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> ul { &
หากต้องการสร้างแถบนำทางแนวตั้ง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none;
ใช้ ขอบบน คุณสมบัติใน CSS เพื่อตั้งค่าคุณสมบัติขอบด้านบนทั้งหมดในการประกาศครั้งเดียว ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน border-top ทรัพย์สิน − <!DOCTYPE html> <html> <head> <style> p { &nbs
ใช้ไฟล์แนบพื้นหลัง คุณสมบัติเพื่อแสดงภาพพื้นหลังเป็นแบบคงที่ ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน background-attachment ทรัพย์สิน − <!DOCTYPE html> <html> <head> <style> body {
หากต้องการเพิ่มเส้นขอบรอบแถบนำทาง ให้ตั้งค่าเส้นขอบเป็น ul { border: 2px solid blue; } ตัวอย่าง คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อกำหนดเส้นขอบ <!DOCTYPE html> <html> <head> <style> ul { &nbs
ใช้ CSS:ตัวเลือกอ่าน-เขียนเพื่อเลือกองค์ประกอบที่ไม่มีแอตทริบิวต์ อ่านอย่างเดียว ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน:ตัวเลือกอ่าน-เขียน <!DOCTYPE html> <html> <head> <style> input:read-write
ใช้ CSS :required selector เพื่อจัดรูปแบบ <input> องค์ประกอบที่มีแอตทริบิวต์ จำเป็น คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน :required selector: ตัวอย่าง <!DOCTYPE html> <html> <head> <style>
ตำแหน่ง :เหนียว; คุณสมบัติช่วยให้คุณวางตำแหน่งองค์ประกอบตามตำแหน่งการเลื่อน ตั้งค่าองค์ประกอบให้ติดหนึบเมื่อผู้ใช้เลื่อนลง ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้ตำแหน่ง CSS:sticky; <!DOCTYPE html> <html> <head> <style> &nbs
ใช้ CSS :ตัวเลือกที่จำเป็นเพื่อจัดรูปแบบองค์ประกอบ ด้วยแอตทริบิวต์ จำเป็น ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน :required Selector <!DOCTYPE html> <html> <head> <style> input:required {
ใช้ CSS :ตัวเลือกรูทเพื่อจัดรูปแบบองค์ประกอบรูทของเอกสาร ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน :root Selector <!DOCTYPE html> <html> <head> <style> :root { &
หากต้องการจัดรูปแบบองค์ประกอบรูทของเอกสาร ให้ใช้ตัวเลือกรูท CSS: ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน:root Selector <!DOCTYPE html> <html> <head> <style> :root { &
ใช้ตัวเลือก CSS :target เพื่อเน้นจุดยึด HTML ที่ใช้งานอยู่ด้วย CSS ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน :target Selector <!DOCTYPE html> <html> <head> <style> :target { &
หากต้องการจัดรูปแบบทุกองค์ประกอบที่ไม่ใช่องค์ประกอบที่ระบุ ให้ใช้ตัวเลือก CSS :not(selector) ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน :not selector: <!DOCTYPE html> <html> <head> <style> p { &nbs
หากต้องการเน้นจุดยึด HTML ที่ใช้งานอยู่ด้วย CSS ให้ใช้ :target selector ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน :target Selector: <!DOCTYPE html> <html> <head> <style> :target { &n
ใช้ CSS:ตัวเลือกที่ถูกต้องเพื่อจัดรูปแบบองค์ประกอบ ทั้งหมดด้วยค่าที่ถูกต้อง ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน :valid Selector <!DOCTYPE html> <html> <head> <style> input:valid { &n
ใช้ตัวเลือก CSS :only-of-type เพื่อจัดรูปแบบทุก องค์ประกอบที่เป็น องค์ประกอบเดียวขององค์ประกอบหลัก ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้ตัวเลือก :only-of-type <!DOCTYPE html> <html> <head> <style> &n
ใช้ตัวเลือก CSS :only-of-type เพื่อจัดรูปแบบทุก องค์ประกอบที่เป็น องค์ประกอบเดียวขององค์ประกอบหลัก ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้ตัวเลือก :only-of-type: <!DOCTYPE html> <html> <head> <style> &
ใช้ตัวเลือก CSS :only-child เพื่อจัดรูปแบบทุก องค์ประกอบที่เป็นลูกเดียวของพาเรนต์ ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน :only-child selector <!DOCTYPE html> <html> <head> <style> p:only-chil
ใช้ CSS :ตัวเลือกตัวเลือกเพื่อจัดรูปแบบองค์ประกอบ โดยไม่มีแอตทริบิวต์ จำเป็น ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน :ตัวเลือกตัวเลือก: <!DOCTYPE html> <html> <head> <style> input:optional { &n
ใช้ CSS :ตัวเลือกตัวเลือกเพื่อจัดรูปแบบองค์ประกอบ โดยไม่มีแอตทริบิวต์ จำเป็น ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน :ตัวเลือกตัวเลือก: <!DOCTYPE html> <html> <head> <style> input:optional { &n