Lv.12 HTML CSS

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

HTML เรียกไฟล์ CSS มาใช้งาน

สามารถเรียกใช้งาน CSS ได้ 3 วิธี

  • Inline เขียนในแท็กนั้นๆเลย โดยใช้แอตทริบิวต์ style
  • Internal ใช้อิลิเมนต์ <style> ใน <head>
  • External เรียกไฟล์ CSS จากที่อื่น หรือ อยู่ในโฟลเดอร์อื่นๆ มาใช้งาน โดยใช้อิลิเมนต์ <link> ใน <head>

การใช้งาน CSS แบบ Inline

การเขียน CSS แบบนี้ไม่แนะนำครับ เพราะแก้ไขงานลำบาก ใช้เฉพาะจำเป็นจริงๆ เท่านั้น

ตัวอย่าง

<h1 style="color:blue;">หัวเรื่อง</h1>

<p style="color:red;">ย่อหน้า</p>

การใช้งาน CSS แบบ Internal

การเขียน CSS แบบนี้ก็ไม่แนะนำเหมือนกันครับ เพราะแก้งานก็ยากอยู่

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML มาใช้ CSS เถอะ</title>
		<style>
			body {
				background-color: blue;
			}
			h1 {
				color: red;
			}
			p {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1>หัวเรื่อง</h1>
		<p>ย่อหน้า</p>
	</body>
</html>

การใช้งาน CSS แบบ Internal

การเขียน CSS แบบนี้แนะนำที่สุดเลยครับ แก้ง่ายใช้ได้ทั้งเว็บไซต์

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML มาใช้ CSS เถอะ</title>
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<h1>หัวเรื่อง</h1>
		<p>ย่อหน้า</p>
	</body>
</html>

ในตัวอย่างเรียกไฟล์ CSS ชื่อ style ที่อยู่ในโฟลเดอร์เดียวกันกับไฟล์นี้

Lv.8 HTML Style

HTML Style เป็นการเพิ่มสไตล์ให้กับอิลิเมนต์ต่างๆของ HTML เช่น สี แบบอักษร ขนาด พื้นหลัง และอื่นๆ

Syntax:

<ชื่อแท็ก style="property:value">

property และ value ใช้แบบเดียวกันกับภาษา css นะครับ

HTML Style เปลี่ยนสีพื้นหลัง ใช้ background-color

ตัวอย่าง

<body style="background-color:blue;">
<h1 style="background-color:green;">This is a heading</h1>
<p style="background-color:gold;">This is a paragraph.</p>

เปลี่ยนสีตัวอักษร ใช้ color

ตัวอย่าง

<h1 style="color:red;">หัวเรื่อง</h1>
<p style="color:blue;">ย่อหน้า</p>

รูปแบบตัวอักษร ใช้ font-family

ตัวอย่าง

<h1 style="font-family:Times New Roman;">หัวเรื่อง</h1>
<p style="font-family:sans-serif;">ย่อหน้า</p>

ขนาดตัวอักษร ใช้ font-size

ตัวอย่าง

<h1 style="font-size:36px;">หัวเรื่อง</h1>
<p style="font-size:14px;">ย่อหน้า</p>

จัดตำแหน่งข้อความ ใช้ text-align

ตัวอย่าง

<h1 style="text-align:center;">หัวเรื่อง อยู่ตรงกลาง</h1>
<p style="text-align:left;">ย่อหน้า อยู่ด้านซ้าย</p>

การใช้งานสไตล์ต่างๆ แบบด้านบนนี้ไม่แนะนำให้ใช้ครับ เพราะจะลำบากเวลาแก้ไข แต่ให้รู้ว่าใช้งานยังไงก่อน ซึ่งจะสามารถเรียนการเพิ่มสไตล์ต่างๆ ได้ในภาษา CSS ครับ

Top