คำสั่งที่ใช้กับข้อความ (text) CSS

คำสั่งที่ใช้กับข้อความ (text)

CSS

ข้อความเป็นสิ่งที่เราใช้มากสุดในการทำเว็บเพจ ซึ่ง CSS ก็มีคำสั่งมากมายที่ใช้ในการควบคุมการแสดงผลของข้อความ ในบทนี้จะเป็นคำสั่งที่ใช้ในการแสดงข้อความทั้งหมด 

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.ใส่สีให้ข้อความ
    ในหัวข้อนี้จะเป็นการใส่สีให้กับข้อความ โดยเราจะกำหนดสีให้กับวัตถุของเราเช่น <H1> 

    2.การใส่สีพื้นหลังให้ข้อความ
    ในตัวอย่างจะเป็นการเน้นกลุ่มคำด้วยการใส่สีพื้นหลัง ซึ่งจะทำให้คำนั้นเด่นขึ้นมา เหมือนกับการที่เราใช้สีเมจิกเน้นคำที่อยู่ในหนังสือนั่นเอง
     จะเห็นได้ว่าเราใช้คำสั่ง <span> </span> ซึ่งคำสั่งนี้ก็เหมือนกับกำหนดให้กลุ่มอักษรที่อยู่ในวัตถุที่ชื่อว่า span เพื่อเราจะได้กำหนดขอบเขตของคำสั่ง CSS 

    3.การเว้นช่องว่างระหว่างตัวอักษร
    ตัวอย่างเป็นคำสั่งที่ใช้ในการเว้นช่องว่างระหว่างตัวอักษร หรือที่เราเรียกว่าช่องไฟนั่นเอง 

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

    5.การจัดตำแหน่งข้อความ
    เราจัดตำแหน่งข้อความเพื่อประโยชน์ในการแสดงผลเช่น การแสดงผลจำนวนเงินเรามักจะแสดงผลให้ชิดขวา , การแสดงผลข้อความเรามักแสดงผลชิดซ้าย 

    6.จัดรูปแบบข้อความ
    ในตัวอย่างจะเป็นคำสั่งที่ใช้ในการขีดเส้นฆ่าตัวข้อความ ขีดเส้นใต้ หรือใช้จัดการกับ link 

    7.จัดรูปแบบข้อความที่เป็น link
    ตัวอักษรที่เป็น link นั้นเราใช้คำสั่งในการจัดรูปแบบเหมือนข้อความทั่วไป แต่ selector นั้นเป็นคำสั่งเฉพาะ ซึ่งมีทั้งหมด 4 ตัว 

    1. a:link เป็นรูปแบบปรกติของข้อความที่เป็น link 
    2. a:hover เป็นรูปแบบของข้อความเมื่อมีเมาส์อยู่ด้านบน 
    3. a:active เป็นรูปแบบของข้อความเมื่อเราคลิกที่ข้อความ
    4. a:visit เป็นรูปแบบของข้อความที่เป็น link ที่เราเปิดดูแล้ว

    8.คำสั่งจัดการย่อหน้า
    เป็นคำสั่งที่ใช้บอกระยะย่อหน้าของข้อความ ซึ่งเราอาจใช้หน่วยเป็น cm ก็ได้

    9.คำสั่งจัดตัวอักษร พิมพ์ใหญ่ พิมพ์เล็ก
    เป็นคำสั่งที่เราไม่ค่อยได้ใช้เท่าไหร่ใช้ในการจัดรูปแบบตัวอักษรภาษาอังกฤษ ให้เป็นตัวพิมพ์ใหญ่ พิมพ์เล็ก 

    10.คำสั่งใช้ในการจัดเรียงตัวอักษร
    เป็นคำสั่งที่ใช้ในการจัดเรียงตัวอักษร จากซ้ายไปขวา หรือ จากขวาไปซ้าย จะมีผลกับตัวเลข สัญลักษณ์ต่างๆ ไม่มีผลกับตัวอักษร ในบทนี้เราจะใช้คำสั่ง div ซึ่งก็เป็นคำสั่งคล้ายกับ span เพียงแต่ว่า div จะเว้นบรรทัดระหว่าง div ส่วน span จะไม่เว้นแต่จะแสดงผลต่อไปเลย

    11.คำสั่งควบคุมระยะการเว้นวรรค
    เป็นคำสั่งที่ใช้ควบคุมระยะห่างของการเว้นวรรค ใช้ได้กับภาษาอังกฤษเท่านั้น

    12.คำสั่งควบคุมการขึ้นบรรทัดใหม่
    ตามปรกติถ้าข้อความของเรานั้นมีความยาว browser ก็จะทำการตัดบรรทัดให้เราเองแต่ถ้าเราใช้คำสั่ง no wrap เป็นการบอกให้ browser ไม่ต้องตัดบรรทัดให้เรา ให้แสดงผลตามยาวออกไป จนกว่าจะเจอคำสั่ง <br> จึงขึ้นบรรทัดใหม่ 

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

เนื้อหาในบทนี้อ้างอิงจากเว็บไซต์ www.w3schools.com