Munu
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?
