ในอดีต การแก้ไขแบบอักษรของหน้าเว็บมักจะหมายถึงการซ้อนข้อความที่เกี่ยวข้องลงในแท็ก <tag> และใช้คุณลักษณะเพื่อควบคุมสี ขนาด และสไตล์ ทุกวันนี้ วิธีการนี้ไม่ได้รับการยอมรับอีกต่อไปแล้ว เนื่องจากมีการผสมผสานสไตล์ภาพเข้ากับมาร์กอัปเนื้อหาจริง วันนี้เราขอแนะนำวิธีการรวมข้อมูลสไตล์ฟอนต์ลงในไฟล์แยกต่างหากที่เรียกว่า Cascading Style Sheet (CSS)
การรวมข้อมูลแบบอักษรไว้ในไฟล์ CSS ไฟล์เดียวมีข้อดีที่ชัดเจนหลายประการ: ใช้งานง่าย ไม่ต้องใช้ซอฟต์แวร์พิเศษใดๆ และทำงานได้เหมือนกันในเบราว์เซอร์หลักๆ ส่วนใหญ่ ยิ่งไปกว่านั้น เนื่องจากข้อมูลถูกรวมไว้ในที่เดียว จึงง่ายต่อการปรับเปลี่ยนลักษณะที่ปรากฏของหน้าเว็บ: คุณสามารถเปลี่ยนแบบอักษรหรือสีของสไตล์ชีตหลักได้ และการเปลี่ยนแปลงจะ "เรียงซ้อน" ทั่วทั้งหน้าของคุณทันที เว็บไซต์.
ฟังดูสนุกใช่มั้ย? ดังนั้นโปรดอ่านต่อเพราะในบทความนี้ ผมจะพูดถึงคุณสมบัติแบบอักษร CSS ซึ่งได้รับการออกแบบมาเพื่อแทนที่องค์ประกอบ <font> แบบเก่า หากคุณต้องการการควบคุมแบบอักษร สี ขนาดข้อความ และระยะห่างของหน้า HTML แบบรวมศูนย์ ก็เป็นเช่นนั้น เครื่องมืออันทรงพลังในการใช้ประโยชน์
ประเภทการควบคุม
คุณลักษณะแบบอักษรกำหนดแบบอักษรที่ใช้โดยองค์ประกอบที่เกี่ยวข้อง คุณสมบัตินี้มักจะมีรายการชื่อแบบอักษรที่คั่นด้วยเครื่องหมายจุลภาค ชื่อที่มีช่องว่างสามารถใส่เครื่องหมายคำพูดได้ เมื่อนำไปใช้ เบราว์เซอร์จะใช้แบบอักษรแรกที่พบในรายการ หรือแบบอักษรมาตรฐานของเบราว์เซอร์เริ่มต้นหากไม่พบแบบอักษรที่ถูกต้อง
รายการ A เป็นตัวอย่างการใช้งานของคำสั่งนี้:
รายการ ก
<html> <หัว> <style type="text/css"> .อ้าง { ตระกูลฟอนต์: "Bookman Old Style", "Verdana"; - </สไตล์> </หัว> <ร่างกาย> <div class="quote">จะเป็นหรือไม่เป็น นั่นคือคำถาม</div> </ร่างกาย> </html> |
รูปที่ A แสดงผลลัพธ์
รูปที่ ก
Font_family
สิ่งสำคัญคือต้องจำไว้ว่าคำสั่งนี้ขึ้นอยู่กับแบบอักษรที่แสดงโดยระบบไคลเอนต์อย่างมาก ในตัวอย่างข้างต้น หากระบบไม่แสดงแบบอักษร Bookman Old Style และ Verdana จะใช้แบบอักษรเริ่มต้นของเบราว์เซอร์ เพื่อหลีกเลี่ยงปัญหานี้ วิธีที่ดีที่สุดคือเพิ่มรายการชื่อแบบอักษรทั่วไป เช่น serif, sans-serif หรือ cursive หลังรายการชื่อแบบอักษรพิเศษ ซึ่งจะเป็นการบอกให้เบราว์เซอร์ใช้แบบอักษรที่ตรงกันที่ดีที่สุดในคลาสแบบอักษรนั้น . รายการ B เป็นเวอร์ชันที่ได้รับการแก้ไขของตัวอย่างข้างต้น ซึ่งแก้ปัญหาข้างต้นได้อย่างแน่นอน
รายการบี
<html> <หัว> <style type="text/css"> .อ้าง { ตระกูลฟอนต์: "Bookman Old Style", "Verdana", "cursive"; - </สไตล์> </หัว> <ร่างกาย> <div class="quote">จะเป็นหรือไม่เป็น นั่นคือคำถาม</div> </ร่างกาย> </html> |