1.คุณสามารถแก้ไขเว็บเพจได้หลายๆหน้าพร้อมกัน
2.ลดปัญหาการแสดงผลที่ผิดเพี้ยนเช่น ภาษาต่างดาว
3.ช่วยให้การทำเว็บมีประสิทธิภาพมากขึ้น
4.ช่วยให้การทำเว็บยืดหยุ่นมากขึ้น คุณอาจไม่ต้องใช้คำสั่ง table ของ HTML เลยซึ่งจะทำให้การแสดงผลของคุณมีความถูกต้องและยืดหยุ่นมากขึ้น
5.การกลับมาแก้ไขเว็บเพจทำได้ง่ายขึ้น
การใช้งาน CSS
CSS จะแบ่งได้ 2 แบบคือ
1. การเขียน CSS ในเอกสาร HTML ของเราเลย
การเขียนแบบนี้ไม่เป็นที่นิยมเพราะถ้าเราต้องการแก้ไข ก็ต้องแก้ไขในทุกหน้าซึ่งจะทำให้เสียเวลา ตัวอย่างการเขียน CSS ในเอกสาร HTML
<head>
<style type="text/css">
hr {
color: sienna;
}
p {
margin-left: 20px;
}
body {
background-image: url("images/back40.gif");
}
</style>
</head>
เราจะเขียน CSS ในส่วนของ <HEAD> อีกแบบหนึ่งของการเขียน CSS ในเอกสาร HTML คือการเขียนใน HTML tag เลยดังตัวอย่าง
<p style = " color: blue ; margin-left: 20px ">ตัวอักษรนี้สีฟ้า และห่างจากขอบทางขวามือ 20px
</p>
คำเตือน เมื่อมีหน่วยใน value ของเราเช่น margin-left: 20px หน่วยคือ px (pixel) จะต้องเขียนให้ค่าและหน่วยติดกันเสมอ ถ้าเว้นวรรคจะทำให้การแสดงผลผิดพลาดได้
2.การเขียน CSS แยกเป็นอีก 1 ไฟล์
การเขียนแบบนี้เป็นที่นิยมมากเพราะถ้าเราต้องการแก้หน้าตาเว็บเพจของเราก็ แก้ไฟล์ CSS แค่ไฟล์เดียวก็สามารถทำให้หน้าเว็บเพจของเราเปลี่ยนไปได้หมด ซึ่งการใช้งานก็ให้เราเขียน Code ที่หน้า HTML ดังนี้
ตัวอย่างคำสั่งที่ใช้นำเข้าไฟล์ CSS จากภายนอก
<head>
<link rel = "stylesheet" type = "text/css" href = "ชื่อไฟล์ CSS ของเรา" >
</head>
ตัวอย่างจะเป็นการนำเข้าไฟล์ CSS จากภายนอกซึ่งเราจะเขียนในส่วน <Head> เช่นเดียวกันกับแบบแรก
ตัวอย่างไฟล์ CSS
hr {color: sienna}
p {margin-left: 20px}
เนื้อหาในไฟล์ก็เป็นคำสั่ง CSS ธรรมดาซึ่งเรานิยม save ไฟล์นี้ในนามสกุล .css เพื่อสะดวกในการค้นหาและแก้ไข เช่น อาจตั้งชื่อเป็น style.css
ทั้งหมดนี้ก็เป็นเนื้อหาแบบรวมๆของเรียกใช้งาน CSS นะค่ะหากมีคำถามหรือข้อสงสัยสามารถตั้งกระทู้ถามในเว็บบอร์ดได้ค่ะ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น