CSS : What's it?

posted on 27 Mar 2006 11:37 by lemonice  in TuTorial
มาแล้ว ๆ...คอร์สสอน CSS ก่อนที่จะเริ่ม เราก็ต้องมาคุยกันก่อนว่า
คอร์สที่จะสอนต่อไปนี้จะเป็นการอธิบายถึงคำสั่งต่างๆที่ใช้ โดยแบ่งเป็น
หมวดต่างๆ ซึ่งเราจะสอนแบบให้นำไปประยุกต์ใช้กันเอง
ไม่เน้นการทำ
Work shop อย่างที่ผ่านมา หมายถึงว่าสอนแล้วก็
ตนเป็นที่พึ่งแห่งตนน่ะ ทุกท่าน

ใน Episode แรกนี้ เราจะเริ่มด้วยการอธิบายว่า CSS คืออะไร
ส่วนคนที่คันไม้คันมือแล้วก็ใจเย็นๆนะ
มาเริ่มกันเลยดีก่านะ

CSS คืออะไรอ่ะ ?
CSS ย่อมาจากคำว่า Cascading Style Sheets โดยทั่วไปก็จะเรียก
CSSหรือไม่ก็ Style Sheets ฉะนั้นโปรดเข้าใจว่ามามันคือตัวเดียวกัน
CSS แนะนำและสนับสนุนโดย
Microsoft internet explorer 3.0
และ Netscape 4.0 เป็นต้นมา
เป็นวิธีการกำหนดการแสดงผลของสิ่งต่างบนเว็บ เช่น ลักษณะอักษร
ขนาด สี พื้นหนัง ถ้าใครเคยศึกษาภาษา Html มา มันก็คือ
tag <font> นั่นเอง แต่เราสามารถใช้ CSS แทนได้


CSS มีประโยชน์ยังไงอ่ะ ?
  • CSS มีคุณสมบัติมากกว่า tag ของ html
    เช่นการกำหนดกรอบให้ข้อความ รวมทั้งสี
    รูปแบบของข้อความที่กล่าวมาแล้ว
  • CSS นั้นกำหนดที่ต้นของไฟล์ html
    หรือตำแหน่งอื่น ๆ ก็ได้ และสามารถมีผล
    กับเอกสารทั้งหมด
    หมายถึงกำหนด
    ครั้งเดียวจุดเดียวก็มีผลกับการแสดงผลทั้งหมด
    ทำให้เวลาแก้ไขหรือปรับปรุงทำได้สะดวก
    ไม่ต้องไล่ตามแก้ tag ต่างๆ ทั่วทั้งเอกสาร
  • CSS สามารถกำหนดแยกไว้ต่างหากจาก
    ไฟล์เอกสาร html และสามารถนำมาใช้ร่วม
    กับเอกสารหลายไฟล์ได้
    การแก้ไขก็แก้เพียง
    จุดเดียวก็มีผลกับเอกสารทั้งหมดได้

เนื้อหาจะแบ่งเป็นอะไรบ้างอ่ะ ?

  • Background พื้นหลัง
  • border ขอบ /กรอบ
  • Cursor เมาส์
  • Scroll bar
  • List ตัวหัวข้อ
  • Table ตาราง
  • Fillter ฟังก์ชั่นพิเศษ
  • อื่นๆ ถ้ามีอ่ะนะ

เราจะใส่โค้ดลงตรงไหนอ่ะ

. Name { Code }


Name
เป็นส่วนของชื่อของ CSS ซึ่งจะนำไปใช้กับส่วนต่างๆ
ซึ่งใน Exteen จะตั้งชื่อให้สัมพันธ์กับส่วนที่นำไปใช้
Code จะอยู่ภายในสัญลักษณ์ { } เป็นการกำหนดลักษณะในส่วนนั้นๆ


เอาล่ะวันนี้เอากัน คร่าวๆก่อนดีกว่า
พรุ่งนี้จะเริ่มเนื้อหากันจริงๆแล้วนะ


edit @ 2006/05/15 14:34:41

Comment



smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry

มานั่งเรียน

#1 By Yashima on 2006-03-27 11:48

แต้งค์กิ้ว...
รออยู่นะค๊า
เอาเทคนิคแยะๆ จะได้มาใช้กะBlogได้
ขอเปนแบบอธิบายวิธีทำโค้ตด้วยนะค๊า

#3 By น้ำ on 2006-03-27 11:57

ตามมาเรียน

(เข้าสายนะเนี่ย เหอเหอ)

#4 By JaPaN♀ on 2006-03-27 12:27

อ่านแล้วก้อยังงงๆ อยู่ แต่จะพยายามทำความเข้าใจค่ะ ท่านอาจารย์

ทรายมาค่ะ

#5 By 貴寛・智寛・寛樹 on 2006-03-27 12:53

พี่นั่งที่โต๊ะรอเรียนอยู่นะ

#6 By ๏~ G♥J ~๏ on 2006-03-27 12:59

ตีตั๋วรอเรียนค่า
เจ้าชายปีศาจรายงานตัวงับ บทแรกของวันนี้ ยังเกริ่นๆอยู่
แล้วพรุ่งนี้จะมาเรียนใหม่ฮับ ชะแว้บบบ
มารอเรียนตอนต่อไปจ๊า

#9 By [M]iKaC[H]aN.... on 2006-03-27 17:24

จะมาติดตามต่อไปค่า ^^

#10 By ★+::+@MilY+::+★ on 2006-03-27 18:01

น่าหนุกๆ^ ^ มาเข้าเรียนตรงเวลาแล้วนะงับ รายงานตัวๆ
ตามมาเรียนงับ
รู้สึก CSS จะดีกว่า html แฮะ =o=
/me เหลือบไปมอง CSS ในบล็อก เอ... ก็มีคำสั่งที่อยู่ใต้ {} จริงแฮะ เอิ๊กๆ

ต่อเร็วๆน้า ><"

#12 By ||- Kutzuki -|| on 2006-03-27 18:40

ได้ความรู้เพิ่มขึ้น หลังจากงงๆกับคำว่า css มานาน 555+

รอติดตามตอนต่อไปค่า~

#13 By ~ป.ปลาตากลม~ on 2006-03-27 19:00

งับ เค้าจะเตรียมตัวจ้า

#14 By Linnoy--^o^ on 2006-03-27 21:30

......อ่า.....ละเอียดดีจัง...ชอบๆๆ

#15 By ---ParodY---(="=)--- on 2006-03-27 21:53

เปิดคอร์สเร็วทันใจจัง
แอบคล้าวแฮะเรา ต้องอ่านทวนหลายๆรอบ

#16 By Ryuuzaki ThE ElementO on 2006-03-27 22:10

สอนในส่วนที่ผมอยากเรียนมากๆเลยนะเนี่ย ตอนนี้กำลังสนใจตรงส่วน ของScroll mouse และ commentbox
รอติดตามตอนต่อไป

#17 By chonchonjung on 2006-03-28 10:46

ท่าทางละเอียดน่าดูชมเลยแฮะ

/me นั่งรอเรียน

ปลใ ขอแอดบล็อกค่ะ
มาเรียนด้วยคนค่ะ

#19 By ส้ม (61.90.234.77) on 2006-03-29 12:57

อ่า...ยังมี งง อยู่บ้างแต่ก็จะพยายามเข้าใจเน้อ คือ ไอ้เรื่องBGก็ทำความเข้าใจเป็น ชม. คราว นี้มาเรื่องระหัสอีก แต่บล็อกเราก็สำเร็จได้พเราะ ท่านเมือนกันที่จิง เข้ามาเรียน(?)ในบล็อกนี้บ่อยนะแต่ไม่ได้เม้นให้ เอาเป็นว่า บล็อกของท่านมีพระคุณกะบล็อกของเราอย่ามากละกัน เอาเป็นว่าจะมาเรียนอีก
PS.ไปดูผลการเรียนการสอนที่บล็อกน๊า

#20 By kim //Wizard\\ โอเย่!!! on 2006-03-31 15:47

อ่าค่า เรียนๆ

ช่วงนี้ไปไหน มีแต่คนธีมสวยๆ ทั้งนั้นเลยหงะ
คือส่วนสอนวิธีทำ categories หน่อยครับ ไม่เคยทำสำเร็จซะที ทำยังไงก้อเป็นหน้าเปล่าครับ ช่วยหน่อยนะครับ ขอบคุณ soletukky66@hotmail.com

#22 By chemeng#12 (203.158.4.135 /203.158.4.202) on 2006-04-06 00:03

ขอบคุณค่ะ แล้วจะมาเรียนต่อนะคะ^^
งงจิงๆค่ะ อาจารย์เต้

#24 By !!วุ้นเส้น!! on 2006-04-10 16:10

ขอนั่งหลังสุดละกัน..อิอิ

#25 By chonan (210.86.185.21) on 2006-04-15 11:09

เริ่มเข้าใจนิดส์ แร้ววค่ะ

ขอบคุนที่สอนนะค่ะ

#26 By Noy♥Yamapi♥Yuya on 2006-04-30 12:54

เข้า Class นั่งเรียนด้วยคนนะเจ้าค่ะ

#27 By -LunarNeko- on 2006-05-20 23:19

อย่าเพิ่งท้อนะค่ะ
ยางมีคนม่ะรุ้เรื่องอีกมากมายค่ะ

#28 By sunday-z (203.118.93.123) on 2006-05-23 14:39

อือ ดีทีเดียวครับ ผมเขียนเว็บเหมือนกัน แต่ไปหนักที่ PHP มากกว่า

#29 By Yimp on 2006-05-28 09:49

ตามหามานาน แต่ไม่รู้จะมีเวลาศึกษาซักแค่ไหน

ยังไงก็ขอ add fav ไว้ก่อน จะได้แวะกลับมาเรื่อยๆ

#30 By cinamania on 2006-06-10 16:08

ดีเรยคร้าบ อยากรู้จักอยู๋พอดี
แล้วมานเอาไปใช้กับดรีมวีเวอได้มั้ยอ่ะ

#31 By .-: [N]_oTT:-. on 2006-06-13 14:42


ขอบคุณนะคะ

#32 By moodee on 2006-07-09 15:48

ขอบคุณค้า....

#33 By (8_8) (203.170.236.162) on 2006-11-08 15:05

น่ารักมากเลยอะ ชอบๆๆๆๆๆๆๆๆๆๆ
sailove2-136_@hotmail.com

#34 By ซาลาเปาไส้หมูไข่เค็ม (58.9.17.178) on 2006-12-08 22:18

#35 By (222.123.143.40) on 2007-07-23 22:07

เรียนๆๆ เรียนด้วยนะก๊ะ
มีประโยชน์หลายbig smile

#37 By I-HERE-YUI on 2008-02-10 08:48

บล็อกนี้มีประโยชน์มากมายเลยเจ้ามะฮะ
ขอแอดไว้เน่อ ^ ^

#38 By เจ้ามะฮะ on 2008-03-12 17:54

ขอบคุณคะ ได้ความรู้ดีจัง

#39 By Peeraya (125.24.56.218) on 2008-03-12 22:09

ขอบคุณค่ะ

#40 By (202.91.19.201) on 2008-03-28 08:36

ขอบคุณคะ

#41 By R@yrena on 2008-04-11 00:19