งมเล่นกับ CSS editor (และ Firebug)

posted on 19 Apr 2011 12:53 by monovie in 00-Random directory Tech
 
ยะโฮ่ !! Undecided << ชอบตอนอีโมนี้พิกเซลแตกมากกกก
 
สวัสดีค่ะ...... OTL
ไม่ได้อัพบล๊อคอีกแล้ววววววว อุตส่าห์มีเทศกาลสงกรานต์ทั้งที
แบบว่าขี้เกียจตามฟีเวอร์มากๆ เลย (แม้จริงๆจะโคตรอยากเล่นแต่ ความขี้เกียจ > ความอยาก)
.
.
.
.
.
.
.
 
วันนี้เราลองเล่นกับ CSS editor ดูค่ะ เปลี่ยนนุ่นเปลี่ยนนี่ดู แอบสนุกดี ฮาาาาา Embarassed
 
 
เราใช้ add-on ของ Firefox ที่ชื่อ Firebug ค่ะ (จิ้มโลด)
แอ๊ดออนตัวนี้ทำให้เราเปลี่ยนโค้ดของหน้าที่เราเปิดดูได้แบบ Real-time เลยค่ะ
เห็นกันแบบจะๆ ไปเลย ใช้ง่ายมากค่ะ แค่กดๆ เปลี่ยนๆ ก็เวิร์คแล้ว
 
**อนึ่ง มันสามารถใช้ได้แค่เปลี่ยนหน้าตาของเพจนั้นๆให้บราวเซอร์ของเราเท่านั้นนะคะ
ถ้าเรา refresh หน้า ก็จะกลับมาเหมือนเดิม
ถ้าจะเปลี่ยนค่าของเพจนั้นๆก็ต้องเข้าไปใน css editor ของเราเอง
เหมือนกับเราใส่แว่นตาให้กับบราวเซอร์เราค่ะ
 
ไม่ต้องมีความรู้ทางด้านนี้ก็สามารถมั่วได้ แค่มีพื้นฐานภาษาอังกฤษนิดหน่อยก็โอแล้ว
แถมมันยังมีตัวเลือกให้เราด้วยนะ อย่างเช่น
 
display: block
 
ถ้าเราไฮไลท์คำว่า block แล้วกดลูกศรลงลงมันก็จะเปลี่ยนให้เหมือนไล่ตามลิสต์ลงไปเรื่อยๆ
มี block, inline, block-inline ฯลฯ
 
 
ไม่รู้อันไหนก็ลองคลิ๊กไป เดี่ยวมันก็เปลี่ยนให้ดูค่ะ อันไหนดูไม่ออก ก็ถามอากู๋เลยค่ะ
(เพราะเราก็งมเอง คงไม่สามารถช่วยไขข้อสงสัยให้ได้ 5555)
 
อีกอย่างที่ควรจะมี ที่จะทำให้ชีวิตง่ายขึ้นเยอะคือทักษะการทำความเข้าใจอย่างง่ายค่ะ Surprised
เราเปิดเพจของคนอื่นแล้วดูเอาค่ะ แล้วก็ลองเปลี่ยนเพจของคนอื่นไปด้วยเลย
ว่าถ้าทำแบบนี้จะเกิดอะไรขึ้น ลองเปลี่ยนตรงนี้แล้วอะไรขยับ อะไรเปลี่ยน ฯลฯ
พอจับจุดได้ก็ง่ายแล้วค่ะ
 
 
 
ที่คือข้อสังเกตเล็กๆ น้อยๆ ที่เราได้มานะคะเกี่ยวกับ margin, padding, background,
float, display, border แล้วก็ font ค่ะ
 
 
1. การตั้งค่า margin กับ padding คล้ายๆ กันค่ะ
margin เป็นตัวกำหนดส่วนที่ต้องการเว้น ส่วน padding จะเป็นคล้ายๆแผ่นรอง text ค่ะ
ถ้าเราตั้ง padding เป็น 0 ตัวพื้นหลังก็จะมีชนาดเท่ากับกับที่เราพิมพ์ไปค่ะ
เช่นนนนนนน 
                      padding 0px            123456
                      padding >0px          123456  
ประมาณนี้ค่ะ ส่วน margin ก็เหมือนเวลาปรับใน word นั่นแหละค่ะ
 
จำไว้ไม่เสียหาย: ในค่าดั้งเดิม บางทีเราจะเห็น ค่าหลายๆแบบ ตัวเดียวบ้าง สองตัวบ้าง สี่บ้าง
ตอนแรกเราก็งงมากๆๆๆ แต่หลังจากไปค้นคว้ามาก็พบว่า มันคือแบบนี้ค่ะ
margin: ทุกด้านp;
margin: บน-ล่างpx    ซ้าย-ขวาpx;
margin: บนpx     ซ้ายขวาpx     ล่างpx;
margin: บนpx    ขวาpx    ล่างpx      ซ้ายpx;        (เรียงตามเข็มนาฬิกา เริ่มจากด้านบน)
ต้องอย่าลืม px ตามหลังด้วย
 
อีกอย่างเราสามารถเขียนเป็น margin-top:, margin-bottom:, margin-left:, margin-right: ได้ จะได้ไม่สับสน (*padding ก็เหมือนกันค่ะ)
 
 
2. background กับ float
background ก็ตามชื่อเลยค่ะ สามารถเขียน background:#รหัสสี ได้เลย
รหัสสีเราใช้เว็บนี้ค่ะ เราว่าโอมากเลยทีเดียว http://www.colorpicker.com/
อยากให้ใสก็เขียน transparent
 
ส่วน float ก็เป็นการกำหนดว่าจะให้ block ที่เราปรับอยู่อยู่ชิดด้านไหนอะไรยังไง
ที่ใช้หลักๆ ก็มี left, right, center
 
 
3. border กับ font
ค่อนข้างตามชื่อเลยอันนี้คิดว่าทุกคนคงรู้แล้วววววววว
border สามารถเขียนได้สองแบบ (เท่าที่งมมา)
 
วิธีที่ 1     border: _px solid #รหัสสี;
วิธีที่ 2     border-top: _px double transparent;
 
วิธีที่ 1 จะเป็นการปรับแต่งกรอบทั้ง 4 ด้าน วิธีที่ 2 จะสามารถกำหนดได้ว่าจะปรับด้านไหน
ก็เหมือนเดิมค่ะ มี top แล้วก็มี bottom left right
ตรง solid สามารถเปลี่ยนได้เหมือนวิธีข้างบน กดลูกศรลงๆ
เรากดๆ ดูก็เห็นมี groove, double, ridge, inset ฯลฯ เยอะ 5555
สีก็เหมือนกันค่ะ
 
ส่วน font ก้ออออออออออ
font: 12px arial;
อะไรแบบนี้ค่ะ
สามารถเขียนแค่ขนาดได้ด้วย อย่าง
font-size: 12px;
ปรับ bold ก็ได้เหมือนกันค่ะ แบบนี้ font-weight: bold;
 
 
4. display
อื้มมมมมมมม อันนี้แบบว่าเราแองก็ไม่ค่อยเข้าใจ อาศัยเดาใจไปเรื่อยๆ เลย ฮะๆๆ Undecided
แต่เท่าที่เห็นใช้บ่อยๆ ก็มี none, inline, block
none ก็เหมือนปุ่ม disable ค่ะ 5555
inline ส่วนมากเห็นใช้ inline รู้สึกว่าจะเป็นการทำให้มันจัดเรียงกันตามเส้นเท่าๆ กันหมด
block ก็จะเหมือน เอ่ออออ..... เลื่อนขึ้นไปดู ที่เป็นเหมือนที่คั่นหนังสือที่มุมซ้ายดูนะคะ นั่นแลลล
 
 
 
 
วันนี้อัพอะไรมีสาระมาก แต่ไม่รู้มันจะสาระไปถึงคนอื่นรึเปล่า Undecided

 
วันนี้ได้ลองทำอะไรด้วยตัวเองแล้วรู้สึกดี อรั๊ยย 5555
เราหยุดอีกอาทิตย์เดียวก็จะเรียนต่ออีกแล้ว
การบ้านเยอะมากเลย ทำไปได้แค่ชิ้นเดียวเอง แซ้ดดดดดดดดดดด Tongue out
 
 
 
 
(เขียนมาเยอะแล้ว ยังไม่ได้กินข้าวเลย ว๊ากกกก)
 
 
 
 
Smile แล้วเจอกันใหม่เอนทรี่หน้าค่ะ 
 
 
 

edit @ 19 Apr 2011 22:05:55 by Monovie

edit @ 29 May 2012 20:57:07 by Monovie

Comment

Comment:

Tweet