Cascading Style Sheet
Cascading Style Sheet
เป็ นการจดั รูปแบบหนา้ ตาของเว็บแบบพเิ ศษ
แกข้ อ้ จากดั ของภาษา html
ตาแหน่งของ CSS
อยูใ่ น tag <head>
อยู่ใน tag <body>
อยู่ในคาสงั่ ต่างๆ
อยูใ่ นไฟลอ์ ืน่
ในวิชาน้ จี ะกล่าวถงึ เฉพาะ 3 ตาแหนง่ แรก
เท่าน้นั
ใน tag <head>
จะมีผลตลอดท้งั เอกสาร
<head>
<style>
… ส่วนกาหนด CSS …
</style>
</head>
ใน tag <body>
จะมผี ลต่อจากจุดทีก่ าหนด
<body>
<style>
… ส่วนกาหนด CSS …
</style>
</body>
ใน tag
จะมีผลเฉพาะในคาสงั่ น้นั เช่น
<font style=“font-size:140”> AAA </font>
รูปแบบการกาหนดสไตลช์ ที
ชื่อ tag {รูปแบบ1 : ค่า ; รูปแบบ2 : ค่า ; ... ; รูปแบบ n : ค่า ; }
โดยที่ชือ่ tag คือ คาสงั่ ภาษา html ทีจ่ ะกาหนด
รูปแบบ คือ คณุ สมบตั ิต่างๆของ tag น้นั ๆจะแตกต่างกนั ไป
ตาม tag
ค่า คือ ค่าของคุณสมบตั ิน้นั
ระหว่างคุณสมบตั ิกบั ค่าจะคนั่ ดว้ ยเครื่องหมาย : และระหว่าง
คุณสมบตั ิจะคนั่ ดว้ ยเครือ่ งหมาย ; ในแต่ละ tag จะกาหนดกี่
คุณสมบตั ิกไ็ ด้
คุณสมบตั ทิ ส่ี าคญั
พ้ นื หลงั
ตวั อกั ษร
ตาราง
Cursor
อื่นๆ
การกาหนดลกั ษณะพน้ื หลงั
เกือบทุก tag สามารถกาหนดลกั ษณะพ้ นื หลงั ได้
เลอื กใส่คาสงั่ ไดใ้ น 3 จุดทีผ่ ่านมาแลว้ คือ
ที่ <head> จะมผี ลตลอดท้งั เอกสาร
ที่ <body> มผี ลต่อจากจุดทีก่ าหนด
ใน tag จะมีผลเฉพาะใน tag น้นั มกั จะต่อจาก
style=
มคี ุณสมบตั ิทีน่ า่ สนใจดงั น้ ี
background-image:URL(ไฟล)์
จะมผี ลเช่นเดียวกบั คาสงั่ <body background=
ชื่อรูป)
เช่น background-image:URL(ball.gif)
background-color:สี
จะมผี ลเช่นเดียวกบั คาสงั่ <body bgcolor=ส)ี
สามารถใช้
background-color:#ff00ff ฐานสิบหก
background-color:RGB(00,255,128) ฐาน
สบิ
เช่น background-color:red
background-attachment:
เป็ นการกาหนดว่าจะใหพ้ ้ นื หลงั เลอื่ นตามการ
เลอื่ นข้ ึนเลอื่ นลงหรือเปล่ามไี ดส้ องค่าคือ
Background-attachment:scroll คือจะเลอื่ น
ตาม
Background-attachment:fixed คือจะไม่เลอื่ น
ตาม
background-repeat:
ใชก้ าหนดว่าในกรณีทีร่ ูปเลก็ กว่าหนา้ จอจะใหท้ าซ้ารูป
อย่างไร
Background-repeat:repeat แสดงภาพซ้าเต็มพ้ นื หลงั
Background-repeat:repeat-x แสดงภาพซ้าตาม
แนวนอน
Background-repeat:repeat-y แสดงภาพซ้าตามแนวดงิ่
Background-repeat:no-repeat แสดงเพยี งภาพเดียว
background-position:(left,top)
ใชใ้ นกรณีที่กาหนดการทาซ้าเป็ น no-repeat
Left หมายถงึ ห่างจากทางซา้ ย top หมายถงึ ห่างจาก
ดา้ นบน
เช่น background-position:(150,10) หมายถงึ ห่างจาก
ดา้ นซา้ ย 150 ดา้ นบน 10
สามารถใชค้ าภาษาองั กฤษแทนได้ เช่น left top right
center
เช่น background-position:left
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
slide03_Cadcading style sheet
- 1 - 14
Pages: