Your SlideShare is downloading. ×
CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

CSS

1,422
views

Published on

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

ความรู้เกี่ยวกับ 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,422
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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