[CSS]CSS Code เบื้องต้น

posted on 11 Jun 2011 18:37 by l2ikimaru in CSS
สวัสดีขอรับ
 
ตอนแรกก็ยังไม่รู้ว่าจะเขียนเรื่องนี้ดีรึเปล่า เอาเป็นว่ายังไงก็เขียนขึ้นมาแล้ว ^^"
 
ขออธิบายตามแบบที่ผมเข้าใจเลยละกันนะฮะ แล้วก็คิดว่าแบบนี้น่าจะเข้าใจง่ายดี
 
ถ้าเนื้อหาส่วนใดผิดไปก็ต้อขออภัยแล้วกันครับ
 
----------------------------------------------------------------------------------------
 
หลายๆคนที่ย้ายเข้ามาใหม่คงจะงงๆกับ CSS แล้วก็คิดว่ายาก ไม่อยากไปแก้อะไรมากเพราะกลัวเจ๊ง
 
ได้แต่แก้ตรง Colors & Pictures
 
ตอนแรกๆผมก็คิดเหมือนกันว่ามันยากนะ แต่ก็พยายามอ่านเอ็นทรี่ต่างๆเกี่ยวกับ CSS แล้วก็ลองผิดลองถูกไปเรื่อยๆ
 
ค่อยๆแก้ไปทีละนิด แล้วก็ Refresh ดู ว่ามันได้อย่างที่เราคิดรึเปล่า ตอนนี้ก็เริ่มใช้เป็นแล้ว มันไม่ยากอย่างที่คิดนะ
 
คล้ายๆกับ Code HTML นั่นแหละ
 
เราลองมาดูตัวอย่าง CSS กันก่อนครับ
 
 
อันนี้เป็นตัวอย่างคร่าวๆนะครับ
 
ถ้าเราเข้าไปที่หน้า css เราจะเห็นตัวอักษร 4 สีหลักด้วยกัน
 
คือ สีเทา สีแดง สีน้ำเงินเข้ม สีน้ำเงินอ่อน
 
ผมขออธิบายตรงนี้ก่อนนะครับ
 
4 สีนี้ จะแบ่งได้ 3 ส่วนด้วยกัน
 
1.สีน้ำเงินเข้ม (ในรูปคือ body{ }) จะเป็นตัวบอกเราว่า เรากำลังแก้โค้ดส่วนไหนของบล็อกอยู่ครับ อย่างอันนี้ก็คือส่วน body นั่นเอง
 
2. สีน้ำเงินและสีแดง คือส่วนคำสั่งต่างๆ เช่น background:#c7e1e9; ตามภาพ ก็คือเป็นการสั่งให้มีพื้นหลังเป็นสีนั้นๆครับ
 
3.สีเทา คือ เป็นสีที่ไม่มีผลอะไรเลยกับบล็อกของเราครับ ความจริงแล้วสามารถลบตัวหนังสือสีเทาใน css ออกได้ทั้งหมดเลย เพราะมันไม่ใช่ส่วนแสดงผล แต่มีไว้เพื่อบอกให้เรารู้คร่าวๆว่าเรากำลังแต่งธีมส่วนไหน อะไรบ้าง ครับ
 
ถ้าท่านรู้จักแค่ 2 ส่วนแรก ท่านก็แต่งธีมสบายมากแล้วครับ
 
----------------------------------------------
 
ทีนี้เรามารู้จักส่วนที่ 2 กันก่อนครับ คือส่วนของคำสั่ง
 
คำสั่งใน css ความจริงแล้วมีเยอะแยะมากมาย เอามาลงใน entry นี้ไม่หมดหรอกครับ ต้องลองศึกษาเพิ่มเติมเอง
 
แต่ผมจะลงอันที่ใช้กันบ่อยๆแล้วกันครับ
 
1.background อันนี้หลายคนคงคุ้นเคยดี เป็นคำสั่งสำหรับแก้พื้นหลัง โดยเราสามารถใส่ค่าได้ 3 แบบ คือ
  • ใส่ชื่อสี เช่น background:black; background:orange;
  • ใส่โค้ดสี เช่น background:#EEE; background:5E3F7C;
  • ใส่เป็นูปภาพ ใช้โค้ด background:url(ลิ้งค์รูป) x; ตรงตัว x เราสามารถใส่ค่าได้หลายค่า เช่น no-repeat คือไม่ให้รูปนั้นแสดงซ้ำ / repeat-x คือให้มันแสดงซ้ำตามแกน x(แนวนอน) / repeat-y คือให้มันแสดงซ้ำตามแกน y (แนวตั้ง) / fixed คือ ให้ภาพพื้นหลังไม่เลื่อน เวลาเราเลื่อน scrollbar เป็นต้น 

