คู่มือการจัดรูปแบบข้อความใน CSS

เมื่อออกแบบเว็บไซต์ การจัดรูปแบบข้อความเป็นสิ่งสำคัญในการสร้างอินเทอร์เฟซที่น่าดึงดูดและอ่านง่าย

CSS มีคุณสมบัติหลายอย่างที่ให้คุณปรับแต่งองค์ประกอบต่างๆ ของข้อความ รวมถึงสีฟอนต์ ขนาด ตระกูล การจัดตำแหน่ง ระยะห่าง และอื่นๆ

ด้านล่างนี้เป็นคำแนะนำโดยละเอียดเกี่ยวกับคุณสมบัติการจัดรูปแบบข้อความแต่ละรายการ พร้อมด้วยตัวอย่างสำหรับแต่ละคุณสมบัติ

 

สีตัวอักษร

พารามิเตอร์: ค่าสี ซึ่งสามารถเป็นชื่อสี(เช่น red) รหัสฐานสิบหก(เช่น "#FF0000") ค่า RGB(เช่น "rgb(255, 0, 0)") หรือค่า RGBA(เช่น, "rgba(255, 0, 0, 0.5)").

p {  
  color: blue;  
}  

 

ขนาดตัวอักษร

พารามิเตอร์: ค่าขนาดที่สามารถเป็นพิกเซล(เช่น "16px") หน่วย em(เช่น "1em") หน่วย rem(เช่น "1.2rem") หน่วยความกว้างของวิวพอร์ต(เช่น "10vw"), หน่วยความสูงของวิวพอร์ต(เช่น "5vh") หรือหน่วยอื่นๆ

h1 {  
  font-size: 24px;  
}  

 

ตระกูลฟอนต์

พารามิเตอร์: รายการตระกูลฟอนต์ ระบุตามลำดับที่ต้องการ คุณสามารถระบุชื่อฟอนต์(เช่น Arial) หรือใส่ชื่อฟอนต์ที่มีอักขระพิเศษในเครื่องหมายอัญประกาศ(เช่น " Times New Roman)

body {  
  font-family: Arial, sans-serif;  
}  

 

น้ำหนักและรูปแบบตัวอักษร

พารามิเตอร์ font-weight: normal(default), bold, bolder, lighter, หรือค่าตัวเลขตั้งแต่ 100 ถึง 900

พารามิเตอร์ font-style: normal(default), italic _

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

การตกแต่งข้อความ

พารามิเตอร์: "none"(default), "underline", "overline", "line-through"  หรือการรวมกันของค่าที่คั่นด้วยช่องว่าง

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

การจัดตำแหน่งข้อความ

พารามิเตอร์: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

ความสูงของเส้นและระยะขอบ

ความสูงของบรรทัดพารามิเตอร์: ค่าตัวเลขที่หรือเปอร์เซ็นต์ของขนาดฟอนต์ปัจจุบัน

Parameter margin: ค่าการวัด เช่น พิกเซล(px), หน่วย em(em), หน่วย rem(rem) เป็นต้น

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

เค้าโครงข้อความหลายคอลัมน์

พารามิเตอร์: จำนวนเต็มบวก หรือ "auto"(default).

.container {  
  column-count: 2;  
}  

 

เปลี่ยนสีข้อความเมื่อโฮเวอร์

:hover ไม่มีพารามิเตอร์ เฉพาะ ใช้ pseudo-class เท่านั้น

a:hover {  
  color: red;  
}  

 

การเปลี่ยนสีข้อความในสถานะ(ใช้งานอยู่ เข้าชมแล้ว)

ไม่มีพารามิเตอร์เฉพาะ ใช้เฉพาะ pseudo-classes :active  และ :visited.

a:visited {  
  color: purple;  
}  

 

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