CSS คือ อะไร ?
CSS(Cascading Style Sheets ) คือ ภาษาที่ใช้สำหรับตกแต่งเอกสารของ HTML ให้มีหน้าตา สีสัน ระยะห่าง พื้นหลัง เส้นขอบ Effect และรวมถึงการเคลื่อนย้ายโครงสร้าง Layout ต่างๆ ใน HTML กำหนดให้อยู่ในรูปแบบของ “style”
เอาอธิบายแบบ EZๆ เลยนะ ไอเจ้าภาษานี้เนี่ยมันมีหน้าที่สร้างสีสันและจัดรูปแบบให้โครงสร้าง HTML ของเรา ไม่ว่าจะทำสีพื้นหลัง หรือ การจัดตำแหน่งให้ Element(Element มันก็ คือ Code ต่างๆในเอกสารนั่นแหละ)รวมถึงบทความนี้ สีที่โชว์ออกมาก็ เพราะ ตัว CSS นี่แหละ เป็นภาษาที่มีรูปแบบในการเขียน Syntax(Syntax คือ รูปแบบในการเขียนของภาษานั้นๆ)ที่เป็นแบบเฉพาะตัว และได้ถูกกำหนดมาตรฐานโดย W3Cschool เป็นภาษาหนึ่งในการตกแต่งเว็บไซต์ ได้รับความนิยมอย่างแพร่หลายเลย
เพื่อการอ่านที่ได้ประสิทธิภาพเต็มร้อยทางเราแนะนำสำหรับใครที่ยังไม่ได้ศึกษาเรื่อง HTML ทาง blog เรามีเนื้อหาอยู่ครับผม
Syntax vs Tag ?
สำหรับคนที่เริ่มต้นหลายๆคนอาจจะยัง งง Syntax มันต่างกับ Tag ไหม บอกเลยครับว่า ต่าง ซึ่ง Tag คือ ลักษณะเฉพาะของ ภาษา HTML ไอพวก <h1> <p> <img> อะไรพวกนั้นนั่นแหละ ใช้ในการระบุโครงสร้างใน HTML ว่าต้องการอะไรในเอกสาร ส่วน Syntax เนี่ย คือ ไวยากรณ์หรือรูปแบบในการเขียนของแต่ละภาษาก็แบบ เช่น HTML ต้องมี Tag เปิดและปิด นั่นแหละ Syntax ซึ่งก็คนละตัวกันนะครับผม
รูปแบบในการประกาศ ?
โดยปกติแล้วเนี่ยเวลาเราประกาศเอกสารใน HTML เนี่ยเราจะประกาศว่าไงครับ ? <!DOCTYPE html> ใช่ไหมครับ(สำหรับใครยัง งง ตรงนี้ Blog ของเรามีสอน HTML อยู่นะครับไปดูได้เลย) แต่พอเป็น CSS ปั๊ปจะถูกประกาศว่า <style></style> ครับผม
<body>
<style>
</style>
</body>แล้วทำไมยังมีการประกาศ <!DOCTYPE html> อยู่ไหนว่าเขียน CSS เพราะ ว่าการที่จะเขียน CSS จำเป็นที่จะต้องมีโครงสร้างของ HTML ครับผม
สังเกตจากรูปด้านบนนะครับ เราจะประกาศ <style></style> ใน Tag <body></body> แค่นี้ก็จะเป็นการเริ่มประกาศตัวแปรแล้วครับ หลังจากนี้ก็สามารถเขียนภาษา CSS ลงไปได้ ส่วนถ้าไม่ประกาศแต่เขียนลงไปเลย Code จะไม่ Run นะครับ
แล้ว Syntax มันเป็นยังไง ?
สำหรับ Syntax จะต้องเขียนอยู่ใน <style></style>โดยอ้างอิงตัวที่เราอยากจะปรับแต่งก่อน เช่น ผมต้องการปรับแต่ง Tag <p></p> ผมก็จะเอามาแค่ตัว p แล้วก็จะแล้ววาง{ }(ปีกกา) ไว้ทางขวา หลังจากนั้นก็ใส่ color ให้ p เป็น blue โดยมี : (โคลอน) เป็นตัวขั้นกลางระหว่าง color กับ blue ครับผม และจะต้องมีการปิด Code ด้วย ; (เซมิโคลอน) เสมอนะครับไม่งั้น Code ในจะพังเอาได้
- Selector ==> คือ ตัวที่เราเลือกเพื่อที่จะทำการตกแต่ง อย่างรูปด้านบนเราเลือก Tag p ครับผม
- Declaration ==> คือ ตัวที่เราประกาศว่าจะให้ Selector เป็นยังไง ในรูปด้านบน declaration ประกาศ ให้ selector ก็คือ p เป็นสีน้ำเงินนั่นเอง
- Property ==> คือ รูปแบบที่เราต้องการใน declaration นั้นๆ ในรูปด้านบนใช้เป็น color เพื่อบอกว่าต้องการใช้ สี กับ Tag p ครับผม
- Value ==> คือ ผลลัพธ์ที่ต้องการตกแต่งในรูปแบบนั้นๆครับ เช่น รูปด้านบนเลือก property เป็น color ใช่ไหมครับ ซึ่ง property เป็น color เราก็สามารถเลือก ผลลัพธ์เป็นสีอะไรก็ได้ตามใจ อยาก ครับผม
พอได้กันบ้างละน้าาทุกคน เกี่ยวกับ Syntax เบื้องต้นเราลองมาเขียนจริงจาก Code จริงๆกันบ้างดีกว่า
หลายคนอาจจะตกใจ เห้ย ! ทำไมปีกกาเป็นแบบนั้น ก็ คือว่าปีกกา เนี่ยมันจะวางแบบไหนก็ได้ครับ แต่สุดท้ายแล้วเนี่ยมันต้องครอบคลุมตัว Code ที่เราต้องการครับ สังเกตุว่า ปีกกา { } มันครอบคลุม Syntax หมด ซึ่งก็คือ color:red; นั่นเองงง และก็อ้างอิง p ที่อยู่ด้านบน <style> แค่นี้เองก็ไม่ต้องกังวลเรื่องปีกกาแล้วครับ
<body>
<p>ฉันจะเปลี่ยนสีแล้วนะ</p>
<style>
p{
color:red;
}
</style>
</body>
โอเครครับ พอเข้าใจหลักการในการเขียนจริงๆแล้วเนอะ เนอะๆ พอมาถึง ตรงนี้แล้วก็จะพาไปดู Property(ลืมกันยัง property คือ รูปแบบที่ใช้อ้างอิงถึงตัว Tag นั้นๆ ใคร งงๆ ขึ้นไปดู ข้าง บนก่อนน้า) ที่ได้ใช้กันบ่อยๆนะครับ
<body>
<p>ฉันจะเปลี่ยนสีแล้วนะ</p>
<style>
p{
color:yellow;
font-size: 20px;
background-color:black;
border:2px solid red;
text-align: center;
font-family: sans-serif;
}
body{
background-color: black;
}
</style>
</body>property css ที่ได้ใช้บ่อย
หลายๆคนอาจจะตกใจนะครับ โอ๊ย เยอะโว๊ยย !!! ใจเย็นๆนะครับเด่วผม อธิบายให้ฟังนะครับ 55555
สังเกตุได้ว่ารอบนี้ผมอ้างอิงทั้ง Tag p และ Tag body แต่ตอนนี้เรามาพูดถึงอ้างอิงที่ Tag p ก่อนนะครับ
- color ==> คือ รูปแบบของสีนั่นเอง จะเอาสีอะไรก็ใส่ได้หมดเลย โดย color จะเจาะจงแค่ตัวอักษร ซึ่ง ผมเลือกใช้เป็นสี yellow(เหลือง) ครับ
- font-size ==> คือ รูปแบบในการเพิ่มหรือลดขนาดตัวอักษร ในที่นี้ผมให้เป็น 20 pixel นะครับ ซึ่งเอาจริงๆ ไม่ ต้องใส่เป็นตัวเลขแล้วตามด้วย px ก็ได้ สามารถใส่ว่า small(เล็ก) medium(ปาน กลาง) large(ใหญ่) ลงไปได้เลยครับผม
- background-color ==> คือ รูปแบบการเปลี่ยนสีพื้นหลังของสิ่งที่เราอ้างอิง ต้องบอกก่อนว่าทุกตัวทุก Element มีพื้นหลังครับ โดยพื้นหลังของแต่ละตัวนั้นจะต่างกันไป ตามขนาดของ Element นั้นๆ ซึ่งผมให้ Tag p พื้นหลังเปลี่ยนเป็นสีเทาครับ
- border ==> คือ รูปแบบของเส้นขอบที่เราอ้างอิงใน Element นั้นๆ โดยเราอ้างอิง ถึง Tag p ใช่ไหมครับ ก็จะมีกรอบขึ้นมา 2 pixels ใน Tag p เป็นแบบ solid(เส้นตรงปกติ) และเป็นสีแดง สังเกตุได้ว่านี่มี 3 Value ใน 1 Property เลยใช่ไหมครับ การที่เราทำแบบนี้เราเรียกว่าการทำ “Shorthand Property” ครับ
Shorthand Property คือ การเขียน Code ให้สั้นลงโดยมีประสิทธิภาพเท่าเดิม เช่น เดียวกับการทำทางลัดนั่นเอง เป็นการรวม Property อื่นๆ มาไว้ใน Property เดียว ถ้าเราไม่เขียนแบบ Shorthand เราจะต้องเขียนแบบนี้แทนครับ
p{
border-width:2px;
border-style: solid;
border-color: red;
}ก็จะเขียนยาวๆแบบนี้ 3 บรรทัดเลย นี่แหละ เหตุผลว่าทำไมถึงควรใช้ Shorthand Property
- font-family ==> คือ สามารถเพิ่มหรือเลือกรูปแบบของตัวอักษร หรือ font ได้จาก property นี้เลย โดย font ที่ผมใช้เป็น sans-serif ไงงง
- text-align ==> คือ รูปแบบการจัดตำแหน่งตัวอักษร ที่ไม่นับรูปภาพ สามารถสั่งได้ว่าจะให้ไปตรงส่วนโดย fix ส่วน เช่น สั่งให้ไปซ้ายก็จะซ้ายไปสุดจอ สั่งให้ไปขวาก็จะขวาสุดจอเช่นเดียวกัน แต่ใน Code ด้านบนสั่งให้ไป center ตรงกึ่งกลางนั่นเอง
ส่วน Tag body ก็ถูกอ้างอิงโดยใช้ property และ value เป็น background-color: black ; หรือว่าเป็นพื้นหลังสีดำนั่นเอง คือ Tag body ก็เหมือนเอกสารหรือกระดาษทั้งใบครับ ถ้าใส่ background ลงไปก็จะเปลี่ยนทั้งหน้า Website เลยครับ
เก็ทไหมทุกคนน ยังไหวอยู่น้า มาต่อกันเรื่องการเรียกใช้ Class&Id กัน
วิธีเรียกใช้ Class&ID
โดยวิธีการเรียกใช้เจ้า Class&ID ใน CSS นะครับเราจะเรียกใช้ Class&ID จาก HTML นั่นเอง ซึ่งจะมีรูปแบบเฉพาะในการเรียกต่างกันไปครับผมระหว่าง Class และ ID โดยเราจะวางไว้ในส่วนของ Selector หลั้งจากนั้นเราก็ใส่ property กับ value ได้ตามปกติเลยจ้า
Class - เรียกใช้โดยการใช้ . ตามด้วยชื่อ Class เช่น .name .class ID - เรียกใช้โดยการใช้ # ตามด้วยชื่อ ID เช่น #name #class
<body>
<h1 class="name">Pornchai</h1>
<p id="nickname">Game</p>
<style>
.name{
color:red;
font-size:10px;
}
.class{
color:greenyellow;
font-size:20px;
}
</style>
</body>เรื่องสุดท้ายแล้วว คือ ปกติเนี่ยเวลาที่เราเริ่มเขียนเนี่ย เราจะเริ่มเขียนว่า <style></style> ใน HTML เลยใช่ไหม แต่ถ้าการที่ทำแบบนั้นพอเขียนไปเยอะๆเข้าเนี่ยตัว Code มันจะเละ ! เละยังไง ? นึกภาพว่า ถ้าเขียนไปสักพักจะมีส่วนของ HTML 200 บรรทัด CSS 300 บรรทัด อยู่ในหน้าเดียว รวมกันก็ 500 บรรทัด บอกเลยว่าระเบิด หัวระเบิดแน่ๆ ผิด 1 จุด งมหาไปเถ๊อะ มันก็เลยมีวิธีการแยกไฟล์ของใครของมันเลย
Link CSS page
สังเกต”บนซ้าย”น้า จะมีไฟล์ที่ชื่อว่า index.html และ style.css อยู่ ซึ่งอันแรกก็ ชื่อ เอกสาร HTML ส่วนอันที่สองก็ คือ ชื่อเอกสาร CSS นั่นเอง โดยแยกกันอย่างสิ้นเชิง ไฟล์ใครไฟล์มันเลย แต่ประเด็นคือทำไว้คนละไฟล์แล้วมันจะเชื่อมต่อหรือมันจะรู้ได้ยังไง ถ้า HTML ต้องการเรียกใช้ CSS อะเห็นตรง <link> ม๊ายยยย ใน <link> จะเป็นการ link ไปยังข้อมูลที่เราต้องการโดยมี rel กับ href เป็นตัวกำหนดอยู่
rel ==> คือ ประเภทอะไรที่ต้องการ link เข้ามา แล้วจะ link อะไร ซึ่งในรูปเราต้องการ link หน้า style ก็เลยเขียนว่า"stylesheet"จ้า
href ==> คือ ที่อยู่ของที่ ที่เราต้อง link ซึ่งในรูปด้านบนเรา link ชื่อไฟล์ ก็คือ "style.css" นั่นเอง
ซึ่งในส่วนของหน้าไฟล์ CSS ก็ไม่ต้องพิพม์ style อีกต่อไปแล้วเพราะไฟล์นี้ตั้งนามสกุลเป็น .css ทำให้ไฟล์รู้แล้วว่าเราจะเรียกใช้อะไรนั่นเอง
สรุป ภาษา CSS เป็นภาษาที่ใช้การตกแต่งหน้าเอกสาร HTML ไม่ว่าจะเป็น สี พื้นหลัง ขอบ ขนาดตัวอักษร ฟอนต์ Effect(ซึ่งจะเอาไว้สอนใน blog หน้าๆ น้า ในเรื่องของ Effect)และการจัดตำแหน่งพื้นที่ต่างๆ โดยมี Syntax ที่เฉพาะตัวโดยต้องอ้างอิงถึงสิ่งที่ต้องการจะตกแต่ง รวมถึง Property,Value ให้ใส่ว่าเราต้องการตกแต่งอะไร เรื่องของการวางตัวปีกกา { } สามารถวางตรงไหนก็ได้แต่ต้องครอบคลุมใน Code ของเราไม่ไปซ้อนกับ Code ของตัวอื่นหรือนอก Code ของเรา ส่วน Shorthand property ควรใช้ให้เป็นนิสัย และ ฝึกใช้ให้สม่ำเสมอ จะทำให้การเขียน Code ของเราไวขึ้นมาก อาจจะมีหลายๆคน งง ว่า เอ้า แล้ว Shorthand มันจะมีอะไรอีกนอกจากที่ยกตัวอย่างไปด้านบน ตรงนี้ W3Cschool เขามีบอกหมดเลยลองไปศึกษาดูกันน้า สุดท้ายนี้ขอฝากเรื่องการฝึกการฝึกสำคัญที่สุด ยิ่งฝึกบ่อยยิ่งขยันฝึกจะเก่งไวมากๆโดยมือใหม่ฝึกพื้นฐานให้แน่นๆไปเลย สำหรับ Blog นี้ขอให้ โชคดีในการเขียนโปรแกรมทุกท่านครับ
สำหรับมือใหม่ที่ต้องการเขียนโปรแกรมเริ่มเขียนโปรแกรม ทาง Blog เรามีเนื้อหาพร้อมสำหรับทุกท่าน
“ขอให้ทุกท่านโชคดีกับการเขียนโปรแกรมครับ”