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
Published by sjnoi777, 2019-11-25 01:13:33

slide03_Cadcading style sheet

CSS3

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


Click to View FlipBook Version