CSS

1,626 views

Published on

ความรู้เกี่ยวกับ CSS

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,626
On SlideShare
0
From Embeds
0
Number of Embeds
771
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS

  1. 1. CSS หัวใจสำคัญ การพัฒนาเว็บยุคใหม่ บุญเลิศ อรุณพิบูลย์ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ http://stks.or.th [email_address]
  2. 2. CSS <ul><li>Cascading Style Sheet </li></ul><ul><li>เทคโนโลยีการกำหนดรูปแบบเอกสารเว็บ </li></ul><ul><li>ประโยชน์ </li></ul><ul><ul><li>ลดขนาดแฟ้มเอกสารเว็บ โหลดได้ไว </li></ul></ul><ul><ul><li>ลดเวลาในการออกแบบพัฒนาเว็บ เพราะสามารถนำ CSS ไปใช้กับเอกสารเว็บอื่นๆ ได้ง่าย สะดวก </li></ul></ul><ul><ul><li>ลดเวลาในการปรับแก้ไขเอกสารเว็บ </li></ul></ul><ul><ul><li>ทำงานได้ดีกับเทคโนโลยีใหม่ๆ เช่น การแสดงผลบนเบราว์เซอร์โมบายต่างๆ </li></ul></ul>
  3. 3. External CSS <ul><li>รูปแบบการใช้ CSS กับ Template ของ CMS, Blog tools, Wiki tools </li></ul><ul><li>ระบุคำสั่ง CSS ในแฟ้มเฉพาะ .css </li></ul><ul><li>นำไปใช้กับ CMS, Blog tools และ Wiki tools ด้วยคำสั่ง </li></ul><ul><li><link rel=“stylesheet” href=“url” type=“text/css” /> </li></ul><ul><ul><li>โดยระบุไว้ใน head section </li></ul></ul>
  4. 4. รูปแบบคำสั่งของ CSS <ul><li>Selector { </li></ul><ul><li>property : value ; </li></ul><ul><li>property : value ; </li></ul><ul><li>} </li></ul>
  5. 5. Selector – HTML tag <ul><li>p { </li></ul><ul><li>font-size : 16pt ; </li></ul><ul><li>color : red; </li></ul><ul><li>} </li></ul><ul><li>h1 { </li></ul><ul><li>font-family : Tahoma, “MS Sans Serif” ; </li></ul><ul><li>} </li></ul>
  6. 6. Font properties <ul><li>font-family แบบอักษร </li></ul><ul><li>font-size ขนาดตัวอักษร </li></ul><ul><li>font-style รูปแบบตัวอักษร </li></ul><ul><ul><li>normal, italic </li></ul></ul><ul><li>font-weight ความหนาตัวอักษร </li></ul><ul><ul><li>bold, 100 – 900 </li></ul></ul>
  7. 7. Grouped Selector <ul><li>p, ul, ol, li { </li></ul><ul><li>font-size : small ; </li></ul><ul><li>color : blue ; </li></ul><ul><li>} </li></ul>
  8. 8. ID Selector <ul><li>รูปแบบคำสั่ง </li></ul><ul><li>div#id-name { </li></ul><ul><li>property: value; </li></ul><ul><li>} </li></ul>ตัวอย่าง div#bluecolor { color: blue; } การใช้งาน <div id=“bluecolor”>…</p>
  9. 9. Class Selector <ul><li>รูปแบบคำสั่ง </li></ul><ul><li>.class-name tag { </li></ul><ul><li>property: value; </li></ul><ul><li>} </li></ul>ตัวอย่าง .bluecolor { color: blue; } การใช้งาน <div class=“bluecolor”>…</p>

×