css: การใช้งาน CSS

ในบทนี้จะเป็นการนำ CSS ไปใช้
การใช้งาน CSS จะแบ่งได้ 2 แบบคือ

1. การเขียน CSS ในเอกสาร HTML
การเขียนแบบนี้ไม่เป็นที่นิยมเพราะถ้าต้องการแก้ไข ก็ต้องแก้ไขในทุกหน้าซึ่งจะทำให้เสียเวลา ตัวอย่างการเขียน CSS ในเอกสาร HTML


Source Code
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>

จะเขียน CSS ในส่วนของ <HEAD> จะเห็นได้ว่ามีการใช้ Comment HTML  อยู่ด้วย
ใส่เพื่อป้องการผู้ใช้งาน browser ตัวเก่า ที่ยังไม่รู้จัก CSS จะแสดงผล Code CSS ของเรา ซึ่งเราจะใส่หรือไม่ก็ได้

อีกแบบหนึ่งของการเขียน CSS ในเอกสาร HTML คือการเขียนใน HTML tag เลยดังตัวอย่าง


Source Code
<p style = " color: blue ; margin-left: 20px ">
ตัวอักษรนี้สีฟ้า และห่างจากขอบทางขวามือ 20px
</p>

2. การเขียน CSS แยกเป็นอีก 1 ไฟล์การเขียนแบบนี้เป็นที่นิยมมากเพราะถ้าเราต้องการแก้หน้าตาเว็บเพจของเราก็แก้ไฟล์ CSS แค่ไฟล์เดียวก็สามารถทำให้หน้าเว็บเพจของเราเปลี่ยนไปได้หมด ซึ่งการใช้งานก็ให้เราเขียน Code ที่หน้า HTML ดังนี้ 

ตัวอย่างคำสั่งที่ใช้นำเข้าไฟล์ CSS จากภายนอก 

Source Code
<head>
<link rel = "stylesheet" type = "text/css" href = "ชื่อไฟล์ CSS ของเรา" >
</head>


ตัวอย่างจะเป็นการนำเข้าไฟล์ CSS จากภายนอกซึ่งเราจะเขียนในส่วน <Head> เช่นเดียวกันกับแบบแรก 

ตัวอย่างไฟล์ CSS

Source Code
hr {color: sienna}
p {margin-left: 20px}


เนื้อหาในไฟล์ก็เป็นคำสั่ง CSS ธรรมดาซึ่งเรานิยม save ไฟล์นี้ในนามสกุล .css เพื่อสะดวกในการค้นหาและแก้ไข เช่น อาจตั้งชื่อเป็น style.css 

ทุกท่านอาจมีคำถามเกิดขึ้นว่า ถ้าเราใช้ทั้ง 2 แบบ จะเป็นอย่างไร คำตอบคือ browser จะแสดงผลโดยให้คำสั่ง CSS ที่อยู่ในหน้าเว็บเป็นคำสั่งที่ใช้แสดงผลหลัก เนื่องจากว่า browser จะโหลดไฟล์ CSS มาก่อน และเมื่อมีคำสั่งที่อยู่ใน เอกสาร HTML ซ้ำกับที่โหลดมา ก็จะยึดตัวที่อยู่ในเอกสาร HTML เป็นตัวหลัก ดังตัวอย่าง 

คำสั่ง CSS ที่โหลดเข้ามา

Source Code
h3 
{
    color: red;
    text-align: left;
    font-size: 8pt
}


คำสั่ง CSS ที่อยู่ในเอกสาร HTML 

Source Code
h3 
{
    text-align: right;
    font-size: 20pt
}


ผลลัพท์ คำสั่ง CSS ที่แสดงผล จะนำคำสั่งทั้ง 2 ชุดมารวมกันและยึดเอาคำสั่งที่อยู่ใน HTML เป็นหลัก

Source Code
h3 
{
    color: red;
    text-align: right;
    font-size: 20pt;
}