การใช้งาน CSS ศึกษาิวิธีการนำ CSS ไปใช้กับ HTML
25 September 2008มีวิธีในการนำ CSS ไปใช้กับ HTML อยู่ 3 วิธี ประกอบไปด้วย
- In-line
- Internal
- External
การใช้วิธีแบบ In-line
In-line เป็นการเขียน CSS เ้ข้าไปในแท็ก HTML โดยใช้ style attribute
ซึ่งมีลักษณะดังต่อไปนี้
<p style="color: red">text</p>
จากโค้ดด้านบนเป็นการกำหนด paragraph ใ้ห้เป็นสีแดง
แต่จำไว้ว่า HTML เป็นเอกสารในลักษณะ stand-alone หรือเป็นการนำเสนอเอกสารเปล่าๆ
ดังนั้นหากเป็นไปได้ควรหลักเลี่ยงการแทรก CSS เข้าไปในแท็ก HTML
การใช้วิธีแบบ Internal
การใช้วิธีการฝังโค้ด หรือวิธีแบบ Internal style ใ่ช้สำหรับหน้าเพจทั้งหมด จะแทรกอยู่ในแท็ก <head> และมีแท็ก <style>
อยู่ล้อมรอบ styles ในหน้าเพจนั้นๆ
ซึ่งมีลักษณะดังต่อไปนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>CSS Example</title>
<style type="text/css">
p{
color:#0066CC;
}
body{
background-color:#333333;
}
</style>
</head>
<body>
จากโค้ดด้านบนเป็นการกำหนดสีของ paragraph และสีพื้นหลังหรือ background ของหน้าเพจนั้น
เช่นเดียวกับกันกับวิธีแบบ in-line ซึ่งทางที่ดีควรจะจัดให้ CSS และ HTML แยกกันด้วยวิธีที่ 3 คือ Extenal
การใช้วิธีแบบ External
รูปแบบ External style เป็นวิธีการใช้ CSS ทั้งเว็บหรือสำหรับหลายเว็บไซต์ได้ ซึ่งจะมีไฟล์ CSS แยกออกมาต่างหาก
ลักษณะไฟล์เป็นดังนี้
p{
color:#0066CC;
}
body{
background-color:#333333;
}
ถ้าทำการบันทึกไฟล์จากด้านบนเป็นชื่อ web.css เราจะสามารถลิ๊งค์ไฟล์นีเข้ากับ HTML ได้ดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-874" /> <title>CSS Example</title> <link rel="stylesheet" href="web.css" type="text/css" /> </head> <body>
ในความเป็นจริงยังมีวิธีการในการนำ CSS มาใช้กับ HTML อยู่อีก ซึ่งจะได้อธิบายในโอกาสต่อไป
เนื้อหาที่เี่กี่ยวข้อง
- การใช้งาน CSS - ศึกษาิวิธีการนำ CSS ไปใช้กับ HTML
- สิ่งที่เรียกว่า Selects, Properties , and Values - สิ่งที่เป็นองค์ประกอบของ CSS
- สี Colours - การใช้งานสี
- ข้อความ Text - การจัดการเกี่ยวกับขนาดและรูปร่างของข้อความ
- Margins and Padding - การจัดการพื้นที่ระหว่างสิ่งต่างๆ
- Borders - การจัดการเกี่ยวกับขอบ
- รวมส่วนประกอบต่างข้างบนเป็น CSS
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
22 Mar 09 javascript หาความกว้างและความสูงของหน้าเพจได้ด้วยฟังก์ชันง่ายๆ อ่าน 1717 13 Sep 10 ประยุกต์ สร้างเครื่องมือ ค้นหา พิกัด จากชื่อสถานที่ จำนวนมาก ใน google map อ่าน 1816 27 Dec 10 การสร้าง ajax dictionary จาก longdo ด้วย jQuery อ่าน 2679 26 Oct 08 เช็ค browser ด้วย javascript ได้ทั้ง IE Firefox Opera Chrome อ่าน 3920 29 Jul 10 สั่ง print preview ใน IE และ ประยุกต์กับ บราวเซอร์ อื่น อ่าน 3168 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบตัวกรอง Attribute อ่าน 2739 26 Feb 09 สร้างคลิกขวาเมนูในเว็บด้วย CSS + jQuery อย่างง่ายดาย อ่าน 3147 17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 5555 08 Jun 09 วิธีการสร้าง preloading images โหลดรูปภาพ ด้วย javascript อย่างง่าย อ่าน 6347 03 Oct 10 แสดงข้อมูลตัวเลือก ด้านข้าง google map กับการใช้งาน event.trigger อ่าน 1520 29 Mar 09 ประยุกต์ฟังก์ชัน substr_replace ใน PHP ตัดข้อความยาวแล้วตามด้วยเครื่องหมาย ...... อ่าน 1680 10 Dec 09 ประยุกต์ เทคนิค jQuery เลื่อน scrollbar ขึ้นลง ตามเมาส์ สำหรับ div และ textarea อ่าน 3966 25 Sep 08 PHP MySQL connecting script and function อ่าน 2370 18 Aug 09 สร้าง ฟังก์ชั่น บันทึกหน้าเพจไว้ใน Favorites และ Bookmarks ด้วย javascript อ่าน 1660 16 Aug 09 เริ่มต้น jQuery UI กับการสร้าง ปฏิทินเลือกวันที่ datepicker อ่าน 17241 17 Nov 09 พิมพ์ข้อมูลใน textbox เพื่อ เพิ่มรายการใน listbox ด้วย jQuery อ่าน 4605 25 Oct 08 สร้างฟังก์ชันการหา whois เบื้องต้นด้วย php อย่างง่าย อ่าน 1416 16 Aug 09 jQuery UI คือ อะไร อ่าน 4303 08 Feb 11 แท็บเมนู tab menu แนวตั้งอย่างง่าย ด้วย jQuery อ่าน 3901 26 Sep 10 การแสดงข้อมูล แนะนำ เส้นทาง ใน google map อ่าน 2617