Latest Products
    Showing posts with label រៀន HTML-CSS- XML. Show all posts
    Showing posts with label រៀន HTML-CSS- XML. Show all posts
    ប្រើប្រាស់ Div និងការបង្កើត Box ជាមួយ CSS

    ប្រើប្រាស់ Div និងការបង្កើត Box ជាមួយ CSS

    ១- តើ Div គឺជាអ្វី? Div គឺជា Element សម្ខាន់ណាស់ក្នុង ពេលបច្ចុប្បន្នសម្រាប់ការរចនា និងរៀបចំ ទម្រង់នៃ​​គេហទំព័រ​។ គេប្រើប្រាស់វាសម្រាប់បែងចែកប្លុកនៃកូដ និង Layout ឬ ប្លុកនៃការបង្ហាញ ហើយ​រាល់​ការ​រៀប​ចំ​រចនា Lay Out និង Position Layout គឺអាស្រ័យទៅលើ Div។
    <div class= “logo” > <img src=“images/mylogo.png”> </div>
    <div class= “header-title”> <h1> Introduction </h1> </div>
    ការប្រើប្រាស់ Div គឺដូចជាការបង្កើតប្រអប់ដើម្បីផ្ទុកកូដ និង ប្លុកនៃការបង្ហាញអញ្ចឹងដែរ។ ហើយObject នៃការបង្ហាញមួយគឺគេប្រើ Div មួយដើម្បីគ្រប់គ្រង ទីតាំង និង Style របស់ Object នោះ។ សូមមើល រូបភាពខាងក្រោម ដែលខ្សែរក្រហមនេះគឺគេប្រើ Div សម្រាប់រៀបចំ Layout
    1តែយើង និងមិនឃើញដោយភ្នែកផ្ទាល់ទេ គឺយើងត្រូវប្រើ Web development tool bar ដើម្បីមើល Div ដែលគេបាន បង្កើតលើគេហទំព័រនីមួយៗបាន។
    ២- Box model របស់ Div ក្រោយពីយើងដឹងថា Div គឺជា Box ឬ ប្លុកមួយសម្រាប់បែងចែកកូដ ដែលជាទិន្នន័យដែល​បង្ហាញ។ យើងត្រូវសិក្សារពីការប្រើប្រាស់ Box Model របស់ Div ថែមទៀត
    1នៅក្នុង Div វាមាន Object ជាច្រើនៅក្នុងនោះ តែយើងមិន អាចមើលឃើញដោយគ្មានកម្មវិធី ជំនួយ។ យ៉ាងណាម៉េញ ខាងលើនេះ គឺជា Box Model របស់ Div ដែលមាន Position របស់ Properties : Margin, Border និង Padding ចំពោះ Content គឺជាផ្នែកដែលត្រូវបង្ហាញទិន្នន័យ។
    –  Margin គឺជាស្រទាប់ក្រៅបង្អស់របស់ Div វាគ្មាន Background-color ហើយលក្ខណៈពិសេសរបស់វាគឺ Value Properties អាចអវិជ្ជមានបាន។
    –   Border គឺជាស្រទាប់បន្ទាប់ពី Margin ប្រើសម្រាប់ដាក់ Border ឲ្យ Div
    –   Padding គឺជាគម្លាតរវាង Border និង Content ដែលជាផ្នែកបង្ហាញទិន្នន័យ Content គឺជាផ្នែកបង្ហាញ ទិន្នន័យ។
    ៣- លំហាត់ និង កំណាត់កូដខ្លះៗ ក្នុងការរៀនបង្កើត Box
    1
    ១- តើ Div គឺជាអ្វី? Div គឺជា Element សម្ខាន់ណាស់ក្នុង ពេលបច្ចុប្បន្នសម្រាប់ការរចនា និងរៀបចំ ទម្រង់នៃ​​គេហទំព័រ​។ គេប្រើប្រាស់វាសម្រាប់បែងចែកប្លុកនៃកូដ និង Layout ឬ ប្លុកនៃការបង្ហាញ ហើយ​រាល់​ការ​រៀប​ចំ​រចនា Lay Out និង Position Layout គឺអាស្រ័យទៅលើ Div។
    <div class= “logo” > <img src=“images/mylogo.png”> </div>
    <div class= “header-title”> <h1> Introduction </h1> </div>
    ការប្រើប្រាស់ Div គឺដូចជាការបង្កើតប្រអប់ដើម្បីផ្ទុកកូដ និង ប្លុកនៃការបង្ហាញអញ្ចឹងដែរ។ ហើយObject នៃការបង្ហាញមួយគឺគេប្រើ Div មួយដើម្បីគ្រប់គ្រង ទីតាំង និង Style របស់ Object នោះ។ សូមមើល រូបភាពខាងក្រោម ដែលខ្សែរក្រហមនេះគឺគេប្រើ Div សម្រាប់រៀបចំ Layout
    1តែយើង និងមិនឃើញដោយភ្នែកផ្ទាល់ទេ គឺយើងត្រូវប្រើ Web development tool bar ដើម្បីមើល Div ដែលគេបាន បង្កើតលើគេហទំព័រនីមួយៗបាន។
    ២- Box model របស់ Div ក្រោយពីយើងដឹងថា Div គឺជា Box ឬ ប្លុកមួយសម្រាប់បែងចែកកូដ ដែលជាទិន្នន័យដែល​បង្ហាញ។ យើងត្រូវសិក្សារពីការប្រើប្រាស់ Box Model របស់ Div ថែមទៀត
    1នៅក្នុង Div វាមាន Object ជាច្រើនៅក្នុងនោះ តែយើងមិន អាចមើលឃើញដោយគ្មានកម្មវិធី ជំនួយ។ យ៉ាងណាម៉េញ ខាងលើនេះ គឺជា Box Model របស់ Div ដែលមាន Position របស់ Properties : Margin, Border និង Padding ចំពោះ Content គឺជាផ្នែកដែលត្រូវបង្ហាញទិន្នន័យ។
    –  Margin គឺជាស្រទាប់ក្រៅបង្អស់របស់ Div វាគ្មាន Background-color ហើយលក្ខណៈពិសេសរបស់វាគឺ Value Properties អាចអវិជ្ជមានបាន។
    –   Border គឺជាស្រទាប់បន្ទាប់ពី Margin ប្រើសម្រាប់ដាក់ Border ឲ្យ Div
    –   Padding គឺជាគម្លាតរវាង Border និង Content ដែលជាផ្នែកបង្ហាញទិន្នន័យ Content គឺជាផ្នែកបង្ហាញ ទិន្នន័យ។
    ៣- លំហាត់ និង កំណាត់កូដខ្លះៗ ក្នុងការរៀនបង្កើត Box
    1
    ប្រើប្រាស់ Div និងការបង្កើត Box ជាមួយ CSS
    View detail
    Labels:
    បង្កើត Menu នៅក្នុង HTML ជាមួយ CSS

    បង្កើត Menu នៅក្នុង HTML ជាមួយ CSS

    ការបង្កើត Menu ដោយប្រើ HTML + CSS មកបង្ហាញ មិត្តអ្នក អានដូចខាងក្រោម។ របៀបសរសេកូដក្នុង HTML ដំបូងយើងត្រូវបង្កើត Menu ជា Link រួមជាមួយនិង List ជាមុនសិន 11ផ្នែក CSS យើងត្រូវបង្កើត File CSS មួយទៀតនៅក្នុង Folder CSS ដោយដាក់ឈ្មោះថា menu.css ។
    * ដោយសារ Menu របស់យើងចែកចេញជា បី ថ្នាក់គឺ
    - Main Menu
    - Submenu
    - Sun-in-sub
    ដំណាក់កាលទី១:
    -ចំណាំ យើងត្រូវកំណត់ Main Menu ជាមុនសិន ដូច្នេះការសេសកូដ HTML ក៏សូមត្រឹមតែសរសេ Main Menu សិនបានហើយ
    ចាប់ផ្តើមសរសេកូដ
    // កំណត់ប្រវែងកម្ពស់ និងបណ្តោយ រួមទាំងពណ៌ផ្ទៃរបស់ Menu
    1// កំណត់ពណ៌ឲ្យ Text របស់ Menu
    .menu a{color:MenuText;}
    // កំណត់ឲ្យ ul & li គ្មាន Margin & Padding
    1// កំណត់ឲ្យរាល់ Link ទាំងអស់របស់ A គ្មានបន្ទាត់
    ul li a{text-decoration:none;}
    // កំណត់រាល់ ul នៅក្នុង Menu ត្រូវមានBackground ពណ៌ទឹកក្រូច និងបង្ហាញជាលក្ខណៈ Block
    1// កំណត់ឲ្យរាល់ List ទាំងអស់ត្រូវ ប្តូរមករៀបជាជួរវិញ
    1លទ្ធផល
    1Step 2:
    -ចំណាំ : ​បន្ទាប់មកយើងធ្វើ Submenu ដូច្នេះសូមសរសេកូដ Submenu ចូល HTML មុននិង Apply CSS
    Start Code:
    // ពេល Hover លើ Menu ដែលជា Main Menu ឪ្យចេញ Sub Menu
    1// Apply Style ឲ្យ Sub Menu
    1លទ្ធផល:
    1Step 3:
    -ចំណាំ : ​បន្ទាប់មកយើងធ្វើ SUB in SUB menu ដូច្នេះសូមសរសេកូដ SUB in SUB menu ចូល HTML មុននិង Apply CSS
    Start Code: កំណត់ឲ្យ Sub in Sub ចេញពេលយក Mouse ដាក់លើ Submenu
    1លទ្ធផល
    1
    ការបង្កើត Menu ដោយប្រើ HTML + CSS មកបង្ហាញ មិត្តអ្នក អានដូចខាងក្រោម។ របៀបសរសេកូដក្នុង HTML ដំបូងយើងត្រូវបង្កើត Menu ជា Link រួមជាមួយនិង List ជាមុនសិន 11ផ្នែក CSS យើងត្រូវបង្កើត File CSS មួយទៀតនៅក្នុង Folder CSS ដោយដាក់ឈ្មោះថា menu.css ។
    * ដោយសារ Menu របស់យើងចែកចេញជា បី ថ្នាក់គឺ
    - Main Menu
    - Submenu
    - Sun-in-sub
    ដំណាក់កាលទី១:
    -ចំណាំ យើងត្រូវកំណត់ Main Menu ជាមុនសិន ដូច្នេះការសេសកូដ HTML ក៏សូមត្រឹមតែសរសេ Main Menu សិនបានហើយ
    ចាប់ផ្តើមសរសេកូដ
    // កំណត់ប្រវែងកម្ពស់ និងបណ្តោយ រួមទាំងពណ៌ផ្ទៃរបស់ Menu
    1// កំណត់ពណ៌ឲ្យ Text របស់ Menu
    .menu a{color:MenuText;}
    // កំណត់ឲ្យ ul & li គ្មាន Margin & Padding
    1// កំណត់ឲ្យរាល់ Link ទាំងអស់របស់ A គ្មានបន្ទាត់
    ul li a{text-decoration:none;}
    // កំណត់រាល់ ul នៅក្នុង Menu ត្រូវមានBackground ពណ៌ទឹកក្រូច និងបង្ហាញជាលក្ខណៈ Block
    1// កំណត់ឲ្យរាល់ List ទាំងអស់ត្រូវ ប្តូរមករៀបជាជួរវិញ
    1លទ្ធផល
    1Step 2:
    -ចំណាំ : ​បន្ទាប់មកយើងធ្វើ Submenu ដូច្នេះសូមសរសេកូដ Submenu ចូល HTML មុននិង Apply CSS
    Start Code:
    // ពេល Hover លើ Menu ដែលជា Main Menu ឪ្យចេញ Sub Menu
    1// Apply Style ឲ្យ Sub Menu
    1លទ្ធផល:
    1Step 3:
    -ចំណាំ : ​បន្ទាប់មកយើងធ្វើ SUB in SUB menu ដូច្នេះសូមសរសេកូដ SUB in SUB menu ចូល HTML មុននិង Apply CSS
    Start Code: កំណត់ឲ្យ Sub in Sub ចេញពេលយក Mouse ដាក់លើ Submenu
    1លទ្ធផល
    1
    បង្កើត Menu នៅក្នុង HTML ជាមួយ CSS
    View detail
    Labels:
    បង្កើត Flip box ជាមួយនិង CSS

    បង្កើត Flip box ជាមួយនិង CSS

    តើអ្នកទាំងអស់គ្នាធ្លាប់បង្កើត Flipbox ដែរឬទេ?តាមការសិក្សា សិស្សនិស្សិត និងអ្នករចនាគេហទំព័រ មួយចំនួនបានដឹងថាការបង្កើត Flip page ឬ Flipbox យើងអាចបង្កើតដោយសរសេវាជាមួយភាសា JavaScript ឬ CSS។ ខាងក្រោមនេះជាជំហាន និងឧទាហរណ៍សាមញ្ញមួយ នៃការបង្កើត :
    ជំហានទីមួយ : យើងត្រូវបង្កើត Div ដែលមាន ID ឈ្មោះ Box នៅក្នុង <Body> tag
    <body>
    <div id=”box”> Testing
    </div>
    </body>
    ជំហានទីពីរ : Apply CSS ទៅឲ្យ ID របស់ Div ដែលមានឈ្មោះ box
    #box
    {
    background-color: #FFFFFF;  //ដាក់ពណ៌ឲ្យផ្ទៃប្រអប់
    border: 1px solid #CCCCCC; // ដាក់ស៊ុំឲ្យប្រអប់
    cursor: pointer; // ផ្លាស់ប្តូរទម្រង់ Cursor
    height: 200px; // កំណត់ប្រវែងប្រអប់
    width: 200px;// កំណត់ប្រវែងបណ្តយប្រអប់
    ​​​​ }
    ជំហានទី៣: បង្កើត Event  mouse hover (ពេលជ្រលរ)លើDiv  ដែលមាន ID ឈ្មោះ box
    #box:hover
    {
    border-bottom-left-radius:50% 30px;//ធ្វើឲ្យប្រអប់បត់ផ្នែកខាង       ឆ្វេងនៃផ្នែកខាងក្រោម។
    box-shadow:-5px 10px 15px rgba(0, 0, 0, 0.25); //ដាក់
    ស្រមោលឲ្យ Box
    }
    ————–
    <html>
    <head>
    <title>Flip page </title>
    <style>
    body{background-color:#F4F4F4;}
    #box{background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    height: 200px;
    width: 200px;}
    #box:hover{border-bottom-left-radius:50% 30px;
    box-shadow:-5px 10px 15px rgba(0, 0, 0, 0.25);
    }
    </style>
    </head>
    <body>
    <div id=”box”>s
    </div>
    </body>
    1
    តើអ្នកទាំងអស់គ្នាធ្លាប់បង្កើត Flipbox ដែរឬទេ?តាមការសិក្សា សិស្សនិស្សិត និងអ្នករចនាគេហទំព័រ មួយចំនួនបានដឹងថាការបង្កើត Flip page ឬ Flipbox យើងអាចបង្កើតដោយសរសេវាជាមួយភាសា JavaScript ឬ CSS។ ខាងក្រោមនេះជាជំហាន និងឧទាហរណ៍សាមញ្ញមួយ នៃការបង្កើត :
    ជំហានទីមួយ : យើងត្រូវបង្កើត Div ដែលមាន ID ឈ្មោះ Box នៅក្នុង <Body> tag
    <body>
    <div id=”box”> Testing
    </div>
    </body>
    ជំហានទីពីរ : Apply CSS ទៅឲ្យ ID របស់ Div ដែលមានឈ្មោះ box
    #box
    {
    background-color: #FFFFFF;  //ដាក់ពណ៌ឲ្យផ្ទៃប្រអប់
    border: 1px solid #CCCCCC; // ដាក់ស៊ុំឲ្យប្រអប់
    cursor: pointer; // ផ្លាស់ប្តូរទម្រង់ Cursor
    height: 200px; // កំណត់ប្រវែងប្រអប់
    width: 200px;// កំណត់ប្រវែងបណ្តយប្រអប់
    ​​​​ }
    ជំហានទី៣: បង្កើត Event  mouse hover (ពេលជ្រលរ)លើDiv  ដែលមាន ID ឈ្មោះ box
    #box:hover
    {
    border-bottom-left-radius:50% 30px;//ធ្វើឲ្យប្រអប់បត់ផ្នែកខាង       ឆ្វេងនៃផ្នែកខាងក្រោម។
    box-shadow:-5px 10px 15px rgba(0, 0, 0, 0.25); //ដាក់
    ស្រមោលឲ្យ Box
    }
    ————–
    <html>
    <head>
    <title>Flip page </title>
    <style>
    body{background-color:#F4F4F4;}
    #box{background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    height: 200px;
    width: 200px;}
    #box:hover{border-bottom-left-radius:50% 30px;
    box-shadow:-5px 10px 15px rgba(0, 0, 0, 0.25);
    }
    </style>
    </head>
    <body>
    <div id=”box”>s
    </div>
    </body>
    1
    បង្កើត Flip box ជាមួយនិង CSS
    View detail
    Labels:
    លំហាត់ CSS-រូបភាព Image

    លំហាត់ CSS-រូបភាព Image

    លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS
    a 

    លំហាត់ទី១ ធ្វើយ៉ាងណា ដាក់ព្រំដែនរូបភាព?a 

    សរសេរកូដ
    img {
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    }
    img {
    border: 1px solid #000000;
    }

    លំហាត់ទី២ ធ្វើយ៉ាងណា បង្កើត background រួបភាពលើទំព័រ?
    a 
    សរសេរកូដ
    body {
    background-color: #ffffff;
    background-image: url(peppers_bg.jpg);
    background-repeat: no-repeat;
    }

    លំហាត់ទី៣ ធ្វើយ៉ាងណា ដាក់ទីតាំ background រួបភាពនៅកណ្តាល?
    a 
    សរសេរកូដ
    body {
    background-color: #FFFFFF;
    background-image: url(peppers_bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    }

    លំហាត់ទី៤ ធ្វើយ៉ាងណា ដើម្បីបង្កើត  background រួបភាពអាចធ្វើចលនា text បាន?
    a    សរសេរកូដ
    body {
    background-color: #FFFFFF;
    background-image: url(peppers_bg.jpg);
    background-repeat: no-repeat;
    background-position: 20px 20px;
    background-attachment: fixed;
    body {
    background-color: #FFFFFF;
    background-image: url(peppers_bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 20px 20px;
    }
    body {
    background: #ffffff url(peppers_bg.jpg) no-repeat fixed 20px
    20px;
    }
    លំហាត់ទី៥ ធ្វើយ៉ាងណា ដើម្បីបង្កើត  background រួបភាពផ្សេង?
    aសរសេរកូដ
    #smallbox {
    background-image: url(mini_chilli.jpg);

    background-repeat: repeat-y;
    float: left;
    padding-left: 60px;
    margin-right: 20px;
    width: 220px;
    border: 1px solid #F5C9C9;
    }
    a<h1>Chinese style stuffed peppers</h1>
    .header {
    background-image: url(dotty.gif);
    width: 400px;
    height: 30px;
    padding: 6px 6px 4px 8px;
    color: #B22222;
    background-color: transparent;
    }
    aa:link, a:visited {
    color: #B22222;
    background-color: transparent;
    font-weight: bold;
    }
    a:hover {
    background-image: url(dotty.gif);
    text-decoration: none;
    }

    លំហាត់ទី៦ ធ្វើយ៉ាងណា ដើម្បីបន្ថែម  background រួបភាពច្រើនជាងមួយ?
    a     
    html 
    {
    background-image: url(mini_chilli.jpg);
    background-repeat: repeat-y;
    background-position: 2px 2px;
    background-attachment: fixed;
    }
    body {
    background-image: url(peppers_bg.jpg);
    background-repeat: no-repeat;
    background-position: 80px 20px;
    }
    លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS
    a 

    លំហាត់ទី១ ធ្វើយ៉ាងណា ដាក់ព្រំដែនរូបភាព?a 

    សរសេរកូដ
    img {
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    }
    img {
    border: 1px solid #000000;
    }

    លំហាត់ទី២ ធ្វើយ៉ាងណា បង្កើត background រួបភាពលើទំព័រ?
    a 
    សរសេរកូដ
    body {
    background-color: #ffffff;
    background-image: url(peppers_bg.jpg);
    background-repeat: no-repeat;
    }

    លំហាត់ទី៣ ធ្វើយ៉ាងណា ដាក់ទីតាំ background រួបភាពនៅកណ្តាល?
    a 
    សរសេរកូដ
    body {
    background-color: #FFFFFF;
    background-image: url(peppers_bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    }

    លំហាត់ទី៤ ធ្វើយ៉ាងណា ដើម្បីបង្កើត  background រួបភាពអាចធ្វើចលនា text បាន?
    a    សរសេរកូដ
    body {
    background-color: #FFFFFF;
    background-image: url(peppers_bg.jpg);
    background-repeat: no-repeat;
    background-position: 20px 20px;
    background-attachment: fixed;
    body {
    background-color: #FFFFFF;
    background-image: url(peppers_bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 20px 20px;
    }
    body {
    background: #ffffff url(peppers_bg.jpg) no-repeat fixed 20px
    20px;
    }
    លំហាត់ទី៥ ធ្វើយ៉ាងណា ដើម្បីបង្កើត  background រួបភាពផ្សេង?
    aសរសេរកូដ
    #smallbox {
    background-image: url(mini_chilli.jpg);

    background-repeat: repeat-y;
    float: left;
    padding-left: 60px;
    margin-right: 20px;
    width: 220px;
    border: 1px solid #F5C9C9;
    }
    a<h1>Chinese style stuffed peppers</h1>
    .header {
    background-image: url(dotty.gif);
    width: 400px;
    height: 30px;
    padding: 6px 6px 4px 8px;
    color: #B22222;
    background-color: transparent;
    }
    aa:link, a:visited {
    color: #B22222;
    background-color: transparent;
    font-weight: bold;
    }
    a:hover {
    background-image: url(dotty.gif);
    text-decoration: none;
    }

    លំហាត់ទី៦ ធ្វើយ៉ាងណា ដើម្បីបន្ថែម  background រួបភាពច្រើនជាងមួយ?
    a     
    html 
    {
    background-image: url(mini_chilli.jpg);
    background-repeat: repeat-y;
    background-position: 2px 2px;
    background-attachment: fixed;
    }
    body {
    background-image: url(peppers_bg.jpg);
    background-repeat: no-repeat;
    background-position: 80px 20px;
    }
    លំហាត់ CSS-រូបភាព Image
    View detail
    Labels:
    លំហាត់ CSS-Text ស្ទាយ

    លំហាត់ CSS-Text ស្ទាយ

    លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS
    a     
    លំហាត់ទី១ ធ្វើយ៉ាងណាដើម្បីប្តូរ font tag  ប្រើ CSS?
    សរសេរកូដ
    <p><font color=”#800080″
    face=”Verdana,Geneva,Arial,Helvetica,sans-serif”>These
    stuffed peppers are lovely as a starter, or as a side dish
    for a Chinese meal. They also go down well as part of a
    buffet and even children seem to like them.</font></p>
    p {
    color: #800080;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    }
    ប្រើ pixels, points, ems ឬផ្សេងទៀត
    aPoints and Picas
    p {
    font-size: 10pt;
    }
    Pixels
    p {
    font-size: 12px;
    }
    aEms
    p {
    font-size: 1em;
    }

    aaa 
    p {
    font-size: small;
    }
    em {
    font-size: larger;
    }
    <p>These <em>stuffed peppers</em> are lovely as a starter, or as a
    side dish for a Chinese meal. They also go down well as part of
    a buffet and even children seem to like them.</p>
    td {
    font-size: 80%;
    }
    <table>
    <tr>
    <td>This is a table
    <table>
    <tr>
    <td>This is the second table
    <table>
    <tr>
    <td>This is the third table</td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    លំហាត់ទី២ ធ្វើយ៉ាងណាដើម្បីដោះ ប្រើ underlines ពី link?
    aសរសេរកូដ
    text-decoration: none;
    a:link, a:visited {
    text-decoration: none;
    }
    a:link, a:visited {
    text-decoration: underline overline;
    }
    លំហាត់ទី៣ ធ្វើយ៉ាងណាដើម្បីបង្កើត link ហើយប្តូរពណ៌ mouse ពេលចុចលើវា?
    a
    a:link, a:visited, a:hover, a:active {
    text-decoration: underline;
    color: #6A5ACD;
    background-color: transparent;
    }
    a
    a:link, a:visited {
    text-decoration: underline;
    color: #6A5ACD;
    background-color: transparent;
    }
    a:hover, a:active {
    text-decoration: underline overline;
    color: #191970;
    background-color: #C9C3ED;
    }
    លំហាត់ទី៤     ធ្វើយ៉ាងណាដើម្បីបង្ហាញ Style ពីរនៃ link លើទំព័រមួយ?
    a<div>
    <p>Visit our <a href=”store.html”>online store</a>, for all your
    widget needs.</p>
    </div>
    .boxout {
    color: #FFFFFF;
    background-color: #6A5ACD;
    }
    .boxout a:link, .boxout a:visited {
    text-decoration: underline;
    color: #E4E2F6;
    background-color: transparent;
    }
    .boxout a:hover, .boxout a:active {
    background-color: #C9C3ED;
    color: #191970;
    }

    លំហាត់ទី៥ ធ្វើយ៉ាងណាដើម្បីបន្ថែម background color ទៅ ក្បាលលើ?
    ah1 {
    background-color: #ADD8E6;
    color: #256579;
    font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding: 2px;
    }
    លំហាត់ទី៦ ធ្វើយ៉ាងណាដើម្បីបង្កើត ក្បាល Style លើជាមួយ underlines?
    ah1 {
    font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-decoration: underline;
    }a
    h1 {
    font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding: 2px;
    border-bottom: 1px solid #aaaaaa;
    }
    លំហាត់ទី៧ ធ្វើយ៉ាងណាដើម្បី highlight text លើទំព័រ?
    a.hilite {
    background-color: #FFFFCC;
    color: #B22222;
    }
    លំហាត់ទី៨ ធ្វើយ៉ាងណាដើម្បីដាក់កំពស់បន្ទាត់អក្សេរ លើទំព័រ?
    a p {
    font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    line-height: 2.0;
    }
    បង្កើតតម្រឹម justify text?
    ap {
    text-align: justify;
    font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    line-height: 2.0;
    }
    លំហាត់ទី៩ ធ្វើយ៉ាងណា ដាក់កំពស់ style a horizontal?
    ahr {
    border: none;
    background-color: #ADD8E6;
    color: #ADD8E6;
    height: 1px;
    width: 80%;
    }
    ដាក់ដើមបន្ទាត់
    a<p>Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices
    justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh.
    Nam erat lectus, dapibus id, congue vel, cursus a, tellus.
    Sed turpis ante, condimentum at, accumsan eget, pulvinar
    vitae, nibh.</p>
    .indent {
    padding-left: 30px;
    }
    បង្កើត center text?
    a    <p>Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices
    justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh. Nam
    erat lectus, dapibus id, congue vel, cursus a, tellus. Sed
    turpis ante, condimentum at, accumsan eget, pulvinar vitae,
    nibh.</p>
    .centered {
    text-align: center;
    }
    លំហាត់ទី១០ ប្តូរអត្ថបទៅជាអក្សរធំ
    a<p>Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices
    justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh. Nam
    erat lectus, dapibus id, congue vel, cursus a, tellus. Sed
    turpis ante, condimentum at, accumsan eget, pulvinar vitae,
    nibh.</p>
    .transform {
    text-transform: uppercase;
    }

    លំហាត់ទី១១ ប្តូរឬ remove the bullets លើ list items?
    a    <ul>
    <li>list item one</li>
    <li>list item two</li>

    <li>list item three</li>
    </ul>
    ul {
    list-style-type: square;
    }
    បង្ហាញដោយគ្មាន displays without bullets
    aul {
    list-style-type: none;
    }
    លំហាត់ទី១២ ធ្វើយ៉ាងណាដើម្បីប្រើរូប ដាក់លើ list itembullet?
    aul {
    list-style-image: url(bullet.gif);
    }
    លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS
    a     
    លំហាត់ទី១ ធ្វើយ៉ាងណាដើម្បីប្តូរ font tag  ប្រើ CSS?
    សរសេរកូដ
    <p><font color=”#800080″
    face=”Verdana,Geneva,Arial,Helvetica,sans-serif”>These
    stuffed peppers are lovely as a starter, or as a side dish
    for a Chinese meal. They also go down well as part of a
    buffet and even children seem to like them.</font></p>
    p {
    color: #800080;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    }
    ប្រើ pixels, points, ems ឬផ្សេងទៀត
    aPoints and Picas
    p {
    font-size: 10pt;
    }
    Pixels
    p {
    font-size: 12px;
    }
    aEms
    p {
    font-size: 1em;
    }

    aaa 
    p {
    font-size: small;
    }
    em {
    font-size: larger;
    }
    <p>These <em>stuffed peppers</em> are lovely as a starter, or as a
    side dish for a Chinese meal. They also go down well as part of
    a buffet and even children seem to like them.</p>
    td {
    font-size: 80%;
    }
    <table>
    <tr>
    <td>This is a table
    <table>
    <tr>
    <td>This is the second table
    <table>
    <tr>
    <td>This is the third table</td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    លំហាត់ទី២ ធ្វើយ៉ាងណាដើម្បីដោះ ប្រើ underlines ពី link?
    aសរសេរកូដ
    text-decoration: none;
    a:link, a:visited {
    text-decoration: none;
    }
    a:link, a:visited {
    text-decoration: underline overline;
    }
    លំហាត់ទី៣ ធ្វើយ៉ាងណាដើម្បីបង្កើត link ហើយប្តូរពណ៌ mouse ពេលចុចលើវា?
    a
    a:link, a:visited, a:hover, a:active {
    text-decoration: underline;
    color: #6A5ACD;
    background-color: transparent;
    }
    a
    a:link, a:visited {
    text-decoration: underline;
    color: #6A5ACD;
    background-color: transparent;
    }
    a:hover, a:active {
    text-decoration: underline overline;
    color: #191970;
    background-color: #C9C3ED;
    }
    លំហាត់ទី៤     ធ្វើយ៉ាងណាដើម្បីបង្ហាញ Style ពីរនៃ link លើទំព័រមួយ?
    a<div>
    <p>Visit our <a href=”store.html”>online store</a>, for all your
    widget needs.</p>
    </div>
    .boxout {
    color: #FFFFFF;
    background-color: #6A5ACD;
    }
    .boxout a:link, .boxout a:visited {
    text-decoration: underline;
    color: #E4E2F6;
    background-color: transparent;
    }
    .boxout a:hover, .boxout a:active {
    background-color: #C9C3ED;
    color: #191970;
    }

    លំហាត់ទី៥ ធ្វើយ៉ាងណាដើម្បីបន្ថែម background color ទៅ ក្បាលលើ?
    ah1 {
    background-color: #ADD8E6;
    color: #256579;
    font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding: 2px;
    }
    លំហាត់ទី៦ ធ្វើយ៉ាងណាដើម្បីបង្កើត ក្បាល Style លើជាមួយ underlines?
    ah1 {
    font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-decoration: underline;
    }a
    h1 {
    font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding: 2px;
    border-bottom: 1px solid #aaaaaa;
    }
    លំហាត់ទី៧ ធ្វើយ៉ាងណាដើម្បី highlight text លើទំព័រ?
    a.hilite {
    background-color: #FFFFCC;
    color: #B22222;
    }
    លំហាត់ទី៨ ធ្វើយ៉ាងណាដើម្បីដាក់កំពស់បន្ទាត់អក្សេរ លើទំព័រ?
    a p {
    font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    line-height: 2.0;
    }
    បង្កើតតម្រឹម justify text?
    ap {
    text-align: justify;
    font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    line-height: 2.0;
    }
    លំហាត់ទី៩ ធ្វើយ៉ាងណា ដាក់កំពស់ style a horizontal?
    ahr {
    border: none;
    background-color: #ADD8E6;
    color: #ADD8E6;
    height: 1px;
    width: 80%;
    }
    ដាក់ដើមបន្ទាត់
    a<p>Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices
    justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh.
    Nam erat lectus, dapibus id, congue vel, cursus a, tellus.
    Sed turpis ante, condimentum at, accumsan eget, pulvinar
    vitae, nibh.</p>
    .indent {
    padding-left: 30px;
    }
    បង្កើត center text?
    a    <p>Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices
    justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh. Nam
    erat lectus, dapibus id, congue vel, cursus a, tellus. Sed
    turpis ante, condimentum at, accumsan eget, pulvinar vitae,
    nibh.</p>
    .centered {
    text-align: center;
    }
    លំហាត់ទី១០ ប្តូរអត្ថបទៅជាអក្សរធំ
    a<p>Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices
    justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh. Nam
    erat lectus, dapibus id, congue vel, cursus a, tellus. Sed
    turpis ante, condimentum at, accumsan eget, pulvinar vitae,
    nibh.</p>
    .transform {
    text-transform: uppercase;
    }

    លំហាត់ទី១១ ប្តូរឬ remove the bullets លើ list items?
    a    <ul>
    <li>list item one</li>
    <li>list item two</li>

    <li>list item three</li>
    </ul>
    ul {
    list-style-type: square;
    }
    បង្ហាញដោយគ្មាន displays without bullets
    aul {
    list-style-type: none;
    }
    លំហាត់ទី១២ ធ្វើយ៉ាងណាដើម្បីប្រើរូប ដាក់លើ list itembullet?
    aul {
    list-style-image: url(bullet.gif);
    }
    លំហាត់ CSS-Text ស្ទាយ
    View detail
    Labels:
    លំហាត់ CSS-Navigation

    លំហាត់ CSS-Navigation

    លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS
    a     

    លំហាត់ទី១  ធ្វើយ៉ាងណាដើម្បីផ្លាស់ប្តូរ រូបភាព navigation ជាមួយកូដ CSS?
    aសរសេរកូដ
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Replace images</title>
    <meta http-equiv=”content-type”
    content=”text/html; charset=iso-8859-1″ />
    <link rel=”stylesheet” type=”text/css” href=”replaceimages.css” />
    </head>
    <body>
    <table id=”navigation”>
    <tr>
    <td>
    <a href=”#”>Recipes</a>
    </td>
    </tr>
    <tr>
    <td>
    <a href=”#”>Contact Us</a>
    </td>
    </tr>
    <tr>
    <td>
    <a href=”#”>Articles</a>
    </td>
    </tr>
    <tr>
    <td>
    <a href=”#”>Buy Online</a>
    </td>
    </tr>
    </table>
    </body>
    </html>
    #navigation {
    width: 180px;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    }
    #navigation td {
    height: 26px;
    border-bottom: 2px solid #460016;
    background-color: #FFDFEA;
    color: #460016;
    }
    #navigation a:link, #navigation a:visited {
    margin-left: 12px;
    color: #460016;
    background-color: transparent;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-weight: bold;
    }
    a
    សរសេរកូដ
    <table width=”180″ cellpadding=”0″ cellspacing=”0″>
    <tr>
    <td>
    <a href=”#”><img src=”images/nav1.gif” width=”180″
    height=”28″ alt=”Recipes” border=”0″ /></a>
    </td>
    </tr>
    <tr>
    <td>
    <a href=”#”><img src=”images/nav2.gif” width=”180″
    height=”28″ alt=”Contact Us” border=”0″ /></a>
    </td>
    </tr>
    <tr>
    <td>
    <a href=”#”><img src=”images/nav3.gif” width=”180″
    height=”28″ alt=”Articles” border=”0″ /></a>
    </td>
    </tr>
    <tr>
    <td>
    <a href=”#”><img src=”images/nav4.gif” width=”180″
    height=”28″ alt=”Buy Online” border=”0″ /></a>
    </td>
    </tr>
    </table>
    បន្ថែមកូដ CSS

    a<table id=”navigation”>
    #navigation {
    width: 180px;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    }
    #navigation td {
    height: 26px;
    border-bottom: 2px solid #460016;
    background-color: #FFDFEA;
    color: #460016;
    }
    a#navigation a:link, #navigation a:visited {
    margin-left: 12px;
    color: #460016;
    background-color: transparent;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-weight: bold;
    }

    លំហាត់ទី២ ធ្វើយ៉ាងណាដើម្បីបង្កើត Style ជាមួយរចនាសម្ព័ន្ធដូចជា navigation menu?
    aសរសេរកូដ
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Lists as navigation</title>
    <meta http-equiv=”content-type”
    content=”text/html; charset=iso-8859-1″ />
    <link rel=”stylesheet” type=”text/css” href=”listnav1.css” />
    </head>
    <body>
    <div id=”navigation”>
    <ul>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    </div>
    </body>
    </html>
    #navigation {
    width: 200px;
    font-family: Arial, Helvetica, sans-serif;
    }
    #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #navigation li {
    border-bottom: 1px solid #ED9F9F;
    }
    #navigation li a {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 12px solid #711515;
    border-right: 1px solid #711515;
    background-color: #B51032;
    color: #FFFFFF;
    text-decoration: none;
    }
    a<ul>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    <div id=”navigation”>
    <ul>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    </div>

    លំហាត់ទី៣ ធ្វើយ៉ាងណា ប្រើ CSS ដើម្បីបង្កើត rollover navigation ដោយមិនប្រើរូប ឬ JavaScript?
    aសរសេរកូដ
    #navigation li a:hover {
    background-color: #711515;
    color: #FFFFFF;
    លំហាត់ទី៤ ធ្វើយ៉ាងណា ប្រើ CSS និង list ដើម្បីបង្កើតប្រព័ន្ធ navigation ដោយមាន sub-navigation?
    aសរសេរកូដ
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Lists as navigation</title>
    <meta http-equiv=”content-type”
    content=”text/html; charset=iso-8859-1″ />
    <link rel=”stylesheet” type=”text/css” href=”listnav_sub.css” />
    </head>
    <body>
    <div id=”navigation”>
    <ul>
    <li><a href=”#”>Recipes</a>
    <ul>
    <li><a href=”#”>Starters</a></li>
    <li><a href=”#”>Main Courses</a></li>
    <li><a href=”#”>Desserts</a></li>
    </ul>
    </li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    </div>
    </body>
    </html>
    #navigation {
    width: 200px;
    font-family: Arial, Helvetica, sans-serif;
    }
    #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #navigation li {
    border-bottom: 1px solid #ED9F9F;
    }
    #navigation li a:link, #navigation li a:visited {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 12px solid #711515;
    border-right: 1px solid #711515;
    background-color: #B51032;
    color: #FFFFFF;
    text-decoration: none;
    }
    #navigation li a:hover {
    background-color: #711515;
    color: #FFFFFF;
    }
    #navigation ul ul {
    margin-left: 12px;
    }
    #navigation ul ul li {
    border-bottom: 1px solid #711515;
    margin:0;
    }
    #navigation ul ul a:link, #navigation ul ul a:visited {
    background-color: #ED9F9F;
    color: #711515;
    }
    #navigation ul ul a:hover {
    background-color: #711515;
    color: #FFFFFF;
    }
    a<ul>
    <li><a href=”#”>Recipes</a>
    <ul>
    <li><a href=”#”>Starters</a></li>
    <li><a href=”#”>Main Courses</a></li>
    <li><a href=”#”>Desserts</a></li>
    </ul>
    </li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    a#navigation ul ul {
    margin-left: 12px;
    }
    a#navigation ul ul li {
    border-bottom: 1px solid #711515;
    margin:0;
    }
    #navigation ul ul a:link, #navigation ul ul a:visited {
    background-color: #ED9F9F;
    color: #711515;
    }
    #navigation ul ul a:hover {
    background-color: #711515;
    color: #FFFFFF;
    }
    លំហាត់ទី៥  ធ្វើយ៉ាងណាដើម្បីបង្កើត horizontal menu បញ្ឈរប្រើ CSS?
    a
    សរសេរកូដ
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Lists as navigation</title>
    <meta http-equiv=”content-type”
    content=”text/html; charset=iso-8859-1″ />
    <link rel=”stylesheet” type=”text/css” href=”listnav_horiz.css” />
    </head>
    <body>
    <div id=”navigation”>
    <ul>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    </div>
    </body>
    </html>
    #navigation {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    }
    #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 4px;
    }
    #navigation li {
    display: inline;
    }
    #navigation a:link, #navigation a:visited {
    padding: 3px 10px 2px 10px;
    color: #FFFFFF;
    background-color: #B51032;
    text-decoration: none;
    border: 1px solid #711515;
    }
    #navigation a:hover {
    color: #FFFFFF;
    background-color: #711515;
    }
    លំហាត់ទី៦  ធ្វើយ៉ាងណាដើម្បីបង្កើត button-like ប្រើ CSS?
    aសរសេរកូដ
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Lists as navigation</title>
    <meta http-equiv=”content-type”
    content=”text/html; charset=iso-8859-1″ />
    <link rel=”stylesheet” type=”text/css” href=”listnav_button.css”
    />
    </head>
    <body>
    <div id=”navigation”>
    <ul>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    </div>
    </body>
    </html>

    #navigation {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    }
    #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 4px;
    }
    #navigation li {
    display: inline;
    }
    #navigation a:link, #navigation a:visited {
    margin-right: 2px;
    padding: 3px 10px 2px 10px;
    color: #A62020;
    background-color: #FCE6EA;
    text-decoration: none;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-bottom: 1px solid #717171;
    border-right: 1px solid #717171;
    }
    #navigation a:hover {
    border-top: 1px solid #717171;
    border-left: 1px solid #717171;
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    }
    លំហាត់ទី៧  ធ្វើយ៉ាងណាដើម្បីបង្កើត tabbed navigation ប្រើ CSS?
    aសរសេរកូដ
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Lists as navigation</title>
    <meta http-equiv=”content-type”
    content=”text/html; charset=iso-8859-1″ />
    <link rel=”stylesheet” type=”text/css” href=”tabs.css” />
    </head>
    <body id=”recipes”>
    <ul id=”tabnav”>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    <div id=”content”>
    <h1>Recipes</h1>
    <p>Lorem ipsum dolor sit amet, …</p>
    </div>
    </body>
    </html>
    <ul id=”tabnav”>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>

    ul#tabnav {
    list-style-type: none;
    margin: 0;
    padding-left: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #711515;
    font: bold 11px verdana, arial, sans-serif;
    }
    ul#tabnav li {
    float: left;
    height: 21px;
    background-color: #B51032;
    color: #FFFFFF;
    margin: 2px 2px 0 2px;
    border: 1px solid #711515;
    }
    aul#tabnav a:link, ul#tabnav a:visited {
    display: block;
    color: #FFFFFF;
    background-color: transparent;
    text-decoration: none;
    padding: 4px;
    }
    ul#tabnav a:hover {
    background-color: #F4869C;
    color: #FFFFFF;
    }
    abody#recipes li.recipes, body#contact li.contact,
    body#articles li.articles, body#buy li.buy {
    border-bottom: 1px solid #fff;
    color: #000000;
    background-color: #FFFFFF;
    }
    body#recipes li.recipes a:link, body#recipes li.recipes a:visited,
    body#contact li.contact a:link, body#contact li.contact a:visited,
    body#articles li.articles a:link,
    body#articles li.articles a:visited, body#buy li.buy a:link,
    body#buy li.buy a:visited {
    color: #000000;
    background-color: #FFFFFF;
    }
    លំហាត់ទី៨ ធ្វើយ៉ាងណាដើម្បីប្តូរ ប្រភេទ cursor ប្រើ CSS?
    aa
    លំហាត់ទី៩ ធ្វើយ៉ាងណាដើម្បីបង្កើត rollover ប្រើ CSS ដោយមិនប្រើ Javascript?
    aសរសេរកូដ
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Lists as navigation</title>
    <meta http-equiv=”content-type”
    content=”text/html; charset=iso-8859-1″ />
    <link rel=”stylesheet” type=”text/css” href=”images.css” />
    </head>
    <body>
    <ul id=”nav”>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    </body>
    </html>
    ul#nav {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }
    #nav a:link, #nav a:visited {
    display: block;
    width: 150px;
    padding: 10px 0 16px 32px;
    font: bold 80% Arial, Helvetica, sans-serif;
    color: #FF9900;
    background: url(“peppers.gif”) top left no-repeat;
    text-decoration: none;
    }
    #nav a:hover {
    background-position: 0 -69px;
    color: #B51032;
    }
    #nav a:active {
    background-position: 0 -138px;
    color: #006E01;
    }
    លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS
    a     

    លំហាត់ទី១  ធ្វើយ៉ាងណាដើម្បីផ្លាស់ប្តូរ រូបភាព navigation ជាមួយកូដ CSS?
    aសរសេរកូដ
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Replace images</title>
    <meta http-equiv=”content-type”
    content=”text/html; charset=iso-8859-1″ />
    <link rel=”stylesheet” type=”text/css” href=”replaceimages.css” />
    </head>
    <body>
    <table id=”navigation”>
    <tr>
    <td>
    <a href=”#”>Recipes</a>
    </td>
    </tr>
    <tr>
    <td>
    <a href=”#”>Contact Us</a>
    </td>
    </tr>
    <tr>
    <td>
    <a href=”#”>Articles</a>
    </td>
    </tr>
    <tr>
    <td>
    <a href=”#”>Buy Online</a>
    </td>
    </tr>
    </table>
    </body>
    </html>
    #navigation {
    width: 180px;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    }
    #navigation td {
    height: 26px;
    border-bottom: 2px solid #460016;
    background-color: #FFDFEA;
    color: #460016;
    }
    #navigation a:link, #navigation a:visited {
    margin-left: 12px;
    color: #460016;
    background-color: transparent;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-weight: bold;
    }
    a
    សរសេរកូដ
    <table width=”180″ cellpadding=”0″ cellspacing=”0″>
    <tr>
    <td>
    <a href=”#”><img src=”images/nav1.gif” width=”180″
    height=”28″ alt=”Recipes” border=”0″ /></a>
    </td>
    </tr>
    <tr>
    <td>
    <a href=”#”><img src=”images/nav2.gif” width=”180″
    height=”28″ alt=”Contact Us” border=”0″ /></a>
    </td>
    </tr>
    <tr>
    <td>
    <a href=”#”><img src=”images/nav3.gif” width=”180″
    height=”28″ alt=”Articles” border=”0″ /></a>
    </td>
    </tr>
    <tr>
    <td>
    <a href=”#”><img src=”images/nav4.gif” width=”180″
    height=”28″ alt=”Buy Online” border=”0″ /></a>
    </td>
    </tr>
    </table>
    បន្ថែមកូដ CSS

    a<table id=”navigation”>
    #navigation {
    width: 180px;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    }
    #navigation td {
    height: 26px;
    border-bottom: 2px solid #460016;
    background-color: #FFDFEA;
    color: #460016;
    }
    a#navigation a:link, #navigation a:visited {
    margin-left: 12px;
    color: #460016;
    background-color: transparent;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-weight: bold;
    }

    លំហាត់ទី២ ធ្វើយ៉ាងណាដើម្បីបង្កើត Style ជាមួយរចនាសម្ព័ន្ធដូចជា navigation menu?
    aសរសេរកូដ
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Lists as navigation</title>
    <meta http-equiv=”content-type”
    content=”text/html; charset=iso-8859-1″ />
    <link rel=”stylesheet” type=”text/css” href=”listnav1.css” />
    </head>
    <body>
    <div id=”navigation”>
    <ul>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    </div>
    </body>
    </html>
    #navigation {
    width: 200px;
    font-family: Arial, Helvetica, sans-serif;
    }
    #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #navigation li {
    border-bottom: 1px solid #ED9F9F;
    }
    #navigation li a {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 12px solid #711515;
    border-right: 1px solid #711515;
    background-color: #B51032;
    color: #FFFFFF;
    text-decoration: none;
    }
    a<ul>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    <div id=”navigation”>
    <ul>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    </div>

    លំហាត់ទី៣ ធ្វើយ៉ាងណា ប្រើ CSS ដើម្បីបង្កើត rollover navigation ដោយមិនប្រើរូប ឬ JavaScript?
    aសរសេរកូដ
    #navigation li a:hover {
    background-color: #711515;
    color: #FFFFFF;
    លំហាត់ទី៤ ធ្វើយ៉ាងណា ប្រើ CSS និង list ដើម្បីបង្កើតប្រព័ន្ធ navigation ដោយមាន sub-navigation?
    aសរសេរកូដ
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Lists as navigation</title>
    <meta http-equiv=”content-type”
    content=”text/html; charset=iso-8859-1″ />
    <link rel=”stylesheet” type=”text/css” href=”listnav_sub.css” />
    </head>
    <body>
    <div id=”navigation”>
    <ul>
    <li><a href=”#”>Recipes</a>
    <ul>
    <li><a href=”#”>Starters</a></li>
    <li><a href=”#”>Main Courses</a></li>
    <li><a href=”#”>Desserts</a></li>
    </ul>
    </li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    </div>
    </body>
    </html>
    #navigation {
    width: 200px;
    font-family: Arial, Helvetica, sans-serif;
    }
    #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #navigation li {
    border-bottom: 1px solid #ED9F9F;
    }
    #navigation li a:link, #navigation li a:visited {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 12px solid #711515;
    border-right: 1px solid #711515;
    background-color: #B51032;
    color: #FFFFFF;
    text-decoration: none;
    }
    #navigation li a:hover {
    background-color: #711515;
    color: #FFFFFF;
    }
    #navigation ul ul {
    margin-left: 12px;
    }
    #navigation ul ul li {
    border-bottom: 1px solid #711515;
    margin:0;
    }
    #navigation ul ul a:link, #navigation ul ul a:visited {
    background-color: #ED9F9F;
    color: #711515;
    }
    #navigation ul ul a:hover {
    background-color: #711515;
    color: #FFFFFF;
    }
    a<ul>
    <li><a href=”#”>Recipes</a>
    <ul>
    <li><a href=”#”>Starters</a></li>
    <li><a href=”#”>Main Courses</a></li>
    <li><a href=”#”>Desserts</a></li>
    </ul>
    </li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    a#navigation ul ul {
    margin-left: 12px;
    }
    a#navigation ul ul li {
    border-bottom: 1px solid #711515;
    margin:0;
    }
    #navigation ul ul a:link, #navigation ul ul a:visited {
    background-color: #ED9F9F;
    color: #711515;
    }
    #navigation ul ul a:hover {
    background-color: #711515;
    color: #FFFFFF;
    }
    លំហាត់ទី៥  ធ្វើយ៉ាងណាដើម្បីបង្កើត horizontal menu បញ្ឈរប្រើ CSS?
    a
    សរសេរកូដ
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Lists as navigation</title>
    <meta http-equiv=”content-type”
    content=”text/html; charset=iso-8859-1″ />
    <link rel=”stylesheet” type=”text/css” href=”listnav_horiz.css” />
    </head>
    <body>
    <div id=”navigation”>
    <ul>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    </div>
    </body>
    </html>
    #navigation {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    }
    #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 4px;
    }
    #navigation li {
    display: inline;
    }
    #navigation a:link, #navigation a:visited {
    padding: 3px 10px 2px 10px;
    color: #FFFFFF;
    background-color: #B51032;
    text-decoration: none;
    border: 1px solid #711515;
    }
    #navigation a:hover {
    color: #FFFFFF;
    background-color: #711515;
    }
    លំហាត់ទី៦  ធ្វើយ៉ាងណាដើម្បីបង្កើត button-like ប្រើ CSS?
    aសរសេរកូដ
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Lists as navigation</title>
    <meta http-equiv=”content-type”
    content=”text/html; charset=iso-8859-1″ />
    <link rel=”stylesheet” type=”text/css” href=”listnav_button.css”
    />
    </head>
    <body>
    <div id=”navigation”>
    <ul>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    </div>
    </body>
    </html>

    #navigation {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    }
    #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 4px;
    }
    #navigation li {
    display: inline;
    }
    #navigation a:link, #navigation a:visited {
    margin-right: 2px;
    padding: 3px 10px 2px 10px;
    color: #A62020;
    background-color: #FCE6EA;
    text-decoration: none;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-bottom: 1px solid #717171;
    border-right: 1px solid #717171;
    }
    #navigation a:hover {
    border-top: 1px solid #717171;
    border-left: 1px solid #717171;
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    }
    លំហាត់ទី៧  ធ្វើយ៉ាងណាដើម្បីបង្កើត tabbed navigation ប្រើ CSS?
    aសរសេរកូដ
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Lists as navigation</title>
    <meta http-equiv=”content-type”
    content=”text/html; charset=iso-8859-1″ />
    <link rel=”stylesheet” type=”text/css” href=”tabs.css” />
    </head>
    <body id=”recipes”>
    <ul id=”tabnav”>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    <div id=”content”>
    <h1>Recipes</h1>
    <p>Lorem ipsum dolor sit amet, …</p>
    </div>
    </body>
    </html>
    <ul id=”tabnav”>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>

    ul#tabnav {
    list-style-type: none;
    margin: 0;
    padding-left: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #711515;
    font: bold 11px verdana, arial, sans-serif;
    }
    ul#tabnav li {
    float: left;
    height: 21px;
    background-color: #B51032;
    color: #FFFFFF;
    margin: 2px 2px 0 2px;
    border: 1px solid #711515;
    }
    aul#tabnav a:link, ul#tabnav a:visited {
    display: block;
    color: #FFFFFF;
    background-color: transparent;
    text-decoration: none;
    padding: 4px;
    }
    ul#tabnav a:hover {
    background-color: #F4869C;
    color: #FFFFFF;
    }
    abody#recipes li.recipes, body#contact li.contact,
    body#articles li.articles, body#buy li.buy {
    border-bottom: 1px solid #fff;
    color: #000000;
    background-color: #FFFFFF;
    }
    body#recipes li.recipes a:link, body#recipes li.recipes a:visited,
    body#contact li.contact a:link, body#contact li.contact a:visited,
    body#articles li.articles a:link,
    body#articles li.articles a:visited, body#buy li.buy a:link,
    body#buy li.buy a:visited {
    color: #000000;
    background-color: #FFFFFF;
    }
    លំហាត់ទី៨ ធ្វើយ៉ាងណាដើម្បីប្តូរ ប្រភេទ cursor ប្រើ CSS?
    aa
    លំហាត់ទី៩ ធ្វើយ៉ាងណាដើម្បីបង្កើត rollover ប្រើ CSS ដោយមិនប្រើ Javascript?
    aសរសេរកូដ
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Lists as navigation</title>
    <meta http-equiv=”content-type”
    content=”text/html; charset=iso-8859-1″ />
    <link rel=”stylesheet” type=”text/css” href=”images.css” />
    </head>
    <body>
    <ul id=”nav”>
    <li><a href=”#”>Recipes</a></li>
    <li><a href=”#”>Contact Us</a></li>
    <li><a href=”#”>Articles</a></li>
    <li><a href=”#”>Buy Online</a></li>
    </ul>
    </body>
    </html>
    ul#nav {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }
    #nav a:link, #nav a:visited {
    display: block;
    width: 150px;
    padding: 10px 0 16px 32px;
    font: bold 80% Arial, Helvetica, sans-serif;
    color: #FF9900;
    background: url(“peppers.gif”) top left no-repeat;
    text-decoration: none;
    }
    #nav a:hover {
    background-position: 0 -69px;
    color: #B51032;
    }
    #nav a:active {
    background-position: 0 -138px;
    color: #006E01;
    }
    លំហាត់ CSS-Navigation
    View detail
    Labels:
     
    Support : Creating Website | Johny Template | Mas Template
    Copyright © 2011. ទឹកអំពៅ - All Rights Reserved
    Template Created by Creating Website Published by Mas Template
    Proudly powered by Blogger