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

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

คำสั่งสำหรับ color

ได้มาจากการกำหนดค่า attribute (attribute = คำสั่ง / ตัวแปร)
ซึ่งสีที่กำหนดนั้นใช้หลัก RGB เป็น # ตามด้วยเลขหกตัวเรียงกัน
ซึ่งเลขนั้นเป็น ค่าของ RGB คำสั่งนั้นก็จะมีหน้าตาแบบนี้

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

ข้อความ

หรือถ้ารหัสสีนั้นเป็นเลขซ้ำกันก็สามารถย่อให้เหลือสามหลักได้
เช่น code ด้านบนถ้าย่อเหลือสามหลักก็จะมีหน้าตาแบบนี้

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

ข้อความ

ในกรณีที่จะต้องใช้หลายๆครั้ง ซึ่งจะทำให้เกิดความซ้ำซ้อนขึ้น
คำสั่งที่ใช้นั้นใช้สั่งเพียงแค่ครั้งเดียวโดยไม่ต้องใส่ทุกบรรทัดก็ได้ค่ะ
(เหมือนกับเป็นการเขียนประกาศว่าถ้าเป็น ต้องเป็นสีนี้นะ!)
ด้วยคำสั่งนี้.. ทุกตัวก็จะใช้ค่าสีที่เรากำหนดค่ะ

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


