ดาวน์โหลดบทความ
ดาวน์โหลดบทความ
ปกติคุณเปลี่ยนสีข้อความใน HTML ได้ด้วยแท็ก <font> แต่โชคไม่ดีที่วิธีนี้ใช้กับ HTML5 ไม่ได้แล้ว ต้องใช้ CSS กำหนดสีของข้อความที่จะปรากฏในส่วนต่างๆ ของหน้าเว็บแทน ใช้ CSS แล้วคุณวางใจได้ ว่าหน้าเว็บจะแสดงในทุกเบราว์เซอร์
ขั้นตอน
-
เปิดไฟล์ HTML. วิธีที่ใช้เปลี่ยนสีข้อความได้ง่ายที่สุด ก็คือใช้ CSS ตอนนี้ attribute <font> เก่าของ HTML ใช้กับ HTML5 ไม่ได้แล้ว เพราะงั้นก็ต้องใช้ CSS กำหนดสไตล์ให้ส่วนต่างๆ ของหน้าเว็บแทน
- วิธีการนี้ใช้กับ external stylesheets (ไฟล์ CSS แยก) ได้ด้วย ตัวอย่างต่อไปนี้คือไฟล์ HTML ที่ใช้ internal stylesheet
-
คลิกเคอร์เซอร์กลางแท็ก <head> . เพื่อกำหนดสไตล์ในแท็กนี้ในกรณีที่คุณใช้ internal stylesheet
-
พิมพ์ <style> เพื่อสร้าง internal stylesheet. พอมีแท็ก <style> อยู่กลางแท็ก <head> ก็จะเป็นการใช้ CSS ในแท็ก <style> กับทุกส่วนที่เกี่ยวข้องในหน้านั้น เสร็จแล้วตอนต้นของไฟล์ HTML จะออกมาหน้าตาประมาณนี้ [1] X แหล่งข้อมูลอ้างอิง
<!DOCTYPE html> < html > < head > < style > </ style > </ head >
-
พิมพ์ element หรือส่วนที่คุณจะเปลี่ยนสีข้อความ. คุณต้องใช้ <style> กำหนดหน้าตาของส่วนต่างๆ ในหน้านั้น เช่น ถ้าอยากเปลี่ยนสไตล์ของข้อความทั้งหมดในหน้านั้น ก็ให้พิมพ์ว่า
<!DOCTYPE html> < html > < head > < style > body { } </ style > </ head >
-
พิมพ์ color: ใน element selector . attribute color: จะเป็นตัวกำหนดสีข้อความในส่วนที่คุณเลือกของหน้านั้น ตัวอย่างข้างล่างคือการเปลี่ยนสีข้อความทั้งหมด หรือก็คือ default element ของข้อความทั้งหมดในหน้า
<!DOCTYPE html> < html > < head > < style > body { color : } </ style > </ head >
-
พิมพ์สีของข้อความ. คุณพิมพ์สีที่ต้องการได้ 3 วิธีด้วยกัน คือพิมพ์ชื่อ พิมพ์ค่า hex และพิมพ์ค่า RGB เช่น ถ้าจะเลือกสีน้ำเงิน ให้พิมพ์ blue , rgb(0, 0, 255) หรือ #0000FF
<!DOCTYPE html> < html > < head > < style > body { color : red ; } </ style > </ head >
-
ใส่ 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 >
-
กำหนด 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 >
โฆษณา
-
เปิดไฟล์ HTML. คุณใช้ inline style attribute เปลี่ยนสไตล์แค่ element เดียวหรือส่วนเดียวของหน้านั้นได้ สะดวกมากเวลาจะเปลี่ยนสไตล์แค่ 1 - 2 จุด แต่ไม่แนะนำถ้าต้องเปลี่ยนทีละเยอะๆ ถ้าอยากเปลี่ยนสไตล์แบบครอบคลุม ให้ใช้วิธีการก่อนหน้านี้ [2] X แหล่งข้อมูลอ้างอิง
-
หา element ในไฟล์ที่คุณจะเปลี่ยน. คุณใช้ inline style attribute เปลี่ยนสีข้อความส่วนไหนของหน้าก็ได้ เช่น ถ้าอยากเปลี่ยนสีข้อความของบางหัวข้อ ก็ให้หาจากในไฟล์
<!DOCTYPE html> < html > < body > < h1 > นี่คือหัวข้อที่จะเปลี่ยน </ h1 > </ body > </ html >
-
ใส่ style attribute ใน element. พิมพ์ style="" กลางแท็กเปิด (opening tag) ของ element ที่คุณจะเปลี่ยน
<!DOCTYPE html> < html > < body > < h1 style = "" > นี่คือหัวข้อที่จะเปลี่ยน </ h1 > </ body > </ html >
-
พิมพ์ attribute color: ใน "" . เช่น
<!DOCTYPE html> < html > < body > < h1 style = "color:" > นี่คือหัวข้อที่จะเปลี่ยน </ h1 > </ body > </ html >
-
พิมพ์สีข้อความใหม่ที่จะใช้. คุณพิมพ์สีที่ต้องการได้ 3 วิธีด้วยกัน คือพิมพ์ชื่อ พิมพ์ค่า RGB และพิมพ์ค่า hex เช่น ถ้าจะเปลี่ยนสีข้อความเป็นสีเหลือง ให้พิมพ์ yellow; , rgb(255,255,0); หรือ #FFFF00;
<!DOCTYPE html> < html > < body > < h1 style = "color:#FFFF00;" > หัวข้อนี้สีเหลือง </ h1 > </ body > </ html >
โฆษณา
เคล็ดลับ
- คุณดูรายชื่อสีที่ใช้ได้ และค่า hex ของสีนั้นได้ที่ http://www.w3schools.com/colors/colors_names.asp
โฆษณา
ข้อมูลอ้างอิง
โฆษณา
