មេរៀនទី១៧: CSS-Navigation

មេរៀនទី១៧: CSS-Navigation លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី 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;
}

ap {
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>
atd {
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
a:link, a:visited {
text-decoration: underline overline;
}

លំហាត់ទី៣ ធ្វើយ៉ាងណាដើម្បីបង្កើត link ហើយប្តូរពណ៌ mouse ពេលចុចលើវា?

aa:link, a:visited, a:hover, a:active {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}

aa: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);
}