กลุ่มคำสั่งของ CSS
ที่ใช้กำหนดสไตล์ชีตให้เวบสามารถทำได้ 3 วิธี
1. Inline Style Sheet
เป็นการแทรกแอททริบิวต์ "style" ลงในแท็ก HTML ที่ตำแหน่งใดๆ ที่เอกสาร XHTML ก็ได้ ข้อดีคือ
ถ้ามีการใช้เพียงตำแหน่งเดียวก็กำหนดได้ทันที และยังเปลี่ยนสไตล์ที่กำหนดไว้ก่อนหน้านี้ได้
คือเป็นการแก้ไขเฉพาะแท็กที่ต้องการ
รูปแบบ... <tag-html
style="property:value">...</tag-html>
2. Internal Style Sheet
เป็นการกำหนดสไตล์ชีตไว้ในส่วนเริ่มต้นของเอกสาร
แล้วจึงเรียกใช้ในตำแหน่งที่ต้องการ ภายใต้แท็ก <style>...</style>
และสามารถกำหนดในแท็ก <head> หรือ <title> หรือ <body> ก็ได้ แต่ที่นิยมคือ <head> (ต้องกำหนดสไตล์ชีตก่อนเรียกใช้สไตล์ชีต) ข้อดีคือ
ไม่ต้องกำหนดหรือแก้สไตล์ชีตในทุกตำแหน่งที่ต้องการ
InternalStyleSheet.html
<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>การใช้งานสไตล์ชีตแบบ
Internal
Style Sheet</title>
<style type="text="css">
h1 {
color:#FF6;
text-align:center;
}
h2 {
color:sienna;
}
p {
margin-left:20px;
font: MS Serif",
"New York", serrif;
font-size:large;
}
body {
background-image:url(CH2/image/bg.jpg);
}
</style>
</head>
<body>
<h1>พวงกุญแจออกใหม่</h1>
<hr>
<p>พวงกุญแจลูกปัดคริสตัล</p>
<p
align="center"><img src="CH2/image/fish.jpg" width
="320px" height="200px" /></p>
</body>
</html>
3. External Style Sheet
เป็นการสร้างไฟล์สไตล์ชีตที่มีนามสกุล .css
และเรียกใช้งานโดยกำหนดแท็ก <link> ในแท็ก <head> หรือใช้คำสั่ง @import ในแท็กสไตล์ <style> ข้อดีคือ สามารถใช้ได้กับทุกเอกสาร HTML
และปรับเปลี่ยนแก้ไขได้อย่างรวดเร็วอีกด้วย
การเรียกใช้ด้วย
<link>
รูปแบบ...
<link rel="stylesheet" type="text/css"
href="css/global.css" />
โดย...
rel กำหนดรูปแบบการเชื่อมโยง,
type แจ้งให้เวบบราวเซอร์ทราบว่าชนิดข้อมูลอยู่ในไฟล์ประกอบด้วยคำสั่ง
css
ในที่นี้กำหนดค่าเป็น text/css และ herf กำหนดแหล่งจัดเก็บหรืออ้างอิงตำแหน่งไฟล์สไตล์ชีตที่ต้องการ
LinkStyleSheet.css
h1 {
color: #FF6;
text-align:center;
}
hr {
color:sienna;
}
p {
margin-left: 20px;
font: "MS Serif", "New York", serif;
font-size=large;
}
body {
background-image:url(CH2/image/bg.jpg);
}
LinkStyleSheet.html
<!DOCTYPE HTML PUBLIC"-/W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>การเรียกใช้สไตล์ชีตด้วยแท็ก link</title>
<link rel=”stylesheet” type=”text/css”
href=”LinkStyleSheet.css” />
</head>
<body>
<h1>พวงกุญแจออกใหม่</h1>
<hr>
<p>พวงกุญแจลูกปัดคริสตัล</p>
<p
align="center"><img src="CH2/image/fish.jpg" width
="320px" height="200px" /></p></body>
</html>
การเรียกใช้ด้วยคำสั่ง
@import
เป็นการเชื่อมโยงคำสั่งด้วยการกำหนดแอทบริบิ้วต์
"url" เพื่ออ้างอิงไฟล์ที่สร้างไว้นอกเอกสาร
HTML และสามารถใช้คำได้มากกว้า 1 คำสั่ง
อีกทั้งยังเพิ่มคำสั่ง css ต่อท้ายคำสั่ง @import ได้โดยตรงอีกด้วย
รูปแบบ... <style type="text/css">
@import
url(css-name);
</style>
หากมีมากกว่า 1 คำสั่ง จะมีรูปแบบดังนี้
<style
type="text/css>
@import
url(css/global.css);
@import
url(css/forms.css);
p { color:red; }
</style>
ImportStyleSheet.html
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>แสดงการเรียกใช้สไตล์ชีทด้วยคำสั่ง @import</title>
<style
type="text/css">
<!--
@import url("LinkStyleSheet.css");
img { /* กำหนดรูปแบบและสีของสีของขอบรูปภาพ
*/
border-style:dashed;
border-color:#6F9;
}
-->
</style>
</head>
<body>
<h1>พวงกุญแจออกใหม่</h1>
<hr>
<p>พวงกุญแจลูกปัดคริสตัล</p>
<p align="center"><img
src="CH2/image/fish.jpg" width ="320px"
height="200px" /></p></body>
</html>
&&&&&&&&&
ไม่มีความคิดเห็น:
แสดงความคิดเห็น