การกำหนดลักษณะให้ตัวอักษร ใน HTML เราจะใช้ tag <font face="ชนิดตัวอักษร" size="number" color="สี">ข้อความ</font> น่าจะพอจำกันได้อยู่ แต่ในเอกสาร HTML/XHTML แบบ strict จะถือว่า tag <font> เป็น tag ที่ล้าสมัยแล้ว ไม่สามารถนำมาใช้งานได้ ให้เราใช้ CSS แทนค่ะ
เรา็สามารถใช้ CSS กำหนดลักษณะให้ตัวอักษรได้ โดยกำหนดรูปแบบ font ผ่าน Property ต่างๆ ให้กับ HTML element เช่น <p>,<div>,<span>,<h1> และอื่นๆ
| Property | Description | Values |
|---|---|---|
| font-family | ใช้กำหนดชนิด font ที่ต้องการจะให้แสดงผล โดยที่ font นั้นจะต้องมีอยู่ในเครื่องของผู้ใช้งานด้วย | เช่น Arial, Helvetica, sans-serif |
| font-size | ใช้กำหนดขนาดของตัวอักษร ที่จะให้แสดงผล /td> | xx-small x-small small medium large x-large xx-large smaller larger 18px 70% 150% |
| font-style | ใช้กำหนดรูปแบบของตัวอักษรในลักษณะต่างๆ | normal italic oblique เอียง 45 องศา |
| font-variant | ใช้แปลงตัวอักษรที่เป็นตัวพิมพ์เล็กให้เป็นพิมพ์ใหญ่ โดยที่ขนาดตัวอักษรยังคงเท่าตัวพิมพ์เล็ก | normal Small-Caps |
| font-weight | ใช้กำหนดความหนาของตัวอักษร | normal bold bolder lighter 100 200 300 400 500 600 |
| color | ใช้กำหนดสีให้ตัวอักษร | red #000099 |
| font | เราสามารถกำหนด property ให้กับ font ได้ในคำสั่งประกาศเดียว | font-style font-variant font-weight font-size font-family |
<p style="font-family:AngsanaUPC; font-size:16pt; color:green">
CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML
</p>
CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML
</p>
Output
CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML
<p style="font-weight:bold">Love me Love my dog</p>
<p style="font-family: sans-serif, Arial; font-size:16px; font-style:normal; font-variant:small-caps; font-weight:bold; color:#FF0033">Love me Love my dog</p>
<!-- เขียนอย่างย่อได้เป็น -->
<p style="font: normal small-caps bold 16px sans-serif, Arial; color:#FF0033">Love me Love my dog</p>
<p style="font-family: sans-serif, Arial; font-size:16px; font-style:normal; font-variant:small-caps; font-weight:bold; color:#FF0033">Love me Love my dog</p>
<!-- เขียนอย่างย่อได้เป็น -->
<p style="font: normal small-caps bold 16px sans-serif, Arial; color:#FF0033">Love me Love my dog</p>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น