วิธีการตั้งค่าภาพพื้นหลังใน CSS

การสร้างเว็บไซต์เป็นวิธีที่ยอดเยี่ยมในการแสดงออก แม้ว่าจะมีเครื่องมือสร้างเว็บไซต์มากมาย แต่การเขียนด้วยตัวเองเป็นวิธีที่สนุกในการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานของเว็บไซต์เบื้องหลัง โครงการเริ่มต้นที่ดีคือการสร้างเว็บไซต์และเพิ่มรูปภาพพื้นหลังด้วย CSS โปรเจ็กต์นี้จะช่วยให้คุณเริ่มต้นใช้งานได้ทั้ง HTML และ CSS

CSS คืออะไร?

CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาโปรแกรมที่ให้คุณกำหนดรูปแบบภาษามาร์กอัป ภาษามาร์กอัปหนึ่งภาษาดังกล่าวคือ HTML หรือ Hyper-Text Markup Language HTML ใช้สำหรับสร้างเว็บไซต์ แม้ว่าคุณจะสามารถควบคุมรูปแบบเว็บไซต์บางส่วนได้โดยใช้ HTML แต่ CSS ก็มีตัวเลือกการควบคุมและการออกแบบที่มากกว่า

---

---

การสร้างเว็บไซต์พื้นฐานด้วย HTML

เนื่องจาก CSS เป็นเพียงภาษาสไตล์ ในการใช้งาน เราต้องมีสิ่งที่จะจัดรูปแบบก่อน เว็บไซต์ธรรมดาๆ ก็เพียงพอแล้วที่เราจะเริ่มเล่นกับ CSS หน้าของเราจะแสดง 'Hello World'

Hello World

ในกรณีที่คุณไม่คุ้นเคยกับ HTML เรามาดูสิ่งที่องค์ประกอบทั้งหมดทำกันอย่างรวดเร็ว ดังที่กล่าวไว้ HTML เป็นภาษามาร์กอัป ซึ่งหมายความว่าใช้แท็กเพื่อทำเครื่องหมายว่าข้อความคืออะไร เมื่อใดก็ตามที่คุณเห็นคำล้อมรอบด้วย มันเป็นแท็ก มีแท็กสองประเภท ได้แก่ แท็กที่ทำเครื่องหมายจุดเริ่มต้นของส่วนโดยใช้ และอีกประเภทหนึ่งที่ทำเครื่องหมายจุดสิ้นสุดของส่วนโดยใช้ ข้อความภายในส่วนนี้มีจุดประสงค์เพื่อให้เห็นความแตกต่างนี้ได้ง่ายขึ้น

ในตัวอย่างของเรา เรามีสี่แท็ก NS html แท็กระบุว่าองค์ประกอบใดเป็นส่วนหนึ่งของเว็บไซต์ NS ศีรษะ มีข้อมูลส่วนหัวที่ไม่ได้แสดงบนหน้า แต่จำเป็นในการสร้างหน้า องค์ประกอบที่แสดงทั้งหมดอยู่ระหว่าง ร่างกาย แท็ก เรามีองค์ประกอบที่แสดงเพียงรายการเดียวเท่านั้น the NS แท็ก มันบอกเว็บเบราว์เซอร์ว่าข้อความเป็นย่อหน้า

ที่เกี่ยวข้อง: 10 ตัวอย่างโค้ด CSS อย่างง่ายที่คุณเรียนรู้ได้ใน 10 นาที

---

---

การเพิ่ม CSS ให้กับ HTML

ตอนนี้เรามีหน้าที่เรียบง่ายแล้ว เราสามารถปรับแต่งสไตล์ด้วย CSS ได้ หน้าของเราค่อนข้างเรียบง่ายในขณะนี้ และเราไม่สามารถทำอะไรได้มากนัก แต่ให้เริ่มด้วยการทำให้ย่อหน้าของเราโดดเด่น เพื่อให้เราสามารถแยกความแตกต่างจากพื้นหลังโดยการเพิ่มเส้นขอบ

Hello World

---

---

ตอนนี้ ย่อหน้าของเราจะถูกล้อมรอบด้วยเส้นขอบสีดำ การเพิ่มคำอธิบายสไตล์ใน CSS ให้กับแท็กย่อหน้าของเราเป็นการบอกเว็บไซต์ถึงวิธีการจัดรูปแบบย่อหน้า เราสามารถเพิ่มคำอธิบายเพิ่มเติมได้ มาเพิ่มพื้นที่สีขาวหรือช่องว่างภายในรอบย่อหน้าของเราและจัดข้อความให้อยู่ตรงกลาง

Hello World

เว็บไซต์ของเราดูดีขึ้น แต่ HTML ของเราเริ่มดูยุ่งเหยิงกับคำอธิบายทั้งหมดในแท็กย่อหน้า เราสามารถย้ายข้อมูลนี้ไปที่ส่วนหัวของเรา ส่วนหัวของเรามีไว้สำหรับข้อมูลที่เราต้องแสดงเว็บไซต์อย่างถูกต้อง

p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

Hello World

ตอนนี้ HTML ของเราอ่านง่ายขึ้น คุณจะสังเกตเห็นว่าเราต้องเปลี่ยนแปลงบางสิ่งรอบๆ แท็กสไตล์จะบอกข้อมูลสไตล์ของเว็บเบราว์เซอร์ แต่ยังรวมถึงสไตล์ด้วย ในตัวอย่างของเรา เราได้ใช้สองวิธีที่ต่างกันเพื่อบอกว่าควรจัดสไตล์อย่างไร NS NS ในแท็กสไตล์กำลังบอกให้เว็บเบราว์เซอร์ใช้สไตล์นั้นกับแท็กย่อหน้าทั้งหมด NS #วรรคของเรา ส่วนบอกเฉพาะองค์ประกอบสไตล์ที่มี id วรรคของเรา . สังเกตว่า NS ข้อมูลถูกเพิ่มลงในแท็ก p ในร่างกายของเรา

จะทำอย่างไรเมื่อ iphone ค้างที่โลโก้แอปเปิ้ล

การนำเข้าไฟล์ CSS ไปยังเว็บไซต์ของคุณ

การเพิ่มข้อมูลสไตล์ไปที่ส่วนหัวทำให้โค้ดของเราอ่านง่ายขึ้นมาก อย่างไรก็ตาม หากเราต้องการจัดรูปแบบหน้าเว็บหลายๆ หน้าในลักษณะเดียวกัน เราต้องเพิ่มข้อความนั้นที่ด้านบนสุดของทุกหน้า นั่นอาจดูเหมือนไม่ค่อยเวิร์ค คุณสามารถคัดลอกและวางมันได้ แต่มันสร้างงานได้มากมายหากคุณต้องการเปลี่ยนองค์ประกอบในภายหลัง

แต่เราจะเก็บข้อมูล CSS ไว้ในไฟล์แยกต่างหากและนำเข้าไฟล์เพื่อจัดรูปแบบหน้า คัดลอกและวางข้อมูลระหว่างแท็กสไตล์ลงในไฟล์ CSS ใหม่ ของเราCSSfile.css .

p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

จากนั้นนำเข้าไฟล์ไปยังไฟล์ HTML

Hello World

การเพิ่มภาพพื้นหลังด้วย CSS

ตอนนี้คุณมีพื้นฐานที่มั่นคงใน HTML และ CSS แล้ว การเพิ่มรูปภาพพื้นหลังจะกลายเป็นเรื่องง่ายๆ ขั้นแรก ระบุองค์ประกอบที่คุณต้องการให้ภาพพื้นหลัง ในตัวอย่างของเรา เราจะเพิ่มพื้นหลังให้กับทั้งหน้า ซึ่งหมายความว่าเราต้องการเปลี่ยนรูปแบบของ ร่างกาย . อย่าลืมว่าแท็ก body มีองค์ประกอบที่มองเห็นได้ทั้งหมด

body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

หากต้องการเปลี่ยนรูปแบบเนื้อหาใน CSS ให้ใช้คำสั่ง .ก่อน ร่างกาย คำสำคัญ. จากนั้นเพิ่มวงเล็บปีกกาเหมือนที่เราทำก่อนหน้า {} ข้อมูลสไตล์ทั้งหมดสำหรับเนื้อหาต้องอยู่ระหว่างวงเล็บปีกกา คุณลักษณะสไตล์ที่เราต้องการเปลี่ยนคือ ภาพพื้นหลัง . มีคุณลักษณะของสไตล์มากมาย อย่าหวังว่าจะจำได้ทั้งหมด บุ๊กมาร์กชีตคุณสมบัติ CSS พร้อมแอตทริบิวต์ที่คุณต้องการจดจำ

ที่เกี่ยวข้อง: 8 เอฟเฟกต์ HTML สุดเจ๋งที่ใครๆ ก็สามารถเพิ่มลงในเว็บไซต์ของตนได้

วิธีเปิดไฟล์ psd

หลังแอตทริบิวต์ ใช้เครื่องหมายทวิภาคเพื่อระบุว่าคุณจะเปลี่ยนแอตทริบิวต์อย่างไร ในการนำเข้ารูปภาพ ให้ใช้ url() . แสดงว่าคุณกำลังใช้ลิงก์เพื่อชี้ไปที่รูปภาพ วางตำแหน่งไฟล์ในวงเล็บระหว่างเครื่องหมายคำพูด สุดท้าย จบบรรทัดด้วยเครื่องหมายอัฒภาค แม้ว่าช่องว่างสีขาวจะไม่มีความหมายใน CSS ให้ใช้การเยื้องเพื่อทำให้ CSS อ่านง่ายขึ้น

