การใช้ CSS ใน HTML
บทความนี้เรามาดูวิธีการใช้ CSS ใน HTML กันครับ ซึ่งเรารู้กันแล้วว่า CSS นั้นจะใช้ใน HTML หรือ SVG แต่ในบทความนี้เราจะแนะนำเฉพาะการใช้ CSS ใน HTML เท่านั้นในการใช้ CSS ใน HTML นั้นเราจะมีอยู่ 3 วิธีในการเพิ่ม CSS ใน HTML นั่นคือ
- เพิ่ม CSS ภายใน Style attribute ใน HTML element
- เพิ่ม CSS ใน style HTML element
- เพิ่ม CSS โดยการทำเป็น external CSS file
ซึ่งแต่ละวิธีจะมีวิธีทำตามวิธีด้านล่าง
เพิ่ม CSS ภายใน Style attribute ใน HTML element
วิธีการที่ง่ายที่สุดในการเพิ่ม CSS ใน HTML นั้นก็คือการฝัง CSS ภายใน style attribute ใน HTML element ซึ่งมีตัวอย่างการใช้งานตามโค้ดด้านล่าง<html> <head> <title>Doesystem</title> </head> <body> <div style="color:#FF0000;">www.doesystem.info</div> <div style="color:#FF0000;">CSS Example</div> </body> </html>
จากโค้ดเราได้ใส่ color ลงใน style attribute ภายใน div element ในแท็กเปิด เราสามารถใส่หลาย ๆ Property ของ css ได้โดยใช้เครื่องหมาย ; กั้น
เพิ่ม CSS ใน style HTML element
วิธีการนี้เป็นการเพิ่ม CSS ลงใน style HTML element ซึ่งอยู่ภายใน HTML page ถ้าเราต้องการที่จะใส่ style ที่เหมือน ๆ กันในหลาย ๆ HTML element วิธีการนี้เป็นวิธีการง่ายที่จะกำหนดลักษณะ style ให้กับ HTML แต่ละ element ตัวอย่างโค้ดตามด้านล่าง<html>
<head>
<title>Doesystem</title>
</head>
<body>
<style>
div{
color:#FF0000;
}
</style>
<div>www.doesystem.info</div>
<div>CSS Example</div>
</body>
</html>
จากโค้ดข้างบนเราได้ใส่ CSS ลงใน style element โดยกำหนดให้กำหนดลักษณะของทุก ๆ div element กำหนดเป็นสีแดง
เพิ่ม CSS โดยการทำเป็น external CSS file
ถ้าเราต้องการที่จะกำหนดลักษณะของ CSS ให้หลาย ๆ หน้าของเว็บ การจะไล่ใส่ style ทุก ๆ หน้าก็ออกจะเป็นวิธีการที่ยุ่งยาก ดังนั้นวิธีที่ง่ายคือการสร้างไฟล์ .css ขึ้นมาเพื่อเก็บโค้ด CSS แล้วนำไฟล์นี้ไปเพิ่มลงในหน้าเว็บเพจที่ต้องการกำหนด style เพื่อลิ้งมายังไฟล์นี้ ตัวอย่างโค้ดดังด้านล่างไฟล์ css-file-url.css
div{
color:#FF0000;
}
ไฟล์ HTML
<html> <head> <title>Doesystem</title> <link rel="stylesheet" type="text/css" href="css-file-url.css"> </head> <body> <div>www.doesystem.info</div> <div>CSS Example</div> </body> </html>
จากตัวอย่างเราจะสร้างไฟล์ .css ที่ชื่อว่า css-file-url.css ในไฟล์นี้จะมีโค้ด CSS ที่ใช้สำหรับกำหนด style จากนั้นเราก็จะมีไฟล์ HTML ไว้สำหรับแสดงผล ในไฟล์ HTML นี้เราจะทำการเพิ่มไฟล์ .css เข้ามาโดยใช้ <link rel="stylesheet" type="text/css" href="css-file-url.css"> เพื่อบ่งบอกว่าให้เพิ่มไล์ .css นี้เข้ามาด้วย
การเพิ่มไฟล์ .css โดยใช้ @import
ในการเพิ่มไฟล์ .css ลงในเว็บเพจนั้นนอกจากจะใช้ <link rel="stylesheet" type="text/css" href="css-file-url.css"> แล้วเรายังสามารถใช้ @import เพื่อกำหนดไฟล์ .css เข้ามาใช้ได้ โดยวิธีการใช้นั้น ดังตัวอย่างด้านล่าง
<html>
<head>
<title>Doesystem</title>
</head>
<body>
<style>
@import url('css-file-url.css');
</style>
<div>www.doesystem.info</div>
<div>CSS Example</div>
</body>
</html>
จากตัวอย่างนี้เราจะใช้ @import ในการเพิ่มไฟล์ .css เข้ามาในเว็บเพจ โดยการจะใช้คำสั่ง @import นั้นจะต้องอยู่ภายใน html element
เพียงแค่นี้เราก็ได้รู้วิธีการใส่โค้ด CSS ใน HTML แล้ว อยู่ที่ว่าเราจะเลือกวิธีไหนและออกแบบยังไง