2.width คือการกำหนดความกว้างของสิ่งต่างๆ ใส่ได้ทั้งเป็น px และ %

3.height คือการกำหนดความสูงครับ

4.float คือการกำหนดตำแหน่งของสิ่งๆนั้น เช่น float:left; ก็คือให้มันชิดซ้าย

5.color เป็นการกำหนดสีของตัวอักษร ใส่ได้ทั้งโค้ดสี และ ชื่อสี ครับ

6.display เป็นการกำหนดการแสดงผลของสิ่งต่างๆ เช่น display:none; คือไม่ให้มันแสดงผล เป็นต้น

7.margin&padding เป็นการเว้นระยะห่าง อ่านรายละเอียดตามนี้นะครับ คลิก

8.font เป็นการกำหนดค่าต่างๆของตัวอักษร เช่น font:12px Verdana; ก็คือการกำหนดตัวอักษรให้เปฤ็นขนาด 12px เป็นฟอนท์ Verdana เป็นต้น

9.border เป็นการกำหนดค่าเส้นขอบ โดยใช้ border:ขนาด รูปแบบ สี; เช่น border:2px solid #EEE; เป็นต้น รูปแบบมีหลายรูปแบบ แต่ที่นิยมที่สุดคือ solid กับ dotted ครับ ลองดูรูปแบบกัน

(ขอบคุณภาพจากบล็อกท่าน warrantica ครับ)

 

--------------------------------------

 

ทีนี้หลายคนทราบคำสั่งต่างๆดีอยู่แล้ว แต่ว่าไม่รู้เกี่ยวกับหัวข้อ(สีน้ำเงินเข้ม)

เช่น ไม่รู้ว่า #neck คืออะไร ไม่รู้ว่า #comment คืออะไร เป็นต้น

ผมเอาโครงสร้างมาบอกคร่าวๆแล้วกันนะครับ

 

อันนี้คือโครงสร้างหลักๆนะครับ

แต่ว่าบางทีหัวข้อย่อยๆบางคนก็ยังไม่รู้อยู่ดีว่ามันคืออะไร ผมมีวิธีครับ...

เช่น #header h2 เรารู้อยู่แล้วว่ามันอยู่ใน พท.สีแดงด้านบนแน่นอน แต่เราไม่รู้ว่าส่วนไหน

ผมแนะนำ ให้ลองใส่ตัวเลขเวอร์ๆไว้ก่อนเลยครับ อย่างเช่นเราลองใส่ font size เป็น 50px แล้วกด preview ดูครับ

ผลออกมาได้เป็นอย่างนี้ ทีนี้เราก็ทราบแล้วว่า #header h2 คือส่วนไหน ส่วนหัวบล็อกย่อยนั่นเองครับ :3

 

อีกวิธีหนึ่งคือ ให้ลองใส่ border ลงไปครับ เช่น เราไม่รู้ว่า #neck .module คือส่วนไหน

ให้เราลองใส่ คำสั่ง border ลงไป เช่น เอา border:1px solid black; ไปใส่ใน #neck .module ครับ จากนั้นกด preview ดู

เท่านี้ก็ทราบแล้วครับ ว่าคือส่วนใด :3

 

ลองนำไปใช้ดูนะครับCool

หวังว่า Entry นี้คงเป็นประโยชน์ไม่มากก็น้อย สำหรับคนที่คิดว่า CSS นั้นยาก :3

------------------------------------------

ปล. ถ้ามีคำถามก็คอมเมนท์ทิ้งเอาไว้นะครับ เดี๋ยวอาจจะเอาลง Entry หน้าครับ
ปล2. CSS มันต้องลองผิดลองถูกครับ คนที่ยังไม่ชำนาญต้องลองแก้ทีละนิดๆ แล้ว preview ดู ว่าใช่อย่างที่เราต้องการไหม
ปล3. ความจริง Entry นี้เขียนเสร็จนานแล้วแต่ server ล่มครับCry ต้องนั่งเขียนใหม่หมดTongue out
ปล4. ถ้ามีข้อผิดพลาดก็บอกได้นะครับCool
ปล5. ขอบคุณที่แวะเข้ามาอ่านและคอมเมนท์ฮะ