Lv.4 CSS How to

CSS How to เว็บเบราว์เซอร์จะจัดรูปแบบเอกสารของ HTML ตามข้อมูลในสไตล์ชีตที่เราได้กำหนดเอาไว้

CSS How to 3 วีธีเรียกใช้งาน

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

  • เรียกใช้แบบ Inline
  • เรียกใช้แบบ Internal
  • เรียกใช้แบบ External

เรียกใช้แบบ Inline

กำหนด CSS ลงไปที่แท็กนั้นๆเลย

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS How to</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
	</head>
	<body>
		<h1 style="color:red;">หัวเรื่อง h1</h1>
		<h2 style="text-align:center;">หัวเรื่อง h2</h2>
		<p style="font-size:14px;">พารากราฟ</p>
	</body>
</html>

เรียกใช้แบบ Internal

ให้เขียน CSS ภายในอิลิเมนต์ <style> ของส่วน <head>

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS How to</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			h1 {
				color: red;
			}

			h2 {
				text-align: center;
			}

			p {
				font-size: 14px;
			}
		</style>

	</head>
	<body>
	
		<h1>หัวเรื่อง h1</h1>
		<h2>หัวเรื่อง h2</h2>
		<p>พารากราฟ</p>
		
	</body>
</html>

เรียกใช้แบบ External

ใช้แบบแยกไฟล์ CSS ต่างหาก โดยใช้แท็ก <link> เรียกไฟล์ CSS เข้ามาใช้งาน

ตัวอย่างในไฟล์ index.html

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS How to</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<link href="style.css" rel="stylesheet">
		
	</head>
	<body>
		<h1>หัวเรื่อง h1</h1>
		<h2>หัวเรื่อง h2</h2>
		<p>พารากราฟ</p>
	</body>
</html>

จากตัวอย่างไฟล์ CSS ผมชื่อ style.css ได้ถูกเรียกมาใช้งานแล้ว และต้องอยู่ในโฟลเดอร์เดียวกันนะ อ่านการเรียกใช้ไฟล์ต่างๆ ได้ที่นี่

โค้ดในไฟล์ style.css

h1 {
	color: red;
}
	
h2 {
	text-align: center;
}

p {
	font-size: 14px;
}

วิธีเขียน CSS แบบ External สะดวก ง่าย

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