Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer]

ลำดับตอนที่ #111 : [lesson] CSS > Styling Text ... จัดรูปแบบข้อความ (1)

Text Formating
(รูปแบบอักษร)

ข้อความนี้ผ่านการจัดรูปแบบบางอย่าง. หัวข้อ (heading) ใช้ ตำแหน่งข้อความ (text-align) : กึ่งกลาง, เปลี่ยนรูปข้อความ text-transform : เปลี่ยนเป็นพิมพ์ใหญ่, และ color : #CC3333 มาช่วยจัด. ย่อหน้า (paragraph) ถูกจัดให้เว้นย่อหน้า (indented) เข้ามา, จัดตำแหน่ง (aligned) กึ่งกลาง, และ ระยะห่างระหว่างตัวอักษรถูกกำหนดไว้.

ข้อความก็คือกลุ่มของตัวอักษรที่มาเรียงกัน...

ครั้งนี้เราจะมาดูการจัดรูปแบบข้อความด้วย properties ต่างๆ กันค่ะ

Text Color กำหนดค่าสีของข้อความ

ค่าสีก็สามารถระบุได้สามแบบ เหมือน bg เลยค่ะ...
    * name - เป็นชื่อตรงๆ อย่างเช่น "red" (ใช้คำว่า "แดง" ภาษาไทยไม่ได้นะ)
    * RGB - เป็นค่าสีแสงตามหลักฟิสิกส์ทั้งสาม เช่น "rgb(255,0,0)"
    * Hex - เป็นเลขฐานสิบหก เช่น "#ff0000"

<style type="text/css">
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>

Text Alignment กำหนดตำแหน่งของข้อความ

ค่าที่ตั้งได้ก็มี left (ซ้าย) เป็นค่ามาตราฐาน, right (ขวา), center (กึ่งกลาง), และ justified (ชิดขอบ) ค่ะ

<style type="text/css">
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>

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

ค่าที่ตั้งได้มี... overline, line-through, underline, และ none คือไม่มีการตกแต่ง (ค่านี้มักใช้เอาเส้นใต้ link ออก)

<style type="text/css">
.h1ex2 {text-decoration:overline;}
.h2ex2 {text-decoration:line-through;}
.h3ex2 {text-decoration:underline;}
</style>

Overline : เส้นข้างบน

line-Through : เส้นทับ

Underline : เส้นข้างใต้

Text Transformation แปลงร่างอักษร

แปลงร่างในที่นี้ก็คือแปลงเป็นพิมพ์เล็ก พิมพ์ใหญ่ ของอักษรภาษอังกฤษนั่นเองค่ะ

<style type="text/css">
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>

This is some text (original).

This is some text (Uppercase).

This is some text (lowercase).

This is some text (Capitalize).

คุณสมบัติอื่นๆ ที่เหลือของ text ไว้มาต่อให้ในตอนหน้านะคะ ^^

อ้างอิง...
http://www.w3schools.com/css/css_text.asp