ตั้งค่าการอ่าน

ค่าเริ่มต้น

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

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

    • เนื้อหานิยายตอนนี้เปิดให้อ่าน
    • 3.67K
      0
      23 เม.ย. 54


    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

    ติดตามเรื่องนี้
    เก็บเข้าคอลเล็กชัน

    นิยายที่ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

    loading
    กำลังโหลด...

    อีบุ๊ก ดูทั้งหมด

    loading
    กำลังโหลด...

    ความคิดเห็น

    ×