HOW TO CSS ฉบับเบเบแต่ยิบๆ

posted on 24 Jul 2009 16:04 by myagd-vip in ARTICLE
 
แค่อยากแนะนำให้คนที่ยังไม่รู้
จะพยายามเขียนให้เข้าใจง่ายที่สุด

 

    เป็นการทำบลอกด้วย CSS ฉบับเบสิค ง่ายๆ ไม่ได้มีอะไรแปลกๆให้ปวดตับ เนื่องจากมีคนมาขอคำแนะนำ อันตัวเราไม่ได้เชียวชาญ CSS แต่อย่างใด แค่พอดู Code ออกเล็กน้อย เพราะมีประสบการณ์ดู Code ต่างๆมาตั้งแต่แต่งไดอารี่ที่ Storythai ทำ Hi5 ให้แปลกกว่าชาวบ้าน และมี Webboard อยู่ 1 อัน

    ที่เขียนทั้งหมดนี่ห้ามนำไปแสดงที่อื่น โดยไม่ได้รับอนุญาต ใครอ้างอิงโดยไม่มีเครดิต มันคนนั้น ต้องตายยยย หึหึ (เค้าเหนื่อยยนะ กว่าจะอธิบายจบ -*-) 

เริ่มเลยดีกว่า

ก่อนอื่นสิ่งที่ต้องระลึกถึงอยู่เสมอ

  1. สำหรับมือใหม่ ต้องอดทน ใจเย็น ค่อยเป็นค่อยไปทีละส่วนอย่าข้ามขั้น แก้ไขแล้ว Refresh ดูไปทีละอัน
  2. เมื่อมั่นใจแล้ว อยาก Save กรุณาก็อปโค้ดส่วนนั้นไว้ด้วย อาจจะใส่ใน Notepad ป้องกันเนทเสื่อมกระทันหัน อัพไม่ขึ้น จะได้มีที่ทำแล้วเก็บไว้ ไม่ต้องมานั่งจิตหลุดกันอีกหลายวัน -*-)
  3. คน Theme สวยไม่ได้เก่ง CSS เสมอไป แต่รู้จักปรับใช้กับรูปภาพค่ะ หรือใช้ภาพและการจับคู่สีเป็นจุดดึงดูดแทนการทำ Theme แปลกๆ ซึ่งทำให้มันดูมีอะไรนอกเหนือจากการทำแบบธรรมดา ^^) เพราะฉะนั้นอย่าคิดมากว่าไม่เก่ง CSS แล้วทำไม่ได้
  4. ถ้า Theme เน่า ให้ลบ Theme นั้นออก แล้วเลือก Theme ใหม่ ไม่ใช่สร้างบลอกใหม่ เปลืองพื้นที่ Exteen ค่ะ เห็นใจผู้ใหญ่บ้านแชมป์หน่อยนะ

เลือกส่วนที่จะแสดงก่อนทำ Theme

  1. ถ้าไม่ต้องการให้หน้าบลอกแสดงเอนทรี่ 3 อัน ตามที่ถูกกำหนดไว้ ให้ไปที่ Setting > Number of entries showed เลือกตัวเลข (มี 1-10) แล้ว Save
  2. เลือกหรือกำหนดให้ Sidebars (แถบที่แสดงพวก Links, Fav) แสดงหัวข้ออะไรบ้างไปที่ Theme > Widgets เมื่อเข้ามา ตรง Sidebar#1 จะเห็นหัวข้อต่างๆเรียงกัน ถ้าไม่ต้องการอะไรให้ติ๊กวงกลมสีแดงมันจะหายไปอยู่ใน Available Widgets ถ้าจะสับเปลี่ยนตำแหน่งบนล่าง คลิกค้างที่หัวข้อนั้นแล้วเอาเมาส์ลากได้ตามต้องการเลยค่ะ

เพิ่มเติมเกี่ยวกับการใช้ Custom code ใน Widgets
จะนำ Code ไปใช้ต้องเอาตัวออกก่อนนะ และ สีเขียวคือส่วนที่ต้องแก้ไข

  1. Custom code มีไว้สำหรับคนอยากวางรูปตกแต่งเล็กๆ เขียนข้อความ หรือ วางเพลง หรือ อื่นๆ จะแสดงอยู่ในส่วนของ Sidebars หรือ Top menu ซึ่ง Code ต่างๆที่จำเป็นจะมีดังนี้

    ๐ ใส่รูป <img src="ยูอารแอลรูป"</a>

    ใส่ข้อความ <font color="#รหัสสี" face="รูปแบบฟอนต์" size="ขนาดตัวอักษร">ข้อความ</font> เช่น <font color="#ff0000" face="verdana" size="3">ข้อความ</font>
    เพิ่มเติมการใส่ข้อความ
    * ถ้าจะทำตัวอักษรหนา ใช้    <b>ข้อความ</b> เช่น <font color="#ff0000" face="verdana" size="3"><b>ข้อความ</b></font>
    * ถ้าจะทำตัวอีกษรเอียง ใช้    <em>ข้อความ</em> เช่น <font color="#ff0000" face="verdana" size="3"><em>ข้อความ</em></font>
    * ถ้าจะให้หนา+เอียง ใช้ <b><em>ข้อความ</em></b>

    การทำให้ข้อความหรือรูปอยู่ตรงกลาง ใช้ <center>ส่วนของ Code ทั้งหมด</center> เช่น <center><font color="#ff0000" face="verdana" size="3"><b>ข้อความ</b></center>

    การทำ Links รูปภาพ <a href=ลิงค์ที่จะไป><img src=ยูอารแอลรูป border=0></a>

    การทำ Links ข้อความ <a href="ลิงค์ที่จะไป">ข้อความ</a>

    การเว้นวรรคบรรทัด ใส่ <br>

  2. Custom code ไม่รองรับภาษาอื่นนอกจาก ภาษาไทย และ อังกฤษ ไม่รองรับตัวอักขระพิเศษ พวก รูปดาว รูปหัวใจ อะไรแบบนั้น ถ้าใส่ภาษาแปลกๆมา Code ที่ใส่ไว้ทั้งหมดใน Custom code จะหายไป  อย่าลองดีนะจ๊ะ ฮ่าๆ

 
