เราสามารถกำหนดรูปแบบให้ข้อความ เช่น ความสูงของบรรทัด, ตำแหน่งการจัดวางข้อความ, การขีดเส้นใต้, การกำหนดตัวพิมพ์เล็กพิมพ์ใหญ่
และอื่นๆ ผ่าน Property ต่างๆ ดังนี้
|
Property
|
Description
|
Values
|
|
|
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 ต่างๆ ด้านบน ลองนำมาใช้จัดรูปแบบให้กับข้อความกันค่ะ
ตัวอย่าง
<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>
<span style="text-decoration:underline">CSS</span>
ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML </p>
ผลลัพธ์
CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML
และ XHTML ใช้สำหรับตกแต่งเอกสาร
HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ
ด้วยการกำหนดคุณสมบัติให้กับ Element
ต่างๆ ของ HTML
ตัวอย่าง
<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>
<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>
ผลลัพธ์
Good Moring Teacher, How Are You Today?
