คำสั่งที่ใช้ใส่ Background ให้เว็บเพจ
CSS
การใส่พื้นหลังโดยใช้คำสั่ง CSS นั้นเราสามารถใส่พื้นหลังได้กับวัตถุใดก็ได้เช่น ใส่พื้นหลังให้กับหัวข้อ , ใส่พื้นหลังให้กับตาราง , ใส่พื้นหลังให้กับย่อหน้า และยังสามารถกำหนดขนาด และรายละเอียดการแสดงผลได้อีกด้วย โดยคำสั่งทั้งหมดเราจะพูดกันในบทนี้ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์
1.ใส่พื้นหลังที่เป็นสี
เราสามารถใส่พื้นหลังให้กับวัตถุในหน้าเว็บเพจของเราได้ ดังตัวอย่างเราใส่พื้นหลังให้กับ <body> , <h1> , <p> โดยการกำหนดสีก็ใช้แบบเดียวกับภาษา HTML
2.ใส่พื้นหลังที่เป็นรูปภาพ
ในตัวอย่างจะเป็นการใส่พื้นหลังที่เป็นรูปภาพ
3.คำสั่งให้แสดงพื้นหลังซ้ำในแนวตั้งเท่านั้น
ตามปรกติการแสดงรูปพื้นหลังจะแสดงซ้ำๆกันจนเต็มหน้าเว็บเพจ ดังตัวอย่างที่ 2 อยู่แล้วแต่ในหัวข้อนี้จะให้แสดงซ้ำเฉพาะในแนวตั้งเท่านั้น
4.คำสั่งให้แสดงพื้นหลังซ้ำในแนวนอนเท่านั้น
ตัวอย่างนี้จะเป็นคำสั่งที่ใช้แสดงพื้นหลังซ้ำเฉพาะแนวนอนเท่านั้น
5.คำสั่งให้แสดงพื้นหลังเพียงครั้งเดียว
คำสั่งนี้จะเป็นการบังคับให้มีการแสดงรูปพื้นหลังเพียงครั้งเดียวเท่านั้น
6.คำสั่งกำหนดตำแหน่งของพื้นหลัง
ในหัวข้อที่ 5 เรากำหนดให้แสดงพื้นหลังเพียงครั้งเดียว โดยตำแหน่งที่แสดงนั้นเป็นตำแหน่งซ้ายบนของเว็บเพจ ซึ่งในหัวข้อนี้จะระบุตำแหน่งให้กับพื้นหลังของเรา โดยใช้คำสั้ง background-position: ในตัวอย่างเราจะให้จัดเข้ากึ่งกลางของหน้า background-position: center ความจริงแล้วเราอาจจัดให้อยู่ตำแหน่งอื่นได้อีกเช่น
background-position: left เป็นตำแหน่งด้านซ้ายของหน้า
background-position: right top เป็นตำแหน่งด้านขวาบนของหน้า
background-position: center bottom เป็นตำแหน่งกึ่งกลางด้านล่างของหน้า
7.คำสั่งกำหนดตำแหน่งของพื้นหลังเป็นเปอร์เซ็นต์
ในหัวข้อที่แล้วเป็นการกำหนดตำแหน่งแบบคร่าวๆ ในหัวข้อนี้เราจะบอกตำแหน่งของพื้นหลังเป็น % โดยจะให้รายละเอียดได้มากว่าในหัวข้อที่แล้ว เราจะใช้คำสั่ง background-position: X% Y% โดยจะมีค่า 2 ค่าให้เราใส่คือ
ค่า X เป็นตำแหน่งในแนวนอน
ค่า Y เป็นตำแหน่งในแนวตั้ง
โดย ค่า X = 0% , Y = 0% จะอยู่ที่มุมซ้ายบนของเว็บเพจ
8.คำสั่งกำหนดตำแหน่งของพื้นหลังเป็น px (pixel)
กำหนดพื้นหลังแบบ pixel จะใช้คำสั่ง background-position: Xpx Ypx โดยค่าที่เราจะต้องใส่มี 2 ค่าคือ
ค่า X เป็นระยะห่างจากขอบด้านซ้ายของพื้นหลัง
ค่า Y เป็นระยะห่างจากขอบด้านบนของพื้นหลัง
โดย ค่า X = 0px , Y = 0px จะอยู่ที่มุมซ้ายบนของเว็บเพจ
9.คำสั่งให้พื้นหลังอยู่กับที่
โดยทั่วไปเมื่อเราเลื่อนหน้าเว็บเพจเพื่ออ่านเนื้อหา พื้นหลังก็จะเลื่อนตามด้วย แต่คำสั่งนี้จะทำให้พื้นหลังอยู่กับที่เคลื่อนที่เฉพาะเนื้อหาเท่านั้น
10.การใช้หลายๆคุณสมบัติโดยคำสั่งเดียว
เราสามารถกำหนดหลายๆคุณสมบัติของพื้นหลังไว้ในคำสั่ง background: เพียงคำสั่งเดียว จะสังเกตุได้ว่า browser จะแสดงพื้นหลังที่เป็นภาพไว้บนพื้นหลังที่เป็นสีเสมอ
บทความนี้ทำให้เห็นได้ว่า การใช้ CSS นั้นมีประโยชน์กับเรามากเพราะมีความยืดหยุ่นในการแสดงผลมาก ในบทความต่อไปจะเป็นเรื่องของการจัดตัวหนังสือในเว็บเพจ ซึ่งมีประโยชน์ในการจัดหน้าเว็บเพจมาก
เกี่ยวกับบทความนี้
- ระดับความยาก : พื้นฐาน
- คะแนนของบทความนี้ : 7
- สร้างเมื่อ : 16-05-2010
- จำนวนครั้งที่เปิด : 3,759
- เนื้อหาที่เกี่ยวข้อง :
- -
คลิกที่ ใช่เลย! เพื่อโหวตให้กับบทความนี้หากคิดว่าน่าสนใจ
บทความอื่นๆในหมวดลองทำเว็บไซต์ แบบง่ายๆ (11 เรื่อง)
บทนำ CSS
CSS เป็นคำสั่งที่ใช้คู่กับ HTML เพื่อให้คุณใช้จัดรูปแบบของเว็บเพจของคุณได้ดีขึ้น และแก้ไขได้ง่ายขึ้น
สร้างเมื่อ : 16-05-2010 9:03 | จำนวนครั้งที่เปิด : 4,231
CSS syntax
ในบทนี้จะเป็นเนื้อหาของ รูปแบบคำสั่งของ CSS ซึ่งจะใช้ไปในทุกๆบทต่อจากนี้
สร้างเมื่อ : 16-05-2010 9:05 | จำนวนครั้งที่เปิด : 3,190
การใช้งาน CSS
หลายคนคงสงสัยว่า จะใช้งาน CSS ได้อย่างไร และ CSS จะอยู่ส่วนไหนของ code ของเรา ในบทความนี้จะบอกอย่างเรื่องนี้อย่างละเอียดทีเดียว
สร้างเมื่อ : 16-05-2010 8:29 | จำนวนครั้งที่เปิด : 2,877
คำสั่งที่ใช้ใส่ Background ให้เว็บเพจ
ในบทความนี้จะเป็นคำสั่งที่เกี่ยวกับการใส่ background ให้กับเว็บเพจของเรา ซึ่งสามารถกำหนดรายละเอียดการแสดงผลได้มากกว่าการใช้งาน HTML มาก
สร้างเมื่อ : 16-05-2010 8:29 | จำนวนครั้งที่เปิด : 3,759
คำสั่งที่ใช้กับข้อความ (text)
ในบทนี้จะเป็นคำสั่ง CSS ที่ใช้กับข้อความ ซึ่งเป็นสิ่งที่เราใช้มากที่สุดในการทำเว็บเพจ
สร้างเมื่อ : 16-05-2010 8:30 | จำนวนครั้งที่เปิด : 2,558
คำสั่งจัดการฟอนต์ (font)
ในบทนี้เราจะเป็นคำสั่งใช้กับตัวอักษร (font) ของเรา เช่นกำหนดขนาดให้ตัวอักษร , แสดงอักษรตัวหนา , ตัวเอียง หรือแม้แต่กระทั่งชนิดของตัวอักษร
สร้างเมื่อ : 16-05-2010 8:30 | จำนวนครั้งที่เปิด : 1,704
คำสั่งที่เกี่ยวกับเส้นขอบ
ในบทนี้จะเป็นคำสั่งที่ใช้สร้างเส้นขอบต่างๆ สำหรับวัตถุ เช่นสร้างเส้นขอบให้กับอักษร หรือสร้างเส้นขอบให้กับเนื้อหา ที่จะเห็นใช้กันบ่อยๆคือ เส้นประที่ใช้คั่นระหว่างบทความ
สร้างเมื่อ : 16-05-2010 8:31 | จำนวนครั้งที่เปิด : 2,248
Margin กำหนดระยะห่างระหว่างวัตถุ
margin เป็นการกำหนดระยะห่างระหว่างวัตถุเช่น กำหนดให้ข้อความห่างจาก ตาราง 1 cm หรือกำหนดระยะห่างระหว่างข้อความด้วยกัน
สร้างเมื่อ : 16-05-2010 8:31 | จำนวนครั้งที่เปิด : 1,560
padding จัดระยะห่างระหว่างขอบของวัตถุ และเนื้อหา
padding จัดระยะห่างระหว่างขอบของวัตถุ และเนื้อหา เช่น ระยะห่างระหว่างเส้นตาราง และเนื้อหาในตาราง
สร้างเมื่อ : 16-05-2010 8:31 | จำนวนครั้งที่เปิด : 1,419
เปลี่ยนสัญลักษณ์หน้า list
ในบทเรียน HTML จะมีเรื่องการเขียน list อยู่ซี่งเครื่องหมายที่อยู่หน้า list นั้นสามารถเปลี่ยนได้โดยใช้คำสั่ง CSS
สร้างเมื่อ : 16-05-2010 8:32 | จำนวนครั้งที่เปิด : 1,656
table จัดรูปแบบของตารางด้วยคำสั่ง css
ในบทนี้จะเป็นการจัดรูปแบบของตารางด้วยคำสั่ง CSS
สร้างเมื่อ : 16-05-2010 8:32 | จำนวนครั้งที่เปิด : 3,219
