For Android device For iOS device
១៦
តុលា

​ប្រវត្តិ​នៃភាសា Cascading Style Sheet (CSS)

♦ កែ​សម្រួល​អត្ថបទឡើងវិញ នៅ​ខែ​កុម្ភៈ ឆ្នាំ ២០២៣ ដោយលោក ចែ សុផល

តើភាសា Cascading Style Sheet (CSS) គឺជាអ្វី?

 

 

Cascading Style Sheet (CSS) គឺជា​ប្រភេទ Style Sheet language ដែល​ប្រើ​សម្រាប់​បន្ថែម​ភាពស្រស់​ស្អាត​ទៅ​ឲ្យ Markup language ។ CSS ជា​បច្ចេកវិទ្យា​គ្រឹៈ​ដែល​គេ​និយម​ប្រើ​ច្រើន​បំផុត​ក្នុង​ការ​ប្រើ​ប្រាស់ ដើម្បី​បង្កើត​វេបសាយ​ឲ្យ​មានភាព ស្រស់​ស្អាត និងមានចលនា ។ លក្ខណៈ​ពិសេស​គឺ​ប្រើ​សម្រាប់​បន្ថែម Style ទៅលើ web pages ដូចជា HTML និង XHTML ឬ XML ជាដើម ។ លើសពីនេះទៀត, CSS បាន​ប្រើ​សម្រាប់​សិក្សា​ពីការរចនាគេហទំព័រ ឲ្យ​ដំណើរ​ការ​បានស្ទើរគ្រប់ Browsers (Chrome, Firefox, Safari, Brave, Opera, ...) និងការដាក់ style ជាមួយ CSS Advance ជា​ច្រើន​ទៅគេហទំព័រ ដើម្បី​ឲ្យ​កាន់តែ ទាក់ទាញ និង​ងាយស្រួល​ក្នុង​ការមើល​ក៏​ដូចជា​ការ​ប្រើ​ប្រាស់ ។
ពីមុនពេល​ដែល​គ្មាន CSS រាល់ការតុបតែង​ទៅលើ HTML ត្រូវប្រកាស​នូវ Attributes របស់ HTML Tags និង ប្រើ​ប្រាស់ HTML Formatting Elements ។ យើងឃើញថាការតុបតែង Styles ទាំងនេះ វាមាន​លក្ខណៈ​ដ​ដែល​ៗ និងខាតពេលវេលា ហេតុដូចនេះ CSS បាន​បង្កើត​ឡើង​នូវ stylesheet ដើម្បី​ផ្ដល់​ភាព​ងាយស្រួល​ក្នុង​ការ​សរសេរ​កូដ ការ​គ្រប់គ្រង ជា​ពិសេស​មានភាពទាក់ទាញ​ឲ្យ កាន់តែស្រស់​ស្អាត ជាង HTML ។

→ ចូរ​រៀបរាប់​ពី​ប្រវត្តិ​នៃភាសា CSS?

CSS ​ត្រូវបាន​ផ្តួចផ្តើមគំនិត​បង្កើត​វាឡើងដោយ លោក Hakon Wium Lie នៅ ថ្ងៃ​ទី១០ ខែតុលា ឆ្នាំ​១៩៩៤ ។ ក្នុង​ខណៈពេលនោះ លោក Lie បាន​កំពុង​ធ្វើការ​ជាមួយ លោក Tim Berners-Lee នៅ​ក្រុមហ៊ុន​ CERN (European Organization for Nuclear Research)  

ខណៈពេលភាសា CSS បានលេចចេញជារូបរាងឡើង ពេលនោះហើយ​ត្រូវបាន​គេពិភាក្សា និង កំណត់​ឲ្យ​ប្រើ​ប្រាស់ជាលើកដំបូងដោយអង្គការ W3C (World Wide Web Consortium) ។ លោក Bert Bos ពិតជាមាន​សារៈ​សំខាន់​ខ្លាំងណាស់ ដោយ​សារលោក​បានក្លាយជា​អ្នក​ចូលរួម​ក្នុង​ការ​បង្កើត CSS1