หน้าตาหลักๆของ Exteen ดูประกอบการอธิบาย Code CSS จะได้ง่ายขึ้น

 

อธิบายก่อน Theme ที่ Exteen มีให้ 3 แบบ คือ Apollo, Dark Apollo, Simple แล้วมันต่างกันยังไง ?     

     ตามความเข้าใจของเรา Apollo, Dark Apollo  ต่างกันที่สี และ 2 ตัวนี้แตกต่างกับ Simple ตรงที่ Apollo, Dark Apollo ใช้ภาพแทนการใส่สีและใส่ Text ก็แล้วแต่คนจะเลือกนะคะ แต่เราเอา Simple มาเป็นตัวอย่างนะ

 

SIMPLE THEME : Code ที่จะเห็นเมื่อเลือก Theme นี้
สีเขียว คือ ส่วนที่จะแก้ไข  สีม่วง คือ คำอธิบาย เลื่อน scrollbar ในเอนทรี่เพื่อดู Code  เรื่อยๆ


/* General */

 

body { คือส่วนทั้งหมด ภาพรวมของบลอกเรา

background:#รหัสสีพื้นหลังบลอก url(ยูอารแอลรูปพื้นหลัง) repeat top left; ตรงนี้รูปพื้นหลังจะแสดงซ้ำๆกันโดยเริ่มจากมุมซ้ายบน
(เพิ่มเติม ถ้าไม่ใส่รูปพื้นหลังหรือไม่ใส่สีพื้นหลังให้ใส่ None ลงไปแทนรหัสสีหรือยูอารเเอลรูป , ถ้าใช้รูปพื้นหลังรูปใหญ่และไม่ต้องการให้ภาพซ้ำ ใช้ no-repeat แทน repeat , ถ้าต้องการให้พื้นหลังอยู่กับที่ไม่เลื่อน ใส่ background-attachment: fixed; ลงไปเพิ่มเติม)

color:#รหัสสี; สีตัวอักษรโดยรวม
font:
ขนาดตัวอักษรpx ขนาดตัวอักษรโดยรวม  Tahoma, "MS Sans Serif"; ตรงนี้รูปแบบตัวอักษรที่อยากใช้
(เพิ่มเติม การใส่ขนาดตัวอักษรที่เป็นมาตราฐานคือ 12 , ควรใช้รูปแบบตัวอักษรที่มีกันทุกเครื่อง เช่น Tahoma, Verdana, Geogia, Arial, MS Sans Serif)

line-height:1.5em;
text-align:center;

}

a:link, a:visited{ คือการแสดงสีของลิงค์โดยรวมที่มีในบลอก

color:#รหัสสี;
text-decoration:
none; ลิงค์มีเส้นใต้ ถ้าจะให้มีเส้นใต้ ใส่ inline แทนที่ none

}

a:hover, a:active{ คือการแสดงของลิงค์เวลาเอาเมาส์ไปโดน

color:#รหัสสี;

}

#page{ ส่วนทั้งหมดที่อยู่ในกรอบสีเหลือง

margin:auto;
padding-top:
15px; ระยะห่างของเพจกับแถบบาร์สีเทาของexteen ถ้าจะให้ติดขอบแถบเทาใส่ 0 หรือเว้นไว้ไม่ต้องใส่นะ ใส่แล้วลองรีเฟรชดูว่าถูกใจยัง
text-align:left;
width:
780px; ขนาดของเพจ แก้ไขแล้วรีเฟรชดู อยากได้กว้างๆก็เพิ่มเอา
(เพิ่มเติม อยากให้บลอกชิดซ้าย ใส่ float:left; ลงไปเพิ่ม อยากให้ชิดขวาใส่ float:right; ถ้าบลอกชิดซ้ายจนติดเกินขอบจอเกินไป ให้ใส่ padding-left:กำหนดระยะห่างด้วยตัวเลขpx; ถ้าชิดขวาใส่ padding-right:กำหนดระยะห่างด้วยตัวเลขpx; เช่น padding-left:15px;)

}

#header, #neck, #belly, #leg, #footer
{

float:left;
width:
780px; ขนาดต้องเท่ากับขนาดเพจ

}

/*========================================*/

/* Header */

#header{ คือส่วนของเฮดบลอก

background:#รหัสสี; สีพื้นหลังของเฮดบลอก
padding:
20px 0px 0px 0px; ระยะห่างบนล่างซ้ายขวาของเฮดบลอก(ไม่ได้เรียงตามที่บอกนะ) ต้องลองปรับแล้วรีเฟรชดู
text-align:
center; ตำแหน่งของชื่อบลอก ถ้าจะซ้ายใส่ left ขวาใส่ right
position:relative;

}

#header h1 a{

color:#รหัสสี; สีของชื่อหัวบลอก
font-size:
ขนาดตัวอัก