CSS ត្រូវបានគេប្រើសំរាប់រចនាវេបសាយអោយមានសោភ័ណភាពល្អ ទៅតាមទំហំ ព័ណ៌ ទ្រង់ទ្រាយ ទីកន្លែង។

មូលដ្ឋានគ្រឹះរបស់ Cascading Style Sheets (CSS)

maxresdefaultCSS គឺជាភាសាដែលរៀបរាប់អំពីរចនាបថនៃឯកសារ HTML មួយ។ CSS ដែលជាអក្សរកាត់មកពីពាក្យថា Cascading Style Sheets។ CSS បានរៀបរាប់អំពីរបៀបដែលធាតុរបស់ HTML ត្រូវបានបង្ហាញនៅលើអេក្រង់, ក្រដាស, ឬនៅក្នុងប្រព័ន្ធផ្សព្វផ្សាយផ្សេងទៀត។ CSS បានរក្សាទុកការងារជាច្រើន។ វាអាចគ្រប់គ្រងប្លង់នៃទំព័របណ្ដាញទាំងអស់ជាច្រើននៅពេលតែមួយ។

 

របៀបកំណត់ទីតាំងជាមួយ CSS

css-position-copyកាលពីអត្ថបទមុន Techfreeបានលើកបង្ហាញអំពី មូលដ្ឋានគ្រឹះរបស់ Cascading Style Sheets (CSS)។ ចំណែកឯនៅក្នុងអត្ថបទនេះយើងនឹងលើកមកបង្ហាញអំពី របៀបកំណត់ទីតាំងជាមួយ CSS។

 

 

របៀបកំណត់រូបភាព Background ជាមួយ CSS

css-background-imageនៅក្នុងវេបសាយមួយដើម្បីធ្វើអោយមានការទាក់ទាញ អ្នកបង្កើតគួរតែដាក់រូបភាពផ្ទៃខាងក្រោយ។ ប៉ុន្តែការដាក់ផ្ទៃខាងក្រោយនេះស្អាត ឬមិនស្អាតគឺអាស្រ័យទៅលើរូបភាពដែលយើងយកមកដាក់។

នៅក្នុងអត្ថបទនេះ Techfree នឹងលើកយកអំពី របៀបកំណត់រូបភាពផ្ទៃខាងក្រោយ (background-image) មកបង្ហាញជូនអ្នកទាំងអស់គ្នា។

 

របៀបប្រើ icon នៅក្នុង CSS

font-awesome-css-copyវិធីសាមញ្ញបំផុតដើម្បីបន្ថែមអាយខន (icon) មួយទៅទំព័រ HTML របស់អ្នក, គឺត្រូវប្រើជាមួយនឹងបណ្ណាល័យអាយខន (icon) មួយចំនួន, ដូចជា Font Awesome។

នៅក្នុងអត្ថបទនេះ Techfree នឹងលើកយកអំពីការប្រើអាយខន (icon) របស់ Font Awesome មកបង្ហាញអ្នកទាំងអស់គ្នា។

 

វិធីប្រើប្រាស់ CSS Opacity

css-opacityអត្ថបទនេះ Techfree នឹងលើកយកនូវចំនេះដឹងមួយដែលនិយាយអំពីវិធីប្រើប្រាស់ CSS Opacity។ លក្ខណៈសម្បត្តិភាពស្រអាប់ (opacity) កំណត់កម្រិតភាពស្រអាប់ (opacity)សម្រាប់ធាតុមួយ។ កម្រិតភាពស្រអាប់ (opacity-level) រៀបរាប់អំពីកម្រិតថ្លា (transparency-level) ដែលតំលៃ 1 មិនថ្លាទាំងអស់នោះទេ, 0,5 គឺ 50% អាចមើលឃើញ និងតំលៃ 0 គឺមានភាពថ្លា (transparent) ទាំងស្រុង។

 

របៀបប្រើ CSS ជាមួយ gradient

css_maticជម្រាល CSS (CSS gradient)អនុញ្ញាតឱ្យអ្នកផ្លាស់ប្តូរដោយរលូនរវាងពណ៌ពីរជាក់លាក់។ កាលពីដើមអ្នកបានប្រើរូបភាពសម្រាប់បែបផែនទាំងនេះ។ ទោះជាយ៉ាងណា, ដោយប្រើជម្រាល CSS អ្នកអាចកាត់បន្ថយពេលវេលាទាញយកនិងប្រើប្រាស់កម្រិតបញ្ជូន។ លើសពីនេះទៀតធាតុដោយប្រើជម្រាល (gradient) ដែលមើលទៅល្អប្រសើរជាងមុននៅពេលដែលអ្នកពង្រីក ដោយសារតែជម្រាល (gradient) ត្រូវបានបង្កើតដោយកម្មវិធីមើលវេបសាយ (browser)។

 

តើ CSS Overflow មានតួនាទីយ៉ាងដូចម្តេច?
css-overflow1-copyCSS overflow ត្រូវបានគេប្រើសំរាប់កំណត់ របៀបបង្ហាញអត្ថបទក្នុងទ្រង់ទ្រាយណាមួយ។ តាមរយៈCSS overflow គេអាចកំណត់របៀបបង្ហាញអត្ថបទ៖ អោយបង្ហាញទាំងអស់ ឬមិនបង្ហាញអត្ថបទណាដែលហួសដែនដែលបានកំណត់  ឬបង្ហាញរបារសំរាប់ទាញមើលអត្ថបទទាំងអស់។

 

 

