วิธีแสดงข้อความเป็นคำบรรยายภาพใน CSS

เว็บมาสเตอร์สามารถแสดงและจัดรูปแบบข้อความบนเว็บเพจโดยใช้ CSS - Cascading Style Sheet - code เพื่อจัดรูปแบบข้อความประเภทต่างๆ ในการแสดงข้อความเป็นคำอธิบายภาพให้สร้างคลาสรหัส CSS สำหรับข้อความคำอธิบายภาพแล้วติดแท็กคำบรรยายภาพแต่ละภาพด้วยตัวระบุระดับเพื่อจัดรูปแบบข้อความในรูปแบบคำบรรยายภาพโดยอัตโนมัติ

1

เรียกใช้โปรแกรมการออกแบบเว็บตามปกติแอปพลิเคชันตัวแก้ไข HTML หรือเครื่องมือข้อความธรรมดา Microsoft Notepad เปิดเว็บเพจที่มีคำอธิบายภาพที่คุณต้องการจัดรูปแบบ

2

เลื่อนไปที่ส่วนหัวที่ด้านบนของหน้า ส่วนหัวเริ่มต้นด้วยแท็ก“” และลงท้ายด้วยแท็ก“”

3

พิมพ์หรือวางข้อมูลโค้ดต่อไปนี้ไว้ข้างหน้าแท็ก“”:

4

เน้นและแก้ไขแต่ละแอตทริบิวต์ระหว่างวงเล็บปีกกาเพื่อจัดรูปแบบและจัดรูปแบบข้อความคำอธิบายภาพของคุณ ตัวอย่างเช่นเปลี่ยนองค์ประกอบ“ ขนาดตัวอักษร” เป็นขนาดตัวอักษรที่คุณต้องการสำหรับคำบรรยาย แก้ไข“ font-family” ให้เป็นแบบอักษรที่คุณต้องการ คุณอาจต้องการเลือกแบบอักษรที่โดดเด่นจากส่วนที่เหลือของข้อความบนเว็บเพจหรือจับคู่แบบอักษรที่ใช้กับส่วนอื่น ๆ ของหน้า เปลี่ยนสีจาก“ # 000000” - ข้อความสีดำมาตรฐาน - เป็นรหัสสีที่คุณต้องการ ใน“ แบบอักษร - น้ำหนัก” ให้เปลี่ยนแอตทริบิวต์จาก“ ปกติ” เป็น“ ตัวหนา” หากคุณต้องการคำบรรยายเป็นตัวหนา

5

เลื่อนไปที่ตำแหน่งของคำบรรยายภาพแต่ละภาพที่คุณต้องการใช้สไตล์ในส่วนเนื้อหาของเว็บเพจระหว่างแท็ก“” และ“”

6

วางหรือพิมพ์“” ทันทีหน้าข้อความอธิบาย แทรก“” หลังข้อความคำอธิบายภาพ รหัสควรมีลักษณะดังนี้:

7

บันทึกเว็บเพจและอัปโหลดไปยังเซิร์ฟเวอร์โฮสต์ของเว็บไซต์ของคุณตามปกติผ่านแผงควบคุมของระบบจัดการเนื้อหาของโฮสต์หรือด้วยแอปพลิเคชัน File Transfer Protocol

เคล็ดลับ

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