start css

CSS คืออะไรอ่า ???
ว่าแต่จริง ๆ เขียนบทความนี้ค่อนข้างเก่า
แต่จำเป็นอย่างมากสำหรับ web ต่าง ๆ นา ๆ
ก็เลยเขียนไว้เล่น ๆ ขึ้นดีฟ่า
ใหน ๆ ก็ไม่รู้จะเขียนอะไรมานานมากมายแล้ว
ให้ blog ขยับบ้าง เล็ก ๆ น่ารัก ๆ

CSS คือ ?
-Cascading Style Sheets << เฮ้ย นี่ไม่ใช่ "คือ" นี่มันชื่อเต็ม
-_-"
-เอาเป็นว่า มันใช้ในการกำหนด style ให้กับ web ของเรา
แล้วดีอย่างไงหรอ ก็ดีตรงที่ เรากำหนด รูปแบบ กับ web เรา
ทีเดียว เวลาเปลี่ยนก็เปลียนแค่ style (css file)
ส่วน html ไม่ต้องทำไรแล้ว

แล้วมันยากใหม ?
-ไม่ยากหรอก ถ้าเรารู้จักจัดการ และแบ่งหมวดหมู่
รวมถึง group ในส่วนต่าง ๆ เป็น ไม่ใช่กำหนดสะเปะสะปะ

แล้วต้องรู้อะไรบ้าง ?
-รู้ attribute และ style ในแต่ละ html tag ว่าสามารถกำหนดอะไรได้บ้าง เช่น

<table> </table> 

จะสามารถกำหนด

<table 
width="200px" height="300px" style="border: 1px solid blue;"> 
</table> 

อะไรแบบนี้ เป็นต้น รู้แค่นี้ก่อน ก็ไปได้เกินครึ่งทางแล้ว
แต่อย่าไปไกลมาก กลับมาดูกันต่อก่อน

จะเริ่มอย่างไรหละ ?
- ไม่ยาก เริ่มจาก เขียน html ขึ้นมาก่อน file นึ่ง
ตัวอย่างตามนี้แล้วกัน

<table border="1px">
 <tr>
  <td>TD1-1</td>
  <td>TD1-2</td>
  <td>TD1-3</td>
 </tr>
 <tr>
  <td>TD2-1</td>
  <td>TD2-2</td>
  <td>TD2-3</td>
 </tr>
 <tr>
  <td>TD3-1</td>
  <td>TD3-2</td>
  <td>TD3-3</td>
 </tr>
</table>

TD1-1	TD1-2	TD1-3
TD2-1	TD2-2	TD2-3
TD3-1	TD3-2	TD3-3

ที่นี้เราก็ลองใส่ class ให้แต่ละ tag ที่สำคัญ ๆ

<table border="1px" class="main_table">
 <tr class="col_head">
  <td>TD1-1</td>
  <td>TD1-2</td>
  <td>TD1-3</td>
 </tr>
 <tr class="col_detail">
  <td class="row_head">TD2-1</td>
  <td>TD2-2</td>
  <td>TD2-3</td>
 </tr>
 <tr class="col_detail">
  <td class="row_head">TD3-1</td>
  <td>TD3-2</td>
  <td  id="tag_test_id">TD3-3</td>
 </tr>
</table>

ผลทีได้คือ ไม่มีอะไรเปลี่ยนแปลง
เพราะ class ที่สร้างขึ้น ไม่ได้ก่อผลกระทบ อะไรเลย

TD1-1	TD1-2	TD1-3
TD2-1	TD2-2	TD2-3
TD3-1	TD3-2	TD3-3

เราก็มาเริ่ม แทรก css เข้าไปดังนี้

<style type="text/css">

.main_table {
 border: ridge;
 width: 300;
}
.col_head {
 text-align: center;
 background-color: orange;
}
.col_head td {
 border: 1px solid blue;
 height: 100px;
}
.col_detail {
 text-align: right;
}
.col_detail td {
 border: 1px solid red;
}
.row_head {
 background-color: yellow;
 width: 100px;
}
#tag_test_id {
        color: red;
}

</style>

ผมที่ได้ก็จะเป็นดังนี้

TD1-1	TD1-2	TD1-3
TD2-1	TD2-2	TD2-3
TD3-1	TD3-2	TD3-3

แล้วจะอธิบายหน่อยเปล่าว่าแต่ละอยางคืออะไร ???
-เอ่อ จริงด้วย เอาทีละอันแล้วกันนะ ตามตัวอย่างที่เราเห็น

.main_table : ในส่วนนี้เราจะแทน html tag ที่มี class ชื่อ main_table อยู่
โดย แต่ละ tag ก็สามารถมีได้หลาย class
วิธีการใส่ class หลาย ๆ คลาส ก็คือ class="class1 class2 class3"
ใช้การเว้นวรรค ในการแบ่งครับ

.col_detail td : ในส่วนนี้คือ td ที่อยู่ใต้ html tag ที่มี class ชื่อ col_detail
โดยจะสามารถไล่ลงไปเรื่อย ๆ ได้ ตัวอย่าง เช่น
.col_detail td table tr td table tr td div : ในตัวอย่างนี้คือลงไปอีก 2 table
จนถึง tag div นั่นเอง ลงแค่นี้พอ เดี๋ยวลงมากจะงง

#tag_test_id : ในส่วนนี้คือ html tag ที่มี id เป็น tag_test_id คือแค่เปลี่ยนจาก
การกำหนด class เป็น id แทน ไม่ต้องลงท้าย id แบบตัวอย่างก็ได้นะ เป็นชื่ออะไร
ก็ได้ตามสบาย ลักษณะการใช้งานก็คล้าย ๆ กับการกำหนดแบบ class ครับ

ในกรณีที่ใช้งานจริง จะแยก ในส่วน tag style ออกมา ใส่ file นามสกุล .css
ไว้ แล้วใช้ html เรียก ด้วย tag ตัวอย่าง ดังนี้

<link href="/css/style.css" type="text/css" rel="stylesheet" />

เอาเป็นว่าผู้เขียนไม่มีข้อสงสัยอะไรจะขอจบเพียงเท่านี้แล