นี่คือ pseudo-classes ที่ใช้บ่อย:ค่าคำอธิบาย:linkใช้เพิ่มสไตล์พิเศษให้ลิงก์ที่ยังไม่เคยเข้าเยี่ยมชม:visitedใช้เพิ่มสไตล์พิเศษให้ลิงก์ที่เคยเข้าเยี่ยมชมแล้ว:hoverใช้เพิ่มสไตล์พิเศษให้อีเลเมนต์เมื่อนำเมาส์ไปชี้:activeใช้เพิ่มสไตล์พิเศษให้อีเลเมนต์ที่กำลัง active:focusใช้เพิ่มสไตล์พิเศษให้อีเลเมนต์ขณะท

ใช้ pseudo-class :first-child เพื่อเพิ่มสไตล์พิเศษให้กับอีเลเมนต์ที่เป็นลูกแรกของอีเลเมนต์อื่นตัวอย่างลองรันโค้ดต่อไปนี้เพื่อเข้าใจการใช้งาน pseudo-class :first-child:<html>    <head>       <style>          div > p:first-child &n

ใช้ pseudo-class :lang เพื่อระบุภาษาที่จะใช้ในอีเลเมนต์ที่กำหนด คลาสนี้มีประโยชน์ในเอกสารที่ต้องรองรับหลายภาษาที่มีข้อตกลงต่างกันสำหรับโครงสร้างภาษาบางอย่างตัวอย่างลองรันโค้ดต่อไปนี้เพื่อเข้าใจการใช้งาน pseudo-class :lang:<html>    <head>       <style> &nbs

คุณสมบัติชื่อ visibility ช่วยให้คุณซ่อนอีเลเมนต์จากการมองเห็น คุณสามารถใช้คุณสมบัตินี้ร่วมกับ JavaScript เพื่อสร้างเมนูซับซ้อนและเลย์เอาต์เว็บเพจที่ซับซ้อนได้คุณสมบัติ visibility สามารถรับค่าตามตารางด้านล่างนี้:ค่าคำอธิบายvisibleกล่องและเนื้อหาถูกแสดงให้ผู้ใช้เห็นhiddenกล่องและเนื้อหาถูกทำให้มองไม่เ

