Page 43 - ชิ้นโครงงาน ซ้อม.pdf 1.52
P. 43
่
็
CSS และโครงสร ้างเวบไซต์ 2. รูปเเบบค�าสัง css
ด ้วย HTML เบื้องต ้น
่
2.1 รูปเเบบของค�าสัง css จะประกอบไปด้วย 2 ส่วนใหญ่ๆ คือ
่
่
2.1.1 Selector คือ ส่วนของค�าสัง HTML หรือ Tag ทีเราต้องการให้เเสดงผล เช่น table
็
็
็
กจะเเสดงในส่วนของตาราง, a กจะเปนการลิงก์, h1 กจะเปนขนาดตัวอักษร เปนต้น
็
็
็
้
1. css เบืองต้น 2.1.2 Declaration คือ ส่วนของการก�าหนดค่าให้กับ Selector ประกอบไปด้วย 2ส่วน
ได้เเก่
่
ิ
1) Property คือ ส่วนของคุณสมบัติทีเราต้องการให้เเสดง เช่น สีตัวอักษร, ชนดตัวอักษร, ขนาด
่
้
css (cascade Style Sheet) หมายถึง ภาษาทีใช ้ก�าหนดรูปเเบบการเสดงผล HTML ถูก ตัวอักษร, สี, พืนหลัง เปนต้น
็
่
่
้
่
่
่
ู
สร ้างขึนเพือใช ้งานร่วมกับ HTML ซึงโดยทัวไปเล้ว HTML ใช ้ส�าหรับก�าหนดรูปโครงสร ้างข้อมล 2) Value คือ ค่าทีเราต้องก�าหนดให้กับ Property หรือเปนค่าทีเราต้องการให้เเสดง เช่น ตัว
็
ส่วน css ใช ้ส�าหรับก�าหนดรูปเเบบการเเสดงผล อักษรสีเขียว,ตัวอักษรเเบบ Tahoma, ตัวอักษรขนาด 10pt เปนต้น
็
้
่
ั
็
ู
็
ในการเเยกการเเสดงผลของเวบเพจออกจากข้อมลในเวบเพจนน จะช่วยให้ง่ายต่อการเปลียน 2.2 ลักษณะการใช ้งาน CSS แบ่งออกเปน 3 แบบ คือ
็
่
่
่
่
เเปลงรูปเเบบต่างๆ ในอนาคตทีอาจจะมีการเปลียนรูปเเบบของเวบเพจ เช่น ถ้าเราต้องการเปลียนสี 2.2.1 แบบ Inline เปนการเขียนโค้ด Css ลงไปในแทก HTML ทีต้องการให้เกิดการแสดง
็
็
็
่
่
้
้
็
ให้กับหัวข้อในเเทก <h2> ในทุกๆ เวบเพจกเพียงเเต่เปลียนรูปทีเปนไฟล์ css ด้วยกัน ในปจจุบัน ผลและจะมีผลต่อแทกนนๆ เท่านน โดยมีรูปแบบดังน ี ้
็
็
ั
็
ั
็
ั
่
่
้
่
css เปนทีนยมอย่างมากในการนาไปจัดรูปเเบบให้กับเวบเพจ ซึงก่อนทีจะมี css นนเราใช ้ตารางใน <tag style="property:value; property:value,"
�
ิ
็
ั
็
่
่
้
การจัดวางต�าเเหนงต่างๆในเวบเพจเเละใช ้ค�าสัง HTML ในการจัดรูปเเบบของข้อมล ซึงถ้ามีการ แอfทริบิวด์ style ใช ้ในการก�าหนดค่าสไตล์พร็อปเพอร ์ตีต่างๆ
ู
็
่
่
เเก้ไขรูปภาพหรือมีการปรับปรุงเวบเพจจะเปนการยุงยากมาก เพราะต้องเเก้ไขในทุกเวบเพจเพือให้ 2.2.2 แบบ Embedded เปนการเขียนโค้ด CSS ลงไปในไฟส์ HIML เช่นกัน แต่จะรวมโค้ด
็
่
็
็
็
่
้
็
เปนไปตามรูปเเบบทีต้องการ CSS ทังหมดไว้ภายใต้แทก <head> โดยมีรูปแบบดังน ี ้
็
ั
็
ปจจุบัน CSS แบ่งเยน 4 รุ่น ได้แก่ <head>
1) CSS 1 ยอมรับเปนมาตรฐาน ธันวาคม ค.ศ. 1996 <tile></itle>
็
่
2) CSS 2 เริมร่าง ค.ศ. 1997 ยอมรับเปนมาตรฐาน ทฤษภาคม ค.ศ. 1998 <style type=*tex/css">
็
่
็
่
็
3) CSS 3 เริมร่าง ค.ศ. 1998 ยอมรับเปนมาตรฐาน ทฤศจิกายน ค.ศ. 2011 2.2.3 เเบบ External เปนการเขียนเเบบเเยกโค้ด CSS ออกมายังไฟล์ทีเเยกต่างหาก ซึง ่
่
่
่
่
4) CSS 4 เริมร่าง 29 กันยายน ค.ศ. 2009 จะอยูคนละทีกับไฟล์ HTML โดยจะมีนามสกุลไฟล์ CSS ซึงจะมีการเรียกร ้องใช ้รูปเเบบ CSS จาก
่
็
็
็
ไฟล์ HTML โดยมีรูปเเบบในการเขียน คือ จะเเบ่งออกเปน 2 ไฟล์ คือไฟล์ทีเปนหน้าเวบเพจหรือ
่
็
ไฟล์ HTML กับไฟล์ทีเปน CSS เช่น
ส่วนของไฟล์ HTMI:
<head>
<title></title>
<link rel="stylesheet" type="tex/css" href="filename.css"/>
</head>
38 39
