บทที่ 10 HTML CSS
HTML CSS คือ การจัดรูปแบบด้วย CSS
CSS ย่อมาจาก Cascading Style Sheets ซึ่งใช้ในการกำหนดรูปแบบต่าง ๆ ให้กับแท็ก html ต่าง ๆ
1.การใส่สีพื้นหลัง และสีตัวอักษร
- การใส่สีพื้นหลังให้หน้าเว็บเพจ จะใส่ในแท็ก body
<body style="background-color:=ชื่อสีเป็นภาษาอังกฤษ หรืออาจใส่เครื่องหมายสี่เหลี่ยมตามด้วยด้วยตัวเลขบอกค่าสีก็ได้ ;">
- การใส่สีพื้นหลังให้ตัวอักษร ใส่ได้ทั้งในส่วน head คือ Tag <p> และส่วน paragraph คือ Tag <p>
<p style="background-color:ชื่อสีเป็นภาษาอังกฤษ หรืออาจใส่เครื่องหมายสี่เหลี่ยมตามด้วยด้วยตัวเลขบอกค่าสีก็ได้;">ใส่ข้อความที่ต้องการตรงนี้</p>
- การใส่สีให้ตัวอักษร ใส่ได้ทั้งในส่วน head คือ Tag <p> และส่วน paragraph คือ Tag <p>
<p style="color:ชื่อสีเป็นภาษาอังกฤษ หรืออาจใส่เครื่องหมายสี่เหลี่ยมตามด้วยด้วยตัวเลขบอกค่าสีก็ได้;">ใส่ข้อความที่ต้องการตรงนี้</p>ตัวอย่าง
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
<p style="color: blue;">This text is in Times and blue</p>
</body>
</html>ผลลัพธ์ที่ได้คือ
2.การเลือกแบบตัวอักษร และขนาดตัวอักษร
- การเลือกรูปแบบตัวอักษร สามารถใส่ได้ทั้งในส่วน head คือ Tag <p> และส่วน paragraph คือ Tag <p>
<p style="font-family:ชื่อฟอนต์;">ใส่ข้อความที่ต้องการตรงนี้</p>
- การใส่ขนาดตัวอักษร สามารถใส่ได้ทั้งในส่วน head คือ Tag <p> และส่วน paragraph คือ Tag <p>
<p style="font-size:ใส่ตัวเลขบอกขนาด;">ใส่ข้อความที่ต้องการตรงนี้</p>
- หากต้องการใส่ทั้ง แบบตัวอักษร ขนาด และสี ทำได้ดังนี้
<p style="font-family:ชื่อตัวอักษร;color:ชื่อสี;font-size:เลขบอกขนาดตัวอักษร;">ใส่ข้อความที่ต้องการ</p>ตัวอย่าง
<html>
<body>
<h1 style="font-family:Tahoma;">กำหนดแท็ก h1 เป็นตัวอักษร Tahoma</h1>
<p style="font-family:arial;color:red;font-size:20px;">ย่อหน้านี้ใช้ตัวอักษร Arial ขนาด 20 px และตัวอักษรสีแดง</p>
</body>
</html>ผลลัพธ์ที่ได้คือ
3.การจัดวางแนวตัวอักษร
การจัดวางเเนวตัวอักษร เช่น ซ้าย ,ขวา ,กลาง จัดได้ดังนี้
style="text-align:กำหนด left หรือ right หรือ center
ตัวอย่าง
<html>
<body>
<h1 style="text-align:right;">กำหนดให้ข้อความนี้อยู่ด้านขวามือ</h1>
<p>ย่อหน้านี้จัดวางแบบปกติ</p>
</body>
</html>ผลลัพธ์ที่ได้คือ
