การใช้งาน 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
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
29 Jul 10 สั่ง print preview ใน IE และ ประยุกต์กับ บราวเซอร์ อื่น อ่าน 4295 25 Sep 08 แบ่งหน้า ด้วย Code แบบง่าย อ่าน 6486 13 Oct 08 คำสั่ง SQL BETWEEN อ่าน 11009 11 Feb 11 แนะนำ การใช้งาน jQuery quicksearch plugin อ่าน 3861 12 May 10 แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery อ่าน 10982 26 Oct 10 แนะนำ autocomplete ใน jQuery ui กับการประยุกต์ใช้งาน อ่าน 2502 04 Jan 10 ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย อ่าน 4238 04 Nov 10 การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON() อ่าน 4532 25 Sep 08 กรอกข้อมูลได้เฉพาะตัวเลข อ่าน 4165 02 Nov 10 แนะนำ และการใช้งาน jQuery Colorpicker Plugin การเลือกค่าสี อ่าน 1949 11 Jan 12 รู้จัก และใช้งาน DATEDIFF() ใน mysql ฟังก์ชัน เทียบช่วงเวลาที่เหลือ อ่าน 1703 15 Oct 08 สร้างลิ้งค์มีรูปภาพแสดงนามสกุลไฟล์ อ่าน 2933 04 May 10 ประยุกต์ ใช้งาน php และ ajax ใน jQuery แสดงผลลัพธ์ คล้าย twitter อ่าน 3819 20 Aug 09 jQuery ป้องกัน การคลิกขวา ในหน้าเว็บไซต์ อ่าน 3045 21 Jan 11 การใช้งาน Meta characters ใน Regular Expressions ของ PHP อ่าน 1540 08 Dec 09 แปลง jQuery object เป็น DOM object อ่าน 2679 24 Sep 10 ประยุกต์ facebox ของ jQuery แทนการใช้ mootools facebox มาใช้งาน อ่าน 4101 27 Jun 11 ลูกเล่น เพิ่มช่องรับ input type file อัตโนมัติ ด้วย jQuery อ่าน 4210 10 Dec 09 ประยุกต์ เทคนิค jQuery เลื่อน scrollbar ขึ้นลง ตามเมาส์ สำหรับ div และ textarea อ่าน 4685 13 Oct 08 คำสั่ง SQL IN อ่าน 3414