พ้นื ฐาน CSS
CSS คอื อะไร• Cascading Style Sheets (CSS) คอื ภาษาที่ใช้กาหนดรูปแบบการแสดงผล HTML CSS ถกู สร้างขนึ ้ เพื่อใช้ร่วมกบั HTML กลา่ วคือ HTML ใช้สาหรับกาหนดโครงสร้างข้อมลู และ CSS ใช้สาหรับกาหนดรูปแบบ การแสดงผล
เวอร์ชันของ CSS เวอร์ชนั ของ CSS มีดงั ต่อไปน้ี• CSS 1CSS 1 หรือ CSS Level 1 คอื เวอร์ชนั แรกที่ออกสสู่ าธารณะและเป็น W3C Recommendation ซงึ่ ออกในเดอื นธนั วาคมปีค.ศ. 1996 CSS 1 นนั้ มีฟีเจอร์เพียงไมม่ าก• CSS 2CSS 2 ออกในเดอื นพฤษภาคมปีค.ศ. 1998 โดยเพิ่มเตมิ ฟีเจอร์ให้กบั CSS 1 อยา่ งไรก็ตาม CSS 2 ไม่ประสบความสาเร็จมากนกั ในแงข่ องการยอมรับและการรองรับจากเว็บเบราว์เซอร์ตา่ งๆ ทาให้ CSS 2.1 ต้อง ออกมาเพ่ือแก้ไขปัญหาตา่ งๆในเวอร์ชนั 2 CSS 2.1 ได้เป็น Recommendation ในเดือนกรกฎาคมปีค.ศ. 2007• CSS 3CSS 3 ยงั อยรู่ ะหวา่ งการพฒั นา และการกาหนดสเปคใน CSS 3 นนั้ จะถกู แบง่ ออกเป็นสว่ น (Module) ตา่ งๆ ซง่ึ บางสว่ นก็เสร็จสมบรู ณ์แล้ว บางสว่ นก็กาลงั พฒั นาอยู่ แตบ่ างเวบ็ เบราว์เซอร์ก็เริ่มรองรับสเปค ในบางสว่ นบ้างแล้ว
การเขยี นโค้ด CSS แบบ INLINE• แบบ Inline คือการเขียนโค้ด CSS ลงไปในแทก็ HTML ทต่ี ้องการให้เกิดการแสดงผลเลย และจะมผี ลตอ่ แทก็ นนั้ ๆเทา่ นนั้ โดยมี Syntax ดงั นี ้ <tag style=\"property:value; property:value; . . .\">• แอททริบิวท์ style ใช้ในการกาหนดคา่ สไตล์พร็อพเพอร์ตีต้ า่ งๆ ซง่ึ จะอย่ใู นรูปของ \"property:value\" หากมีมากกวา่ หนึ่ง ชดุ ให้ใช้เครื่องหมาย Semicolon \";\" คนั่ ตวั อย่างเช่น <h1 style=\"color:#0000FF\">Where to Put CSS?</h1>?• ในตวั อยา่ งข้างต้นเรากาหนดสไตล์ให้กบั แท็ก <h1> โดยให้ข้อความเป็นสีฟ้ าด้วยสไตล์พร็อพเพอร์ตี ้color• การเขียนแบบ Inline ไมเ่ ป็นท่นี ิยมนกั เน่ืองจากต้องเขียนโค้ด CSS ลงไปในแทก็ HTML ดงั นนั้ จงึ ไม่สามารถนาสไตล์ไป ประยกุ ต์ใช้กบั แท็กอ่นื ๆได้ ลองนกึ ดวู ่าถ้าต้องระบคุ า่ สใี ห้กบั ทกุ ๆแทก็ <h1> ในทกุ ๆเวบ็ เพจ คงจะลาบากนา่ ดหู ากวา่ ต้องการ เปล่ียนสีในภายหลงั
การเขยี นโค้ด CSS แบบ EMBEDDED• แบบ Embedded เป็นการเขียนโค้ด CSS ลงไปในไฟล์ HTML เชน่ กนั แตจ่ ะรวมโค้ด CSS ทงั้ หมดไว้ภายใต้แท็ก <head> โดยมี Syntax ดงั นี ้• <head>• <title></title>• <style type=\"text/css\">• selector {• property:value;• property:value;• ...•}• </style>• </head>
การเขยี นโค้ด CSS แบบ EXTERNAL• แบบสดุ ท้ายแบบ External เป็นการเขียนแบบแยกโค้ด CSS ออกมายงั ไฟล์แยกตา่ งหาก ซงึ่ ช่ือก็บอกอย่แู ล้วนะครับวา่ External โดยมี Syntax ดงั นี ้• HTML:• <head>• <title></title>• <link rel=\"stylesheet\" type=\"text/css\"• href=\"fileName.css\" />• </head>• CSS:• selector {• property:value;• property:value;• ...•}
Search
Read the Text Version
- 1 - 6
Pages:
