การเขียน CSS มี 3 ลักษณะคือ Inline, Internal และ External โดยสามารถเลือกใช้ได้ความความเหมาะสมเป็นหลัก
แบบ Inline
คือการเขียนแทรกลงไปในบรรทัดนั้นๆ ของ tag [X]HTML เลย เช่น
<p style=”font-size: 0.9em; width: 200px; border: solid 1px #000000”>ตัวหนังสือสีดำ อยู่ใน แทก P</p>
แบบ Internal(embedded)
การเขียนแบบ Internal (embedded) คือเขียนแยก CSS ออกจาก tag [X]HTML แต่อยู่ในหน้าเดียวกันกับไฟล์ [X]HTML โดยแทรก css เอาไว้ที่ <head></head> เช่น
<html> <head> <style type="text/css"> P { font-size: 0.9em; width: 200px; border: solid 1px #000000; } </style> </head> <body> <p>ตัวหนังสือสีดำ อยู่ใน แทก P </p> </body> </html>แบบ External
คือการเขียน แยก css ออกมาเป็นไฟล์ .css ต่างหาก แล้วนำเข้าไปใช้ใน หน้าเว็บด้วย การเรียกโดย ใช้ โดยการพิมพ์ <link rel="stylesheet" href="externalcss.css" type="text/css" /> ไว้ที่ส่วน <head></head> ของหน้าเว็บ
ไฟล์ externalcss.css
P { font-size: 0.9em; width: 200px; border: solid 1px #000000; }และส่วนของไฟล์ html เมื่อเรียก css มาใช้
<html> <head> <link rel="stylesheet" href="externalcss.css" type="text/css" /> </head> <body> <p>ตัวหนังสือสีดำ อยู่ใน แทก P </p> </body> </html>ทั้งหมดเป็นลักษณะการเขียนและเรียกใช้ CSS ครับ
สำหรับผมแล้ว ขอแนะนำ ให้เขียน แบบ External ครับ เพราะง่ายต่อการเปิดไฟล์ css มาแก้ไข โดยไม่ต้องยุ่งเกี่ยวกับ HTML เลย และที่สำคัญสามารถนำไปใช้กับไฟล์ อื่นๆ ได้ทั้งเว็บไซท์ เพียงการเขียน CSS ในหน้าเดียว
เรื่องต่อไป เกี่ยวกับ External CSS และการ Import CSS ครับ
- คุณอยู่ที่:
- บทเรียนออนไลน์
- บทเรียน CSS
- 3 วิธี ทำให้เว็บน่าสนใจขึ้น โดยการกำหนดรูปแบบ Style html ด้วย css
หมวดหลัก: บทเรียน - เขียนโปรแกรม เบื้องต้น หมวด: บทเรียน CSS บทเรียน CSS อัปเดตล่าสุด: 03 มิถุนายน 2565 03 มิถุนายน 2565
ในบทความนี้จะแนะนำการใช้งาน style ในการตกแต่งเว็บเพจด้วยภาษา css และคำสั่งที่ใช้ทดแทนในภาษา HTML ใช้สำหรับการตกแต่งหน้าตาของเว็บเพจต่างๆ ให้มีหน้าตา มีสีสันการตกแต่งตัวอักษร สี เส้นขอบ การใส่พื้นหลัง การกำหนดระยะห่าง และ อื่นๆ อีกมากมายอย่างที่เราต้องการ
การเขียน css มีหลายรูปแบบในการจัดการหลัก ๆ มีอยู่ 3 รูปแบบ
ซึ่งในแต่ละรูปแบบก้จะมีจุดประส์ในการใช้งานที่แตกต่างกัน แต่ยังใช้ไวยากรณ์ของภาษา css ยังคงเดิม เพียงแค่รูปแบบการจัดวางที่แตกต่างกัน โดยทั้งทั้งหมด 3 รูปแบบ ดังนี้
1.Inline Style Sheet
2.Internal Style Sheet
3.External Style Sheet
คำอธิบาย
- Inline Style Sheet เป็นการแทรกคำสั่ง css ลงในส่วนของแท็กนั้น ๆ โดทำหน้าที่ เปรียบเสมือนแอททริบิวท์(Attribute) ของแท็กนั้นๆ มีรูปแบบคือ style = " คำสั่ง CSS "
เช่น ทำข้อความตัวหนา
<strong class="text-strong">Tietle</strong> - Internal Style Sheet Internal CSS
ใช้สำหรับเขียน CSS เพื่อใช้งานในหน้าเว็บเพจหนึ่ง ๆ โดยจะเขียนไว้ในส่วน <head></head> ของหน้าเว็บเพจนั้น ๆ โดยโค้ด CSS จะต้องอยู่ภายในแท็ก <style></style> อีกที
ตัวอย่าง การกำหนดให้ ข้อความใน tag <p> มีสีแดงและอยู่ตรงกลาง
<style> p { color: red; text-align: center; } </style> - External Style Sheet เป็นการเขียน css ภายนอกเอกสาร html วิธีนี้จะทำได้ด้วยการสร้างไฟล์เอกสาร css ไว้อีกหนึ่งไฟล์ที่มีนามสกุล .css แล้วภายในเขียนคำสั่ง css ไว้ทั้งหมด เมื่อต้องการให้สไตล์นี้มีผลกับไฟล์เอกสาร html
ก็สามารถเชื่อมโยงไฟล์นั้นๆได้ โดยสร้างโฟล์ไว้สองไฟล์ในโฟล์เดอร์เดียวกัน อย่างเช่น html และไฟล์ style.css
ตัวอย่าง
<link href="/./styles/prosilver/theme/en/stylesheet.css?assets_version=343" rel="stylesheet">ข้อความหลัง .css อาจไม่จำเป็นถ้าไม่มีการแก้ไข อะไรใน css
?assets_version=343จะเป็นตัวช่วยให้ browser ไม่เก็บ cache ไว้ให้เราเปลี่ยนตัวเลขไปเรื่อยๆ หรือจะค่าใช้ random ก็ได้
หากต้องมีการใช้ CSS ในจุดใดจุดหนึ่งเพียงจุดเดียวบนหน้าเว็บเพจ การใช้งานแบบ Inline อาจจะเป็นทางเลือกที่ดี หากต้องการใช้คุณสมบัติของ CSS คุณสมบัติแบบเดียวกันจากหลาย ๆ จุดบนหน้าเว็บเพจ ในเว็บเพจเดียว การใช้ CSS ในแบบ Embed อาจจะเป็นทางเลือกที่เหมาะสม หากมีเว็บเพจเป็นจำนวนมาก ต้องการใช้งานคุณสมบัติ CSS ในรูปแบบหรือสไตร์เหมือนๆ กัน การใช้ CSS ในแบบ External อาจจะเป็นทางเลือกที่ดูเข้าท่ากว่า
อ้างอิง
- กำหนดรูปแบบการแสดงผล HTML Elements ด้วย CSS.[ออนไลน์].เข้าถึงได้จาก
//www.dcrub.com/styling-html-with-css - พื้นฐาน CSS.[ออนไลน์].เข้าถึงได้จาก
//sites.google.com/site/wichakarporkaermweb2/phun-than-css - วิธีใช้งาน
Style Sheet.[ออนไลน์].เข้าถึงได้จาก
//www.enjoyday.net/webtutorial/css/css_chapter05.html