8/12/58

การใช้ CSS ใน HTML

การใช้ 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 แล้ว อยู่ที่ว่าเราจะเลือกวิธีไหนและออกแบบยังไง
ที่
ป้ายกำกับ: ,

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)