คู่มือท่องเที่ยว สำหรับคนรักการท่องเที่ยว

Chapter 9

Text

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

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?


« Chapter 8
Chapter 10 »