การใช้งาน CSS แบบ Inline
<html>
และจะได้ดังภาพข้างล่าง ค่ะ
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1 {
color: #CC9900
}
h2 {
color: #CC9900
}
h3 {
color: #CC9900
}
.linkbox a:link {color: #CC9900
}
.linkbox a:visited {color: #999999
}
.linkbox a:hover {color: #FF6600
}
.linkbox a:active {color: #FF0000
}
</style>
</head>
<body>
<h1>หน้าเว็บเพจของคุณ ขนาดตัวอักษร H1</h1>
<hr />
<p>ตัวอักษรอยู่ใน P tag</p>
<p>ตัวอักษรทั่วไป </p>
<hr />
<h2>ตัวอักษรขนาด H2 </h2>
<table width="721" border="1">
<tr>
<td bgcolor="#CCCC00"><div
align="center">หัวข้อ 1
</div></td>
<td bgcolor="#CCCC00"><div
align="center">หัวข้อ2
</div></td>
<td bgcolor="#CCCC00"><div
align="center">หัวข้อ 3
</div></td>
</tr>
<tr>
<td>ตัวอย่างข้อมูลที่ 1 </td>
<td>ตัวอย่างข้อมูลที่ 2 </td>
<td>ตัวอย่างข้อมูลที่ 3 </td>
</tr>
<tr>
<td>ตัวอย่างข้อมูลที่ 4 </td>
<td>ตัวอย่างข้อมูลที่ 5 </td>
<td>ตัวอย่างข้อมูลที่ 6 </td>
</tr>
</table>
<hr />
<h3>ตัวอักษรขนาด H3 </h3>
<h3>
<div class="linkbox">
<a href="http://www.nmc.ac.th/">
ไปเว็บวิทยาลัย
</a>
</div>
</h3>
<p> </p>
<hr />
<p>ตัวอย่างการใช้คำสั่ง List</p>
<p>
<label>
<input name="radiobutton" type="radio"
value="radiobutton" />
</label>
list 1</p>
<p>
<label>
<input name="radiobutton" type="radio"
value="radiobutton" />
</label>
list 2</p>
<p>
<label>
<input name="radiobutton" type="radio"
value="radiobutton" />
</label>
list 3</p>
<p>
<label>
<input name="radiobutton" type="radio"
value="radiobutton" />
</label>
list 4
</p>
</body>
</html>
และจะได้ดังภาพข้างล่าง ค่ะ
การใช้งาน CSS แบบ External
เริ่มแรกเราก็พิมพ์คำสั่งโค้ด css ก่อน โดยเราจะบันทึกเป็น .css ค่ะ ดังโค้ดข้างล่างค่ะ
@charset "windows-874";
body {
font-family: tahoma, "ms Sans Serif", sans-serif, loma;
}
h1,h2,h3{
font-family: tahoma, "ms Sans Serif", sans-serif, loma;
color: #CA7900;
}
th{
background-color: #FFE16A;
}
table{
padding: 2px;
}
a:link,a:visited
{
font-family: tahoma, "ms Sans Serif", sans-serif, loma;
color: #AE8B00;
text-decoration:none;
}
a:hover,a:active{
font-family: tahoma, "ms Sans Serif", sans-serif, loma;
color: #CA7900;
text-decoration:underline;
}
li {
list-style: square;
}
hr{
color:#CA7900;
}
จากนั้นก็ดึงเอา css มาใช้ จะดึงโดยคำสั่ง <link
rel=stylesheet href="aa.css" type="text/css" />โดยการเขียนดั่งข้างล่างค่ะ
โดยเราจะต้องบันทึกเป็น .html
<html>
<head>
<link rel="stylesheet" href="aa.css"
type="text/css"/>
</head>
<body>
<h1>หน้าเว็บเพจของคุณ
ตัวอักษรขนาด H1</h1>
<hr>
<p>ตัวอักษรที่อยู่ใน p tag</p>
<p>ตัวอักษรทั่วไป</p>
<hr>
<h2>ตัวอักษรขนาด H2</h2>
<table width="900px"
border="1">
<tr>
<td
align="center" colspan="2" bgcolor="#FFE16A">หัวข้อที่1</td>
<td
align="center" colspan="2" bgcolor="#FFE16A">หัวข้อที่2</td>
<td
align="center" colspan="2" bgcolor="#FFE16A">หัวข้อที่3</td>
</tr>
<tr>
<td
align="center" colspan="2" bgcolor="FFFFFF">ตัวอย่างข้อมูลที่1</td>
<td
align="center" colspan="2" bgcolor="FFFFFF">ตัวอย่างข้อมูลที่2</td>
<td
align="center" colspan="2" bgcolor="FFFFFF">ตัวอย่างข้อมูลที่3</td>
</tr>
<tr>
<td
align="center" colspan="2" bgcolor="FFFFFF">ตัวอย่างข้อมูลที่4</td>
<td
align="center" colspan="2" bgcolor="FFFFFF">ตัวอย่างข้อมูลที่5</td>
<td
align="center" colspan="2" bgcolor="FFFFFF">ตัวอย่างข้อมูลที่6</td>
</tr>
</table>
<hr>
<h3>ตัวอักษรขนาด H3</h3>
<h3><a
href="http://www.nmc.ac.th/">
ไปเว็บวิทยาลัย
</a><h3>
<hr>
<p>ตัวอย่างการใช้คำสั่ง List</p>
<p>
<label>
<input name="radiobutton" type="radio"
value="radiobutton" />
</label>
list 1</p>
<p>
<label>
<input name="radiobutton" type="radio"
value="radiobutton" />
</label>
list 2</p>
<p>
<label>
<input name="radiobutton" type="radio"
value="radiobutton" />
</label>
list 3</p>
<p>
<label>
<input name="radiobutton" type="radio"
value="radiobutton" />
</label>
list 4
</p>
</body>
</html>
จะแสดงผลดังภาพข้างล่างค่ะ
