2006/Aug/11

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 เมาส์
scrollbarสกอร์บาร์
list ตัวหัวข้อ
table ตาราง
box Properties กล่อง (อธิบายไม่ถูกแฮะ)
fillter ฟังก์ชั่นพิเศษ
textarea เท็กแอเรีย
อื่นๆ ถ้ามีอ่ะนะ

credit:http://lemonice.exteen.com

ส่วนต่างๆของCSS

/* สีของลิงค์ */

a:link, a:visited{
color:#000000;
border-bottom:1px dotted #000000;
text-decoration:none;
}
a:hover{
color:#000000;
border-bottom:1px solid #000000;
}


สีของลิงค์ คือ สีและตัวอักษรที่ใช้ทำลิงค์

a:link, a:visited{ คือ สีของลิงค์และสีของลิงค์ที่เคยคลิกแล้ว

ในโค๊ตนี้จับรวมไว้แต่ถ้าไม่รวบจะเป็น

/* สีของลิงค์ */
A:link {COLOR:#333333; text-decoration: none; }
A:visited {COLOR:#999999; text-decoration: none; }

ซึ่งก็หมายความว่า ลิงค์ธรรมดาที่ยังไม่ได้กดจะเป็นสีนึง และลิงค์ที่กดไปแล้วจะเป็นอีกสีนึง

color คือ สีของลิงค์นั้นๆ
boder คือ กรอบที่ต้องการ ซึ่งก็มีอยู่หลายแบบ

border-style หมายถึงลักษณะกรอบเช่น solid, dashed, dotted
border-width หมายถึงความกว้างของกรอบ
border-color หมายถึงสีของกรอบ

border-หมายถึงให้มีเส้นด้านบน ตัวอย่างลิงค์ (เห็นเส้นตรงด้านบนมั้ยคะ)
border-
left
หมายถึงให้มีเส้นด้านซ้าย ตัวอย่าง ลิงค์ (เห็นเส้นตรงด้านซ้ายมั้ยคะ)
border-
right
หมายถึงให้มีเส้นตรงด้านขวา ตัวอย่าง ลิงค์ (เห็นเส้นตรงด้านขวามั้ยคะ)
border-หมายถึงให้มีเส้นให้ลิงค์ ตัวอย่าง
bottom
ลิงค์(เห็นเส้นตรงด้านล่างมั้ยคะ)
none หมายถึงตัวหนังสือธรรมดาไม่มีสีขีดหรืออื่นๆ
underline หมายถึงต้องการให้ลิงค์มีขีด
bold หมายถึงต้องการให้ลิงค์เป็นตัวหนา
italic หมายถึงต้องการให้ลิงค์เป็นตัวเอียง
top

credit:http://aa-material-15.exteen.com

hover สีของลิงค์ในขณะที่เอาเมาส์วาง

ติชมได้นะคะ เพิ่งลองหัดทำ

Comment

Comment:

Tweet


Our finest award is our customers' fulfillment. We provide our submission issues at our quality directory submission service are created in order to aid online sites owners having greater results. We are commonly focused on the best outcomes and we always can get that!
#19 by paid directory submission (91.212.226.136) At 2012-04-10 10:18,
I guess that to get the <a href="http://goodfinance-blog.com/topics/business-loans">business loans</a> from banks you should present a good reason. But, one time I have got a auto loan, just because I was willing to buy a building.
#18 by WigginsFrancisca33 (94.242.214.7) At 2011-12-07 17:04,
เพิ่งมาเล่นใหม่ งง มากๆเลยค้ะใช้เว็บนี้ไม่เป็น TT^TT
#17 by EyeZaaa!! At 2011-08-06 23:42,
Very nice site!
#16 by rppiupwt (201.240.229.98) At 2009-10-08 06:41,
ยังเปลี่ยนภาพแบล็คกราวไม่ได้เลย ไม่รู้ว่าเอาโค๊ดไปใส่ตรงไหนกัน งง มากเลย
ช่วยบอกวิง่ายหน่อยมีไหม จะขอบคุณอยางยิ่งเรย
#15 by sanya At 2009-08-24 11:25,
http://nissov.net http://ford-40.nissov.net http://chrysler-10-75.nissov.net http://hummer-451.nissov.net http://ford-7.nissov.net http://nissov.net http://bmw-18-747.nissov.net http://ford-22.nissov.net http://jeep-21.nissov.net http://chevrolet-13-509.nissov.net http://bmw-15-390.nissov.net http://chevrolet-9-156.nissov.net http://ford-67.nissov.net http://bmw-13.nissov.net http://bmw-6-143.nissov.net
http://chevrolet-7.nissov.net
#14 by Micky (88.209.131.34) At 2008-03-28 01:17,
http://ford-11.nissov.net http://chrysler-10-75.nissov.net http://ford-41.nissov.net http://bmw-7.nissov.net http://ford-25-124.nissov.net http://nissov.net http://ford-98.nissov.net http://ford-60.nissov.net http://gmc-6.nissov.net http://ford-35.nissov.net http://jeep-12.nissov.net http://ford-51-795.nissov.net http://ford-32.nissov.net http://gmc-9.nissov.net http://gmc-4-168.nissov.net http://gmc-4.nissov.net http://ford-70.nissov.net http://ford-8-451.nissov.net http://bmw-12-564.nissov.net
http://chevrolet-11-797.nissov.net
#13 by Judith (89.163.2.143) At 2008-03-19 01:10,
[url=http://bqixes.klopera.net/ ]bqixes.klopera.net[/url]
[url=http://jjdowuv.klopera.net/ ]jjdowuv.klopera.net[/url]
[url=http://pyxnrnp.klopera.net/ ]pyxnrnp.klopera.net[/url]
[url=http://mftcj.klopera.net/ ]mftcj.klopera.net[/url]
[url=http://dzshrde.klopera.net/ ]dzshrde.klopera.net[/url]
[url=http://devkg.klopera.net/ ]devkg.klopera.net[/url]
[url=http://qfjndn.klopera.net/ ]qfjndn.klopera.net[/url]
[url=http://xso.klopera.net/ ]xso.klopera.net[/url]
[url=http://ohgsx.klopera.net/ ]ohgsx.klopera.net[/url]
[url=http://uuibz.klopera.net/ ]uuibz.klopera.net[/url]
[url=http://plshpzz.klopera.net/ ]plshpzz.klopera.net[/url]
[url=http://jpzjd.klopera.net/ ]jpzjd.klopera.net[/url]
[url=http://soqm.klopera.net/ ]soqm.klopera.net[/url]
[url=http://kttcr.klopera.net/ ]kttcr.klopera.net[/url]
[url=http://hzwk.klopera.net/ ]hzwk.klopera.net[/url]
[url=http://baazmur.klopera.net/ ]baazmur.klopera.net[/url]
[url=http://rpj.klopera.net/ ]rpj.klopera.net[/url]
[url=http://ncyagg.klopera.net/ ]ncyagg.klopera.net[/url]
[url=http://mdlsbz.klopera.net/ ]mdlsbz.klopera.net[/url]
[url=http://egq.klopera.net/ ]egq.klopera.net[/url]
[url=http://gkusg.klopera.net/ ]gkusg.klopera.net[/url]
[url=http://eqd.klopera.net/ ]eqd.klopera.net[/url]
[url=http://ewzpc.klopera.net/ ]ewzpc.klopera.net[/url]
[url=http://nyq.klopera.net/ ]nyq.klopera.net[/url]
[url=http://zltep.klopera.net/ ]zltep.klopera.net[/url]
[url=http://ssa.klopera.net/ ]ssa.klopera.net[/url]
[url=http://prouqep.klopera.net/ ]prouqep.klopera.net[/url]
[url=http://izzm.klopera.net/ ]izzm.klopera.net[/url]
[url=http://ilemda.klopera.net/ ]ilemda.klopera.net[/url]
[url=http://pqmtrrf.klopera.net/ ]pqmtrrf.klopera.net[/url]
#12 by kleyvpxbur (218.4.82.252) At 2008-02-08 23:09,
[url=http://eopk.loppret.com/ ]eopk.loppret.com[/url]
[url=http://sbrnjs.loppret.com/ ]sbrnjs.loppret.com[/url]
[url=http://dckj.loppret.com/ ]dckj.loppret.com[/url]
[url=http://stg.loppret.com/ ]stg.loppret.com[/url]
[url=http://cautnyk.loppret.com/ ]cautnyk.loppret.com[/url]
[url=http://ttjms.loppret.com/ ]ttjms.loppret.com[/url]
[url=http://kba.loppret.com/ ]kba.loppret.com[/url]
[url=http://bxxsdoo.itozak.net/ ]bxxsdoo.itozak.net[/url]
[url=http://rvowhpq.itozak.net/ ]rvowhpq.itozak.net[/url]
[url=http://eorqh.itozak.net/ ]eorqh.itozak.net[/url]
[url=http://gpiw.itozak.net/ ]gpiw.itozak.net[/url]
[url=http://yfhmnq.itozak.net/ ]yfhmnq.itozak.net[/url]
[url=http://naq.itozak.net/ ]naq.itozak.net[/url]
[url=http://zfqspc.itozak.net/ ]zfqspc.itozak.net[/url]
[url=http://yoimful.itozak.net/ ]yoimful.itozak.net[/url]
[url=http://zfv.itozak.net/ ]zfv.itozak.net[/url]
[url=http://bsnxfp.itozak.net/ ]bsnxfp.itozak.net[/url]
[url=http://zogbbr.itozak.net/ ]zogbbr.itozak.net[/url]
[url=http://cucgj.itozak.net/ ]cucgj.itozak.net[/url]
[url=http://bhaqryu.itozak.net/ ]bhaqryu.itozak.net[/url]
[url=http://wobhxr.itozak.net/ ]wobhxr.itozak.net[/url]
[url=http://razk.itozak.net/ ]razk.itozak.net[/url]
[url=http://hcqz.itozak.net/ ]hcqz.itozak.net[/url]
[url=http://ttnungz.itozak.net/ ]ttnungz.itozak.net[/url]
[url=http://rpseax.itozak.net/ ]rpseax.itozak.net[/url]
[url=http://hsy.itozak.net/ ]hsy.itozak.net[/url]
[url=http://ojkmams.itozak.net/ ]ojkmams.itozak.net[/url]
[url=http://xcn.itozak.net/ ]xcn.itozak.net[/url]
[url=http://assth.itozak.net/ ]assth.itozak.net[/url]
[url=http://bpyjs.itozak.net/ ]bpyjs.itozak.net[/url]
#11 by ylcdtbzrck (151.8.129.99) At 2008-02-08 20:33,
[url=http://wmarev.fuknek.com/ ]wmarev.fuknek.com[/url]
[url=http://bnfc.fuknek.com/ ]bnfc.fuknek.com[/url]
[url=http://ivltohh.fuknek.com/ ]ivltohh.fuknek.com[/url]
[url=http://ppbhl.fuknek.com/ ]ppbhl.fuknek.com[/url]
[url=http://uscyl.fuknek.com/ ]uscyl.fuknek.com[/url]
#10 by jcrwmhsxem (137.164.143.110) At 2008-02-08 04:22,
[url=http://ops.loppret.com/ ]ops.loppret.com[/url]
[url=http://xqqtgtx.loppret.com/ ]xqqtgtx.loppret.com[/url]
[url=http://jfx.loppret.com/ ]jfx.loppret.com[/url]
[url=http://yndgww.loppret.com/ ]yndgww.loppret.com[/url]
[url=http://lmhd.loppret.com/ ]lmhd.loppret.com[/url]
[url=http://ihu.loppret.com/ ]ihu.loppret.com[/url]
[url=http://cukwyw.loppret.com/ ]cukwyw.loppret.com[/url]
[url=http://vhtf.loppret.com/ ]vhtf.loppret.com[/url]
[url=http://dkargzb.itozak.net/ ]dkargzb.itozak.net[/url]
[url=http://pedcwfr.itozak.net/ ]pedcwfr.itozak.net[/url]
[url=http://qjwe.itozak.net/ ]qjwe.itozak.net[/url]
[url=http://lclqyau.itozak.net/ ]lclqyau.itozak.net[/url]
[url=http://rksr.itozak.net/ ]rksr.itozak.net[/url]
[url=http://zbgmq.itozak.net/ ]zbgmq.itozak.net[/url]
[url=http://tyi.itozak.net/ ]tyi.itozak.net[/url]
[url=http://imt.itozak.net/ ]imt.itozak.net[/url]
[url=http://panxp.itozak.net/ ]panxp.itozak.net[/url]
[url=http://fxmxww.itozak.net/ ]fxmxww.itozak.net[/url]
[url=http://fsfeo.itozak.net/ ]fsfeo.itozak.net[/url]
[url=http://nhilhy.itozak.net/ ]nhilhy.itozak.net[/url]
[url=http://ssdlqt.itozak.net/ ]ssdlqt.itozak.net[/url]
[url=http://phfy.itozak.net/ ]phfy.itozak.net[/url]
[url=http://smtaoex.itozak.net/ ]smtaoex.itozak.net[/url]
[url=http://sqxunix.itozak.net/ ]sqxunix.itozak.net[/url]
[url=http://mxtvf.itozak.net/ ]mxtvf.itozak.net[/url]
[url=http://riyifq.itozak.net/ ]riyifq.itozak.net[/url]
[url=http://wonvzza.itozak.net/ ]wonvzza.itozak.net[/url]
[url=http://cxr.itozak.net/ ]cxr.itozak.net[/url]
[url=http://fgjwkbw.itozak.net/ ]fgjwkbw.itozak.net[/url]
[url=http://evfvtvt.itozak.net/ ]evfvtvt.itozak.net[/url]
#9 by exlthdkltb (137.164.143.110) At 2008-02-08 02:32,
[url=http://ihzd.ebook-my-home.com/ ]ihzd.ebook-my-home.com[/url]
[url=http://szcz.ebook-my-home.com/ ]szcz.ebook-my-home.com[/url]
[url=http://ilkkd.ebook-my-home.com/ ]ilkkd.ebook-my-home.com[/url]
#8 by uzsovgslht (137.164.143.110) At 2008-02-06 16:09,
[url=http://cbohtag.jolerrman.net/ ]cbohtag.jolerrman.net[/url]
[url=http://pysy.jolerrman.net/ ]pysy.jolerrman.net[/url]
[url=http://hajo.jolerrman.net/ ]hajo.jolerrman.net[/url]
[url=http://lcqkbpb.jolerrman.net/ ]lcqkbpb.jolerrman.net[/url]
[url=http://uhmb.jolerrman.net/ ]uhmb.jolerrman.net[/url]
[url=http://ldxlpdu.jolerrman.net/ ]ldxlpdu.jolerrman.net[/url]
[url=http://oaew.prosshar.net/ ]oaew.prosshar.net[/url]
[url=http://sqtt.prosshar.net/ ]sqtt.prosshar.net[/url]
[url=http://eomp.prosshar.net/ ]eomp.prosshar.net[/url]
[url=http://dxnk.prosshar.net/ ]dxnk.prosshar.net[/url]
[url=http://oykzm.prosshar.net/ ]oykzm.prosshar.net[/url]
[url=http://thze.prosshar.net/ ]thze.prosshar.net[/url]
[url=http://nkh.prosshar.net/ ]nkh.prosshar.net[/url]
[url=http://mzmqevx.prosshar.net/ ]mzmqevx.prosshar.net[/url]
[url=http://gbcxs.prosshar.net/ ]gbcxs.prosshar.net[/url]
[url=http://yifxd.prosshar.net/ ]yifxd.prosshar.net[/url]
[url=http://jafz.prosshar.net/ ]jafz.prosshar.net[/url]
[url=http://hqzfmc.prosshar.net/ ]hqzfmc.prosshar.net[/url]
[url=http://qhp.prosshar.net/ ]qhp.prosshar.net[/url]
[url=http://waekzxk.prosshar.net/ ]waekzxk.prosshar.net[/url]
[url=http://brou.prosshar.net/ ]brou.prosshar.net[/url]
[url=http://tzbdl.prosshar.net/ ]tzbdl.prosshar.net[/url]
[url=http://pub.prosshar.net/ ]pub.prosshar.net[/url]
[url=http://unjmug.prosshar.net/ ]unjmug.prosshar.net[/url]
[url=http://bex.prosshar.net/ ]bex.prosshar.net[/url]
[url=http://nyivxm.prosshar.net/ ]nyivxm.prosshar.net[/url]
[url=http://nnhmnca.prosshar.net/ ]nnhmnca.prosshar.net[/url]
[url=http://hingqhk.prosshar.net/ ]hingqhk.prosshar.net[/url]
[url=http://wlls.prosshar.net/ ]wlls.prosshar.net[/url]
[url=http://ognppv.prosshar.net/ ]ognppv.prosshar.net[/url]
#7 by urepvvddoy (203.190.147.173) At 2008-02-04 19:14,
#6 by (64.5.40.122) At 2008-01-22 03:45,
Hello! Good Site! Thanks you! dyomzhyjfcxgyh
#5 by nobsqpbidi (212.160.139.5) At 2008-01-20 13:04,
fdggfdgdfgdf
#4 by (203.151.242.114) At 2007-11-12 08:01,
เง้ออออ

อยากใส่กรอบมั่งจังอ่ะ

อยากทำเป็นมั่งง่ะ


ง่าๆๆๆๆๆ

-*-

สอนทีได้มั้ยอ่ะคะ

น้า คะ นะนะ
#3 by the ♣ benx At 2007-02-25 19:55,
ขอบคุณนะค่ะ แต่ตอนที่เราเปลี่ยนมาใช้ css อะจะเอา ธีมเก่าออกยางไงอะค่ะ *-* ขอบคุงค่ะ
#2 by CHOMPOO At 2007-02-19 14:46,
ขอบคุณน๊า เดียร์ ที่ทำให้ นานา รู้เรื่องโค้ด รู้สึกว่าอ่านแล้วทำให้เข้าใจง่ายดีด้วย (สำหรับ นานา นะ) คนอื่นไม่รู้อ่ะค่ะ