การเขียนโปรแกรม
เริ่มต้นเรียนรู้ CSS
มิ.ย.
ถ้า HTML เป็นพระเอกของการทำเว็บ CSS ก็เป็นเหมือนช่างแต่งหน้าเลยครับ เพราะ CSS จะช่วยแต่งหน้าพระเอกของเราให้มีสีสัน มีสไตล์ Web Developer ทั่วโลกทุกคนใช้ CSS ในการสร้างสไตล์ ให้กับหน้าเว็บนะครับ ในบทความนี้ เราจะมาเริ่มต้นเรียนรู้เรื่อง CSS กัน
CSS คืออะไร ?
CSS ก็คือ ภาษาโปรแกรมภาษาหนึ่งครับ ที่ไว้ใช้สำหรับตกแต่งหน้าเว็บ ยกตัวอย่างนะครับ ผมมี HTML เบื้องต้นแบบนี้นะครับ
<!DOCTYPE html>
<html>
<head>
<title>HTML Structure</title>
</head>
<body>
<h1>Header Topic</h1>
<p>
paragraph text .. orem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
ถ้ารันไฟล์นี้ขึ้นมาในเว็บบราวเซอร์ ก็จะได้หน้าตาแบบนี้ครับ
** แนะนำให้รันไฟล์ด้วยการจำลอง Server นะครับ ถ้าดับเบิ้ลคลิกไฟล์ จะไม่สามารถเชื่อมโยงกับไฟล์อื่นได้ หรือ อีกทางเลือกหนึ่งคือใช้ตัว Brackets Editor ครับ ซึ่งไม่ต้องยุ่งยาก และใช้รันไฟล์สำหรับเรียนได้ทุกขั้นตอนครับ
หน้าตาเรียบง่ายแบบนี้เลยครับ เพราะเรายังไม่ได้แต่งหน้าให้มัน ต่อไปเราจะลองแต่งหน้าให้มันดูนะครับ เราจะใส่ Code นี้ลงไปที่ Tag Head ของ ไฟล์ HTML เมื่อสักครู่นะครับ
<style type="text/css">
h1 {
color : red;
background-color: green;
}
</style>
แล้วลองรันไฟล์ ดูอีกทีครับ จะได้ภาพแบบนี้ครับ
ที่เราทำไปคือการใส่สี และตัวอักษรให้ Header Topic นะครับ ทีนี้มันทำงานอย่างไรเดี๋ยวผมจะอธิบายทีละขั้นก่อนครับ ขั้นแรกรู้จักภาษา CSS เบื้องต้นก่อนครับ ซึ่งจะประกอบด้วย 3 ส่วนดังนี้
- CSS Selector ก็คือ ตัวเป้าหมายของเราครับว่าเราต้องการจะตกแต่งสิ่งใด ในที่นี้คือ HTML Tag “h1” นั่นเอง
- CSS Block ก็คือ Block ของ Properties List ของเป้าหมายของเรา จะอยู่ระหว่างเครื่องหมายปีกกา เปิด และ ปิด
- CSS Properties ก็คือ คุณสมบัติของเป้าหมายของเรา เช่น color = สีของตัวอักษร และ background-color = สีของพื้นหลัง เป็นต้น ใน 1 CSS Block สามารถมีได้กี่ properties ก็ได้ตาม CSS Properties Reference นะครับ
เอาล่ะเรารู้จักกันแล้วว่า ภาษา CSS มีหน้าตาอย่างไร ทีนี้เราก็มารู้จักกันว่า เราจะใส่ CSS ลงไปในหน้าเว็บของเราได้อย่างไรบ้าง การใส่ CSS มีอยู่ 3 แบบครับก็คือ
1. Embedded Stylesheet คือ การฝัง Stylesheet ไว้ใน หน้า HTML เลย เหมือนตัวอย่างข้างต้นที่เราฝัง Style Sheet ไว้ที่ Tag Head นั่นเอง
2. Linked Stylesheet คือ การ Link Stylesheet จากภายนอกเข้ามา วิธีนี้เป็นที่นิยมมากที่สุดครับ วิธีการก็คือ ให้ใส่ Tag “link” ลงไปในส่วนของ tag Head แล้วก็ระบุ href ไปถึงไฟล์ที่เราจะ link ในที่นี้คือ ไฟล์ชื่อ style.css นะครับ
<link rel="stylesheet" type="text/css" href="style.css" >
3. Inline stylesheet คือ การฝัง Stylesheet ไว้ที่ Tag HTML โดยตรง ผ่าน HTML Attribute ที่ชื่อว่า Style ครับ ตัวอย่าง เช่น
<h1 style="color:green;background-color:yellow;">Header Topic</h1>
ซึ่ง 3 แบบนี้ให้ผลลัพท์ที่เหมือนกันได้ครับ ถ้าเรากำหนด style เหมือนกัน แต่ความสุดยอดของ CSS ก็คือ มันถูกเรียกว่า Cascading Stylesheet โดยมีความสามารถในการเรียงลำดับความสำคัญของ Style ได้ครับ ถ้าเป็น Stylesheet แบบ Link เหมือนกัน จะเรียงความสำคัญจากล่างขึ้นบนครับ ตัวมาทีหลังจะทับตัวหน้าหมด แต่ถ้า เป็น Stylesheet ที่ใส่ต่างวิธีกันจะมีความสำคัญดังนี้ครับ
- Inline Stylesheet
- Embedded Stylesheet
- Linked Stylesheet
พูดง่ายๆคือ Inline Stylesheet จะดับตัวที่เหลือทั้งหมดเลย ลองทดสอบดูกันได้ครับ จากคุณสมบัติ Cascading นี้ ทำให้เราสามารถใช้ CSS Library และ ทำการ Override Style หรือการทับ Style ลงไปได้ ทำให้เราสามารถสร้าง Theme จาก CSS กันได้ครับ
ถ้าอยาก เก่ง CSS จะต้องรู้เรื่องความสำคัญ หรือลำดับการประมวลผลของ CSS นะครับ เมื่อรู้แล้วทีนี้ก็ไร้เทียมทานครับ
** ยังมีวิธีการ บังคับให้ สิ่งที่เราเขียนมีลำดับความสำคัญสูงสุดด้วยนะครับ นั่นก็คือ การใช้คำสั่ง !important แต่ผม ไม่นิยมใช้นะครับ เพราะการใช้ !important หลายๆที่มันควบคุมยาก เพราะไม่เป็นไปตามธรรมชาติของ CSS ทีแรกอาจจะสะดวก แต่ถ้าโปรเจคเริ่มใหญ่ขึ้น จะ debug กันยากครับ พยายามใช้ให้น้อยที่สุดครับสำหรับ !important
เบื้องต้น CSS ก็จะหน้าตาประมาณนี้ครับ ในบทต่อๆไป เราจะมาเรียนรู้เรื่องราวของ Selector กันซึ่งเป็น Core ของ CSS เลยก็ว่าได้ แล้วลองติดตามดูนะครับ
Blog คือ เครื่องมือที่ใช้สร้างโอกาส
และ สร้างตัวตนได้ ทุกยุคทุกสมัย
(สำหรับ 50 ท่านแรก)
รับเทคนิค ความรู้ ข่าวสาร การทำเว็บไซต์
จาก พลากร สอนสร้างเว็บ
เฉพาะ สมาชิกเท่านั้น