F0NTCAMP02 | เบซิกเบสิก CSS

โบว์ · 17 ส.ค. 2009, 11:20 น.

สาระมาแล้ว ไปก่อนดีกว่า

กวางจ้ะ · 17 ส.ค. 2009, 11:20 น.

สูตรโกงการดูโค้ด css แบบเปิดกระโหลก

เข้า google ใช้ keyword : css cheat sheet

X11 · 17 ส.ค. 2009, 11:21 น.

อ้างคำพูดจาก: หนูอร เมื่อ 17 ส.ค. 2009, 11:12 น.
ขอบคุณจ้า

ตอนพิมพ์กด "" ก่อนแล้วค่อยใส่ค่าน่ะ มันเลยมีโอกาสหลุดมาก
ชีวิตจริงเจอแบบนี้ เขียนให้ตายมันก็จะไม่ขึ้น อย่าเลียนแบบนะคะ

ตรงไหนผิดอะไรบอกได้ลยนะคะ จะได้มาแก้เลย

เวลาพิมพ์พี่ก็กด "" (เช่น style="" ) แบบนี้รอก่อนเหมือนกันแหละจ้า เพื่อไม่ให้เครื่องหมายคำพูดมันขาดคู่ แล้วค่อยเอา cursor ย้อนกลับไปตรงระหว่างเครื่องหมายคำพูดสองอันแล้วค่อยพิมพ์
เพราะถ้าพิมพ์เครื่องหมายคำพูดเปิดค้างเอาไว้ โอกาสลืมปิดจะสูง ถ้าเป็นโปรแกรมก็จะ error

เดอะบุ๋ม · 17 ส.ค. 2009, 11:22 น.

แลคเชอร์ได้สุดยอดมากอ่ะ

หนูอร · 17 ส.ค. 2009, 11:24 น.

คำสั่ง div

คือการกำหนดขอบเขตส่วนที่ต้องการจะสั่งคำสั่ง (โดยให้นึกถึงคำว่า divide หรือ division ที่เแปลว่าแบ่ง) เวลาใส่ div ไปใน HTML ..มันจะไม่มีผลจนกว่าจะมีการกำหนดคำสั่งว่าสิ่งที่จะแสดงใน div นั้นจะออกมามีหน้าตายังไง โดยตัวคำสั่ง div เองจะมีหน้าตาแบบนี้

โค้ด เลือกทั้งหมด


<div> </div>

ในที่นี้จะแบ่งออกเป็น 2 หัวข้อเพื่อแยกคำสั่ง class และ id

การกำหนด class

Class นั้นสามารถกำหนด class กับส่วนไหนก็ได้ โดยจะถูกตั้งค่าเพื่อให้เนื้อหาที่อยู่ใน class นั้นนำการตั้งค่านั้นมาใช้ โดยเริ่มต้นจากการตั้งชื่อ class แล้วกำหนดค่าสีหรือรูปแบบที่ต้องการให้ใช้งาน โดยเราต้องตั้ง class ในไฟล์งาน แล้วใส่คำสั่ง class ใน CSS

หน้าที่เป็นไฟล์งานเราตั้งชื่อไว้ว่ามี xxx yyy zzz

โค้ด เลือกทั้งหมด


<html>
     <head>
          <link rel="stylesheet" type="text/css" href="anna.css" />
     </head>
     <body class="zzz">
   	   <p class="xxx">hello</p>
	   <p class="yyy">hello</p>
     </body>
</html>

ส่วน CSS ชื่อ anna.css ก็ใส่ค่าที่อยากกำหนดสำหรับแต่ละ class ลงไป
โดยเขียน ชื่อ tag.ชื่อ class แบบนี้

โค้ด เลือกทั้งหมด


p.xxx{
   color: #ff00cc;
}

p.yyy{
   color: #ff00cc;
}

body.zzz{
   color: #005599;
}

หรือในกรณีที่อยากให้แสดงผลเหมือนกันในหลายๆ class สามารถเขียนคำสั่งแบบนี้ได้เลยค่ะ

โค้ด เลือกทั้งหมด


p.yyy, .xxx{
   color: #ff00cc;
}

กวางจ้ะ · 17 ส.ค. 2009, 11:26 น.

อ้างอิง<head>
<style type="text/css"> <- บรรทัดนี้ไม่ต้องใส่ก็ได้กรณีที่ใช้แท็กการ link ไฟล์ css (บรรทัดถัดไป) แต่จริง ๆ ใส่ไปดีกว่านะ อย่าเพิ่งขี้เกียจพิมพ์ เพราะเป็นมาตรฐานบังคับในการใช้งาน ถ้าไปเปิดกับ web browser อื่น หรือกับ server อื่นที่ไม่รองรับ อาจทำให้เกิดอาการติงต๊องได้ (credit : ไอซ์)
<link rel="stylesheet" type="text/css" href="anna.css" />
</style>
</head>

เดอะบุ๋ม · 17 ส.ค. 2009, 11:27 น.

แจ่มๆ

หนูอร · 17 ส.ค. 2009, 11:30 น.

คำสั่ง id

เป็นการแบ่งโซนเฉพาะเจาะจงกว่า class ซึ่งจะปรากฏออกมาเพียงแค่ครั้งเดียว เวลาที่เราต้องการตั้ง id ให้กับ div นั้นเราก็จะเขียนคำสั่งในหน้า HTML แบบนี้

โค้ด เลือกทั้งหมด


         <div id="div1">
	    <p>this is div 1</p>
         </div>

โดยในหน้า CSS นั้น id จะแสดงด้วยเครื่องหมาย # ตามด้วยชื่อของ id นั้นๆ
อย่างในตัวอย่างข้างบน เราตั้งชื่อ id ว่า div1 พอมาใน CSS มันจะมีหน้าตาแบบนี้

