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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Css

160
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
160
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
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. ประโยชน์ที่ได้จากการใช้สไตล์ชีตในการควบคุมการแสดงผลในหน้าเว็บเพจ
  • 2. ประโยชน์ที่ได้จากการใช้สไตล์ชตใน ีการควบคุมการแสดงผลในหน้าเว็บเพจ• กำา หนดรูป แบบได้ใ นครั้ง เดีย ว ประโยชน์ใ นข้อ นีน บ เป็น จุด เด่น ของการใช้ส ไตล์ช ต เพราะไม่ ้ ั ี ต้อ งเสีย เวลากำา หนดรูป แบบใดๆ ทีล ะจุด• แก้ไ ขรูป แบบทีไ ด้ก ำา หนดไว้ใ นจุด เดีย ว เป็น ่ ผลพลอยได้จ ากข้อ แรก ทุก ครั้ง ทีเ ราอยาก ่ เปลี่ย นรูป แบบหน้า เว็บ เพจ แก้ไ ขทีส ไตล์ช ีต ที่ ่ เดีย วพอ• กำา หนดรูป แบบพิเ ศษ รูป แบบบางอย่า ง เช่น ระยะห่า งระหว่า งบรรทัด เราไม่ส ามารถกำา หนด ได้ด ้ว ยคำา สั่ง HTML ธรรมดา• ประหยัด เนือ ที่ เพราะเราไม่ต อ งไปกำา หนดในทุก ้ ้
  • 3. CSS Structure : โครงสร้างของ สไตล์ชีต• โครงสร้า งของการเขีย นสไตล์ช ต HTML Tag ี {Property : Value; Property : Value; ...}• HTML Tag คำา สั่ง ในภาษา HTML• Property ชื่อ ของคุณ สมบัต ิท เ ป็น ส่ว นขยายของ ี่ คำา สั่ง ภาษา HTML หากมีห ลายค่า แต่ล ะค่า จะคั่น ด้ว ยเครื่อ งหมายเซมิโ คล่อ น (;)• Value ค่า ของ Property ทีก ำา หนด ่• เครื่อ งหมาย {...} ทำา หน้า ทีเ หมือ นกับ ่ เครื่อ งหมาย <...> ในภาษา HTML• ตัว อย่า ง การกำา หนดการแสดงผลบนเว็บ เพจ ด้ว ยคำา สั่ง H1 และมีฟ อนต์เ ป็น Angsana UPC สี แดง เราจะเขีย นด้ว ยคำา สั่ง ภาษา HTML และแบบ สไตล์ช ีต ได้ด ัง นี้
  • 4. • HTML Style<FONT COLOR="red" FACE="AngsanaUPC"> <H1>หัวเรื่อง ตัวอักษรแบบ AngsanaUPC สี แดง</H1> </FONT>...• Cascading Style Sheet H1 {font-family: AngsanaUPC; Color: red} ...... <H1>หัวเรื่อง ตัวอักษรแบบ AngsanaUPC สีแดง</H1> ....
  • 5. การอ้างถึงสไตล์ชตในExternal (linked) CSS : ี แยกต่างหาก • Linking Style Sheet เป็น การสร้า งแฟ้ม ไฟล์ สไตล์ช ต แยกออกมาจากไฟล์ HTML โดยแฟ้ม นี้ ี จะมีส ่ว นขยายเป็น .css ไฟล์ HTML ทีเ รีย กไฟล์ ่ สไตล์ช ต มาใช้ง านต้อ งสร้า งการเชื่อ มโยงด้ว ย ี <LINK> ไว้ใ นส่ว น <HEAD>...</HEAD> เพื่อ เรีย กใช้ แฟ้ม สไตล์ช ีต • การแยกสไตล์ช ต ออกเป็น แฟ้ม ต่า งหาก และนำา ี มาใช้ง านนัน มีผ ลดีต รงทีเ ราสามารถนำา ้ ่ สไตล์ช ต ไปควบคุม การทำา งานของเว็บ เพจ ี จำา นวนมากได้ ซึง อาจเป็น ทัง เว็บ ไซต์เ ลยก็ไ ด้ มี ่ ้ รูป แบบการเขีย นดัง นี้
  • 6. Embeded CSS : การใช้ส ไตล์ช ีต ใน ไฟล์ HTML• Embeded Style Sheet เป็น การกำา หนดสไตล์ช ีต ไว้ ภายในคำา สัง <STYLE>...</STYLE> อยูร ะหว่า ง ่ ่ ส่ว นหัว (HEAD) ของไฟล์ HTML โดยมีร ูป แบบ การเขีย นดัง นี้• <HEAD> <TITLE>Embeded Style Sheet</TITLE> <STYLE> HTML Tag {Property: Value; Property: Value; ... } </STYLE> </HEAD>
  • 7. Embeded CSS : การใช้ส ไตล์ช ีต ใน ไฟล์ HTML• Embeded Style Sheet เป็น การกำา หนดสไตล์ช ีต ไว้ ภายในคำา สัง <STYLE>...</STYLE> อยูร ะหว่า ง ่ ่ ส่ว นหัว (HEAD) ของไฟล์ HTML โดยมีร ูป แบบ การเขีย นดัง นี้• <HEAD> <TITLE>Embeded Style Sheet</TITLE> <STYLE> HTML Tag {Property: Value; Property: Value; ... } </STYLE> </HEAD>