คำชี้แจง

 

1. เนื้อหาฉบับนี้เป็นถูกนำเสนอแบบลูกทุ่ง หากผู้ใดมีความทะเยอทะยาน สามารถศึกษาต่อได้ด้วยตนเองในเว็บทั่วไป
2. คุณควรมีความรู้เรื่อง HTML เล็กน้อยมาก่อน

 

CSS

ภาษาชนิดหนึ่งเพื่อใช้ในการกำหนดรูปแบบลักษณะ การแสดงผลของ HTML

• อยากให้ข้อความนี้มีสีแดง CSS ช่วยท่านได้
• อยากใส่ภาพพื้นหลัง CSS ช่วยท่านได้
• อยากจัดองค์ประกอบของหน้าดเว็บ CSS ช่วยท่านได้

 

ตอนที่ 1 : รูปแบบ code CSS

 

ประกอบด้วย
1. ส่วน Selector
2. ส่วน Properties
3. ส่วน Value

ตัวอย่าง โครงสร้าง

Selector {
Properties_1 : Value_1;
Properties_2 : Value_2;
}
Selector_2 {
Properties_1 : Value_3;
Properties_3 : Value_1;
}

ตัวอย่าง code

body {
color: red;
background-color: black;
}
/*
Property สุดท้ายที่ไม่มี Properties อื่นตามมา สามารถไม่ใส่ ; ได้
*/
#myeyeD {
width: 100px
}
HTML {
width: 54 em;
height: 100px
}
.ส่วนหัว {
content: "นี้คือส่วนหัว";
border-color:red;
} 

คำถาม

1. Selector ในตัวอย่าง code ด้านบนมี Selector กี่ตัว อะไรบ้าง
2. Properties ทั้งหมดใน Selector .ส่วนหัว มีอะไรบ้าง
3. code ต่อไปนี้ถูกต้องตามโครงสร้าง code css

   1. 		#addsas {
      		asdDAAwqe : 'asdasd'
      		}
      		

   2. 		MYmsmasdd : 'Test' {
      		#test , #test1
      		}
      		

   3. 		Body (
      		width : 100%; 
      		)
      		

   4. 		* {
      		Version : test;
      		}
      		

   5. 		MK {
      		content -> 'my first css';
      		}
      		

   6. 		.Last {
      		Test : Value
      		Test2 : Value2;
      		}
      		

ตอนที่ 2 : Selector

Selector คือชื่ออ้างอิง ที่เราจะบอกกับ ฺBrowser ว่าไอตัวนี้ชื่อนี้มันต้องมีลักษณะอย่างนี้นะ เช่น

1. body {
    ลักษณะสี : แดง;
    ความสูง : 100cm;
    รอบอก : 32 นิ้ว;
   }
   

   เป็นการบอก Browser ว่า ไอตัว body นี้มี สีแดง ความสูง 100 cm รอบอก ... ^O^

2. myeye {
    sharp : วงกลม;
   }
   myeye {
    สี : เหลือง;
   }
   

   เป็นการบอก Browser ว่า เจ้า myeye มีรูปร่างกลม และมีสีเหลือง ดังนั้นเราสามารถยุบได้เป็น

   myeye {
    sharp : วงกลม;
    สี : เหลือง;
   }
   

3. ถ้า code เป็นแบบนี้จะเกิดอะไรขึ้น

   here {
    name: HERE;
   }
   here {
    name: ตัวเงินตัวทอง;
   }
   

   ครั้งแรกเราบอกให้ Browser รู้ว่า ไอ here นี้มีชื่อว่า HERE ต่อมาก็บอกว่า ไอ here ชื่อ ตัวเงินตัวทอง (เอะเอายังไงกับชีวิต) Browser ก็จะยึดถือตามคำสั่งสุดท้ายคือ ไอ here จะมีชื่อเป็น ตัวเงินตัวทอง

แล้วมันจะใช้กับ HTML ยังไงล่ะ ดูต่อไปเลยครับ