โค้ด เลือกทั้งหมด


#div1 {
     background-color:#ffff00;
}

蓝月 (lán yuè) · 17 ส.ค. 2009, 11:34 น.

สุดยอดมอดดี้

JÎ›NÎ£ · 17 ส.ค. 2009, 11:35 น.

IM · 17 ส.ค. 2009, 11:42 น.

เย้ๆๆๆ

+

iannnnn · 17 ส.ค. 2009, 11:49 น.

//ไม่ต้องแอบอ้างไปจู๋นู้นแล้วหนูอร เอางี้เลย เดี๋ยวทำลิงก์ไปแปะก็พอ จะได้ตามมาอ่านกันในนี้ให้หมด

ช่วยเสริมนิดนึงนะครับ
แท็ก <div> .. </div> นั้นแปลว่า "แบ่ง"
คือในโค้ดภาษา html นั้นจะมีการแบ่งส่วนของเนื้อหาอกเป็นหลายๆ ส่วนด้วยกัน
แต่ถ้าเอาให้เข้าใจง่าย จะขอเรียกว่า "ก้อน DIV"
เพราะลักษณะการทำงานของมันนั้น ถ้าเอา <div> ไปครอบเนื้อหาใดๆ ก็ตาม </div>
มันจะแค่ขึ้นบรรทัดใหม่ให้เราเท่านั้นเอง

แต่ถ้ามีการกำหนด Style ให้มันปั๊บ ทีนี้ล่ะอยากให้เป็นก้อนเป็นกรวดยังไงก็ได้

ส่วน CSS Cheat Sheet สามารถดาวน์โหลดได้ที่นี่ครับ
http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
เอาไว้ดูว่ามีคำสั่งอะไรที่ใช้บ่อยๆ มั่ง และนิยามคร่าวๆ ของแต่ละคำสั่ง
อันนี้พรินต์ไว้ดูได้เลยนะเวลาหัดใหม่ๆ เพราะจะช่วยให้หายงงไปเยอะเลย

หนูอร · 17 ส.ค. 2009, 11:57 น.

ตั่งค่า link

โดยทั่วไปแล้วเรามีคำสั่งในการใส่ link ซึ่งเราจะคุ้นเคยว่ามันมีหน้าตาแบบนี้

โค้ด เลือกทั้งหมด


<a href="www.f0nt.com">ฟ๐นต์</a>

ซึ่ง CSS นั้นจะสามารถกำหนดค่าของ link ได้ด้วยว่าจะให้มีสีอะไร มีขนาดเท่าไหร่ ซึ่งเราก็จะสั่งมันด้วยคำสั่งนี้ในหน้า CSS ของเรา

โค้ด เลือกทั้งหมด


a{
     color: #669900;
     text-decoration: none;
}

แต่การกำหนดรูปแบบ link นั้นมีมากกว่านี้เพราะสามารถกำหนดได้ว่าพอ คลิกแล้ว(visited) เอาเมาส์ไปวาง(hover) หรืออะไรก็ตามแล้วจะให้ออกมาหน้าตาสีสันเป็นยังไง คำสั่งนั้นก็มีหัวข้อดังนี้

a:linked      link ที่ยังไม่เคยกด
a:visited      เคยกดเข้า link นั้นแล้ว
a:hover      เวลาเอาเมาส์ไปชี้ link
a:active ตอนที่กด link นั้น
a:focus หลังจากกด link ไปแล้ว
(ลักษณะของมันคือ เวลากดแล้วมีกรอบ(outline)เป็นเส้นประขึ้นมา)

นอกจากนี้.. คำสั่งยังสามารถที่จะใช้ร่วมกันได้อีกด้วย

โค้ด เลือกทั้งหมด


a:link, a:visited{
     color: #669900;
     text-decoration: none;
}

จะมีเส้นประแสดงรอบๆในขณะใช้คำสั่ง a.focus สามารถตั้งค่าได้ด้วยนะคะ

โค้ด เลือกทั้งหมด


a:active, a:focus {
     outline:solid;
}

* คำสั่ง hover สามารถใช้ได้กับ tag อื่นนอกเหนือจาก link ได้ด้วย
เช่นเวลาอยากให้กรอบข้อความเปลี่ยนสีเวลาเอา curser ไปชี้

// เดี๋ยวเอา code มาใส่ให้อีกทีค่ะ

โต · 17 ส.ค. 2009, 11:57 น.

มาแล้วๆ

แปะไว้ก่อน เดี่ยวมาลองทำตาม

กวางจ้ะ · 17 ส.ค. 2009, 11:59 น.

การ set ค่า default css ของทุก tag

ให้ทำการใส่ * แทนการใช้ชื่อ tag ใด ๆ
โดยการแสดงผลนั้น หากในโค้ด html ไม่ไ้ด้ระบุว่าเป็น class ใด หรือ id ใดก็จะแสดงผลตาม *

test.css

อ้างอิง
*{
color: #000; /*set รูปแบบตัวอักษรเป็นสีดำ(โค้ด RGB=#000 หรือ #000000)*/
font-size: 16px; /* ขนาด 16px*/
font-family: Tahoma; /*ใช้ฟอนต์ Tahoma*/
background-color: orange; /*พื้นหลังเป็นสีส้ม*/
}

#div1{
color: #fff; /*set รูปแบบตัวอักษรเป็นสีขาว(โค้ด RGB=#fff หรือ #ffffff)*/
}

test.html

อ้างอิง<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
สวัสดีจ้ะ ฉันชื่อดอกจัน 
<div id="div1">สวัสดีจ้ะ ฉันชื่อ div1</div>
</body>
</html>

การแสดงผลบนเว็บ browser ใช้ได้ดี เป็นมิตรกับ firefox นะจ๊ะ