การเปลี่ยนประเภทแบบอักษรและสีที่แสดงบนหน้าเว็บ

หมายเหตุ: หน้านี้เกี่ยวข้องกับการเปลี่ยนประเภทแบบอักษรขนาดและสีบนหน้าเว็บ สำหรับ Microsoft Word ดูที่หน้าของเราเกี่ยวกับวิธีการเปลี่ยนสีตัวอักษรขนาดหรือพิมพ์ใน Word

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

หากต้องการดำเนินการต่อให้เลือกวิธีที่คุณต้องการเรียนรู้จากหรืออ่านทุกส่วน

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

รหัสตัวอย่าง

ข้อความนี้มีฟอนต์ Courier คือ Blue และ 20px

ผล

ข้อความนี้มีฟอนต์ Courier เป็นสีน้ำเงินและมีขนาด 20px

ใช้ CSS สำหรับหนึ่งหน้าขึ้นไป

แบบอักษรที่กำหนดเองสำหรับหนึ่งหน้า

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

 .custom {font-family: Courier; สี: แดง; font-size: 20px; } 

เมื่อกำหนดแล้วสไตล์นี้สามารถนำไปใช้กับองค์ประกอบส่วนใหญ่ในหน้าของคุณโดยแนบคลาส "กำหนดเอง" กับพวกเขา กล่องต่อไปนี้แสดงรหัสสองบรรทัดและผลลัพธ์ที่เกี่ยวข้อง

ตัวอย่าง

ประโยคทั้งหมดนี้เป็นสีแดงและจัดส่ง

เฉพาะคำทดสอบเป็นสีแดงและจัดส่ง

ผล

ประโยคทั้งหมดนี้เป็นสีแดงและจัดส่ง

เฉพาะคำทดสอบเป็นสีแดงและจัดส่ง

แบบอักษรที่กำหนดเองสำหรับหลาย ๆ หน้า

การนำเข้าไฟล์ CSS ภายนอกนั้นมีประโยชน์อย่างมากในการช่วยให้ผู้ใช้เปลี่ยนกฎสำหรับหลาย ๆ หน้าในเวลาเดียวกัน ส่วนต่อไปนี้แสดงตัวอย่างสำหรับการสร้างไฟล์ CSS พื้นฐานที่เปลี่ยนแบบอักษรและเป็นสีสำหรับองค์ประกอบส่วนใหญ่ ไฟล์นี้อาจถูกโหลดลงในหน้าเว็บมากกว่าหนึ่งหน้าแม้กระทั่งทั้งเว็บไซต์

ใช้ตัวแก้ไขข้อความพื้นฐานใด ๆ การบันทึกข้อความต่อไปนี้เป็นไฟล์. css จะเตรียมไว้สำหรับการนำเข้า

 @charset "utf-8";

.courier {font-family: Courier; สี: # 005CB9; }

เมื่อข้อความก่อนหน้านี้ถูกวางลงในไฟล์. css (เราได้ตั้งชื่อของเรา basic.css ) คุณสามารถเชื่อมโยงไปยังมันจากหน้าอื่น ๆ โดยใช้บรรทัดคล้ายกับตัวอย่างต่อไปนี้

เคล็ดลับ: ผู้ใช้สามารถเปลี่ยนคุณสมบัติขององค์ประกอบบนหน้าเว็บได้โดยเปลี่ยนรหัสในไฟล์. css ที่นำเข้า

โซลูชันแท็กแบบอักษร

แม้ว่าจะเลิกใช้แล้วแท็ก HTML ยังคงสามารถใช้งานได้และอาจจำเป็นต้องใช้กับบริการออนไลน์บางอย่าง เมื่อใช้แท็ก FONT คุณต้องรวมแอตทริบิวต์ face ซึ่งจะอธิบายแบบอักษรที่จะใช้ ในตัวอย่างด้านล่างเราใช้ฟอนต์ Courier และรหัสสีฐานสิบหก # 005CB9 ซึ่งเป็นสีน้ำเงินเข้ม

รหัสตัวอย่าง

 ตัวอย่างแบบอักษรพิเศษ 

ผล