what is CSS

CSS คืออะไร

CSS, HTML & CSS /

หลังจากวันก่อน เราได้พูดถึง HTML คืออะไรไปแล้ว หากเราไม่พูดถึง CSS เลยก็เป็นไปไม่ได้นะครับ เพราะเป็นของคู่กันที่ช่วยสร้างหน้าตาเว็บไซต์ให้สมบูรณ์มากขึ้น ดังนั้นวันนี้เราจะมาเรียนรู้ว่าเจ้า CSS คืออะไร ใช้ควบคู่กับภาษาอะไร โครงสร้าง CSS เป็นอย่างไร และการเขียน CSS ในแบบต่างๆ ครับ

CSS คืออะไร

CSS คือ ภาษาคอมพิวเตอร์ภาษาหนึ่ง ย่อมาจาก Cascading Style Sheets ทำหน้าที่ตกแต่งหน้าตาของเว็บไซต์ให้มีความสวยงาม เช่น การกำหนดสีพื้นหลัง สีฟอนต์ ขนาดพื้นที่แสดงผล ขนาดตัวอักษร และอื่นๆ

CSS ใช้ควบคู่กับภาษาอะไร

CSS ใช้ควบคู่กับภาษา HTML ครับ ปัจจุบัน CSS เวอร์ชั่นล่าสุด คือ CSS เวอร์ชั่น 3 ซึ่งจะใช้คู่กับ HTML เวอร์ชั่น่ 5 หากเราเห็นหนังสือหรือบทความก็จะเขียนในลักษณะ HTML5/CSS3 ครับ

โครงสร้าง CSS

ข้อ 1. โครงสร้างของ CSS จะประกอบไปด้วยแท็กหรือแอตทริบิวต์ของ HTML เป็นการระบุว่าตำแหน่งไหนที่เราต้องการทำการสไตล์ซึ่งใน CSS จะเรียกว่า Selector โดยนำมาจากไฟล์ HTML ในที่นี้คือ #example-1 หลังจากนั้นตามด้วยปีกกาเปิดและปิด ภายในปีกกาคือสไตล์ที่เราต้องการ ประกอบไปด้วย property และ value เช่น หากเราต้องการระบุสีของตัวอักษรก็จะใส่ property เป็นคำว่า color และกำหนดให้มีค่า vallue เป็นสีดำคือ black โดยมีเครื่องหมายคอลล่อน (:) คั่นกลาง

#example-1 { 
   color: black;
}

การเขียนคำสั่ง CSS จะเขียน Selector ผูกกับค่าจากแท็ก (Tag) หรือแอตทริบิวต์ (Attribute) ของ HTML เช่น id หรือ class วิธีการเรียกใช้งานนั้นจะแตกต่างกัน คือ ถ้า Selector เรียกใช้งานแท็กไม่จำเป็นต้องใส่เครื่องหมายใดหน้าแท็กนั้น แต่ถ้าเป็นแอตทริบิวต์ id จะใส่เครื่องหมายชาร์ป (#) และ class ใส่เครื่องหมายจุด (.) หน้าแอตทริบิวต์นั้นๆ ครับ ตามตัวอย่างด้านล่าง

ไฟล์ index.html

<!DocType html>
<html>
 <head>
 <meta charset="UTF8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="http://localhost/html/style.css" type="text/css" media="all">
 <title>Title</title>
 </head>
 <body>
 <h1 id="head-1" class="big">Heading 1</h1>
 <p>Content of the document....</p>
 <footer class="footer">
 This is footer.
 </footer>
 <script src="https://localhost/html/js/jquery.js"></script>
 <script type="text/javascript" src="https://localhost/html/script.js"></script>
 </body>
</html>

ไฟล์ style.css

body { // ดึงจากแท็ก body
	background-color: #eee;
        font-size: 16px;
}

#head-1 { // ดึงจาก id ที่ชื่อ head-1
	font-size: 30px; 
}

.footer { // ดึงจาก class ที่ชื่อ footer
	color: #fff;
        background-color: #000;
}

ผลลัพธ์ที่ได้

