រៀនអំពីការរចនាវេបសាយជាមួយនឹង CSS

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។