สวัสดีครับ สำหรับบทความแรกของ พื้นฐาน CSS นั้น เราจะมาเริ่มกันที่ CSS คืออะไรและใช้งานอย่างไร กันก่อนเลยนะครับ
สำหรับผู้ที่เคยเขียนเว็บไซต์มาก่อนจะรู้กันดีว่าภาษาหลัก ๆ และเป็นพื้นฐานของการเขียนเว็บไซต์ก็คือ HTML แต่ด้วยคุณสมบัติพื้นฐานของ HTML เมื่อคุณจะจัดรูปแบบขององค์ประกอบใดองค์ประกอบหนึ่งของหน้าเว็บ คุณต้องเข้าไปเขียนที่ตัวมันเองตรง ๆ อย่างเช่น ถ้าอยากได้สี่เหลี่ยมสีเขียว เส้นขอบสีแดง กว้างและสูง 50 พิกเซล และมีตัว A สีขาวอยู่ตรงกลาง ก็จะต้องเขียนโค๊ดประมาณตัวอย่างไฟล์ exp.html นี้
<div style=“ background-color:green; border : 1px solid red; color: white; height: 50px; text-align:center; width: 50px; ”> A </div>
เยอะเนอะ ซึ่งมันก็ดูไม่แย่เท่าไหร่ ถ้ามีแบบนี้ แค่อันเดียว แต่ถ้าเราต้องการแบบนี้อีก สัก 10 อันล่ะ อ่ะนะ! ก็ก๊อปวางสิถูกไหมครับ แล้วถ้ามีแบบนี้ 10 อัน และก็ 10 หน้า(ไฟล์)ล่ะ ก็ยังก๊อปวางอยู่ถูกไหมครับ แล้วถ้าเกิดอารมณ์อยากเปลี่ยนสีตัวหนังสือล่ะครับ เอิ่ม...! งานช้างเลยนะ ต้องตามแก้ 100 ที่ และไม่ได้อยู่หน้าเดียวกันทั้งหมดด้วยนะครับ
และด้วยเหตุนี้เอง Cascading style sheet หรือที่เรียกกันง่าย ๆ ว่า CSS จึงลงมาจุติ ณ โลกใบนี้ ซึ่งไอเจ้าตัว CSS เองเนี้ย ก็อารมณ์คล้าย เซิร์ฟเวอร์กลาง ที่คอยเก็บ style หรือ รูปแบบที่เราสร้างไว้ แล้วทำการระบุว่าต้องการให้ Tag ไหน หรือ องค์ประกอบใดของหน้าเว็บบ้างที่ต้องการใช้ style ตัวนี้ อ่าคงไม่เห็นภาพใช่ไหม งั้นมาลองดูตัวอย่างต่อไปครับ
ก่อนอื่นเลยผมก็จะย้ายทุกอย่างที่อยู่ใน style ( ตัวหนังสือสีแดงทั้งหมด) จากตัวอย่างก่อนหน้านี้ มาไว้ที่ไฟล์ style.css ( ต้องนามสกุลไฟล์ css ด้วยนะครับ ) ก็จะได้ประมาณนี้
background-color:green; border : 1px solid red; color: white ; height: 50px; text-align:center; width: 50px;
ขอจัดระเบียบสังคมสักหน่อยนะครับ
background-color: green;
border: 1px solid red;
color: white;
height: 50px;
text-align: center;
width: 50px;
อ่า โอเคขึ้นมาหน่อย แล้วก็ตามด้วย ใส่ปีกกาครอบ {} style ชุดนี้ไว้
{
background-color: green;
border: 1px solid red;
color: white;
height: 50px;
text-align: center;
width: 50px;}
เท่านี้เราก็ได้ style css หนึ่งชุดแล้ว ซึ่งจากตรงนี้จะยังไม่มีผลอะไรเกิดขึ้น ต่อไปเราก็ต้องระบุว่าอยากให้ tag หรือ องค์ประกอบส่วนไหนใช้ style นี้ด้วยวิธีการระบุเป้าหมายไว้ที่ หน้าปีกกา{}
แบบนี้
div {
background-color: green;
border: 1px solid red;
color: white;
height: 50px;
text-align: center;
width: 50px;}
เท่านี้เราก็ ชี้โพรงให้กระรอกเรียบร้อยแล้วครับ แต่มันก็ยังไม่แสดงผลอยู่ดีนั่นแหละครับ เพราะทั้งไฟล์ style.css และ exp.html ยังไม่ได้มีส่วนไหนเกี่ยวข้องกันเลยน่ะสิครับ ก่อนอื่นเลยเราต้องทำให้พวกเค้าทั้งคู่รู้จักกันก่อนด้วยการไปที่ tag head ของไฟล์ exp.html แล้วใส่ tag นี้ลงไป
<head>
……...
<link href= “style.css” rel= “stylesheet” >
</head>
ซึ่ง tag นี้คือ link ตามชื่อมันเลยนะ ลิงค์ ที่แปลว่าเชื่อม ใช่ครับมันคือการ เชื่อมไฟล์เข้าหากัน โดยคุณสมบัติ ( attribute ) ที่ระบุก็จะมี
href ที่ย่อมาจาก Hypertext Reference ( ขอไม่แปลนะคำแค่คำว่า Hypertext คำเดียวก็ยาวแล้ว ) ผมขอเรียกง่าย ๆ ว่า “ที่อยู่ไฟล์” ละกันนะครับ ซึ่งมันก็คือที่อยู่ไฟล์ที่เราต้องการเชื่อมสำหรับในกรณีนี้นะครับ
และ rel ซึ่งชื่อเต็มพี่แกก็คือ ความสัมพันธ์ ( relationship ) ซึ่งตรงนี้ก็ใส่ว่า stylesheet หรือจะเป็นความสัมพันธ์ก็จะเป็น “ชุดคำสั่ง style ที่เรียกใช้จากภายนอก” แปลแล้วยาวเนอะ
ซึ่งเพียงเท่านี้เราก็จะได้ผลลัพธ์ตามเดิมแล้วครับ ซึ่งผลที่ได้คือทุก tag Div ที่อยู่ในไฟล์ exp.html จะมีรูปลักษณ์ตาม style ที่เราสร้างไว้ในไฟล์ style.css เลยครับ ถ้าเราต้องการให้ไฟล์ HTML ไหนมีรูปแบบตามนี้ให้นำ Tag link ไปวางไว้ที่ head ของไฟล์นั้น เพียงเท่านี้ก็เป็นอันเรียบร้อยแล้วครับ ถ้าเราต้องการแก้สีตัวหนังสือ เราก็สามารถไปแก้ที่ไฟล์ style.css เพียงไฟล์เดียวได้เลยครับ เพียงเท่านี้ทุกไฟล์ก็จะถูกแก้ตามกันหมดเลยครับ