คุณสมบัติ visibility ด้วยค่า visible ใช้เพื่อทำให้อีเลเมนต์มองเห็นได้ คุณสามารถลองนำโค้ดต่อไปนี้ไปใช้เพื่อนำคุณสมบัติ visible ไปปฏิบัติ:ตัวอย่าง<html>    <head>       <style>          p {             vi

CSS ช่วยให้คุณจัดตำแหน่งอีเลเมนต์ HTML ได้ คุณสามารถวางอีเลเมนต์ HTML ใดๆ ไว้ที่ตำแหน่งที่คุณต้องการ คุณสามารถระบุได้ว่าต้องการให้อีเลเมนต์จัดตำแหน่งสัมพัทธ์กับตำแหน่งตามธรรมชาติในหน้าหรือแบบ absolute ตามอีเลเมนต์พาเรนต์ตัวอย่างลองดูตัวอย่าง relative positioning: <html>     <

คุณสมบัติที่เกี่ยวกับการจัดตำแหน่งใน CSS มีดังนี้:Relative PositioningRelative positioning เปลี่ยนตำแหน่งของอีเลเมนต์ HTML สัมพัทธ์กับตำแหน่งที่มันปกติจะปรากฏ ดังนั้น left:20 จะเพิ่ม 20 พิกเซลเข้ากับตำแหน่ง LEFT ของอีเลเมนต์Absolute Positioningอีเลเมนต์ที่มี position: absolute จะถูกจัดตำแหน่งที่พิกั

Relative positioning เปลี่ยนตำแหน่งของอีเลเมนต์ HTML สัมพัทธ์กับตำแหน่งที่มันปกติจะปรากฏ ดังนั้น left:20 จะเพิ่ม 20 พิกเซลเข้ากับตำแหน่ง LEFT ของอีเลเมนต์คุณสามารถใช้ค่าสองค่า top และ left ร่วมกับคุณสมบัติ position เพื่อย้ายอีเลเมนต์ HTML ไปที่ใดก็ได้ในเอกสารเลื่อนซ้าย - ใช้ค่าลบสำหรับ leftเลื่อนขวา

อีเลเมนต์ที่มี position: absolute จะถูกจัดตำแหน่งที่พิกัดที่ระบุ สัมพัทธ์กับมุมซ้ายบนของหน้าจอคุณสามารถใช้ค่าสองค่า top และ left ร่วมกับคุณสมบัติ position เพื่อย้ายอีเลเมนต์ HTML ไปที่ใดก็ได้ในเอกสารเลื่อนซ้าย - ใช้ค่าลบสำหรับ leftเลื่อนขวา - ใช้ค่าบวกสำหรับ leftเลื่อนขึ้น - ใช้ค่าลบสำหรับ topเลื่อน

Fixed positioning ช่วยให้คุณกำหนดตำแหน่งของอีเลเมนต์ไว้ที่จุดเฉพาะบนหน้าจอ ไม่ว่าจะเลื่อนหน้าจอหรือไม่ ตำแหน่งที่ระบุจะคำนวณจากหน้าต่างเบราว์เซอร์คุณสามารถใช้ค่าสองค่า top และ left ร่วมกับคุณสมบัติ position เพื่อย้ายอีเลเมนต์ HTML ไปที่ใดก็ได้ในเอกสารเลื่อนซ้าย - ใช้ค่าลบสำหรับ leftเลื่อนขวา - ใช้ค่

คุณสมบัติ z-index ใช้ร่วมกับคุณสมบัติ position เพื่อสร้างเอฟเฟกต์เลเยอร์ คุณสามารถระบุได้ว่าอีเลเมนต์ไหนควรอยู่บนสุดและอันไหนอยู่ล่างสุดตัวอย่างลองรันโค้ดต่อไปนี้เพื่อนำคุณสมบัติ z-index ไปใช้:<html>    <head>    </head>    <body>     &

CSS pseudo-classes ใช้เพื่อเพิ่มเอฟเฟกต์พิเศษให้กับบาง selector คุณไม่ต้องใช้ JavaScript หรือสคริปต์อื่นๆ เพื่อใช้เอฟเฟกต์เหล่านี้Pseudo-classes ที่ใช้บ่อยที่สุดมีดังนี้:ค่าคำอธิบาย:linkใช้เพิ่มสไตล์พิเศษให้ลิงก์ที่ยังไม่เคยเข้าเยี่ยมชม:visitedใช้เพิ่มสไตล์พิเศษให้ลิงก์ที่เคยเข้าเยี่ยมชมแล้ว:hoverใช

Pseudo-class :link ใช้เพิ่มสไตล์พิเศษให้กับลิงก์ที่ยังไม่เคยเข้าเยี่ยมชม ค่าที่เป็นไปได้สามารถเป็นชื่อสีในรูปแบบที่ถูกต้องใดๆ ก็ได้ตัวอย่าง<html>    <head>       <style>          a:link { color:#000000; }       </s

คุณสมบัติ line-height ใช้สำหรับตั้งค่าความสูงของบรรทัดข้อความ ค่าของ line-height สามารถเป็นตัวเลข ความยาว หรือเปอร์เซ็นต์ได้ตัวอย่าง<html>    <head>    </head>    <body>       <p style = "width:300px; height:100px; border:2

คุณสมบัติ min-height ใช้สำหรับตั้งค่าความสูงขั้นต่ำที่กล่องสามารถมีได้ ค่าของ min-height สามารถเป็นตัวเลข ความยาว หรือเปอร์เซ็นต์ได้ตัวอย่าง<html>    <head>    </head>    <body>       <p style = "width:400px; min-height:150

เพื่อสร้างเลเยอร์ด้วย CSS คุณสามารถลองรันโค้ดต่อไปนี้ ตัวอย่างนี้ใช้คุณสมบัติ z-indexตัวอย่าง<html>    <head>    </head>    <body>       <div style = "background-color:red; width:300px; height:100px; position:relative; top:

คุณสมบัติ margin-right ระบุระยะห่างขอบขวาของอีเลเมนต์ สามารถรับค่าเป็นความยาว เปอร์เซ็นต์ หรือ auto ได้ คุณสามารถลองรันโค้ดต่อไปนี้เพื่อตั้งค่าระยะห่างขอบขวา:ตัวอย่าง<html>    <head>    </head>    <body>       <p style = "m

คุณสมบัติ max-width ใช้สำหรับตั้งค่าความกว้างสูงสุดที่กล่องสามารถมีได้ ค่าของ max-width สามารถเป็นตัวเลข ความยาว หรือเปอร์เซ็นต์ได้ตัวอย่าง<html>    <head>    </head>    <body>       <p style = "max-width:100px; height:200p

คุณสมบัติ min-width ใช้สำหรับตั้งค่าความกว้างขั้นต่ำที่กล่องสามารถมีได้ ค่าของ min-width สามารถเป็นตัวเลข ความยาว หรือเปอร์เซ็นต์ได้ตัวอย่าง<html>    <head>    </head>    <body>       <p style = "min-width:400px; height:100

CSS มีคุณสมบัติชื่อ overflow ซึ่งบอกเบราว์เซอร์ว่าต้องทำอย่างไรเมื่อเนื้อหาภายในกล่องใหญ่กว่ากล่องเอง คุณสมบัตินี้สามารถรับค่าได้ดังนี้:ค่าคำอธิบายvisibleอนุญาตให้เนื้อหาล้นออกนอกขอบเขตของอีเลเมนต์บรรจุhiddenเนื้อหาถูกตัดออกที่ขอบเขตของอีเลเมนต์บรรจุ และไม่มีแถบเลื่อนแสดงscrollขนาดของอีเลเมนต์บรรจุไ