ใช้ CSS ตกแต่ง Text

        บทความนี้ก็ยังอยู่ที่ CSS เหมือนเดิมครับเพราะ CSS นั้นมีความสามารถในการตกแต่งเว็บของเราเยอะจริงๆครับวันนี้มาแชร์ความรู้เกี่ยวกับการจัดรูปแบบ Text บนหน้าเว็บของเรานั่นเองครับ

เรามาดูกันครับว่ามีอะไรบ้างและมีวิธีใช้ยังไงครับ

1.Text Color

body {
    color: red;
}

h1 {
    color: #000000;
}

.main {
    color: rgb(255,255,255);
}

    เป็นการกำหนดสีให้กับ Text ที่อยู่ใน tag html ที่เรากำหนดเราต้องการสีอะไรก็สามารถกำหนดดังตัวอย่างด้านบนนี้ได้เลยครับ

2.Text Alignment

h1 {
    text-align: center;
}

.Texts {
    text-align: left;
}

.main {
    text-align: right;
}

    จากตัวอย่างด้านบนเราสามารถกำหนดได้ว่าต้องการให้ Text โชว์ที่ตำแหน่งใดให้ชิดขวา,ซ้ายหรืออยู่ตรงกลางได้ทั้งนั้น

3.Text Decoration

.lineThroughText{
    text-decoration: line-through;
}
.underlineText {
    text-decoration: underline;
}

.overlineText {
    text-decoration: overline;
}

   จากตัวอย่างด้านบนเป็นการตกแต่ง Text ให้มีรูปแบบตามที่ต้องการไม่ว่าจะเป็น ขีดเส้นด้านบน,ขีดเส้นใต้ หรือขีดเส้นทับตัวอักษรไปเลย

4.Text Transformation

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

   ในข้อนี้เป็นการเปลี่ยนแปลง Text ไม่ว่าจะเป็นปรับให้ใช้ตัวพิมพ์ใหญ่ทั้งหมด ปรับเป็นตัวพิมพ์เล็กทั้งหมด หรือเป็นตัวพิมพ์ใหญ่เฉพาะตัวอักษรแรกของคำนั้นๆก็ได้เช่นกัน

5.Text Indentation

.mainText {
    text-indent: 60px;
}

   ตัวอย่างด้านบนนี้เป็นการจัดย่อหน้าให้กับชุดข้อความที่เราใส่ชื่อ class นี้ใน tag html ที่คอบชุดข้อความนั้นอยู่ครับ ตัวอยบ่างนี้ย่อหน้าไป 60 pixel.

   วันนี้ก็ได้แชร์ความรู้เกี่ยวกับการใช้ CSS จัดการกับ Text ต่างๆในหน้าเว็บของเราแล้วนะครับจะมาแชร์ความรู้แบบนี้เรื่อยๆครับในบทความหน้าก็ยังอยู่กับ CSS อยู่นะครับเพราะมีอะไรให้แชร์อีกมากมายเลยครับ