ตัวอย่างของเรามีลักษณะดังนี้:

หากรูปภาพของคุณแสดงไม่ถูกต้องเนื่องจากขนาดของรูปภาพ คุณสามารถเปลี่ยนรูปภาพได้โดยตรง อย่างไรก็ตาม มีแอตทริบิวต์สไตล์พื้นหลังใน CSS ที่คุณสามารถใช้เพื่อเปลี่ยนพื้นหลังได้ รูปภาพที่มีขนาดเล็กกว่าพื้นหลังจะถูกทำซ้ำโดยอัตโนมัติในพื้นหลัง หากต้องการปิด ให้เพิ่ม พื้นหลัง-ซ้ำ:ไม่ซ้ำ; ให้กับองค์ประกอบของคุณ

มีสองวิธีในการทำให้ภาพครอบคลุมพื้นหลังทั้งหมด ขั้นแรก คุณสามารถตั้งค่าขนาดพื้นหลังเป็นขนาดของหน้าจอด้วย ขนาดพื้นหลัง: 100% 100%; แต่จะทำให้ภาพยืดออกและอาจบิดเบือนภาพมากเกินไป หากคุณไม่ต้องการให้สัดส่วนของรูปภาพเปลี่ยนไป คุณสามารถตั้งค่าขนาดพื้นหลังเป็น ปิดบัง . หน้าปกจะทำให้ภาพพื้นหลังครอบคลุมพื้นหลังแต่ไม่ทำให้ภาพบิดเบี้ยว

การเปลี่ยนสีพื้นหลัง

มาเปลี่ยนสิ่งสุดท้ายกันเถอะ ตอนนี้เรามีพื้นหลังแล้ว ย่อหน้าของเราอ่านยาก มาทำให้พื้นหลังเป็นสีขาวกันเถอะ กระบวนการนี้คล้ายคลึงกัน องค์ประกอบที่เราต้องการแก้ไขคือ #ourParagraph # ระบุว่า 'ourParagraph' เป็นชื่อรหัส ต่อไปเราต้องการตั้งค่า สีพื้นหลัง คุณลักษณะสีขาว

body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}

ดีขึ้นมาก

ออกแบบเว็บไซต์ของคุณต่อไปด้วย CSS

ตอนนี้คุณรู้วิธีเปลี่ยนสไตล์ขององค์ประกอบ HTML ต่างๆ แล้ว ท้องฟ้าก็มีขีดจำกัดแล้ว! วิธีการพื้นฐานในการเปลี่ยนแอตทริบิวต์สไตล์จะเหมือนกัน ระบุองค์ประกอบที่คุณต้องการเปลี่ยนแปลง และอธิบายวิธีเปลี่ยนแอตทริบิวต์ วิธีที่ดีที่สุดในการเรียนรู้เพิ่มเติมคือเล่นกับคุณลักษณะต่างๆ ท้าทายตัวเองให้เปลี่ยนสีข้อความของคุณต่อไป

แบ่งปัน แบ่งปัน ทวีต อีเมล 8 ไซต์ที่ดีที่สุดสำหรับตัวอย่างการเข้ารหัส HTML ที่มีคุณภาพ

ต้องการเรียนรู้ HTML เพื่อเขียนโค้ดเว็บไซต์และแอปของคุณเองหรือ ใช้ตัวอย่างหน้าเว็บและซอร์สโค้ดเหล่านี้เพื่อสอนตัวเองเกี่ยวกับ HTML และ CSS

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

• การเขียนโปรแกรม
• HTML
• ออกแบบเว็บ
• CSS

เกี่ยวกับผู้เขียน เจนนิเฟอร์ ซีตัน(21 บทความที่ตีพิมพ์)

J. Seaton เป็นนักเขียนวิทยาศาสตร์ที่เชี่ยวชาญในการแบ่งหัวข้อที่ซับซ้อน เธอสำเร็จการศึกษาระดับปริญญาเอกจากมหาวิทยาลัยซัสแคตเชวัน งานวิจัยของเธอมุ่งเน้นไปที่การใช้การเรียนรู้จากเกมเพื่อเพิ่มการมีส่วนร่วมของนักเรียนทางออนไลน์ เมื่อเธอไม่ได้ทำงาน คุณจะพบเธอด้วยการอ่านหนังสือ เล่นวิดีโอเกม หรือทำสวน

เพิ่มเติมจาก Jennifer Seaton

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก