[CSS]CSS Code เบื้องต้น

posted on 11 Jun 2011 18:37 by l2ikimaru in CSS
สวัสดีขอรับ
 
ตอนแรกก็ยังไม่รู้ว่าจะเขียนเรื่องนี้ดีรึเปล่า เอาเป็นว่ายังไงก็เขียนขึ้นมาแล้ว ^^"
 
ขออธิบายตามแบบที่ผมเข้าใจเลยละกันนะฮะ แล้วก็คิดว่าแบบนี้น่าจะเข้าใจง่ายดี
 
ถ้าเนื้อหาส่วนใดผิดไปก็ต้อขออภัยแล้วกันครับ
 
----------------------------------------------------------------------------------------
 
หลายๆคนที่ย้ายเข้ามาใหม่คงจะงงๆกับ CSS แล้วก็คิดว่ายาก ไม่อยากไปแก้อะไรมากเพราะกลัวเจ๊ง
 
ได้แต่แก้ตรง Colors & Pictures
 
ตอนแรกๆผมก็คิดเหมือนกันว่ามันยากนะ แต่ก็พยายามอ่านเอ็นทรี่ต่างๆเกี่ยวกับ CSS แล้วก็ลองผิดลองถูกไปเรื่อยๆ
 
ค่อยๆแก้ไปทีละนิด แล้วก็ Refresh ดู ว่ามันได้อย่างที่เราคิดรึเปล่า ตอนนี้ก็เริ่มใช้เป็นแล้ว มันไม่ยากอย่างที่คิดนะ
 
คล้ายๆกับ Code HTML นั่นแหละ
 
เราลองมาดูตัวอย่าง CSS กันก่อนครับ
 
 
อันนี้เป็นตัวอย่างคร่าวๆนะครับ
 
ถ้าเราเข้าไปที่หน้า css เราจะเห็นตัวอักษร 4 สีหลักด้วยกัน
 
คือ สีเทา สีแดง สีน้ำเงินเข้ม สีน้ำเงินอ่อน
 
ผมขออธิบายตรงนี้ก่อนนะครับ
 
4 สีนี้ จะแบ่งได้ 3 ส่วนด้วยกัน
 
1.สีน้ำเงินเข้ม (ในรูปคือ body{ }) จะเป็นตัวบอกเราว่า เรากำลังแก้โค้ดส่วนไหนของบล็อกอยู่ครับ อย่างอันนี้ก็คือส่วน body นั่นเอง
 
2. สีน้ำเงินและสีแดง คือส่วนคำสั่งต่างๆ เช่น background:#c7e1e9; ตามภาพ ก็คือเป็นการสั่งให้มีพื้นหลังเป็นสีนั้นๆครับ
 
3.สีเทา คือ เป็นสีที่ไม่มีผลอะไรเลยกับบล็อกของเราครับ ความจริงแล้วสามารถลบตัวหนังสือสีเทาใน css ออกได้ทั้งหมดเลย เพราะมันไม่ใช่ส่วนแสดงผล แต่มีไว้เพื่อบอกให้เรารู้คร่าวๆว่าเรากำลังแต่งธีมส่วนไหน อะไรบ้าง ครับ
 
ถ้าท่านรู้จักแค่ 2 ส่วนแรก ท่านก็แต่งธีมสบายมากแล้วครับ
 
----------------------------------------------
 
ทีนี้เรามารู้จักส่วนที่ 2 กันก่อนครับ คือส่วนของคำสั่ง
 
คำสั่งใน css ความจริงแล้วมีเยอะแยะมากมาย เอามาลงใน entry นี้ไม่หมดหรอกครับ ต้องลองศึกษาเพิ่มเติมเอง
 
แต่ผมจะลงอันที่ใช้กันบ่อยๆแล้วกันครับ
 
1.background อันนี้หลายคนคงคุ้นเคยดี เป็นคำสั่งสำหรับแก้พื้นหลัง โดยเราสามารถใส่ค่าได้ 3 แบบ คือ
  • ใส่ชื่อสี เช่น background:black; background:orange;
  • ใส่โค้ดสี เช่น background:#EEE; background:5E3F7C;
  • ใส่เป็นูปภาพ ใช้โค้ด background:url(ลิ้งค์รูป) x; ตรงตัว x เราสามารถใส่ค่าได้หลายค่า เช่น no-repeat คือไม่ให้รูปนั้นแสดงซ้ำ / repeat-x คือให้มันแสดงซ้ำตามแกน x(แนวนอน) / repeat-y คือให้มันแสดงซ้ำตามแกน y (แนวตั้ง) / fixed คือ ให้ภาพพื้นหลังไม่เลื่อน เวลาเราเลื่อน scrollbar เป็นต้น 

2.width คือการกำหนดความกว้างของสิ่งต่างๆ ใส่ได้ทั้งเป็น px และ %

3.height คือการกำหนดความสูงครับ

4.float คือการกำหนดตำแหน่งของสิ่งๆนั้น เช่น float:left; ก็คือให้มันชิดซ้าย

5.color เป็นการกำหนดสีของตัวอักษร ใส่ได้ทั้งโค้ดสี และ ชื่อสี ครับ

6.display เป็นการกำหนดการแสดงผลของสิ่งต่างๆ เช่น display:none; คือไม่ให้มันแสดงผล เป็นต้น

7.margin&padding เป็นการเว้นระยะห่าง อ่านรายละเอียดตามนี้นะครับ คลิก

8.font เป็นการกำหนดค่าต่างๆของตัวอักษร เช่น font:12px Verdana; ก็คือการกำหนดตัวอักษรให้เปฤ็นขนาด 12px เป็นฟอนท์ Verdana เป็นต้น

9.border เป็นการกำหนดค่าเส้นขอบ โดยใช้ border:ขนาด รูปแบบ สี; เช่น border:2px solid #EEE; เป็นต้น รูปแบบมีหลายรูปแบบ แต่ที่นิยมที่สุดคือ solid กับ dotted ครับ ลองดูรูปแบบกัน

(ขอบคุณภาพจากบล็อกท่าน warrantica ครับ)

 

--------------------------------------

 

ทีนี้หลายคนทราบคำสั่งต่างๆดีอยู่แล้ว แต่ว่าไม่รู้เกี่ยวกับหัวข้อ(สีน้ำเงินเข้ม)

เช่น ไม่รู้ว่า #neck คืออะไร ไม่รู้ว่า #comment คืออะไร เป็นต้น

ผมเอาโครงสร้างมาบอกคร่าวๆแล้วกันนะครับ

 

อันนี้คือโครงสร้างหลักๆนะครับ

แต่ว่าบางทีหัวข้อย่อยๆบางคนก็ยังไม่รู้อยู่ดีว่ามันคืออะไร ผมมีวิธีครับ...

เช่น #header h2 เรารู้อยู่แล้วว่ามันอยู่ใน พท.สีแดงด้านบนแน่นอน แต่เราไม่รู้ว่าส่วนไหน

ผมแนะนำ ให้ลองใส่ตัวเลขเวอร์ๆไว้ก่อนเลยครับ อย่างเช่นเราลองใส่ font size เป็น 50px แล้วกด preview ดูครับ

ผลออกมาได้เป็นอย่างนี้ ทีนี้เราก็ทราบแล้วว่า #header h2 คือส่วนไหน ส่วนหัวบล็อกย่อยนั่นเองครับ :3

 

อีกวิธีหนึ่งคือ ให้ลองใส่ border ลงไปครับ เช่น เราไม่รู้ว่า #neck .module คือส่วนไหน

ให้เราลองใส่ คำสั่ง border ลงไป เช่น เอา border:1px solid black; ไปใส่ใน #neck .module ครับ จากนั้นกด preview ดู

เท่านี้ก็ทราบแล้วครับ ว่าคือส่วนใด :3

 

ลองนำไปใช้ดูนะครับCool

หวังว่า Entry นี้คงเป็นประโยชน์ไม่มากก็น้อย สำหรับคนที่คิดว่า CSS นั้นยาก :3

------------------------------------------

ปล. ถ้ามีคำถามก็คอมเมนท์ทิ้งเอาไว้นะครับ เดี๋ยวอาจจะเอาลง Entry หน้าครับ
ปล2. CSS มันต้องลองผิดลองถูกครับ คนที่ยังไม่ชำนาญต้องลองแก้ทีละนิดๆ แล้ว preview ดู ว่าใช่อย่างที่เราต้องการไหม
ปล3. ความจริง Entry นี้เขียนเสร็จนานแล้วแต่ server ล่มครับCry ต้องนั่งเขียนใหม่หมดTongue out
ปล4. ถ้ามีข้อผิดพลาดก็บอกได้นะครับCool
ปล5. ขอบคุณที่แวะเข้ามาอ่านและคอมเมนท์ฮะ

Comment

Comment:

Tweet

#162 By (187.33.255.70|148.251.92.48, 187.33.255.70) on 2014-08-06 10:53

#161 By (187.33.255.70|148.251.92.48, 187.33.255.70) on 2014-08-06 10:52

#160 By (187.33.255.70|148.251.92.48, 187.33.255.70) on 2014-08-06 10:51

cheap viagra tablets , kuc , prednisone tab 5 mg , 040413 , viagra cialis levitra , %(( , pills viagra canada , 18415 , book buy online order viagra , 620204 , 5mg cialis online , zuih , generic zithromax , qcprxz , viagra price cost , zbeg ,

#158 By cialis online from dreampharmaceuticals (124.82.85.225|124.82.85.225) on 2014-01-06 15:19

cialis 20 mg 10 pills , 1940 , serotonin viagra sale , 4136 , viagra for ed , updp , synthroid medication time to take , lpgpxa , prescription-free viagra , 472 , cialis gel tab , acn , generic viagra cheapest uk , :[[ ,

#157 By cialis sales canada (180.13.37.18|180.13.37.18) on 2014-01-05 16:50

Thanks for sharing, this is a fantastic blog.Really thank you! Awesome.

#156 By bottes cuir homme soldes (202.105.61.227) on 2013-11-03 15:58

I loved your post.Thanks Again. Really Great.

#155 By chaussures ugg pas cher (202.105.61.227) on 2013-11-02 05:33

FpSeCK http://www.MHyzKpN7h4ERauvS72jUbdI0HeKxuZom.com

#154 By JRoILhLnIDEcwBGRE (153.177.169.71) on 2013-10-02 10:22

index.php?act=ST&f=

#153 By veste burberry matelassé (14.150.73.132) on 2013-10-01 12:43

i cant believe courtney cox and david arquette are getting a divorce! they were together for 11 years!

#152 By colony.co.il (216.244.78.70, 112.90.197.49) on 2013-10-01 04:27

Im here this blog for 1st time. I very much enjoy your content. For sure you got returning user.

#151 By www.excelcolours.com (216.244.78.70, 60.48.203.60) on 2013-09-27 23:14

WONDERFUL Post.thanks for share..more wait .. ;)

#150 By crownadvice.be (119.46.90.28) on 2013-09-26 23:26

Domain tools Lookup Whois websites

#149 By OMEGA オメガ時計 偽物 (60.7.5.43) on 2013-09-26 18:47

I ask all my buddies to pay a visit to this weblog. and I hope theyll definitely like..

#148 By kimico.com.mk (192.34.108.164, 177.159.214.66) on 2013-09-26 18:25

You had some nice points here

#147 By windows 7 ultimate product key (216.244.78.70, 37.29.81.34) on 2013-09-24 07:12

http://www.aktuarforeningen.dk/js/pjs1.aspparajumpers danmark
parajumpers jakke http://www.aktuarforeningen.dk/js/pjs1.asp

#146 By parajumpers jakke (142.4.113.57) on 2013-09-09 04:36

Current blog, fresh information, I read it from time to time!!

#145 By burberry france boutique (219.136.102.70) on 2013-08-28 18:24

Bookmarked!!, I like your website!

#144 By maillot de foot pas cher (202.103.133.187) on 2013-08-23 00:03

community/viewTopic/

#143 By maillot angleterre 2012 (14.150.72.155) on 2013-08-16 13:01

Why is there such a good post!

#142 By Windows Ultimate Product Key (216.244.73.153, 200.80.226.29) on 2013-08-16 05:30

taking time and real effort to make a good article. Cool!

#141 By Windows 8 Ultimate Product Key (186.91.174.32) on 2013-08-16 03:11

I to thank you for this good article .I for sure loved every little bit of it. I have you bookmarked your web site to look at the current stuff you place.

#140 By Windows+7+Key (77.175.44.166) on 2013-08-16 00:15

666666666666666666666
costume gucci uomo http://www.stmk8.com/costume-gucci-uomo-acquista-authentic-costume-gucci-uomo-negozio/

#139 By costume gucci uomo (120.37.238.62) on 2013-08-11 07:19

777777777777777777777
<a href="http://www.stmk8.com/gucci-sandali-vendita-economici-gucci-sandali-website-vendita/" title="gucci sandali">gucci sandali</a>

#138 By gucci sandali (120.37.238.62) on 2013-08-11 06:57

Kiev escorts

#137 By Windows 7 Serial (192.34.108.164, 218.22.71.210) on 2013-08-11 05:08

555555555555555555555
gucci sito http://www.stmk8.com/gucci-sito-authentic-gucci-sito-negozio/

#136 By gucci sito (120.37.238.62) on 2013-08-10 15:17

Dakota Black

#135 By Windows 8 (192.34.108.164, 218.240.54.147) on 2013-08-10 10:11

Helloo we like your theme very much tweeted ya! thank you

#134 By Product Key For Windows 7 Ultimate (216.244.78.70, 196.212.75.123) on 2013-08-10 03:30

produced information. find stuff like this came across your post I have a presentation, and always looking for.

#133 By Windows Ultimate Product Key (190.38.177.47) on 2013-08-09 23:20

Bookmarking now thanks, found you through Bing.

#132 By Windows 7 Home premium Key (216.244.78.70, 88.255.149.27) on 2013-08-09 21:31

You should definately write more about this! Please!

#131 By Windows 7 Professional Upgrade Key (120.3.4.154) on 2013-08-08 14:17

888888888888888888888
<a href="http://www.azzaradesigns.com/%e7%a0%b4%e6%a0%bc%e3%81%ae%e6%bf%80%e5%ae%89%e4%be%a1%e6%a0%bc-%e3%82%b0%e3%83%83%e3%83%81-%e3%83%9e%e3%83%95%e3%83%a9%e3%83%bc-%e3%83%a1%e3%83%b3%e3%82%ba-%e6%b4%bb%e5%8b%95%e9%96%8b%e5%82%ac/" title="å ޥե` ">å ޥե` </a>

#130 By å ޥե` (27.159.201.180) on 2013-08-08 14:07

Have you ever considered getting in touch with a good seo company to see if you can improve your ranking?

#129 By Windows 8 Professional 64 bit Product Key (180.174.33.35) on 2013-08-08 13:58

Minxxx Studios

#128 By Windows 7 Professional (180.125.2.58) on 2013-08-08 13:39

000000000000000000000
å `ɥѥե http://www.azzaradesigns.com/%e6%ad%a3%e8%a6%8f%e5%93%81%e9%80%9a%e8%b2%a9%e5%ba%97-%e3%82%b0%e3%83%83%e3%83%81-%e3%82%aa%e3%83%bc%e3%83%89%e3%83%91%e3%83%ab%e3%83%95%e3%82%a1%e3%83%a0-%e5%85%a8%e5%9b%bd%e8%bf%85%e9%80%9f/

#127 By å `ɥѥե (27.159.201.180) on 2013-08-08 11:05

111111111111111111111
<a href="http://www.azzaradesigns.com/%e6%a8%a1%e8%8c%83%e5%ba%97-%e3%82%b0%e3%83%83%e3%83%81-%e3%83%81%e3%83%a7%e3%82%b3%e3%83%ac%e3%83%bc%e3%83%88-%e7%b5%b6%e5%af%be%e3%81%ae%e8%87%aa%e4%bf%a1/" title="å ԩ`">å ԩ`</a>

#126 By å ԩ` (27.159.201.180) on 2013-08-08 10:10

Such an amazing Post! I Truly Appreciate reading it, very good insights, the Post is very ell-said. A thumbs up!

#125 By Windows 7 Product (175.20.62.35) on 2013-08-07 07:03

you know what is wrong with the world? no one cares about important stuff anymore? its all about which celebrity has a ha ha ha tape, which celebrity is sleeping with who? why doesnt the media care about important things and give them press?

#124 By Windows 7 Product (216.244.75.215, 197.160.66.96) on 2013-08-06 21:07

Fantastic submit ! I must recognize once you update your site, how can i subscribe for a website?.That helped me a ton. I became small amount aware about this your article set it up very clear notion

#123 By Windows 7 Professional (216.244.78.70, 183.13.68.79) on 2013-08-05 02:35

Be as smart as you can, but remember that it is always better to be wise than to be smart

#122 By Windows 8 Activation (180.122.166.52) on 2013-08-05 02:02

Took me ages to find this post, this time Ill bookmark it.

#121 By Windows 8 Product Key (111.15.67.81) on 2013-08-04 21:30

Diary of a Nanny

#120 By Windows 8 Activation Key (182.89.236.237) on 2013-08-04 21:06

515078681735741738842 gucci outlet locations http://www.tapho.co/gucci-outlet-locations-buy-new-gucci-outlet-locations-for-sale/

#119 By http://www.tapho.co/gucci-outlet-locations-buy-new-gucci-outlet-locations-for-sale/ (27.159.254.157) on 2013-08-04 15:04

Pretty good article. I just stumbled upon your site and wanted to say that I have really enjoyed reading your blog posts. Any way Ill be coming back and I hope you post again soon.

#118 By Windows 7 Professional Key (216.244.78.70, 218.164.96.194) on 2013-08-04 05:59

Great site you have here!

#117 By Windows 8 Product (125.40.90.142) on 2013-08-04 04:14

Adding to my bookmarks thanks. A good quick read.

#116 By Windows 7 Ultimate (115.212.92.30) on 2013-08-04 02:41

Nice!! Great Ifo. Great People. Great Blog. Thank you for all the great sharing that is being done here.

#115 By loads.us1industries.com (190.73.233.129) on 2013-08-04 01:02

BNGbfbfdsdvb best louis vuitton

#114 By http://www.leqiz.com/louis-vuitton-iphone-case/ (120.33.220.185) on 2013-08-01 19:12

dbfdbdbfdb sale louis vuitton

#113 By http://www.leqiz.com/louis-vuitton-outlet/ (27.159.198.171) on 2013-08-01 17:25