คุณกำลัง login ด้วย [ เปลี่ยนชื่อ | ออกระบบ ]
 กระทู้ Top5 วันนี้ | นิยาย | ค้นหานิยาย | บอร์ดนักเขียน | บอร์ด AF | บอร์ด TheStar | ของที่ระลึก Dek-D | App อ่านนิยายบนมือถือ New! |
  นิยายรักหวานแหวว | นิยายรักเศร้าๆ | นิยายซึ้งกินใจ | นิยายแฟนตาซี | นิยายผจญภัย | เรื่องสบายๆคลายเครียด | แฟนฟิค | วรรณกรรมเยาวชน |
เข้าสู่ My.iD Control สมัครเป็นนักเขียนใหม่ | วิธีลงบทความ กฏเกณฑ์การใช้งาน | การควบคุมเรตติ้ง

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

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


     อัพเดท 7 เม.ย. 54
กลับไปหน้าหลักของบทความ
แจ้งเนื้อหาในตอนไม่เหมาะสม
นิยาย-เรื่องยาว: ไลฟ์สไตล์/ดีไซน์ กราฟิก
Tags: โค้ด, code, แต่งไอดี, ไอดี, แต่ง id, id, My.iD, My.iD2, ตกแต่ง, นิยาย
ผู้แต่ง : Caje ดูเน็ตเวิร์คอื่นๆ ของ Caje
My.iD: https://my.dek-d.com/Caje
< Review/Vote > Rating : 95% [ 233 mem(s) ]
This month views : 35 Overall : 219,509
4,449 Comment(s), [ แฟนพันธุ์แท้ 5114 คน ]

[ ตอนก่อนหน้า | กลับไปหน้าหลักของบทความ | ตอนถัดไป ] [ บันทึกเป็น Favorite ] [ ปิดหน้าต่างนี้ ]
Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer] ตอนที่ 111 : [lesson] CSS > Styling Text ... จัดรูปแบบข้อความ (1) , ผู้เข้าชมตอนนี้ : 2187 , โพส : 6 , Rating : 80% / 1 vote(s)

ขนาดตัวอักษร : เพิ่มขนาด | ลดขนาด


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




Dek-D Writer APP : แอพอ่านนิยาย Dek-D บน iPhone , Android Phone
มาแล้ว!! เวอร์ชั่น iPad และ Android Tablet
Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer] ตอนที่ 111 : [lesson] CSS > Styling Text ... จัดรูปแบบข้อความ (1) , ผู้เข้าชมตอนนี้ : 2187 , โพส : 6 , Rating : 80% / 1 vote(s)
Vote ให้คะแนนตอนนี้ Vote ได้ 1 ครั้ง / 1 ชม.
[ ตอนก่อนหน้า | กลับไปหน้าหลักของบทความ | ตอนถัดไป ] [ บันทึกเป็น Favorite ] [ ปิดหน้าต่างนี้ ]
หน้าที่ 1
# 6 : ความคิดเห็นที่ 4092
ขอบคุณค่าาาาาาาาาาาาาาาาาา
PS.  クリス/キラン ♡ イーチン
Name : จิงโจ้ < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ จิงโจ้ [ IP : 58.9.15.95 ]
ส่งข้อความลับ
วันที่: 8 ตุลาคม 2556 / 13:24
# 5 : ความคิดเห็นที่ 3505
อยากเปลี่ยนสีเส้นใต้ทำยังไงหรอครับ
PS.  เกิดอะไรขึ้นกับหัวใจ...เพียงแค่เห็นครั้งแรกก็รู้ว่าใช่...รักมากที่สุด...B1A4...หัวใจกระตุก...เพราะ...กงยอง...บาดึล...และพี่หมี...>_____<;;;...รักกงยองที่สุดเลย!!!~###
Name : @#My Heart Chruch#@ < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ @#My Heart Chruch#@ [ IP : 115.67.1.111 ]
ส่งข้อความลับ
วันที่: 1 สิงหาคม 2555 / 12:27
# 4 : ความคิดเห็นที่ 2039
ขอบคุณมากๆเลยค่ะ พี่เคจ
ได้ความรู้เพิ่มอีกแล้ว :)....เดี๋ยวว่างๆแล้วลองไปใช้ดูดีกว่า ๕๕๕. >"<


