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

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

លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS
 
លំហាត់ទី១ ធ្វើយ៉ាងណាដើម្បីប្តូរ 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 ឬផ្សេងទៀត
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;
}
<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?
សរសេរកូដ
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 លើទំព័រមួយ?
<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 ទៅ ក្បាលលើ?
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%;
}
ដាក់ដើមបន្ទាត់
<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?
<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;
}
លំហាត់ទី១០ ប្តូរអត្ថបទៅជាអក្សរធំ
<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?
<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
ul {
list-style-type: none;
}
លំហាត់ទី១២ ធ្វើយ៉ាងណាដើម្បីប្រើរូប ដាក់លើ list itembullet?
ul {
list-style-image: url(bullet.gif);
}

Related product you might see: