ภาษาสไตล์ชีต (อังกฤษ: style sheet language) คือภาษาคอมพิวเตอร์ที่ใช้อธิบายลักษณะการนำเสนอของเอกสารต้นฉบับที่ถูกจัดเป็นโครงสร้าง ซึ่งมีส่วนต่างๆ ถูกกำหนดและจัดกลุ่มไว้อย่างชัดเจนแล้ว (well-formed) โปรแกรมหนึ่งๆ จะนำเอกสารต้นฉบับไปนำเสนอโดยใช้ลักษณะที่แตกต่างกันตามกลุ่มที่ได้กำหนดไว้ เนื่องจากคุณลักษณะอย่างหนึ่งของเอกสารที่ถูกจัดเป็นโครงสร้างคือ เนื้อหาที่สามารถนำกลับมาใช้ใหม่ได้ในหลายบริบทและนำเสนอได้หลายวิธี ลักษณะการนำเสนอที่แนบติดไปกับเอกสาร จะทำให้การแสดงผลแตกต่างกันตามความต้องการในแต่ละงาน ภาษาสไตล์ชีตอย่างหนึ่งที่นิยมใช้กันอย่างกว้างขวางเช่น CSS ใช้สำหรับกำหนดลักษณะการแสดงผลของเอกสาร HTML, XHTML, SVG, XUL, และภาษามาร์กอัปอื่นๆ และเพื่อที่จะนำเสนอเนื้อหาของเอกสารที่ถูกจัดเป็นโครงสร้างนั้น กฎเกณฑ์การแสดงผลต่างๆ จะถูกนำมาใช้ เช่น สีตัวอักษร แบบอักษร โครงร่างการจัดหน้า เป็นต้น กฎเกณฑ์เหล่านี้เรียกรวมกันว่าเป็น สไตล์ชีต
สไตล์ชีตแต่เดิมนั้นเป็นเอกสารที่เขียนขึ้นและที่มีประวัติยาวนาน ถูกใช้โดยผู้อำนวยการพิมพ์ นักพิมพ์ดีด และนักเขียน เพื่อทำให้แน่ใจว่าสิ่งตีพิมพ์จะมีลักษณะการนำเสนอที่ถูกต้อง คือการสะกดคำและการใช้เครื่องหมายวรรคตอน ส่วนเอกสารอิเล็กทรอนิกส์ในยุคปัจจุบัน สไตล์ชีตถูกใช้ในการจัดลักษณะการปรากฏของเนื้อหาหรือความสวยงามมากกว่าการสะกดคำ
ส่วนประกอบ
ภาษาสไตล์ชีตทั้งหมดมักจะประกอบด้วยปัจจัยหลักเหล่านี้
- วากยสัมพันธ์ (syntax)
- ภาษาสไตล์ชีตจำเป็นต้องมีวากยสัมพันธ์อย่างหนึ่งเพื่อให้คอมพิวเตอร์สามารถเข้าใจและแสดงผลได้ ตัวอย่างต่อไปนี้เป็นสไตล์ชีตอย่างง่ายที่เขียนขึ้นด้วยวากยสัมพันธ์ของ CSS
h1 { font-size: 1.5em }
- ตัวเลือก (selector)
- ตัวเลือกเป็นสิ่งที่ระบุว่าอิลิเมนต์ใดควรแสดงผลหรือไม่แสดงผลตามกฎเกณฑ์ที่ให้ไว้ ตัวเลือกจะเป็นตัวเชื่อมต่อระหว่างโครงสร้างของเอกสารกับกฎเกณฑ์ในสไตล์ชีต จากตัวอย่างข้างต้น "
h1
" คือตัวเลือกสำหรับอิลิเมนต์ h1 ทั้งหมดที่ปรากฏในเอกสาร ตัวเลือกที่ซับซ้อนยิ่งขึ้นสามารถเลือกบางอิลิเมนต์ให้เฉพาะเจาะจงลงไปได้ - สมบัติ (property)
- สมบัติเป็นหัวข้อต่างๆ สำหรับกำหนดกฎเกณฑ์ของอิลิเมนต์ที่เลือก เช่น "
font-size
" จากตัวอย่างข้างบน เป็นสมบัติของ CSS อย่างหนึ่ง ใช้สำหรับกำหนดขนาดของแบบอักษร ภาษาสไตล์ชีตโดยทั่วไปมีสมบัติทั้งหมดประมาณ 50 ชนิดเพื่ออธิบายลักษณะการแสดงผลต่างๆ ของเอกสาร - ค่าและหน่วย (values and units)
- สมบัติต่างๆ ของอิลิเมนต์สามารถเปลี่ยนแปลงได้โดยการใส่ค่าค่าหนึ่ง ค่านั้นสามารถเป็นสตริง คำสำคัญ จำนวน หรือจำนวนพร้อมหน่วยกำกับ บางครั้งสมบัติหนึ่งๆ ก็สามารถใส่ได้หลายค่าหรือสามารถใส่นิพจน์เพื่อคำนวณให้ได้ผลตามต้องการ โดยปกติค่าที่เป็นจำนวนจะหมายถึงระยะความยาวของตำแหน่งการแสดงผล เช่น "
1.5em
" ประกอบด้วยค่าจำนวน 1.5 และหน่วย em (หน่วยแทนความสูงที่สัมพันธ์กับขนาดอักษรรอบข้าง) ภาษาสไตล์ชีตโดยทั่วไปมีหน่วยที่แตกต่างกันทั้งหมดประมาณ 10 ชนิด - กลไกการแพร่กระจายค่า (value propagation mechanism)
- เพื่อหลีกเลี่ยงความจำเป็นที่จะต้องกำหนดค่าให้กับสมบัติทั้งหมดของอิลิเมนต์ทุกชนิด ภาษาสไตล์ชีตจึงมีกลไกที่จะช่วยแพร่กระจายค่าให้โดยอัตโนมัติ ข้อดีหลักของกลไกการแพร่กระจายค่าคือช่วยลดความฟุ่มเฟือยของสไตล์ชีตให้น้อยลง จากตัวอย่างข้างต้น มีเพียงสมบัติ "
font-size
" เท่านั้นที่ถูกกำหนด สำหรับสมบัติอื่นๆ จะถูกถ่ายทอดมาจากอิลิเมนต์ในระดับเหนือขึ้นไปหรือมาจากค่าเริ่มต้น - แบบจำลองรูปแบบ (formatting model)
- ภาษาสไตล์ชีตทุกภาษารองรับแบบจำลองรูปแบบ ซึ่งเป็นแบบจำลองที่ใช้อธิบายว่าข้อความตัวอักษรและเนื้อหาอื่นจะถูกจัดวางอย่างไรในการนำเสนอสุดท้าย ตัวอย่างเช่น แบบจำลองรูปแบบใน CSS ระบุว่า อิลิเมนต์ประเภทบล็อก (เช่น "
h1
") จะขยายเต็มความกว้างของอิลิเมนต์ระดับบน ภาษาสไตล์ชีตบางภาษามีแบบจำลองรูปแบบสำหรับการฟังด้วย
ดูเพิ่ม
อ้างอิง
- Cascading Style Sheets PhD thesis, by Håkon Wium Lie
wikipedia, แบบไทย, วิกิพีเดีย, วิกิ หนังสือ, หนังสือ, ห้องสมุด, บทความ, อ่าน, ดาวน์โหลด, ฟรี, ดาวน์โหลดฟรี, mp3, วิดีโอ, mp4, 3gp, jpg, jpeg, gif, png, รูปภาพ, เพลง, เพลง, หนัง, หนังสือ, เกม, เกม, มือถือ, โทรศัพท์, Android, iOS, Apple, โทรศัพท์โมบิล, Samsung, iPhone, Xiomi, Xiaomi, Redmi, Honor, Oppo, Nokia, Sonya, MI, PC, พีซี, web, เว็บ, คอมพิวเตอร์
phasasitlchit xngkvs style sheet language khuxphasakhxmphiwetxrthiichxthibaylksnakarnaesnxkhxngexksartnchbbthithukcdepnokhrngsrang sungmiswntang thukkahndaelacdklumiwxyangchdecnaelw well formed opraekrmhnung canaexksartnchbbipnaesnxodyichlksnathiaetktangkntamklumthiidkahndiw enuxngcakkhunlksnaxyanghnungkhxngexksarthithukcdepnokhrngsrangkhux enuxhathisamarthnaklbmaichihmidinhlaybribthaelanaesnxidhlaywithi lksnakarnaesnxthiaenbtidipkbexksar cathaihkaraesdngphlaetktangkntamkhwamtxngkarinaetlangan phasasitlchitxyanghnungthiniymichknxyangkwangkhwangechn CSS ichsahrbkahndlksnakaraesdngphlkhxngexksar HTML XHTML SVG XUL aelaphasamarkxpxun aelaephuxthicanaesnxenuxhakhxngexksarthithukcdepnokhrngsrangnn kdeknthkaraesdngphltang cathuknamaich echn sitwxksr aebbxksr okhrngrangkarcdhna epntn kdeknthehlanieriykrwmknwaepn sitlchit sitlchitaetedimnnepnexksarthiekhiynkhunaelathimiprawtiyawnan thukichodyphuxanwykarphimph nkphimphdid aelankekhiyn ephuxthaihaenicwasingtiphimphcamilksnakarnaesnxthithuktxng khuxkarsakdkhaaelakarichekhruxnghmaywrrkhtxn swnexksarxielkthrxniksinyukhpccubn sitlchitthukichinkarcdlksnakarpraktkhxngenuxhahruxkhwamswyngammakkwakarsakdkhaswnprakxbphasasitlchitthnghmdmkcaprakxbdwypccyhlkehlani wakysmphnth syntax phasasitlchitcaepntxngmiwakysmphnthxyanghnungephuxihkhxmphiwetxrsamarthekhaicaelaaesdngphlid twxyangtxipniepnsitlchitxyangngaythiekhiynkhundwywakysmphnthkhxng CSS h1 font size 1 5 em tweluxk selector tweluxkepnsingthirabuwaxiliemntidkhwraesdngphlhruximaesdngphltamkdeknththiihiw tweluxkcaepntwechuxmtxrahwangokhrngsrangkhxngexksarkbkdeknthinsitlchit caktwxyangkhangtn h1 khuxtweluxksahrbxiliemnt h1 thnghmdthipraktinexksar tweluxkthisbsxnyingkhunsamartheluxkbangxiliemntihechphaaecaacnglngipid smbti property smbtiepnhwkhxtang sahrbkahndkdeknthkhxngxiliemntthieluxk echn font size caktwxyangkhangbn epnsmbtikhxng CSS xyanghnung ichsahrbkahndkhnadkhxngaebbxksr phasasitlchitodythwipmismbtithnghmdpraman 50 chnidephuxxthibaylksnakaraesdngphltang khxngexksar khaaelahnwy values and units smbtitang khxngxiliemntsamarthepliynaeplngidodykariskhakhahnung khannsamarthepnstring khasakhy canwn hruxcanwnphrxmhnwykakb bangkhrngsmbtihnung ksamarthisidhlaykhahruxsamarthisniphcnephuxkhanwnihidphltamtxngkar odypktikhathiepncanwncahmaythungrayakhwamyawkhxngtaaehnngkaraesdngphl echn 1 5em prakxbdwykhacanwn 1 5 aelahnwy em hnwyaethnkhwamsungthismphnthkbkhnadxksrrxbkhang phasasitlchitodythwipmihnwythiaetktangknthnghmdpraman 10 chnid klikkaraephrkracaykha value propagation mechanism ephuxhlikeliyngkhwamcaepnthicatxngkahndkhaihkbsmbtithnghmdkhxngxiliemntthukchnid phasasitlchitcungmiklikthicachwyaephrkracaykhaihodyxtonmti khxdihlkkhxngklikkaraephrkracaykhakhuxchwyldkhwamfumefuxykhxngsitlchitihnxylng caktwxyangkhangtn miephiyngsmbti font size ethannthithukkahnd sahrbsmbtixun cathukthaythxdmacakxiliemntinradbehnuxkhuniphruxmacakkhaerimtn aebbcalxngrupaebb formatting model phasasitlchitthukphasarxngrbaebbcalxngrupaebb sungepnaebbcalxngthiichxthibaywakhxkhwamtwxksraelaenuxhaxuncathukcdwangxyangirinkarnaesnxsudthay twxyangechn aebbcalxngrupaebbin CSS rabuwa xiliemntpraephthblxk echn h1 cakhyayetmkhwamkwangkhxngxiliemntradbbn phasasitlchitbangphasamiaebbcalxngrupaebbsahrbkarfngdwyduephimraychuxphasasitlchitxangxingCascading Style Sheets PhD thesis by Hakon Wium Lie