PS.  ★' L O V E | design'♥ ,, Dr.Duck ' !!
Name : ϟ.Ho.нo.homin'★ < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ ϟ.Ho.нo.homin'★ [ IP : 125.27.84.189 ]
ส่งข้อความลับ
วันที่: 7 พฤษภาคม 2554 / 10:56
# 3 : ความคิดเห็นที่ 1916
ขอบคุณครับพี่เคจ รู้มากขึ้นเยอะเลย แล้วจะนำไปปรับใช้นะครับ

PS.  ใครบ้าโซลอีทเตอร์เข้ามาคุยกับเราใด้ สาวกS.E.อย่าพลาด ของดีรีบมาแอดเราเป็นเพื่อนเร็ว!!!
Name : MOONLIGHTY < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ MOONLIGHTY [ IP : 61.19.52.58 ]
ส่งข้อความลับ
วันที่: 23 เมษายน 2554 / 19:14
# 2 : ความคิดเห็นที่ 1913

ขอบคุณสำหรับความรู้ค่ะ ^^


PS.  The only man who never makes mistakes is the man who never does anything. (- -)..... I Love Vongola family.. นอกจากนั้น..ฉันขอประกาศ ฉันรักริทสึ ! >< ♥ และคลั่งฮิบะ! =O=!
Name : Khaw Happy :D .★ < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ Khaw Happy :D .★ [ IP : 58.9.225.113 ]
ส่งข้อความลับ
วันที่: 23 เมษายน 2554 / 17:35
# 1 : ความคิดเห็นที่ 1811
ขอบคุณพี่เคจมากเลยค่ะ เข้าใจขึ้นเยอะเลย
โง่อยู่นาน ฮ่าๆๆๆๆๆๆ Y_Y 
PS.  ;')) Hello worldddddddd.......
Name : ✚M.mie Hoๆ ;')) < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ ✚M.mie Hoๆ ;')) [ IP : 14.207.219.115 ]
ส่งข้อความลับ
วันที่: 8 เมษายน 2554 / 08:35
หน้าที่ 1
Post your comment : แสดงความคิดเห็น
ส่วนที่ 1: Message ข้อความ

ส่วนที่ 2 : Name ลงชื่อ
  โพสความเห็นด้วย member Login name Password
  โพสความเห็นไม่แสดง member : ชื่อ* email รูปตัวแทน
            พิมพ์เลขที่เห็น

เธซเธ™เธฑเธ‡เธชเธทเธญเนƒเธซเธกเนˆเธ›เธฃเธฐเธˆเธณเน€เธ”เธทเธญเธ™เธžเธคเธฉเธ เธฒเธ„เธก 2561

ข้อตกลง & เงื่อนไขการใช้งาน

  • กรณีที่ผลงานชิ้นนี้เป็นผลงานที่แต่งโดยผู้ลงผลงานเอง ลิขสิทธิ์ของผลงานนี้จะ
    เป็นของผู้ลงผลงานโดยตรง ห้ามมิให้คัดลอก ทำซ้ำ เผยแพร่ ก่อนได้รับอนุญาต
    จากผู้ลงผลงาน

  • กรณีที่ผลงานชิ้นนี้กระทำการคัดลอก ทำซ้ำ มาจากผลงานของบุคคลอื่นๆ ผู้ลง
    ผลงานจะต้องทำการอ้างอิงอย่างเหมาะสม และต้องรับผิดชอบเรื่องการจัดการ
    ลิขสิทธิ์แต่เพียงผู้เดียว

  • ข้อความและรูปภาพที่ปรากฏอยู่ในผลงานที่ท่านเห็นอยู่นี้ เกิดจากการส่งเข้าระบบ
    โดยอัตโนมัติจากบุคคลทั่วไป ซึ่งเด็กดีดอทคอมมิได้มีส่วนร่วมรู้เห็น ตรวจสอบ
    หรือพิสูจน์ข้อเท็จจริงใดๆ ทั้งสิ้น ผู้ใดพบเห็นการลงผลงานละเมิดลิขสิทธิ์ หรือ
    ไม่เหมาะสมโปรดแจ้งผู้ดูแลระบบเพื่อดำเนินการทันที
    Email: contact(at)dek-d.com ( ทุกวัน 24 ชม ) หรือ
    Tel: 0-2860-1142 ( จ-ศ 0900-1800 )

App อ่านนิยายบน iPad iPhone และ Android