การจัดตำแหน่งแบบ Relative (position: relative) วาง element ตามปกติใน document flow แล้วค่อยเลื่อนจากตำแหน่งเดิมด้วย top/right/bottom/left ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div.demo {    position: relative;    color: white;    b

ใช้คุณสมบัติ text-indent เพื่อกำหนดการเย่อยบรรทัดแรกของย่อหน้า (paragraph) ตัวอย่างที่ 1: หน่วย px <!DOCTYPE html> <html> <head> <style> div {    text-indent: 30px; } </style> </head> <body> <h1>Demo Heading</h1> <div> <p>

เพื่อตั้งค่าสีพื้นหลังด้วย CSS ให้ใช้คุณสมบัติ background-color ตัวอย่างที่ 1: background-color บน class <!DOCTYPE html> <html> <head> <style> .demo {    text-decoration: overline underline;    background-color: red; } </style> </head> <bod

การทำซ้ำพื้นหลังใน CSS ใช้กำหนดว่าภาพพื้นหลังจะทำซ้ำบนหน้าเว็บอย่างไร ใช้คุณสมบัติ background-repeat ค่าที่ใช้ได้มีดังนี้: background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit; ตัวอย่างที่ 1: repeat-x (ทำซ้ำแนวนอน) <!DOCTYPE html> <html> <head> <style

ตำแหน่งพื้นหลัง (Background position) ใช้สำหรับกำหนดตำแหน่งเริ่มต้นของภาพพื้นหลัง ใช้คุณสมบัติ background-position ตัวอย่างที่ 1: left center <!DOCTYPE html> <html> <head> <style> body {    background-image: url("https://www.tutorialspoint.com/images/Swift.png

เพื่อตั้งค่ากฎ (เส้นแบ่ง) ระหว่างคอลัมน์ ให้ใช้ shorthand column-rule ซึ่งรวมคุณสมบัติ: column-rule-width: ความกว้างเส้นแบ่ง column-rule-style: สไตล์เส้นแบ่ง column-rule-color: สีเส้นแบ่ง ค่ารวมได้ดังนี้: column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit; ตัวอย

ฟังก์ชัน translate() ใน CSS ใช้สำหรับเลื่อนตำแหน่งองค์ประกอบในทิศทางแนวนอนและแนวตั้ง ตัวอย่างที่ 1: translateX เท่านั้น (50px, 0) <!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hsla(130, 100%, 50%, 0.6);}

เมื่อใช้ Absolute Positioning องค์ประกอบจะถูกจัดตำแหน่งสัมพันธ์กับพ่อที่มีการจัดตำแหน่ง (positioned ancestor) ใกล้ที่สุด ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div.demo1 {    position: relative;    color: white;    background-color: oran

เพื่อตั้งค่าประเภทตัวหมายเลขรายการใน CSS ให้ใช้คุณสมบัติ list-style-type ตัวอย่างที่ 1: ul ใช้ square <!DOCTYPE html> <html> <head> <style> ul {    list-style-type: square; } </style> </head> <body> <h2>Teams</h2> <ul> <li>

CSS Absolute Units (หน่วยสัมบูรณ์) หน่วยความยาวแบบสัมบูรณ์มีค่าคงที่สัมพันธ์กัน ใช้เมื่อรูปแบบเอาต์พุททราบล่วงหน้า หน่วยหลักมีดังนี้: ลำดับหน่วยและคำอธิบาย 1cm - เซนติเมตร 2mm - มิลลิเมตร 3in - นิ้ว (1in = 96px = 2.54cm) 4px - พิกเซล (1px = 1/96 ของ 1in) * หน่วยหลักหน้

คุณสมบัติ list-style-position ใช้สำหรับกำหนดตำแหน่งของตัวหมายเลขรายการ (list-item markers) ตัวอย่าง: outside vs inside <!DOCTYPE html> <html> <head> <style> ul.demo1 {    list-style-position: outside; } ul.demo2 {    list-style-position: inside; } </st

เพื่อใช้ภาพเป็นตัวหมายเลขรายการ ให้ใช้คุณสมบัติ list-style-image ใน CSS ตัวอย่าง: ใช้ภาพ Swift เป็น marker สำหรับ ul และ ol <!DOCTYPE html> <html> <head> <style> ul.demo1 {    list-style-image: url(https://www.tutorialspoint.com/images/Swift.png); } ol.demo2 { &nbs

เพื่อตั้งค่าความสูงบรรทัด ให้ใช้คุณสมบัติ line-height ค่าที่ใช้ได้มีดังนี้: line-height: normal | number | length | percentage | initial | inherit; ตัวอย่างที่ 1: ใช้ตัวเลข (unitless) - แนะนำ <!DOCTYPE html> <html> <head> <style> div {    line-height: 1.9; } </s

เพื่อลบเส้นใต้เริ่มต้นของลิงก์ด้วย CSS โค้ดดังนี้: ตัวอย่างที่ 1: ลบ underline สำหรับ link และ visited <!DOCTYPE html> <html> <head> <style> a:link {    color: blue;    text-decoration: none; } a:visited {    color: blue;    text-decor

เพื่อจัดสไตล์ลิงก์ด้วย CSS ต้องรู้สถานะ (states) ของลิงก์ 4 สถานะ: link, visited, hover, active ใช้ pseudo-classes ของ anchor element: a:link - ลิงก์ที่ยังไม่ได้เยี่ยมชม a:visited - ลิงก์ที่เยี่ยมชมแล้ว a:hover - เมื่อเมาส์ชี้อยู่เหนือลิงก์ a:active - ลิงก์ที่กำลังถูกคลิก (กดค้าง) ตัว

เมื่อใช้ Static Positioning องค์ประกอบจะไม่ได้รับผลกระทบจากคุณสมบัติ top, bottom, left, และ right ใช้ position: static (ค่าเริ่มต้นของทุกองค์ประกอบ) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div.static {    position: static;    color: white;   &

ฟังก์ชัน rotate3d() ใน CSS ใช้สำหรับหมุนองค์ประกอบในพื้นที่ 3 มิติ กำหนดจำนวนและมุมการหมุนเป็นพารามิเตอร์ของ rotate3d() ตัวอย่างที่ 1: หมุนรอบแกน (1,1,1) 45 องศา <!DOCTYPE html> <html> <head> <style> .demo {    transform: rotate3d(1, 1, 1, 45deg); } .skew_img { &nb

สำหรับการตั้งค่าขนาดฟอนต์ด้วยคุณสมบัติ font-size สามารถใช้คีย์เวิร์ดได้ ซึ่งแบ่งเป็น 2 กลุ่ม: 1. Relative-size keywords (คีย์เวิร์ดขนาดสัมพัทธ์) larger - ใหญ่กว่าพ่อ 1 ขนาด smaller - เล็กกว่าพ่อ 1 ขนาด 2. Absolute-size keywords (คีย์เวิร์ดขนาดสัมบูรณ์) xx-small - เล็กมากที่สุด x-small -

เพื่อเพิ่มเอฟเฟกต์ Sepia (สีน้ำชา/โบราณ) ให้ภาพด้วย CSS3 ใช้ค่า sepia() สำหรับคุณสมบัติ filter ตัวอย่าง: sepia 100% <!DOCTYPE html> <html> <head> <style> img.demo {    filter: sepia(100%); } </style> </head> <body> <h1>Learn Spring Framework

เพื่อปรับความอิ่มตัวของภาพด้วย CSS3 ให้ใช้ค่า saturate() สำหรับคุณสมบัติ filter ตัวอย่าง: saturate 500% <!DOCTYPE html> <html> <head> <style> img.demo {    filter: saturation(500%); } </style> </head> <body> <h1>Learn Spring Framework</h1