<html>
<head>
<style type="text/css">
<!--
p { color: #ffcc00 }
-->
<head>

<body>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
</body>
<html>

* ถ้าคำสั่งซ้ำกันในชุด tag เดียวกัน... คำสั่งจะตามอันล่าสุด
ยกว้นกรณีการสั่งคำสั่ง color ใน <body> ซ้ำซ้อนกับ 
เพราะถือว่าเป็นคำสั่งคนละส่วนกัน ไม่ใช่คำสั่งร่วมกันค่ะ

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

หนูอร ตัว double quote อ่ะมันต้องอยู่หน้า color ตัวนึง และก็อยู่ปิดท้ายค่าสีตัวนึงนะ ตัวโค้ดอันนั้นใส่ผิดจ้ะ

อ้างอิงข้อความ

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

โอ้ว มาแล้วๆ

หนูอรเดี๋ยวฝากแอบอ้างไปแปะในจู๋ CSS เด็ดๆ ด้วยนะ เผื่อคนมางมหาในนี้ไม่เจอ

Katezila · 17 ส.ค. 2009, 11:04 น.

สาระมาแล้วสินะ \

/

บวกไปทั้งคู่เลย \

/ \

/

ส้ ม ♥ · 17 ส.ค. 2009, 11:05 น.

+ หนูอร กับกวางรอเลย

แอร๊ยยย

ออยอิชี่ · 17 ส.ค. 2009, 11:05 น.

โอ้ว ๆ
นี่แหละๆ กำลังอยากได้เลย

บวกหนูอรจ๊ะ

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

แต่ตอนสอนตูไม่มีคำว่า attribute หลุดออกมาเลยนะ
เพราะไม่รู้ว่ามัีนเรียกแบบนี้

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

คำสั่งสำหรับ Font

คำสั่งส่วนนี้ใช้เพื่อการกำหนดรูปแบบของ font ในหน้าเวป
สามารถใช้ได้ทั้งกับ tag ของ paragraph และ body<body>

โดยในกรณีการใส่คำสั่งสำหรับ จะมีค่าคำสั่งดังนี้

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


<html>
<head>
<style type="text/css">
<!--
   p {
      color: #ffcc00;
      font-weight: bold;
      font-size: 150px;
      font-family: "iannnnnPDF 2008", Georgia, Arial, Tahoma, San-serif;
   }
-->
</style>
<head>
</html>

รายละเอียของค่า font แต่ละตัวมีดังนี้ค่ะ

color: #ffcc00;
เป็นตัวกำหนดค่าสีของ font ที่จะใช้ในเวป

font-weight:
สามารถแบ่งออกได้เป็น 3 อย่างคือ bold thin normal

font-size:
สามารถกำหนดได้หลายหน่วย em cm pt px in small x-small xx-small

font-family: "iannnnnPDF 2008", Georgia, Arial, Tahoma, San-serif;
ในที่นี้จะสามารถใส่ได้มากกว่าหนึ่งตัว โดยเวปจะเลือกจากตัวแรกสุดที่เราใส่ลงไป
ถ้า font ตัวแรกไม่มีในเครื่อง มันก็จะทำการเลือกตัวถัดไปมาใช้เป็นการทดแทน
* กรณีชื่อ font ที่ยาวมากๆ และไม่ได้พิมพ์ติดกัน ต้องใส่ " " เป็นการบอกชื่อด้วย
ดู "iannnnnPDF 2008" เป็นตัวอย่างได้

ส่วนคำสั่งสำหรับ <body> นั้นกำหนดได้ดังนี้

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


body{
     font-size: 14px
}

กรณีที่ต้องกำหนดแบบ font เป็นบรรทัดเดียวกัน สามารถที่จะย่อเพื่อให้เกิดความสะดวกในการอ่าน สามาถทำได้โดยเรียงลำดับตามนี้; weight, size, family

ตัวอย่าง:

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


body{
     font: bold 12px Tahoma,sans-serif;
}

คำสั่งอื่นๆเกี่ยวกับ font

text-decoration: overline underline line-through blink;
text-decoration: none; = การล้างคำสั่งการตกแต่ง text
text-transformer: uppercase lowercase
letter-spacing: 10px เว้นช่องระหว่างอักษร (กวางบอกเค้าเรียกว่าช่องไฟ)
line-height: 5 px ตั้งค่ากำหนดระยะบรรทัด

Romzaikyu · 17 ส.ค. 2009, 11:10 น.

อ้างคำพูดจาก: ☼ เกศซิล่า ☼ เมื่อ 17 ส.ค. 2009, 11:04 น.
สาระมาแล้วสินะ \/

บวกไปทั้งคู่เลย \/ \/

แล้วที่ผ่านมาหลายสิบหน้าล่ะ เป็นอะไร

Ah! · 17 ส.ค. 2009, 11:10 น.

อ้างคำพูดจาก: iannnnn เมื่อ 17 ส.ค. 2009, 11:08 น.
แต่ตอนสอนตูไม่มีคำว่า attribute หลุดออกมาเลยนะ
เพราะไม่รู้ว่ามัีนเรียกแบบนี้

เวลาต้องทำไอ้อะไรพวกนี้ ผมก๊อปโค้ดมาแก้ตลอด
วงล้งวงเล็บนี่ไม่เคยใส่ใจเลยว่ามันเป็นวงเล็บหรือเครื่องหมายมากกว่าน้อยกว่า
หรือวางตำแหน่งอะไรยังไง ขอให้ครบคู่ก็พอ

eThics · 17 ส.ค. 2009, 11:11 น.

มาเรียนด้วย

ออยอิชี่ · 17 ส.ค. 2009, 11:11 น.

ช่วยคั่นๆ

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

อ้างคำพูดจาก: ดุกศรี เมื่อ 17 ส.ค. 2009, 11:02 น.
หนูอร ตัว double quote อ่ะมันต้องอยู่หน้า color ตัวนึง และก็อยู่ปิดท้ายค่าสีตัวนึงนะ ตัวโค้ดอันนั้นใส่ผิดจ้ะ

ขอบคุณจ้า

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

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

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

อู๊ย ดูสรุปออกมาเป็นวิชาการมากๆ

อรเอ๊ยยยย

** คำว่า "เว็บ" เขียนแบบนี้เด้อหล้า **

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

คำสั่งเรียกใช้ CSS

อย่างที่เกริ่นนำว่าความเทพของ CSS คือการที่สามารถแก้ไขการตกแต่งได้ง่าย การทำงานของ CSSนั้นคือการเขียน "คำสั่ง" ออกมาหนึ่งชุด แล้วให้ HTML (หน้าหนึ่งหรือหลายๆหน้าก็ได้) เรียกคำสั่งนั้นไปใช้ให้ออกมามีรูปแบบตามที่เรากำหนดไว้ เมื่อเราไปทำงานในไฟล์ถัดไป ก็สามารถเรียกเอามาแค่ตัวเรียกคำสั่ง CSS ได้เลย

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

เมื่อเราสร้าง stylesheet ที่เป็นไฟล์ .css ขึ้นมาแล้ว สมมุติชื่อ anna.css เราก็ใส่คำสั่งนี้เรียกใช้งานได้เลยค่ะ

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


<html>
<head>
     <link rel="stylesheet" type="text/css" href="anna.css" />
<head>
<body>
</body>
</html>