CSS បានដាក់​ឲ្យ​ប្រើ​ប្រាស់​ជា​ផ្លូវ​ការលើកដំបូងដោយ W3C មាន​ឈ្មោះ​ថា CSS Level 1 (CSS1) នៅ​ថ្ងៃ​ទី១៧ ខែធ្នូ ឆ្នាំ​១៩៩៦ ដោយលោក Håkon Wium Lie និងលោក Bert Bos ។ លោក​ទាំងពីរ​ជាមនុស្សដំបូង​ដែល​បង្កើត​វាឡើង ។ សមត្ថភាព​របស់ CSS មាន​ដូចជា​៖

 CSS1

- Font properties មាន​ដូចជា​ typeface និង emphasis

- Color of text, backgrounds and other elements

- Text Attribute ​ដូចជា​ spacing ​ទៅលើ​ words, letters និង line of text

- Alignment of text, images, tables and other elements

- Margin, border, padding, and positioning for most elements

- Unique identification and generic classification of groups of attributes

 CSS2

​សម្រាប់ CSS level 2 (CSS2)  ​ត្រូវបាន​បង្កើត​ឡើងដោយ W3C និងដាក់​ឲ្យ​​ប្រើ​ប្រាស់​ក្នុង​ខែឧសភា ឆ្នាំ​១៩៩៨ ។  CSS2 មាន​លក្ខណៈ​ពិសេស​ជាង CSS1 ​ដែល​បានរួម​បញ្ចូល​នូវ​សមត្ថភាព​ថ្មីមួយចំនួន​ដូចជា absolute, relative, and fixed positioning of element and z-index, the concept of media types, support of aural style sheet, bidirectional text, និងបាន​បង្កើត properties ថ្មី​សម្រាប់ font ​ដូចជា​ការដាក់ស្រមោល ។

♣ CSS2.1

​ដោយសារ CSS2 មាន​បញ្ហា Errors ​ច្រើន​, ​បន្ទាប់មក W3C បានបញ្ចេញ នូវ Version CSS2.1 សម្រាប់​កែ​តម្រូវ​ទៅលើ CSS2 ។ វាមាន​លក្ខណៈ​ស្តង់ដាជាង CSS2 ជា​ពិសេស​គឺវា Support ​ទៅលើ Browser version ថ្មីៗ ។

 CSS3

CSS3 មាន​លក្ខណៈ​ខុស​គ្នា​ពី CSS2 ដែល​វាមាន​លក្ខណៈ​ពិសេស​ដែល​ត្រូវ​បាន​គេ​កំណត់​ឡើង ។ CSS3 ត្រូវបាន​បែងចែកជា​ផ្នែក​ផ្សេងៗ​មួយចំនួនហៅថា Module Module ​នីមួយៗ​បាន​បន្ថែម​សមត្ថភាព​ថ្មី ដោយបានពង្រីក​លក្ខណៈ​ពិសេស​ដែល​បាន​កំណត់​នៅ​ក្នុង CSS2 ។ វា​ត្រូវបាន​គេដាក់​ឲ្យ​ប្រើ​ប្រាស់​ក្នុង​ខែមិថុនា ឆ្នាំ​១៩៩៨ ។

គិតត្រឹមខែ​មិថុនា ឆ្នាំ​២០១២ Modules CSS មានជាង ៥០ ដែល​បានដាក់​ឲ្យ​ប្រើ​ប្រាស់​ដោយក្រុម​ការងារ CSS ។ រហូត​មកដល់ខែមករា ឆ្នាំ​២០២១ មាន ៦ Modules ​ដែល​ត្រូវ​បាន​ដាក់​ឲ្យ​ប្រើ​ប្រាស់​ជា​ផ្លូវ​ការមាន​ដូចជា​៖

- css-cascade-3: CSS Cascading and Inheritance Level 3, __ Feb 2021.

- css-fonts-3: CSS Fonts Module Level 3, __ Sep 2018

- css3-ui: CSS Basic User Interface Module Level 3 (CSS3 UI) , __ Jun 2018

- css3-mediaqueries: Media Queries, __ Jun 2012

- selectors-3: Selectors Level 3, __ Sep 2011

- css3-color: CSS Color Module Level 3, __ Jun 2011

CSS3 រួម​បញ្ចូល​ទាំងការ​បញ្ជាក់​ទាំងអស់​នៃ CSS1, CSS2, CSS2.1 និង CSS3 ។ ខាងក្រោម​គឺជាមុខងារថ្មីៗ​មួយចំនួននៅ​ក្នុង CSS3៖

