css กับการแต่งบล็อคเพิ่มเติม
posted on 13 Jan 2009 19:47 by rije in Knowledgeเนื่องจาก entry เก่ายาวแล้ว ผมขอยกยอดอีกรอบกับ css กับการตกแต่งบล็อค ภาคใหม่ เพิ่มเติม ไม่ได้ลบตัดตอนและเพิ่มเติมใดๆ ทั้งสิ้นครับ
อ่าน entry ก่อนหน้า >> css กับการแต่งบล็อค
=========================
เพิ่มเติมโดย คุณกอฟ (ขอ url บล็อคด้วยนะครับคุณกอฟ)
กำหนด tag <a></a>
ตั้งค่า css แบบนี้ก็ได้นะครับ
a[class="xx"]{
css code
}
เป็นการสั่งว่า a ที่มีคลาส xx ให้แสดงผลเป็นแบบที่เรากำหนดนะ เวลาทำ tag a เวลาโพส ก็ต้องพิมพ์
<a href="" class="xx">ข้อความ</a>
หรือจะกำหนดแยกเป็น ลิ้งค์ก็ได้ครับ แต่ต้องทำรูปบอกด้วย อย่างเช่น ลิ้งค์เป็นไฟล์ mp3 เราก็ไปทำรูป mp3 มา แล้วทำ code
a[href$='.mp3']{
/*padding = การยืดออก เรียง บน ขวา ล่าง ซ้าย*/
padding: 5px 20px 5px 0;/*ยืดบน 5px ขวา20px ล่าง5px ซ้าย 0 ถ้าจะให้รูปสลับกันก็แก้ตรงขวาเป็นซ้ายแทน*/
background: สี url(ที่อยู่รูป) no-repeat center right;
}
ลิ้งค์ที่ลงท้ายด้วย mp3 จะมีรูป mp 3 ที่เราทำต่อท้ายครับ
เอาไปลองทำเล่นดูครับ
ถ้าจะแก้ชื่อคลาส หรือ ไฟล์ท้ายลิ้งค์ก็แก้ไปเลยครับ
id มีได้ 1 เดียวในหน้านะครับ (ห้ามซ้ำ)
class มีซ้ำกันหลายๆ อันได้ในหน้า
ย่อหน้า ทำเหมือนหนังสือเลยครับ ^^ ดูแล้วสวยดี
/*มันจะย่อเข้าไปตามที่เรากำหนดนะครับ*/
id/class//xx {
text-indent: ?? px/em/%/pt;
}
/*แนะนำว่าให้กำหนดเป็น 1~ไม่เกิน 5 em (1-5เท่าของขนาดตัวอักษรปกติในหน้าเว็บนั้น) หรือ % คำนวนจากขนาดของแท็กที่กำหนด ถ้ามันกว้าง 400px 5%ของ400px =20px*/
จัดชิดขอบ ซ้ายและขวา (กระจายชิดขอบแบบใน เวิร์ดอ่ะครับ คงจะดีไม่น้อยถ้า แต่ละบรรทัดชิดขอบสวยงาม)
id/class//xx {
text-align:justify;
}
/* น่าจะรู้อยู่แล้วมั้ง ถือว่าแนะนำเพื่อนๆ คนอื่นใน exteen ละกันครับ*/
กำหนดบรรทัดแรกสุด ให้เป็นไปตามที่เราต้องการ
id/class/<>/xx:first-line {
text-xx:xx;
}
กำหนดตัวอักษรแรกสุด
id/class/<>/xx:first-letter {
text-xx:xx;
}
2 คำสั่งนี้ใช้ x[class="xx"]:first-xx{} ได้นะครับ
ส่วนใหญ่ผมจะเน้นเรื่องข้อความที่ปรากฏบนหน้าเว็บนะครับ เพราะถ้าเราแต่งให้มันสวยๆ หน่อย คนจะอ่านเยอะ แล้วก็เป็นสเน่ห์อย่างนึงของเว็บเราด้วยครับ
ผมก็ไม่ทราบว่า ระบบของ exteen สามารถสร้าง แท็ก () ใช้เองได้หรือเปล่า เพราะไม่งั้นมันจะลำบากเวลาโพสแ่ต่ละครั้งครับ มันจะต้องกำหนด id/class/xx กันทุกครั้ง (พิมพ์กันเมื่อเลยมั้ง (>.<)!) แต่ถ้ามันใส่ แท็ก ลงไปในโค้ดหน้าเว็บได้เอง หรือมีตัวช่วยสร้าง แท็ก ให้ ก็คงสบายขึ้นอ่ะครับ
ไว้แค่นี้ก่อนละกันครับ เดี๋ยวเพื่อนๆ ที่ exteen ร้องกรี๊ด กันซะก่อน (ทำไมมันเยอะแยะขนาดนี้) แล้วปัญหาที่จะตามมาคือ จำคลาสไม่ได้ !!! แนะนำว่า ถ้าอยากจำง่ายๆ ชื่อคลาส (class="x") ให้ใส่ชื่อลักษณะหลักๆ ที่ควรจะเป็นไปเลย อย่างเช่น ตัวอักษรใหญ่ สีแดง เราก็กำหนดคลาสเป็น class="bigred" เป็นต้นนะครับ จำง่ายดี
=========================
หมดแล้วครับ ต้องขอขอบคุณ คุณกอฟ มากๆ เลยที่ช่วยเขียนมาแนะนำเพื่อนๆ ใน exteen นะครับ
ช่วงนี้ก็ระวังเป็นหวัดกันด้วยนะครับ เพราะผมเป็นแล้ว 555 ช่วงนี้อากาศเปลี่ยนแปลงบ่อย วันที่ 16-20 ผมไม่อยู่นะครับ (แอบไปเที่ยว ฮุฮุ) ช่วงนี้ก็ไม่ค่อยสบายเลยไม่ค่อยได้ไปเยี่ยมที่บล็อคพี่น้องกันเลย ^^""
ตั้งแต่ entry หน้าไป ผมอาจจะกลับไปเขียนเรื่องไร้สาระต่อนะครับ 555 เวลาเขียนบล็อคเรื่องโค้ดๆ แล้วไม่ค่อยอยากเขียนติดๆ กันเลย กลัวพี่น้องจะเบื่อกันเสียก่อน >3<"
ขอบคุณมากนะคะ
#1 By iQ180 on 2009-01-13 20:08