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

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

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


     อัพเดท 23 เม.ย. 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 : 53 Overall : 219,527
4,449 Comment(s), [ แฟนพันธุ์แท้ 5113 คน ]

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

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



Text Indent เยื้องเข้าให้บรรทัดแรกของย่อหน้า

คุณสมบัตินี้กำหนดค่าได้สองแบบค่ะ คือเป็น px (pixel) กับเป็น % (เปอร์เซนต์)

<style type="text/css">
p.indent {text-indent:50px;}
</style>

นี่คือตัวอย่างย่อหน้าเท่านั้น ข้อความในนี้มิจำเป็นต้องสนใจอ่านแต่อย่างใด อ่า... เมื่อไหร่จะเขียนยาวพอจนจะเรียกได้ว่าย่อหน้าล่ะนี่ เอาแค่ให้พอเห็นว่าบรรทัดแรกมันเยื้องเข้าไปก็พอล่ะมั้ง ดังนั้นก็ถ้ายาวเกินหนึ่งบรรทัดก็คงพอแล้ว เอาล่ะ แค่นี้แหละ ช่างเป็นย่อหน้าตัวอย่างที่หาสาระใดๆ เลยไม่ได้จริงๆ

จากย่อหน้านี้ จะเห็นได้ว่า ตัวเยื้องเข้ามา ไม่ได้ใช้การเว้นวรรค หรือ tab ใดๆ ช่วย ใช้ text-indent ซึ่งเป็น property หนึ่งของ css เข้ามาช่วยเพียงอย่างเดียวเท่านั้น




Letter Spacing ระยะห่างระหว่างตัวอักษร

ค่ามาตรฐานคือ normal ส่วนค่าอื่นๆ จะเป็นหน่วยความยาว

<style type="text/css">
.h1 {letter-spacing:11px;}
.h2 {letter-spacing:-1px;}
</style>

ย่อหน้านี้ใช้ .h1 มาควบคุม

ย่อหน้านี้ใช้ .h2 มาควบคุม



Word Spacing ระยะห่างระหว่างคำ

คุณสมบัตินี้เหมาะกับภาษาอังกฤษค่ะ ถ้าเป็นภาษาไทยน่าจะเรียกว่าจะระยะระหว่างประโยคมากกว่า เอาเป็นว่ามันเป็นการกำหนดความกว้างของการเว้นวรรคน่ะค่ะ

ค่ามาตรฐานคือ normal ส่วนค่าอื่นๆ จะเป็นหน่วยความยาว เช่นเดียวกับ letter-spacing

<style type="text/css">
p.wp {word-spacing:30px;}
</style>


This is some text. This is some text.
ลองภาษาไทยดูบ้าง ทดสอบๆ เว้นวรรคกว้างจริงๆ


Line Height ระยะห่างระหว่างบรรทัด

ค่ามาตรฐานคือ normal ถ้าจะเปลี่ยนเป็นค่าอื่นๆ ก็สามารถกำหนดเป็น ตัวเลข (number), ความยาว (length), หรือ เปอร์เซนต์ (%) ก็ได้ค่ะ

<style type="text/css">
p.small {line-height:90%;}
p.big {line-height:200%;}
</style>


ย่อหน้านี้เว้นบรรทัดแบบค่ามาตรฐาน ซึ่งก็ประมาณ 110% ถึง 120% ขึ้นอยู่กับ broswers ย่อหน้านี้ถูกจัดด้วย standard line-height

ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ

ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ



Vertical Align ตำแหน่งในแนวแกน y (แนวตั้ง)

คุณสมบัตินี้นิยมให้จัดข้อความคู่กับภาพค่ะ

<style type="text/css">
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>


ภาพ Code & Technics for My.iD2 and Writer กับค่าตั้งต้นในการจัดวาง

ภาพ Code & Technics for My.iD2 and Writer กับ vertical-align:text-top;

