ย้อนวันวานไปกับ Tomb Raider 2013

26/04/2014

แปลความหมายเพลง Olivia Ong – Sometimes When We Touch

30/04/2014

สวัสดี CSS

30/04/2014
empty image
empty image

     Cascading Style Sheets หรือ CSS จะเรียกว่าเป็นภาษาหนึ่งก็ได้ ใช้ในการจัดรูปแบบการแสดงผลของหน้าเว็บ HTML เช่นตำแหน่ง สีสัน ขนาดอักษร ช่องว่าง พื้นหลัง เอฟเฟก  และอื่นๆอีกมากมาย ทำให้เว็บไซต์ดูมีสีสันสวยงามขึ้นทันที การเขียบน CSS สามารถเขียนใน TextEditor นี่แหละ แทรกไว้ในโค้ด HTML เลยก็ได้ หรือเขียนไว้ข้างนอกก็ได้ โดยมีนามสกุลเป็น .css

    โดยพื้นฐานหลักๆ เลยจะประกอบด้วย 3 ส่วนคือ selector , property และ value (เวอร์ชันในปัจจุบันนะ ผมก็ไม่รู้ว่าเวอร์ชั่นเก่าๆ ใช้ยังไง)

selector [, selector2, ...][:pseudo-class] {
property: value;
 [property2: value2;...]}
/* comment*/

Selector คือ ชื่อของ …

Class  – เป็นคลาสของ css โดยเราตั้งชื่อขึ้นมาเอง โดยลักษณะชื่อจะขึ้นต้นด้วยจุด (.)
ID – เป็น id จะขึ้นต้นด้วยสี่เหลี่ยม # (pound sign)
Tag – เป็น Tag ของ HTML ชื่อก็จะเป็นชื่อ Tag ของ HTML เลยเช่น Body , Table, H1, H2 …
และยังมีอีก เช่น Universal Selector, Descendant Selectors, Pseudo-Classes ยังไม่ขอพูดถึงตอนนี้

Property คือคุณสมบัติของ CSS

เช่น color , width, height

Value ก็คือค่าของ Property

ซึ่งจะอยู่หลัง Property เช่น

color: #FF;
width: 500px;

ตัวอย่างการจัดรูปแบบสีแบบเก่าด้วย HTML ก่อนด้วย Attributes ของ HTML เอง

<html>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
<title>This is a CSS</title>
<body bgcolor="#99">
<h1>ทดสอบ Tag H1</h1>
<h2>ทดสอบ Tag H2</h2>
<h3>ทดสอบ Tag H3</h3>
<h4>ทดสอบ Tag H4</h4>
<h5>ทดสอบ Tag H5</h5>
<h6>ทดสอบ Tag H6</h6>
</body>
</html>

ผลลัพธ์

คราวนี้เราจะเปลี่ยนสีและเพิ่มตัวเอียงให้ H1, H2, H3 จะต้องใช้ Tag <font> และ <em> ของ HTML
แก้ใหม่เป็นแบบนี้…

<h1><font color="red"><em>ทดสอบ Tag H1</em></font></h1>
<h2><font color="red"><em>ทดสอบ Tag H2</em></font></h2>
<h3><font color="red"><em>ทดสอบ Tag H3</em></font></h3>

โค้ดอย่างอื่นเหมือนเดิม

ผลลัพธ์

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

โดยใส่โค้ดในส่วนของ Header

<style type="text/css">
h1, h2, h3 {
color: #F00;
font-style: italic;
}
.bgcolor {
background-color: #999999
}
</style>

ก็แสดงผลเหมือนกันทุกประการแล้ว แต่โค้ดสั้นกว่ามาก นี่ก็เป็นตัวอย่างเล็กๆ น้อยว่า CSS นั้นมันมีประโยชน์อย่างไร

จะเห็นว่า h1 , h2, h3 ไม่มีจุดหน้าชื่อ แต่ .bgcolor มีจุดหน้าชื่อ เพราะ bgcolor เป็นชื่อคลาสที่เราตั้งขึ้น เวลาเรียกใช้ก็ class=”ชื่อคลาส” โดยเขียนไว้ใน Tag

รูปแบบการเขียน CSS

1. เขียนไว้ในไฟล์
ก็เหมือนตัวอย่างด้านบน
2. เขียนไว้นอกไฟล์
ในไฟล์ CSS ก็เขียนในรูปแบบปกติของ CSS แหละนะ

ในไฟล์ HTML จะต้องดึง CSS เข้ามา โดยเขียนไว้ในส่วนของ Header ของ HTML โดยมีรูปแบบแบบนี้

<link rel="stylesheet" type="text/css" href="mycss.css">
href="ตรงนี้จะเป็นที่อยู่และชื่อไฟล์ CSS ของเรา"
ซึ่งถ้าโค้ดเยอะๆ โดยส่วนใหญ่เขาจะเขียนไว้นอกไฟล์แบบนี้แหละ

3. เขียนไว้ในบรรทัดนั้นๆ เลย 
เช่น

 <h1 style="color:#00F" >ทดสอบ Tag H1</h1>

สำหรับวันนี้ พอแค่นี้ดีกว่า CSS แท้จริงแล้วมันไม่ใช่ง่ายๆ เลยนะหนิ… Zzz