មេរៀនទី១៧: CSS-Navigation លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS

លំហាត់ទី១ ធ្វើយ៉ាងណាដើម្បីប្តូរ font tag  ប្រើ CSS?
សរសេរកូដ
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.

p {
color: #800080;
font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
}

ប្រើ pixels, points, ems ឬផ្សេងទៀត
 
Points and Picas
p {
font-size: 10pt;
}
Pixels
p {
font-size: 12px;
}
 
Ems
p {
font-size: 1em;
}

 
p {
font-size: small;
}
em {
font-size: larger;
}
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.

td {
font-size: 80%;
}

This is a table This is the second table This is the third table

លំហាត់ទី២ ធ្វើយ៉ាងណាដើម្បីដោះ ប្រើ underlines ពី link?
សរសេរកូដ
text-decoration: none;
a:link, a:visited {
text-decoration: none;
}
 a:link, a:visited {
text-decoration: underline overline;
}
លំហាត់ទី៣ ធ្វើយ៉ាងណាដើម្បីបង្កើត link ហើយប្តូរពណ៌ mouse ពេលចុចលើវា?
 
a:link, a:visited, a:hover, a:active {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}
 
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 លើទំព័រមួយ?
 

Visit our online store, for all your
widget needs.


.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 ទៅ ក្បាលលើ?
 
h1 {
background-color: #ADD8E6;
color: #256579;
font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 2px;
}
លំហាត់ទី៦ ធ្វើយ៉ាងណាដើម្បីបង្កើត ក្បាល Style លើជាមួយ underlines?
 
h1 {
font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: underline;
}
h1 {
font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 2px;
border-bottom: 1px solid #aaaaaa;
}
លំហាត់ទី៧ ធ្វើយ៉ាងណាដើម្បី highlight text លើទំព័រ?
 
.hilite {
background-color: #FFFFCC;
color: #B22222;
}
លំហាត់ទី៨ ធ្វើយ៉ាងណាដើម្បីដាក់កំពស់បន្ទាត់អក្សេរ លើទំព័រ?
 
p {
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 2.0;
}
បង្កើតតម្រឹម justify text?
 
p {
text-align: justify;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 2.0;
}
លំហាត់ទី៩ ធ្វើយ៉ាងណា ដាក់កំពស់ style a horizontal?
 
hr {
border: none;
background-color: #ADD8E6;
color: #ADD8E6;
height: 1px;
width: 80%;
}
ដាក់ដើមបន្ទាត់
 
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.
.indent {
padding-left: 30px;
}
បង្កើត center text?
 
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.
.centered {
text-align: center;
}
លំហាត់ទី១០ ប្តូរអត្ថបទៅជាអក្សរធំ
 
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.
.transform {
text-transform: uppercase;
}

លំហាត់ទី១១ ប្តូរឬ remove the bullets លើ list items?
 

list item one

list item two

list item three

ul {
list-style-type: square;
}
បង្ហាញដោយគ្មាន displays without bullets
 
ul {
list-style-type: none;
}
លំហាត់ទី១២ ធ្វើយ៉ាងណាដើម្បីប្រើរូប ដាក់លើ list itembullet?
 
ul {
list-style-image: url(bullet.gif);
}