จากโค้ดด้านบน 2 ไฟล์นี้ จะเป็นการระบุให้หน้าเว็บเพจส่วนของ body มีสีพื้นหลังเป็นสีเทา ขนาดของฟอนต์ทั้งหน้าอยู่ที่ 16px ขนาดของหัวข้อ id ที่ชื่อ head-1 มีขนาดตัวอักษรที่ 30px และในส่วนล่าง footer ของหน้าจะมีพื้นหลังสีดำและตัวอักษรสีขาว

เราสามารถดูว่ามี Property ใดที่สามารถใช้งานได้บ้างที่ CSS Tutorial นี้ครับ

รับออกแบบเว็บไซต์
รับออกแบบเว็บไซต์

ข้อ 2. โครงสร้างของการเขียน CSS นั้นจะเขียนในลักษณะเป็นลำดับหรือขั้น เพื่อระบุตำแหน่งที่ชัดเจนขึ้น และเพื่อป้องกันการสับสนของตำแหน่งที่ต้องการแสดงผล ตามตัวอย่างด้านล่าง

ไฟล์ html

<div id="id-1" class="class-a">
   <p class="text-color">First part</p>
</div>
<div id="id-2" class="class-b">
   <p class="text-color">Second part</p>
</div>

ไฟล์ css

.text-color {
   color: black;
}

.class-a .small {
   color: red;
}

ผลลัพธ์ที่ได้

จากโค้ดด้านบนจะทำให้ตัวอักษรคำว่า First part เป็นสีแดง ในขณะที่ตัวอักษรคำว่า Second part เป็นสีดำ เพราะ .class-a .small มีลำดับชั้นเยอะกว่า

สิทธิในคำสั่งที่สามารถบังคับสไตล์หรือในที่นี้คือสีของตัวอักษรได้นั้นจะดูได้จากความลึกของลำดับชั้น แต่ถ้าจำนวนชั้นเท่ากัน ก็จะดูว่ามี id อยู่ภายในลำดับหรือไม่ หากมี id ด้วยก็จะให้สิทธินั้นก่อนครับ เช่น #id-1 .text-color มีสิทธิมากกว่า .class-a .small เป็นต้น

CSS inline

CSS inline คือ การเขียนสไตล์แบบ Inline Style โดยเขียนลงไปในไฟล์ HTML ณ จุดที่ต้องการปรับแต่ง หรือ เขียนไว้ด้านบนส่วนหัว (head) โดยมีแท็กสไตล์ครอบอยู่ก็ได้ ซึ่งแตกต่างจากตัวอย่างก่อนหน้าที่เราแยกไฟล์ CSS ออกจากไฟล์ HTML ครับ สิทธิในการกำหนดสไตล์ด้วยวิธี Inline Style นี้ จะมีสิทธิสูงกว่าแบบแยกไฟล์

ตัวอย่างที่ 1 เขียน Inline Style ในส่วนของ head

<head>
   <style>#id-1 { color: red }</style>
</head>

ตัวอย่างที่ 2 เขียน Inline Style ในส่วน body

<body>
<div id="id-1" class="class-a" style="background-color: red; color: white">
   <p class="text-color">First part</p>
</div>
</body>

!important

สำหรับการใช้คำว่า !important ใน CSS นั้น จะเป็นการบังคับสิทธิขั้นสูงสุด โดยไม่สนใจว่าโค้ด CSS ก่อนหน้าทั้งแบบแยกไฟล์ และ Inline Style เป็นอย่างไร จะถูกกำหนดโดยสไตล์ที่มีคำว่า !important ทั้งหมด ตามตัวอย่างด้านล่าง

.text-color {
  color: pink !important;
}

มาถึงตรงนี้แล้ว พอจะเข้าใจถึงเรื่องของ CSS กันบ้างหรือยังครับ ในบทความหน้าจะพูดเรื่องอะไรก็รอลุ้นกันนะครับ สำหรับบทความนี้ถ้าใครมีข้อสงสัยก็สามารถสอบถามกันมาได้นะครับ สวัสดีครับ !

รับออกแบบเว็บไซต์
รับออกแบบเว็บไซต์
Contact Us via Line QR code