พื้นหลัง -ซ้ำ คุณสมบัติใช้เพื่อควบคุมการทำซ้ำของรูปภาพในพื้นหลัง คุณสามารถใช้ค่า no-repeat สำหรับคุณสมบัติ background-repeat ได้ หากคุณไม่ต้องการให้รูปภาพซ้ำ ในกรณีนี้ รูปภาพจะแสดงเพียงครั้งเดียว ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีการทำงานกับ background-repeat คุณสมบัติ: <
ในการตั้งค่าภาพพื้นหลังขององค์ประกอบ ให้ใช้ background-image ทรัพย์สิน ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีการทำงานกับ background-image คุณสมบัติ: <html> <head> <style> body { &
พื้นหลัง -ตำแหน่ง คุณสมบัติใช้เพื่อควบคุมตำแหน่งของรูปภาพในพื้นหลัง ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีการทำงานกับ background-position คุณสมบัติ. โดยกำหนดตำแหน่งของภาพพื้นหลังให้ห่างจากด้านซ้าย 30 พิกเซล: <html> <head> <style&g
หากต้องการควบคุมการทำซ้ำของรูปภาพในพื้นหลัง ให้ใช้ background-repeat คุณสมบัติ. คุณสามารถใช้ค่า no-repeat สำหรับคุณสมบัติ background-repeat ได้ หากคุณไม่ต้องการให้รูปภาพซ้ำ ในกรณีนี้ รูปภาพจะแสดงเพียงครั้งเดียว ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีการทำงานกับ background-repeat
หากต้องการควบคุมตำแหน่งของรูปภาพในพื้นหลัง ให้ใช้ ตำแหน่งพื้นหลัง ทรัพย์สิน ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีทำงานกับ background-position คุณสมบัติ. โดยกำหนดตำแหน่งของภาพพื้นหลังให้ห่างจากด้านซ้าย 30 พิกเซล: <html> <head> <st
ภาพพื้นหลัง คุณสมบัติใช้เพื่อกำหนดภาพพื้นหลังขององค์ประกอบ ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีการทำงานกับ background-image คุณสมบัติ: <html> <head> <style> body {
ในการตั้งค่าการเลื่อนของรูปภาพในพื้นหลัง ให้ใช้ background-attachment ทรัพย์สิน ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีทำงานกับ background-attachment คุณสมบัติ: <!DOCTYPE html> <html> <head> <style> &n
คุณสามารถใส่กฎ CSS ของคุณลงในเอกสาร HTML โดยใช้องค์ประกอบ แท็กนี้อยู่ในแท็ก ... กฎที่กำหนดโดยใช้ไวยากรณ์นี้จะนำไปใช้กับองค์ประกอบทั้งหมดที่มีอยู่ในเอกสาร ตัวอย่าง ต่อไปนี้เป็นตัวอย่างของ CSS แบบฝังโดยใช้องค์ประกอบ : <!DOCTYPE html> <html> <head>
คุณสามารถใส่กฎ CSS ของคุณลงในเอกสาร HTML โดยใช้องค์ประกอบ แท็กนี้อยู่ในแท็ก ... กฎที่กำหนดโดยใช้ไวยากรณ์นี้จะนำไปใช้กับองค์ประกอบทั้งหมดที่มีอยู่ในเอกสาร ต่อไปนี้เป็นตัวอย่าง: <!DOCTYPE html> <html> <head> <style media = "all"> &n
คุณสามารถใช้แอตทริบิวต์ style ขององค์ประกอบ HTML เพื่อกำหนดกฎของรูปแบบได้ กฎเหล่านี้จะใช้กับองค์ประกอบนั้นเท่านั้น นี่คือรูปแบบทั่วไป: <element style = "...style rules...."> ต่อไปนี้เป็นตัวอย่าง: <html> <head> </head> <body
@import ใช้เพื่อนำเข้าสไตล์ชีตภายนอกในลักษณะที่คล้ายกับองค์ประกอบ นี่คือไวยากรณ์ของกฎ @import: <head> <@import "URL"; </head> ต่อไปนี้เป็นตัวอย่างที่แสดงวิธีการนำเข้าไฟล์สไตล์ชีตไปยังเอกสาร HTML: <head> @import "new.css"; </hea
องค์ประกอบสามารถใช้เพื่อรวมไฟล์สไตล์ชีตภายนอกในเอกสาร HTML ของคุณ สไตล์ชีตภายนอกเป็นไฟล์ข้อความแยกต่างหากที่มีนามสกุล .css คุณกำหนดกฎรูปแบบทั้งหมดภายในไฟล์ข้อความนี้ จากนั้นคุณสามารถรวมไฟล์นี้ในเอกสาร HTML ใดก็ได้โดยใช้องค์ประกอบ พิจารณาไฟล์สไตล์ชีตอย่างง่ายที่มีชื่อ new.css โดยมีกฎดังต่อไปนี้: h
ต่อไปนี้คือกฎที่จะแทนที่กฎของสไตล์ชีต สไตล์ชีตแบบอินไลน์จะมีลำดับความสำคัญสูงสุด ดังนั้น จะแทนที่กฎที่กำหนดไว้ในแท็ก ... หรือกฎที่กำหนดไว้ในไฟล์สไตล์ชีตภายนอก กฎใดๆ ที่กำหนดไว้ในแท็ก ... จะแทนที่กฎที่กำหนดไว้ในไฟล์สไตล์ชีตภายนอก กฎใดๆ ที่กำหนดไว้ในไฟล์สไตล์ชีตภายนอกจะมีลำดับความสำคัญต่ำสุด และกฎที่
คุณอาจต้องใส่ความคิดเห็นเพิ่มเติมในกลุ่มสไตล์ชีตของคุณ ดังนั้นจึงเป็นเรื่องง่ายมากที่จะแสดงความคิดเห็นในส่วนใดๆ ของสไตล์ชีต คุณสามารถใส่ความคิดเห็นของคุณใน /*.....นี่คือความคิดเห็นในสไตล์ชีต.....*/. คุณสามารถใช้ /* ....*/ เพื่อแสดงความคิดเห็นบล็อกหลายบรรทัดในลักษณะเดียวกับที่คุณทำในภาษาการเขียนโปรแ
CSS รองรับการวัดจำนวนหนึ่ง รวมถึงหน่วยสัมบูรณ์ เช่น นิ้ว เซนติเมตร จุด และอื่นๆ ตลอดจนการวัดที่เกี่ยวข้อง เช่น เปอร์เซ็นต์และหน่วย em คุณต้องใช้ค่าเหล่านี้ในขณะที่ระบุการวัดต่างๆ ในกฎรูปแบบของคุณ ต่อไปนี้คือหน่วยการวัด CSS พร้อม: หน่วย คำอธิบาย ตัวอย่าง % กำหนดการวัดเป็นเปอร์เซ็นต์ที่สัมพ
การตั้งค่าความสูงของวิวพอร์ตใน CSS: h1 { font-size: 4.0vh; } การตั้งค่าความกว้างวิวพอร์ตใน CSS: h1 { font-size: 5.5vw; }
หากต้องการกำหนดระยะห่างระหว่างตัวอักษรด้วย CSS ให้ใช้หน่วยวัด em การวัดความสูงของฟอนต์แบบสัมพัทธ์คือช่องว่างเอ็ม เนื่องจากหน่วย em นั้นเทียบเท่ากับขนาดของฟอนต์ที่กำหนด หากคุณกำหนดฟอนต์เป็น 12pt แต่ละหน่วย em จะเป็น 12pt; ดังนั้น 2em จะเป็น 24pt. ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้ CS
สมมติว่าคุณต้องการใช้กฎสไตล์กับองค์ประกอบเฉพาะเมื่ออยู่ภายในองค์ประกอบเฉพาะ ตามตัวอย่างต่อไปนี้ กฎสไตล์จะใช้กับองค์ประกอบ เมื่ออยู่ภายในแท็ก เท่านั้น ul em { color: #FFFF00; } สมมติว่าตอนนี้สำหรับ องค์ประกอบและกฎรูปแบบที่ใช้กับ : ol strong { color: #808000; }
คุณสามารถกำหนดกฎของสไตล์ตามแอตทริบิวต์คลาสขององค์ประกอบ องค์ประกอบทั้งหมดที่มีคลาสนั้นจะถูกจัดรูปแบบตามกฎที่กำหนดไว้ .black { color: #808000; } กฎนี้แสดงเนื้อหาเป็นสีดำสำหรับทุกองค์ประกอบโดยตั้งค่าแอตทริบิวต์ class เป็นสีดำในเอกสารของเรา คุณสามารถทำให้มันเฉพาะเจาะจงมากขึ้นได้ ตัวอย่างเ
คุณสามารถกำหนดกฎของสไตล์ตามแอตทริบิวต์ id ขององค์ประกอบ องค์ประกอบทั้งหมดที่มีรหัสนั้นจะถูกจัดรูปแบบตามกฎที่กำหนดไว้ #black { color: #000000; } กฎนี้ทำให้เนื้อหาเป็นสีดำสำหรับทุกองค์ประกอบด้วยแอตทริบิวต์ id ที่ตั้งค่าเป็นสีดำในเอกสารของเรา คุณสามารถทำให้มันเฉพาะเจาะจงมากขึ้นได้ ต
