หน้าแรก

การปรับลูกเล่นตัวอัษรด้วย CSS ใน CSS


เราสามารถกำหนดรูปแบบให้ข้อความ เช่น ความสูงของบรรทัด, ตำแหน่งการจัดวางข้อความ, การขีดเส้นใต้, การกำหนดตัวพิมพ์เล็กพิมพ์ใหญ่ และอื่นๆ ผ่าน Property ต่างๆ ดังนี้

PropertyDescriptionValues 
colorใช้กำหนดสีสีred
#000099
directionใช้กำหนดทิศทางของ text (IE6)ltr 
rtl
ซ้ายไปขวา
ขวาไปซ้าย
line-heightใช้กำหนดความสูงของบรรทัด ซึ่งจะนับรวมขอบด้านบนและล่างของตัวอักษรด้วยnormal
number (pt)
%
normal
ความสูง 15pt
ความสูง 150%
letter-spacing
ใช้กำหนดระยะห่าง ระหว่างตัวอักษรแต่ละตัว 
normal
number (cm)
normal
-0.02cm
0.2cm
text-alignใช้กำหนดรูปแบบการจัดคำleft
center
right
justify
left

center

right

justify
text-decorationใช้กำหนดเส้นให้กับตัวอักษรในลักษณะต่างๆnone
underline
overline
line-through
blink
none
ขีดเส้นใต้
เส้นเหนือตัวอักษร
เส้นขีดทับตัวอักษร
ตัวอักษรกระพริบ *IE ใช้ไม่ได้
text-indentใช้กำหนดขนาดของย่อหน้า ในบรรทัดแรกของย่อหน้านั้นๆnumber (in)
%

กำหนดขนาดของย่อหน้า 0.3 นิ้ว

กำหนดขนาดของย่อหน้า 5% (ถ้ากำหนด 50% จะได้กึ่งกลางหน้าจอพอดี )

text-transformใช้แปลงตัวอักษรให้เป็นตัวพิมพ์เล็ก หรือ พิมพ์ใหญ่uppercase 
lowercase
capitalize
UPPERCASE แปลงเป็นพิมพ์ใหญ่
lowercase แปลงเป็นพิมพ์เล็ก
Capitalize แปลงพิมพใหญ่เฉพาะตัวแรกของคำ
white-spaceใช้กำหนดให้ หรือ ไม่ให้มีการขึ้นบรรทัดใหม่normal 
nowrap
ให้มีการตัดคำขึ้นบรรทัดใหม่ตามปกติ

ไม่ให้มีการตัดคำขึ้นบรรทัดใหม่
word-spacingใช้กำหนดกำหนดระยะห่าง ระหว่างแต่ละคำ (IE6)normal 
number (em)
normal - Happy new year
1em - Happy new year

จาก Property ต่างๆ ด้านบน ลองนำมาใช้จัดรูปแบบให้กับข้อความกันค่ะ 

Example

<p style="color:green; text-indent:1cm; text-align:justify;"> 
<span style="text-decoration:underline">CSS</span> 
ย่อมาจาก Cascading Style Sheet  เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML </p> 

Output

CSS ย่อมาจาก Cascading Style Sheet  เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML

Example

<html>
<head>
<style type="text/css">
.p1 {
color:#FF0033; 
line-height:18pt; 
letter-spacing:0.05cm; 
text-decoration:overline; 
text-indent:0.5in; 
text-transform:capitalize; 
white-space:normal; 
word-spacing:0.5em;
}
</style> 
</head>
<body>
<p class="p1">good moring teacher, how are you today?</p> 
</body>
</html>

Output

Good Moring Teacher, How Are You Today?



การกำหนดลักษณะ ตัวอักษรด้วย CSS การกำหนดพื้นหลังด้วย CSS
บทความที่เกี่ยวข้อง

ดูบทความ CSS ทั้งหมด »