วันเสาร์ที่ 10 พฤศจิกายน พ.ศ. 2555
CSS - เริ่มต้นเขียน CSS
รูปแบบในการเขียน CSS
ชื่อคลาส ชื่อไอดี หรือแท็ก HTML { Property: Value;}
คลาส ใช้ . (จุด) ในการบ่งบอกว่าเป็นคลาส
ไอดี ใช้ # (ชาร์พ) ในการบ่งบอกว่าเป็นไอดี
แท็ก html เช่น body หรือ img
Property คือชื่อคุณสมบัติของ css เช่น width, height
Values คือค่าของ property เช่น 500px
ตัวอย่าง
.CSS {width:500px;}
#CSS {width:500px;}
body {width:500px;}
การเขียน CSS มี 3 ลักษณะคือ
1.แบบ Inline คือการเขียนแทรกลงไปในแท็ก HTML นั้นๆ เลย เช่น
<body>
<p style=”font-size: 0.9em; width: 200px; border: solid 1px #000000”>สีดำ</p>
</body>
2. แบบ Internal โดยแทรก css เอาไว้ที่ส่วน <head></head> เช่น
<head>
<style type="text/css">
p {font-size: 0.9em; width: 200px; border: solid 1px #000000;}
</style>
</head>
<body>
<p>ข้อความ</p>
</body>
3. แบบ External คือการเขียนแยก css ออกมาเป็นไฟล์ .css ต่างหาก
ไฟล์ CSS
สร้างโดยใช้เท็กอิดิเตอร์ธรรมดา โดยให้ไฟล์มีนามสกุลเป็น css แล้วบรรจุคำสั่งของ css ลงไปในไฟล์
การใช้ CSS ในไฟล์เว็บเพจ
ทำได้โดยใช้คำสั่งข้างล่างนี้ แทรกไว้ที่ส่วน <head> </head>
<link rel="stylesheet" href="ชื่อไฟล์.css" type="text/css" />
ใช้สำหรับเว็บไซต์ที่มีจำนวนเว็บเพจมากๆ เพราะสามารถกำหนดค่าเพียงครั้งเดียวไว้ในไฟล์ .css แต่สามารถนำไปใช้ได้ทุกๆเว็บเพจ
ตัวอย่างไฟล์ CSS
ในไฟล์ css
body, td, textarea, input, form, blockquote, p, center, div, pre, select, button, font, b, i, u{font-family:ms sans serif;}
body{font-size: 14px;}
#textred { color:red; }
#textblue { color:blue; }
วิธีใช้งานก็ทำดังนี้
<HTML>
<HEAD>
<TITLE>ทดลองใช้</TITLE>
<META HTTP-EQUIV=content-type CONTENT="text/html; charset=windows-874">
<link rel="stylesheet" type="text/css" href="doremon.css">
</HEAD>
<BODY>
<div id="textred"><p>ข้อความสีแดง</p></div>
<div id="textblue"><p>ข้อความสีน้ำเงิน</p></div>
</BODY>
</HTML>
การ Import ไฟล์ CSS (คือการรวมไฟล์ css มากกว่า 1 ไฟล์เข้าด้วยกัน)
หากมีไฟล์หลักชื่อ main.css แต่มีไฟล์ย่อยๆ เช่น form.css และ board.css
สามารถ import โดยใช้คำสั่ง @import url(xxx.css);
ตัวอย่าง ใน main.css บรรทัดบนสุดให้ใช้
@import url(form.css);
@import url(board.css);
เวลาเรียกใช้ ให้เรียกไฟล์ main.css ไฟล์เดียวพอ
การใช้คอมเม้นท์ใน css
ทำได้โดยการใช้สัญลักษณ์ / และ *
ตัวอย่าง
body {
background: #FFFFFF;
/*สีพื้นเป็นสีขาว*/
}
กฏการเขียน CSS
1. มีการสืบทอด property บางตัว จะมีผลกับสิ่งที่อยู่ข้างในทั้งหมด เช่น body { color:green; margin:5px; } สิ่งที่อยู่ใน body จะมีฟอนต์เป็นสีเขียวทั้งหมด แต่ margin จะทำเฉพาะ body เท่านั้น ไม่สืบทอดต่อไป
2. ลำดับความสำคัญ ไฟล์ CSS จะถูกอ่านจากบนลงล่าง หากเขียนซ้ำ class เดิม อันที่อยู่ด้านล่างจะถูกทำเป็นลำดับสุดท้าย
3. Pseudo-classes and Pseudo-elements คือ class และ element พิเศษ มีวิธีเขียนได้ 2 รูปแบบดังนี้
selector:Pseudo-class {property:value}
selector:Pseudo-element {property:value}
หรือ
selector.class:Pseudo-class {property:value}
selector.class:Pseudo-element {property:value}
เช่น
a:hover {color:black; text-decoration:underline;}
ทำบรรทัดแรกตัวหนา ใหญ่ P:first-line { font-variant: small-caps; font-weight:bold }
ทำการควบคุมตัวหนังสือตัวแรก P:first-letter { font-size: 300%; float: left }
4. การรวมกลุ่ม เป็นการเขียนส่วนที่มีคุณสมบัติซ้ำๆ กัน เพื่อลดปริมาณโค้ด หากมีคุณสมบัติอื่นๆ ค่อยกำหนดแต่ละอันไว้ด้านล่างอีกที เช่น
H1, H2, H3, H4, H5, H6 { color:red; font-family:sans-serif}
5. การประกาศ class หรือ ID ซ้อนกัน โดยเคาะ spacebar ดังตัวอย่าง
p ul { background:#000000;} แปลว่า ul ที่อยู่ใน p จะมีแบ็คกราวด์ เป็นสีดำ ส่วน ul อื่น ถ้าไม่อยู่ใน p ก็จะเป็น ปกติ
ในกรณี ต้องการให้รูปในกล่องมี border 2 px สีเทา โดยไม่ไปกระทบรูปอื่นๆ ทั้งหมดจะเขียนได้ดังนี้
#contentbox img { border-width:2px; border-color:grey;}
ใช้ได้เฉพาะแท็ก img ที่อยู่ใน <div id="contentbox"> </div> แท็กที่อยู่นอกจากนั้นไม่ได้รับผลอะไร ทำให้โค้ดจะเล็กลงกว่าเดิมเพราะไม่ต้องสร้างคลาสแล้วใส่คลาสเข้าไปใน <img> ทุกอัน
6. หลักการใช้ ID, Class
ID จะใช้กับสิ่งที่มีเพียงอันเดียว มักใช้กับส่วนที่เป็น layout เช่น #header #content #footer
Class จะใช้เมื่อ มีการทำซ้ำหลายๆ ครั้ง เช่น .boxcontent
การตั้งชื่อ class และ id ควรเป็นตัวพิมพ์เล็กทั้งหมด ไม่ควรใช้ _ และตัวเลข นำหน้าชื่อ class และ id เพราะอาจมีปัญหากับเบราเซอร์รุ่นเก่า
7. เริ่มต้นด้วย Selectors ก็คือ tag ที่ใช้ๆ กันใน html นั่นเอง เช่น
body { color:#000000; font-size:14px; }
หรือ p { color:red; font-size:16px; }
สมัครสมาชิก:
ส่งความคิดเห็น (Atom)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น