หน้าแรก
หน้าแรก
คุณสมบัติ object-fit ใน CSS ใช้เพื่อปรับขนาดรูปภาพหรือวิดีโอให้พอดีกับคอนเทนเนอร์ มีค่าดังต่อไปนี้ ประกอบด้วย: เนื้อหาได้รับการปรับขนาดให้พอดี หน้าปก: ตัดให้พอดี เติม: เติมช่องเนื้อหา ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้คุณสมบัติ object-fit ด้วยค่าหน้าปก <!DOCTYPE html> <ht
คอนเทนเนอร์กริดใน CSS มีรายการกริด รายการเหล่านี้อยู่ในแถวและคอลัมน์ ให้เราสร้าง CSS Grid container และกำหนดจำนวนคอลัมน์ใน Grid: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container { &nbs
หากต้องการเปลี่ยนสีพื้นหลังของปุ่ม ให้ใช้ background-color ทรัพย์สิน คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อเปลี่ยนสีพื้นหลังของปุ่ม ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .btn { &
ใช้ flex-wrap คุณสมบัติที่มีค่า wrap-reverse เพื่อห่อ flex-items ในลำดับย้อนกลับ ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน wrap-reverse ค่า - <!DOCTYPE html> <html> <head> <style> .mycontainer { &
หากต้องการเปลี่ยนขนาดฟอนต์ของปุ่ม ให้ใช้ขนาดฟอนต์ ทรัพย์สิน คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อเปลี่ยนขนาดตัวอักษร ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .button {
หากต้องการเปลี่ยน padding ของปุ่ม ให้ใช้ padding ทรัพย์สิน คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อเปลี่ยนช่องว่างภายในของปุ่ม ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .button {
ในการสร้างเงาเรืองแสงสีแดงนีออน ให้ใช้คุณสมบัติ text-shadow คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อให้ได้สิ่งนี้ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> h1 { tex
ใช้รายการแบบอินไลน์เพื่อสร้างแถบนำทางแนวนอน ตั้งค่า องค์ประกอบเป็นแบบอินไลน์ ตัวอย่าง คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อสร้างแถบนำทางแนวนอน: <!DOCTYPE html> <html> <head> <style> ul { &nbs
เพิ่มรายการเงาที่คั่นด้วยเครื่องหมายจุลภาคเพื่อเพิ่มเงามากกว่าหนึ่งรายการด้วยคุณสมบัติ text-shadow คุณสามารถลองเรียกใช้สิ่งต่อไปนี้เพื่อเรียนรู้วิธีเพิ่มเงาหลายเงาในบรรทัดเดียว ตัวอย่าง <!DOCTYPE html> <html> <head> <style> &n
หากต้องการแสดงเงาบนโฮเวอร์รูปภาพ ให้ใช้คุณสมบัติ CSS box-shadow ตัวอย่าง <!DOCTYPE html> <html> <head> <style> img { border: 2px solid orange; &n
หากต้องการให้รูปภาพตอบสนอง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> img { max-width: 100%;
หากต้องการจัดกึ่งกลางรูปภาพ ให้ใช้ ระยะขอบซ้าย ระยะขอบขวา และ บล็อก CSS คุณสมบัติ. คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อจัดกึ่งกลางรูปภาพ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> img { &n
ใช้ ด้านล่าง คุณสมบัติ CSS เพื่อเพิ่มลูกศรที่ด้านบนของคำแนะนำเครื่องมือ ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเพิ่มคำแนะนำเครื่องมือที่มีลูกศรอยู่ด้านบน: .mytooltip .mytext { การมองเห็น:ซ่อน; ความกว้าง:140px; พื้นหลังสี:สีฟ้า; สี:#fff; ดัชนี z:1; ด้านบน:150%; ซ้าย:50%; ระยะขอบซ้าย:-60px
หากต้องการเพิ่มมุมโค้งมนให้กับปุ่ม ให้ใช้คุณสมบัติ border-radius ตัวอย่าง คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อเพิ่มมุมโค้งมน - <!DOCTYPE html> <html> <head> <style> .button { &nb
ในการวางตำแหน่งข้อความไว้ที่ด้านบนขวา ให้ใช้คุณสมบัติด้านขวาและด้านบน คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .box { &nbs
ใช้ grid-template-columns คุณสมบัติเพื่อกำหนดจำนวนคอลัมน์ใน CSS Grid Layout คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อกำหนดจำนวนคอลัมน์ มีการตั้งค่าตาราง 3 คอลัมน์ดังนี้: ตัวอย่าง <!DOCTYPE html> <html> <head> <style>
ใช้ ซ้าย คุณสมบัติ CSS เพื่อเพิ่มลูกศรทางด้านขวาของคำแนะนำเครื่องมือ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเพิ่มคำแนะนำเครื่องมือด้วยลูกศรทางด้านขวา: ตัวอย่าง .mytooltip .mytext { การมองเห็น:ซ่อน; ความกว้าง:140px; พื้นหลังสี:สีฟ้า; สี:#fff; ดัชนี z:1; ด้านบน:-5px; ขวา:110%; จัดข้อความ:ศูนย์; รัศมี
ใช้ตัวเลือกองค์ประกอบ ~ เพื่อเลือก องค์ประกอบที่นำหน้าด้วย องค์ประกอบ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p~ul { &n
คุณสมบัติการแปลงใน CSS ใช้เพื่อนำการแปลง 2D หรือ 3D ไปใช้กับองค์ประกอบ คุณสามารถลองใช้รหัสต่อไปนี้เพื่อใช้คุณสมบัติการแปลง - ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { &
ใช้การแปลง 2D หรือ 3D กับองค์ประกอบที่มีคุณสมบัติการแปลงใน CSS คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อหมุนองค์ประกอบโดยใช้การแปลง ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div {