ការប្រើប្រាស់ Border នៅក្នុង CSS

Border CSSBorder នៅក្នុងភាសា CSS គឺត្រូវបានអនុញ្ញាតអោយអ្នកសរសេរកូដធ្វើការរចនា កំណត់ប្រវែង ក៏ដូចជា ដាក់ពណ៌ទៅអោយ Border បាន។

សម្រាប់ការរចនាទៅលើ Border CSS  វាត្រូវបានធ្វើការកំណត់ទៅតាមប្រភេទនៃ Border ។

 

 

ស្វែងយល់អំពី CSS Float

css-floatCss float ជាលក្ខណៈសម្បត្តិទីតាំងរបស់ CSS, វាត្រូវបានកំណត់ប្រសិនបើធាតុរបស់ HTML នឹងត្រូវបានអណ្តែត (float) ឬអត់។ none – ធាតុនេះមិនត្រូវបានអណ្តែត (float) ហើយនឹងត្រូវបានបង្ហាញនៅកន្លែងដែលវាកើតឡើងនៅក្នុងអត្ថបទប៉ុណ្ណោះ នេះជាលំនាំដើម left – ធាតុអណ្តែត (float) ទៅខាងឆ្វេង right – ធាតុអណ្តែត (float) ទៅខាងស្តាំ initial – កំណត់លក្ខណៈសម្បត្តិទៅតម្លៃលំនាំដើម inherit – ទទួលលក្ខណៈសម្បត្តិពីធាតុមេ

 

ស្វែងយល់អំពី CSS Flexbox

css-flexboxប្រអប់អាចបត់បែនបាន ឬ flexbox, គឺជាម៉ូដប្លង់មួយថ្មីនៅក្នុង CSS3 ។ ការប្រើប្រាស់នៃ flexbox ធានាថារាល់ធាតុធ្វើទៅតាមការស្មានទុកនៅពេលប្លង់ទំព័រត្រូវធ្វើទៅតាមទំហំអេក្រង់ខុសគ្នានិងឧបករណ៍បង្ហាញខុសគ្នា។ សម្រាប់កម្មវិធីជាច្រើន, ម៉ូដប្រអប់អាចបត់បែនបានផ្ដល់នូវភាពល្អប្រសើរជាងម៉ូដែលប្លុកនៅក្នុងនោះវាមិនប្រើធាតុអណ្តែត (float) ឬធ្វើការផ្តួលរឹមប្រអប់ flex ជាមួយរឹមនៃអត្ថបទរបស់វា។

 

លក្ខណៈខុសគ្នាក្នុងការប្រើប្រាស់ ID និង Class ក្នុង CSS

cssaclassលោកអ្នកប្រហែលជាបានដឹងរួចមកហើយថាការប្រើប្រាស់ CSS មកពីពាក្យថា Cascading Style Sheets គឺពិតជាសំខាន់សម្រាប់តុបតែងវេបសាយនីមួយៗអោយមានភាពទាក់ទាញ។ ហេតុនេះហើយ Techfree សូមលើកយកលក្ខណៈខុសគ្នាក្នុងការប្រើប្រាស់ Id និង Class ក្នុង CSS

 

 

របៀបកំណត់ជ្រុងប៉ូតុន ឬ រូបភាពអោយមូល ជាមួយ CSS

how-to-use-rounded-corners-button-or-imagein-cssគេអាចរចនាប៉ូតុន ឬ រូបភាព អោយកាន់តែប្លែកតាមរយៈការកែច្នៃជ្រុងរបស់វា។ អត្ថបទនេះនឹងបង្ហាញពីរបៀបកំណត់ជ្រុងប៉ូតុន ឬ រូបភាពអោយមូល ជាមួយ CSS។ តាមរយៈ CSS គេអាចរចនាទៅលើប៉ូតុន ឬ រូបភាព អោយទៅជារាងរង្វង់នៅកន្លែងចំនុចកែងបានយ៉ាងស្រស់ស្អាត ដែលយើងបានធ្វើវាឡើងដោយពុំចាំបាច់កែច្នៃរូបភាព ឬ ប៉ូតុន ដោយផ្ទាល់។ តំលៃដែលត្រូវកំណត់គឺ border-radius ។

 

របៀបប្រើប្រាស់នឹង បង្កើត Menu CSS

create-menu-cssសម្រាប់ Menu យើងអាចធ្វើការបង្កើតឡើងដោយប្រើកូដ HTML  ជាមួយនិង កូដ CSS ដែលអាចអោយយើងធ្វើការរចនាបានទៅតាមអ្វីដែលយើងចងបាន។ សម្រាប់ Menu យើងអាចធ្វើការបង្កើតឡើងដោយប្រើកូដ HTML  ជាមួយនិង កូដ CSS ដែលអាចអោយយើងធ្វើការរចនាបានទៅតាមអ្វីដែលយើងចងបាន។ ការយកកូដ HTML មកប្រើគឺ CSS ធ្វើការស្វែងរក a list របស់កូដនៅក្នុង HTML។