» กฎการเขียน CSS>>Blog Divland

Contextual selectors

Mar 21st

Contextual selectors การประกาศ class หรือ id ซ้อนกัน โดยเคาะ spacebar ดังตัวอย่าง

p ul{
background:#000000;
}

แปลว่า ul ที่อยู่ใน p จะมีแบ็คกราวด์ เป็นสีดำ
ส่วน
ul อื่นๆ ถ้าไม่อยู่ใน
p ก็จะเป็นปกติ

ใช้ในกรณีไหนล่ะ? ก็เช่นว่า เมื่อคุณสร้างขอบเขต div มา 1 อัน ต้องการทำเป็น กล่องสำหรับ content ประกอบด้วย thumbnail และเนื้อหานิดหน่อย สมมติว่า คุณต้องการให้รูป ในกล่องนี่มี border 2 px สีเทา โดยไม่ไปกระทบรูปอื่นๆทั้งหมดใน page ทำไงล่ะ คุณอาจจะเขียน class ขึ้นมาว่า

.borderimage{
border-width:2px;
border-color:grey;
}

แล้วใส่ คลาส นี้ ไปในทุกรูป ที่คุณต้องการให้มี border แต่จะดีกว่านั้น หากเราเขียนแบบนี้

#contentbox img{
border-width:2px;
border-color:grey;
}

เท่านี้ รูป ทุกรุป ที่อยู่ในขอบเขต

ก็จะมี border 2px สีเทา แบบนี้ทำให้คุณลดการโค้ดลงกว่าเดิม คุณสามารถเขียน ซ้อนกัน 3 หรือ 4 ชั้น ได้ ไม่มีปัญหา ถ้าคุณจะไม่งงซะเอง

Class,ID selectors

Mar 1st

Posted by Utto in กฎการเขียน CSS

3 comments

คราวที่แล้วเราพูดถึง simple selectors ไปแล้ว มาเพิ่มเติมกันต่อ simple selectors สามารถที่จะมี class และ id ที่ต่างกันได้ ตัวอย่าง

p.class1{ color:#ffffff } หรือ p.class2{ color:#000000 }

ตัวอย่าง มี 2 คลาส ชื่อว่า class1 และ class2เมื่อนำไปใช้ในไฟล์ html จะเป็นดังนี้

<p class=”class1″>จะได้ตัวหนังสือสีขาว </p>

หรือ

<p class=”class2″>จะได้ตัวหนังสือสีดำ </p>

อีกรูปแบบหนึ่งคือกำหนดแต่คลาสอย่างเดียว ไม่ต้องมี selectors เช่น

.small { font-size:10px }

รูปแบบนี้สามารถ นำคลาสไปใส่ที่ใดก็ได้ ภายในขอบเขตนั้น ก็จะมี ฟ้อนต์เท่ากับ 10 เช่น

<div class=”small”> ตัวหนังสือ </div>

จะสังเกตุเห้นว่า class จะมี . นำหน้า แต่ ID นั้น จะใช้ # นำหน้า ตัวอย่างการกำหนด ID เช่น

#bgw { backgroung-colour:#ffffff }

เมื่อนำไปใช้

<p id=”bgw”> ภายในนี้จะมี bg สีขาว </p>

แล้ว ID กับ Class ใช้ในกรณีไหนล่ะ? ID จะใช้กับ สิ่งที่มีเพียงอันเดียว มักใช้กับส่วนที่เป็น layout เช่น #header #content #footer ส่วน class ใช้เมื่อ จะมีการทำซ้ำหลายๆครั้ง เช่น .boxcontent

การตั้งชื่อ class และ id ก็ควรให้มีความสัมพันธ์กับส่วนที่นำไปใช้ และควรเป็นตัวพิมพ์เล็กทั้งหมด ไม่ควรใช้ _ และ ตัวเลข นำหน้าชื่อ class และ id เพราะอาจมีปัญหากับเบราเซอร์รุ่นเก่าบางชนิดครับ

เริ่มต้นด้วย Selectors

Feb 27th

Posted by Utto in กฎการเขียน CSS

No comments

Selectors
อธิบายง่ายๆก็คือ tag ธรรมชาติที่เราใช้ๆกัน ใน html นั่นเอง ในไฟล์ .css เราจะเขียนเป็นรูปแบบ เช่น

body {
color:#000000;
font-size:14px;
}

หรือ

p {
color:red;
font-size:16px
}

รูปแบบจะเป็นแบบนี้ คือ tag { property : value ; } แต่ถ้ามีหลายๆ property ในบรรทัดสุดท้าย ไม่ต้องปิดด้วย ; ก็ได้ ให้ผลเหมือนกัน แต่ผมมักจะเขียน ; ทุกบรรทัดเพราะ กันพลาดนะครับ เมื่อกำหนดแบบนี้แล้ว text ที่อยู่ใน body ทั้งหมด จะเป็นสีดำ ฟ้อนต์ 14 และ ถ้าอยู่ใน <p>…..</p>จะเป็นสีแดง ขนาด 16