วิธีการ เปลี่ยนสีข้อความใน HTML

ปกติคุณเปลี่ยนสีข้อความใน HTML ได้ด้วยแท็ก <font> แต่โชคไม่ดีที่วิธีนี้ใช้กับ HTML5 ไม่ได้แล้ว ต้องใช้ CSS กำหนดสีของข้อความที่จะปรากฏในส่วนต่างๆ ของหน้าเว็บแทน ใช้ CSS แล้วคุณวางใจได้ ว่าหน้าเว็บจะแสดงในทุกเบราว์เซอร์

วิธีการ 1

วิธีการ 1 ของ 2:

ใช้ CSS

ดาวน์โหลดบทความ

1
เปิดไฟล์ HTML. วิธีที่ใช้เปลี่ยนสีข้อความได้ง่ายที่สุด ก็คือใช้ CSS ตอนนี้ attribute <font> เก่าของ HTML ใช้กับ HTML5 ไม่ได้แล้ว เพราะงั้นก็ต้องใช้ CSS กำหนดสไตล์ให้ส่วนต่างๆ ของหน้าเว็บแทน
- วิธีการนี้ใช้กับ external stylesheets (ไฟล์ CSS แยก) ได้ด้วย ตัวอย่างต่อไปนี้คือไฟล์ HTML ที่ใช้ internal stylesheet
เพื่อกำหนดสไตล์ในแท็กนี้ในกรณีที่คุณใช้ internal stylesheet
3
พิมพ์ <style> เพื่อสร้าง internal stylesheet. พอมีแท็ก <style> อยู่กลางแท็ก <head> ก็จะเป็นการใช้ CSS ในแท็ก <style> กับทุกส่วนที่เกี่ยวข้องในหน้านั้น เสร็จแล้วตอนต้นของไฟล์ HTML จะออกมาหน้าตาประมาณนี้ ^{[1] X แหล่งข้อมูลอ้างอิง}
```
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
```
4
พิมพ์ element หรือส่วนที่คุณจะเปลี่ยนสีข้อความ. คุณต้องใช้ <style> กำหนดหน้าตาของส่วนต่างๆ ในหน้านั้น เช่น ถ้าอยากเปลี่ยนสไตล์ของข้อความทั้งหมดในหน้านั้น ก็ให้พิมพ์ว่า
```
<!DOCTYPE html>
<html>
<head>
<style>
body {

}
</style>
</head>
```
5
พิมพ์ color: ใน element selector. attribute color: จะเป็นตัวกำหนดสีข้อความในส่วนที่คุณเลือกของหน้านั้น ตัวอย่างข้างล่างคือการเปลี่ยนสีข้อความทั้งหมด หรือก็คือ default element ของข้อความทั้งหมดในหน้า
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color:
}
</style>
</head>
```
6
พิมพ์สีของข้อความ. คุณพิมพ์สีที่ต้องการได้ 3 วิธีด้วยกัน คือพิมพ์ชื่อ พิมพ์ค่า hex และพิมพ์ค่า RGB เช่น ถ้าจะเลือกสีน้ำเงิน ให้พิมพ์ blue, rgb(0, 0, 255) หรือ #0000FF
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
</style>
</head>
```
7
ใส่ selector อื่นๆ เพื่อเปลี่ยนสีของส่วนต่างๆ ในหน้าเว็บ. คุณใช้หลาย selector เปลี่ยนสีข้อความในส่วนต่างๆ ของหน้าเว็บได้
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
h1 {
	color: #00FF00;
}
p {
	color: rgb(0,0,255)
}
</style>
</head>
<body>

<h1>ย่อหน้านี้สีเขียว</h1>

<p>ย่อหน้านี้สีน้ำเงิน</p>

ข้อความนี้สีแดง
</body>
</html>
```
8
กำหนด class ของ CSS แทนที่จะเปลี่ยน element. คุณกำหนด class ให้มีผลกับส่วนต่างๆ ในหน้าได้ตามต้องการ เพื่อเพิ่มสไตล์ของ class ทันที เช่น ในไฟล์ต่อไปนี้ class ".redtext" จะทำให้ข้อความใน element ที่เกี่ยวข้องเป็นสีแดง
```
<!DOCTYPE html>
<html>
<head>
<style>
.redtext {
	color: red;
}
</style>
</head>
<body>

<h1 class="redtext">หัวข้อนี้สีแดง</h1>
<p>ย่อหน้านี้สีปกติ</p>
<p class="redtext">ย่อหน้านี้สีแดง</p>

</body>
</html>
```
โฆษณา

วิธีการ 2

วิธีการ 2 ของ 2:

ใช้ Inline Style

ดาวน์โหลดบทความ

คุณใช้ inline style attribute เปลี่ยนสไตล์แค่ element เดียวหรือส่วนเดียวของหน้านั้นได้ สะดวกมากเวลาจะเปลี่ยนสไตล์แค่ 1 - 2 จุด แต่ไม่แนะนำถ้าต้องเปลี่ยนทีละเยอะๆ ถ้าอยากเปลี่ยนสไตล์แบบครอบคลุม ให้ใช้วิธีการก่อนหน้านี้ ^{[2] X แหล่งข้อมูลอ้างอิง}
2
หา element ในไฟล์ที่คุณจะเปลี่ยน. คุณใช้ inline style attribute เปลี่ยนสีข้อความส่วนไหนของหน้าก็ได้ เช่น ถ้าอยากเปลี่ยนสีข้อความของบางหัวข้อ ก็ให้หาจากในไฟล์
```
<!DOCTYPE html>
<html>
<body>

<h1>นี่คือหัวข้อที่จะเปลี่ยน</h1>

</body>
</html>
```
3
ใส่ style attribute ใน element. พิมพ์ style="" กลางแท็กเปิด (opening tag) ของ element ที่คุณจะเปลี่ยน
```
<!DOCTYPE html>
<html>
<body>

<h1 style="">นี่คือหัวข้อที่จะเปลี่ยน</h1>

</body>
</html>
```
4
พิมพ์ attribute color: ใน "". เช่น
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:">นี่คือหัวข้อที่จะเปลี่ยน</h1>

</body>
</html>
```
5
พิมพ์สีข้อความใหม่ที่จะใช้. คุณพิมพ์สีที่ต้องการได้ 3 วิธีด้วยกัน คือพิมพ์ชื่อ พิมพ์ค่า RGB และพิมพ์ค่า hex เช่น ถ้าจะเปลี่ยนสีข้อความเป็นสีเหลือง ให้พิมพ์ yellow;, rgb(255,255,0); หรือ #FFFF00;
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:#FFFF00;">หัวข้อนี้สีเหลือง</h1>

</body>
</html>
```
โฆษณา