สมมติว่า code html เราเป็น

 

  
Header
  
 My First Blog
 
  text inside tag b
 
 
 

  Babababa
 
 

  

   tag inside tag p but outside tag i
   text inside tag span
  
 
 

   text inside tag i
 
 

มาลุยกันเลยตอนนี้สำคัญมากๆใครไม่เข้าใจโปรดอ่านซ้ำนะครับ

1. ต้องการใช้ทุกข้อความใน tag body มี Property background-color มีค่าเป็น red

   body {
    background-color: red;
   }
   

2. ต้องการใช้ทุกข้อความใน tag p ทั้งสองที่ มี Property color มีค่าเป็น green

   p {
    color: green;
   }
   

3. ต้องการให้ทุกข้อความใน tag body มี Property background-color เป็น red ยกเว้น tag p ทั้งหมดที่อยู่ใน tag body ให้มี Property background-color เป็น white

   body {
    background-color: red;
   }
   p {
    background-color: white;
   }
   

4. ต้องการให้ข้อความใน tag h และ tag p มีคุณสมบัติ width เป็น 100% เหมือนกัน

   p {
    width: 100%;
   }
   h1 {
    width: 100%;
   }
   

   หรือ

   p,h1 {
    width: 100%;
   }
   

5. ต้องการให้ข้อความที่อยู่ใน tag div ที่มี id เป็น header มี Property font-size เป็น 17px
   ถ้าเราเขียน

   div {
    font-size: 17px;
   }
   

   ทุกๆข้อความใน tag div ก็จะมี font-size เป็น 17px ทั้งหมดซึ่งเราต้องการแค่ div ที่มี id เป็น header สามารถใช้ชื่อ id เป็น Selector โดยการเติม # ข้างหน้าชื่อ id เช่น id belly เปลี่ยนเป็น #belly

   #header {
    font-size: 17px;
   }
   

   จะเป็นการบอก Browser ว่า tag ใดๆที่มี attribute id มีค่าเป็น header จะมี property fon-size เป็น 17px
6. ต้องการให้เฉพาะ tag p ที่อยู่ใน tag div ซึ่งมี id เป็น belly มีค่า Property height เป็น auto
   ถ้าเราเขียน

   p {
    height : auto;
   }
   

   จะทำให้ tag p ทั้งหมดมีค่า height เป็น auto จึงต้องใช้ id เข้าช่วย ถ้าใช้เป็น

   #belly {
    height: auto;
   }
   

   ก็ยังไม่ถูกต้องเพราะจะทำให้ tag ที่มี id เป็น belly มีค่า height เป็น auto แต่ที่เราต้องการคือ tag p ที่อยู่ใน #belly code ที่ถูกต้องจึงเป็น

   #belly p {
    height: auto;
   }
   

7. สุดท้ายถ้าต้องการให้ ข้อความ "text inside tag i","text inside tag b" และ "Babababa" มีข้อความเป็นสีแดง (Property color เป็น red) คุณอาจจะเขียน code เป็น

   #header b,#sidenav i,#neck {
    color: red;
   }
   

   แต่ถ้าสังเกตดีๆจะเห็น ว่า tag แต่ละตัวมี attribute class ชื่อ mycolor เหมือนกัน เราสามารใช้ ชื่อ class เป็น Selector ได้โดยการเติม . เข้าไปข้างหน้าเช่น class mycolor ใช้เป็น .mycolor ดังนั้นเราสามารถใช้แบบนี้แทนได้

   .mycolor {
    color:red;
   }
   

   จะเป็นการบอก Browser ว่า tag ใดๆที่มี attribute class มีค่าเป็น mycolor จะมี Property color ค่าเป็น red นั่นเอง

สรุป

• CSS ประกอบด้วย 3 ส่วน Selector,Property และ Value
• code CSS จะถูกเขียนใน tag style ,import เข้ามา หรือ เขียนใน attribute style โดยไม่มี selector
• Selector : A {Property:value;} คือการใส่ Property ให้ tag A
• Selector : A B {Property:value;} คือการใส่ Property ให้ tag B ที่อยู่ใน tag A
• Selector : A,B {Property:value;} คือการใส่ Property ให้ tag A และ B
• Selector : #D {Property:value;} คือการใส่ Property ให้แก่ tag ที่มี attribute id เป็น D
• Selector : .C {Property:value;} คือการใส่ Property ให้แก่ tag ที่มี attribute class เป็น C
• ตอนนี้คุณสามารถอ่าน CSS ใน Exteen Theme ได้แล้ว หากพบ Property ตัวใดที่ไม่เข้าใจ สามารถศึกษา Property เพิ่มเติมได้ใน http://www.w3schools.com/Css/default.asp

Blog ที่เกี่ยวข้อง

• http://gin-no-ishi.exteen.com/20071011/css-2-1
• http://tukkae.exteen.com/20071009/theme-css

เฉลย

1. 4 ตัว body,HTML,#myeyeD และ .ส่วนหัว
2. content และ border-color
3. 1. ถูก
   2. ผิด
   3. ผิด
   4. ถูก
   5. ผิด
   6. ผิด

 

ปล. ถ้าใครยังอ่านไม่รู้เรื่องลองสามารถอ่านเพิ่มเติมได้ในเว็บต่อไปนี้ http://www.thaicss.com http://www.divland.com http://www.w3schools.com/Css/default.asp

Firebug เป็น Extension ของ Firefox ซึ่งเป็นเครื่องมือที่สามารถช่วยท่านได้มาก และ เป็นตัวที่ผมกล่าวถึงบ่อย ^^

Installation

1. ลง Firefox 3.5 จาก http://th.www.mozilla.com/th/?flang=th
2. ลง Firebug extension จาก https://addons.mozilla.org/en-US/firefox/addon/1843 หรือ http://getfirebug.com/
3. เรียบร้อย

How to use

Firebug เป็นเครื่องมือที่สามารถประยุกต์ได้หลากหลายมาก แต่สำหรับการใช้ใน Exteen ผมขอแนะนำ 2 การประยุกต์ใช้

ความสามารถที่ 1 :: ดูเวลาในการโหลดหน้าเว็บ

1. กด F12 หรือ Click ที่รูป firebug บริเวณมุมล่างขวาของ firefox

2. คุณจะเห็น panel ของ firebug ขึ้นมา ซึ่งเป็นเป็นสามส่วน
   • ส่วนเมนูด้านบนสุดไว้เลือก mode
   • ส่วนพื้นที่ด้านซ้าย ในกรณีที่เป็นmode html และบาง mode จะมี พื้นที่ทางขวา
3. จากนั้น click ที่ mode net click ลูกศรที่อยู่ข้าง mode net เลือก enable


4. เปิดหน้าเว็บที่ต้องการดูข้อมูล
5. จากนั้นข้อมูลจะดูแสดงผลในบริเวณพื้นที่ด้านล่างของเมนู

ความสามารถที่ 2 :: แก้ไข CSS แบบฉับพลัน (แนะนำว่าควรอ่าน)

1. เปิดหน้าเว็บต้องการ
2. กด F12 หรือ Click ที่ รูป firebug บริเวณมุมล่างขวาของ firefox

3. คุณจะเห็น panel ของ firebug ขึ้นมา ซึ่งเป็นเป็นสามส่วน
   • ส่วนเมนูด้านบนสุดไว้เลือก mode
   • ส่วนพื้นที่ด้านซ้าย ในกรณีที่เป็นmode html และบาง mode จะมี พื้นที่ทางขวา 
4. click ที่ mode html บนเมนู จะเห็นพื้นทางด้านซ้ายเป็น code html และ พื้นทางขวาเป็น code css

5. คุณสามารถเข้าถึง css ในส่วน element ต่างได้ 2 วิธี คือ
1. การเข้าถึงโดยใช้ inspect ให้ click รูปไฟฉายบนเมนูทางด้านบนซ้าย จากนั้นนำ mouse ไปบริเวณหน้าเว็บจะเห็น เส้นขอบสีน้ำเงินเกิดขึ้นเป็นกรอบของ element ต่างๆเมื่อเจอ element ที่ต้องการแก้ไขให้ทำการ click ที่บริเวณ element นั้น จะเห็น code css ของ element นั้นๆทางด้าน พื้นที่ทางขวา

2. การเข้าถึงจาก code html ทางด้าน พื้นที่ทางซ้าย โดยการ click + เพื่อแตก element ให้นำ mouse เลื่อนผ่าน code html ทางพื้นที่ด้านซ้าย บริเวณ tag ใดที่ mouse เลื่อนผ่านก็จะเห็น การ mark เกิดขึ้นในบริเวณหน้าเว็บ เมื่อเจอ element ที่ต้องก็ click ที่ element นั้น code css จะแสดงใน พื้นที่ทางด้านขวา  
6. ทำการแก้ไข code css ได้เลยจะลบ จะเพิ่ม จะแก้อย่างไรก็ไม่ว่า
7. เมื่อแก้จนเรียบร้อยแล้วไปที่ mode css จากนั้นก็จะเห็น code css ทั้งหมด click ที่ edit จากนั้นก็ copy code css ทั้งหมดมาใส่ใน css editor ของ exteen


8. และแล้วคุณก็ทำได้

ถึงแม้ว่าเรามีเครื่องมือชิ้นนี้ แต่ไม่ควรประมาทควรบันทึก css อันเก่าทุกครั้งก่อนที่จะแก้ไข

Version 1.0 ยังไม่สมบูรณ์

คำอธิบายรูป

1. # แทน id ของ css เช่น #belly คือ <element id="belly">
2. . แทน class ของ css เช่น .entry คือ<element class="entry">
3. ในหนึ่ง element ที่มีทั้ง class และ id จะถูกเขียนให้อยู่ใน block เดียวกัน
4. สำหรับ #?1 คือ ชื่ออ้างอิงถึง id ซึ่งจะถูกอธิบายในด้านล่าง

เนื้อหาที่ถูกอ้างอิง

คุณสามารถข้ามส่วนนี้ไปได้ เหมาะสำหรับอ้างอิงศัพท์ของเทคนิคที่ใช้ในบทนี้
HTML อย่างย่อ

• HTML คือภาษาที่ถูกนำใช้ในในการแสดงผลของเว็บไซต์
• HTML จะกอบด้วยกลุ่มของ tag จำนวนมาก
• tag คือ รูปแบบที่ใช้กำหนดลักษณะของการแสดงผล แบ่งเป็น
  • tag เปิด ประกอบด้วย
    • เครื่องหมายน้อยกว่า "<"
    • ชื่อของรูปแบบหรือคำสั่ง มีชื่อเรียกว่า element เช่น html ,body,div
    • ชื่อของรูปแบบเพิ่มเติมหรือคำสั่งย่อย อาจจะมีหรือไม่มีก็ได้และมีได้มากกว่าหนึ่งตัวโดย แต่ละตัวจะถูกคั่นด้วย ช่องว่าง " " มีชื่อเรียกว่า attribute เช่น type,value,color
    • เครื่องหมายเท่ากับ "="
    • ค่าของ attributeใน เครื่องหมายคำพูด เช่น "test","red","text/css" ในกรณีที่มี attribute
    • เครื่องหมายข่องว่าง " " ในกรณีที่มี attribute หลายตัว
    • เครื่องหมายมากกว่า ">"
  • tag ปิด ประกอบด้วย
    • เครื่องหมายน้อยกว่า "<"
    • เครื่องหมายทับ "/"
    • ชื่อของรูปแบบหรือคำสั่ง เช่น html,span,script
    • เครื่องหมายมากกว่า ">"
  • tag เปิดและปิดในตัวเอง เช่น br,hr ประกอบด้วย
    • เครื่องหมายน้อยกว่า "<"
    • element
    • ช่องว่างและเครื่องหมาย ทบ " /"
    • เครื่องหมายมากกว่า ">"
• ถ้ามี tag เปิดต้องมี tag ปิดเสมอ
• ตัวอย่างของ tag
  • <a href="121212">asdasdasd</a>
  • <div id="baba" class="test">testest<div>
  • <br />
  • <hr />
• ตัวอย่าง HTML
  • <html>
    <body>
    The content of the body element is displayed in your browser.
    </body>
    </html>
  • <html>
    <body>
    
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    
    </body>
    </html>

เข้าใจ Exteen Layout

ส่วนของ #header คือตั้งแต่ส่วนที่เป็นชื่อ blog คำอธิบายจนไปถึงส่วนของรูปภาพ (#coverimage)

ส่วนของ #neck คือส่วนที่อยู่ถัดมาจาก #header แต่ก่อนส่วนเนื้อหา (#belly) ในส่วนจะเป็นที่อยู่ของ widget ทั้งหลายที่คุณใส่ในส่วน top menu จะอยู่ในส่วนนี้ เช่น ถ้าคุณใส่ widget สองตัวคุณจะเห็น .module ในส่วนนี้สองตัว

ส่วนของ #belly คือส่วนของเนื้อหาซึ่งแบ่งเป็น 2 ส่วนคือ

1. #sidebar และ #sidebar1 คือส่วนของเมนูด้านข้างทั้งข้างซ้ายและข้างขวา ในส่วนนี้จะพบ widget ที่คุณใส่ในส่วนของ#Sidebar1 และ #Sidebar2
2. #content คือส่วนของเนื้อหา และ ส่วนcomment ประกอบด้วย
   1. .entry เป็นส่วนเนื้อหาของ blog ประกอบด้วย
      • .title เป็นส่วนที่แสดงหัวข้อ(Title)
      • .post เป็นส่วนที่แสดงข้อความที่เป็นเนื้อหาของ blog
      • .info เป็นส่วนที่แสดง tag (.tag) และจำนวน comment (.coms)
   2. #commentform เป็นส่วนที่แสดง ฟอร์มสำหรับการแสดงความคิดเห็น
   3. .comment เป็นส่วนขอ แสดงความคิดเห็นต่างๆ ถ้าคุณมจำนวน comment ใน บทความคุณ 10 comment คุณก็จะเห็น element ที่มี .comment 10 ตัว โดยที่แต่ละตัวประกอบด้วย
      • .post เป็นส่วนของข้อความแสดงเห็นคิด
      • .info เป็นส่วนแสดงข้อมูลของผู้แสดงความคิดเห็น แบ่งเป็น
        • .avatar เป็นส่วนรูปภาพของผู้ comment
        • tag p ซึ่งแบ่งเป็น
          • .commentno เป็นส่วนหมายเลขลำดับความคิดเห็นเห็นก่อนหลัง
          • .commentator เป็นส่วนแสดงชื่อ blog ของเจ้าของ comment
      • .commentmanage เป็นส่วน จัดการ comment ของ เจ้าของ blog
   4. .nav คุณส่วนของการแบ่งหน้าจัดการหน้าเช่น next(หน้าถัดไป),prev(ก่อนหน้า),first(หน้าแรกสุด),last(หน้าหลังสุด)

ส่วนของ #leg เป็นส่วนของเมนูด้านล่าง อยู่หลังจาก เนื้อหา (#belly) แต่ก่อนส่วน copyright (#footer) ในส่วนนี้คุณจะเห็น widget ที่คุณใส่ในส่วนของ Bottom menu

ส่วนของ #footer เป็นส่วนแสดงข้อความ Powered by exteen ........

เนื้อหาครั้งนี้จะเชื่อมโยงกับครั้งหน้า โปรดติดตามตอนต่อไป