- New Selectors: គឺជាការ​ជ្រើសរើស​ធាតុ HTML ​ដែល​អ្នកចង់ធ្វើរចនាប័ទ្ម ។ ដូចជា​: Combinators, Attribute, Pseudo-classes, Pseudo-elements.

- CSS Function គឺជាអនុគមន៍មួយ​ដែល​អាចផ្ទុក​តម្លៃ​បាន​ច្រើន ។

- Shadows Effect: ​សម្រាប់​ដាក់ស្រមោលប្រអប់ និងស្រមោលអត្ថបទ ។

- Rounded Corners: ​សម្រាប់​កំណត់​ជ្រុង​ឲ្យ​កោងនៃ​រូបភាព ឬ​ Blocks នៃធាតុ ។

- Gradients: ​សម្រាប់​ដាក់ផ្ទៃខាងក្រោយជា Linear, Radial and Repeating gradients

- Opacity: ប្រើ​សម្រាប់​កំណត់​ភាពច្បាស់នៃ​រូបភាព ឬ​ក៏ block ណាមួយ​ឲ្យ​មើលឃើញព្រាលៗ ឬ​ក៏​ច្បាស់ ។

- Transitions: ​សម្រាប់​កំណត់​ល្បឿន​ចលនា ឬ​ល្បឿន​នៃការផ្លាស់ប្តូរ ។

- Transformations: ជា​ប្រភេទ effect មួយ​ដែល​អាច​ឲ្យ​យើង​ធ្វើការ​ប្តូររូបរាង, ​ទំហំ​, និង​ទីតាំងរបស់ Element

- Animations: ​សម្រាប់​ធ្វើចលនាវត្ថុ​ណាមួយ​ដោយមិន​ប្រើ​ Flash

- Flexbox: ​ប្រើ​សម្រាប់​ឲ្យ​មានភាព​ងាយស្រួល​ក្នុង​ការ Design Layout Responsive ដោយមិនត្រូវការរ​ប្រើ​ប្រាស់ float position properties ឡើយ ។

- Grids: គឺបាន​ផ្ដល់​នូវ​ប្រព័ន្ធ​ប្លង់​ដែល​មាន​មូលដ្ឋាន​ជាមួយនឹង​ជួរដេក និងជួរឈរ ដែល​ធ្វើ​ឲ្យ​វាកាន់តែ​ងាយស្រួល​ក្នុង​ការរចនាគេហទំព័រដោយមិនចាំបាច់​ប្រើ​អណ្តែត និងទីតាំង ។

- @font-face: គឺអាច Embedded គ្រួសារពុម្ពអក្សរផ្សេងៗ​

- @media:​ លក្ខខណ្ឌផ្អែកលើ CSS ដើម្បី​បង្កើត​ការរចនាគេហទំព័រ​ដែល Responsive 

♣ ដកស្រង់ចេញពីប្រភពៈ

https://en.wikipedia.org/wiki/CSS

https://tutorial.techaltum.com/css3.html

♻️ ​សម្រាប់​លោកអ្នក​ដែល​ចង់​ដំឡើង​កម្មវិធី ANTLearner សម្រាប់ Windows សូម​ចូលរួម Telegram÷ https://t.me/AntTechnologyTrainingCenter

📲 ​សម្រាប់​លោកអ្នក​ចង់​ដំឡើង​កម្មវិធី ANTLearner សម្រាប់ Android https://bit.ly/3qhYCJf

♦ ​សម្រាប់​ព័ត៌មាន​វគ្គ​សិក្សា​កុំព្យូទ័រ​នៅអាន-ANT http://training.antkh.com

សម្រាប់​ព័ត៌មាន​ទំនាក់ទំនងមកយើង​ខ្ញុំ ៖ លេខ​ទូរសព្ទ ០១០ / ០១៦ ៦៦៦ ៦៥៣

ឬ​ Facebook: https://www.facebook.com/anttrainning

Facebook Page: ANT Magazine

Facebook Group: https://www.facebook.com/groups/ANTTrGroup/

♻️ សូម​ចូលរួម Telegram÷ https://t.me/AntTechnologyTrainingCenter

មតិ និង​យោបល់​ទៅលើ​អត្ថបទ​នេះ (តាម Facebook)

ខាងក្រោម​នេះ​ជា​យោបល់​ផ្សេងៗ​របស់​អ្នកទស្សនា