ภาพ Code & Technics for My.iD2 and Writer กับ vertical-align:text-bottom;


ค่าที่ใช้ได้ดูจากตารางสรุปได้เลยนะคะ



ตารางสรุป properties และ values ที่เหลือของ text


Property Description Values CSS
color Sets the color of a text color 1
direction Sets the text direction ltr
rtl
2
line-height Sets the distance between lines normal
number
length
%
1
letter-spacing Increase or decrease the space between characters normal
length
1
text-align Aligns the text in an element left
right
center
justify
1
text-decoration Adds decoration to text none
underline
overline
line-through
blink
1
text-indent Indents the first line of text in an element length
%
1
text-shadow   none
color
length
 
text-transform Controls the letters in an element none
capitalize
uppercase
lowercase
1
unicode-bidi   normal
embed
bidi-override
2
vertical-align Sets the vertical alignment of an element baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
1
white-space Sets how white space inside an element is handled normal
pre
nowrap
1
word-spacing Increase or decrease the space between words normal
length
1



Dek-D Writer APP : แอพอ่านนิยาย Dek-D บน iPhone , Android Phone
มาแล้ว!! เวอร์ชั่น iPad และ Android Tablet
Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer] ตอนที่ 112 : [lesson] CSS > Styling Text ... จัดรูปแบบข้อความ (2) , ผู้เข้าชมตอนนี้ : 3564 , โพส : 5 , Rating : 0% / 0 vote(s)
Vote ให้คะแนนตอนนี้ Vote ได้ 1 ครั้ง / 1 ชม.
[ ตอนก่อนหน้า | กลับไปหน้าหลักของบทความ | ตอนถัดไป ] [ บันทึกเป็น Favorite ] [ ปิดหน้าต่างนี้ ]
หน้าที่ 1
# 5 : ความคิดเห็นที่ 2040
โห -O-; อ่านมาถึงตอนนี้แอบงงเล็กน้อย แต่ก็จะพยายามเข้าใจ >"<
พี่เคจนี่เก่งจังนะคะ แกะโค้ดได้ด้วยง่ะ สุโค่ยย~ >O<

สุดท้าย ขอบคุณสำหรับความรู้นะคะ :)

PS.  ★' L O V E | design'♥ ,, Dr.Duck ' !!
Name : ϟ.Ho.нo.homin'★ < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ ϟ.Ho.нo.homin'★ [ IP : 125.27.84.189 ]
ส่งข้อความลับ
วันที่: 7 พฤษภาคม 2554 / 11:01
# 4 : ความคิดเห็นที่ 2031
ขอบคุณนะคะ ^ ^.
PS.  ✚night mare or sweet dream?✚
Name : '{๒๑}สองหนึ่ง < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ '{๒๑}สองหนึ่ง [ IP : 125.26.29.218 ]
ส่งข้อความลับ
วันที่: 5 พฤษภาคม 2554 / 18:10
# 3 : ความคิดเห็นที่ 2018
พี่เก่งจังเลย หนูอ่านแล้วยัง งง TT

PS.  Warning !! ,, มายไอดีฉันไม่มีอะไรเลย เตือนก่อนคลิ๊ก ฮ่าๆๆๆ
Name : `Net★Idol < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ `Net★Idol [ IP : 115.87.129.145 ]
ส่งข้อความลับ
วันที่: 3 พฤษภาคม 2554 / 23:24
# 2 : ความคิดเห็นที่ 1919
 ขอบคุณมากๆนะคะ :) 
Name : n i n e ,, sanctuary.* < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ n i n e ,, sanctuary.* [ IP : 124.121.175.218 ]
ส่งข้อความลับ
วันที่: 24 เมษายน 2554 / 01:17
# 1 : ความคิดเห็นที่ 1915
ขอบคุณมากเลยนะครับพี่เคจ ผมอยากจะเขียนโค้ดให้ได้แบบพี่บ้างจังเลย

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