ล่าสุดการพัฒนาเว็บบทเรียน
×

CSS เกี่ยวกับการสอน

CSS บ้าน CSS บทนำ CSS วากยสัมพันธ์ CSS ทำอย่างไร CSS สี CSS ภูมิหลัง CSS พรมแดน CSS อัตรากำไรขั้นต้น CSS การขยายความ CSS สูงกว้าง CSS ข้อความ CSS แบบอักษร CSS การเชื่อมโยง CSS รายการ CSS ตาราง CSS รูปแบบกล่อง ร่าง CSS การแสดงผล CSS CSS ความกว้างสูงสุด CSS ตำแหน่ง CSS ลอย CSS Inline-block CSS เป็นเส้นตรง CSS combinators CSS หลอกชั้น CSS องค์ประกอบหลอก CSS แถบนำทาง CSS เมนูแบบเลื่อนลง CSS คำแนะนำเครื่องมือ CSS แกลเลอรี่ภาพ CSS ภาพทึบ CSS ภาพแบบ Sprite CSS attr Selectors รูปแบบ CSS CSS เคาน์เตอร์

CSS3

CSS3 บทนำ CSS3 มุมโค้งมน CSS3 แสดงสินค้าชายแดน CSS3 ภูมิหลัง CSS3 สี CSS3 การไล่ระดับสี CSS3 เงา CSS3 ข้อความ CSS3 แบบอักษร CSS3 แปลง 2D CSS3 แปลง 3D CSS3 การเปลี่ยน CSS3 ภาพเคลื่อนไหว CSS3 ภาพ CSS3 ปุ่ม CSS3 การให้เลขหน้า CSS3 หลายคอลัมน์ CSS3 หน้าจอผู้ใช้ CSS3 กล่องขนาด CSS3 Flexbox CSS3 สื่อแบบสอบถาม CSS3 ตัวอย่าง MQ

CSS การออกแบบเว็บที่ตอบสนอง

การออกแบบเว็บที่ตอบสนอง แนะนำ การออกแบบเว็บที่ตอบสนอง วิวพอร์ต การออกแบบเว็บที่ตอบสนอง ตารางมุมมอง การออกแบบเว็บที่ตอบสนอง สื่อแบบสอบถาม การออกแบบเว็บที่ตอบสนอง ภาพ การออกแบบเว็บที่ตอบสนอง วิดีโอ การออกแบบเว็บที่ตอบสนอง กรอบ

CSS Examples

CSS ตัวอย่าง CSS ทดสอบ CSS ใบรับรอง

CSS References

CSS การอ้างอิง CSS selectors CSS ฟังก์ชั่น CSS หูอ้างอิง CSS Web Safe แบบอักษร CSS Animatable CSS หน่วย CSS PX-EM แปลง CSS สี CSS ค่าสี CSS ชื่อสี CSS3 สนับสนุนเบราว์เซอร์

 

CSSเค้าโครง - สถานที่ให้บริการการแสดงผล


display คุณสมบัติเป็นคุณสมบัติที่สำคัญที่สุด CSS สำหรับรูปแบบการควบคุม


จอแสดงผลทรัพย์สิน

display คุณสมบัติระบุหาก / วิธีการที่เป็นองค์ประกอบที่จะแสดง

องค์ประกอบ HTML ทุกคนมีค่าการแสดงผลเริ่มต้นขึ้นอยู่กับชนิดขององค์ประกอบมันเป็น แสดงค่าเริ่มต้นสำหรับองค์ประกอบส่วนใหญ่เป็น block หรือ inline

คลิกเพื่อแสดงแผง

แผงนี้มี <div> องค์ประกอบซึ่งถูกซ่อนไว้โดยค่าเริ่มต้น ( display: none )

มันเป็นสไตล์ด้วย CSS และเราจะใช้งาน JavaScript เพื่อแสดงมัน (เปลี่ยนไป ( display: block )


องค์ประกอบระดับบล็อก

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

<div> องค์ประกอบเป็นองค์ประกอบระดับบล็อก

ตัวอย่างขององค์ประกอบระดับบล็อก:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

องค์ประกอบแบบอินไลน์

องค์ประกอบแบบอินไลน์ไม่ได้เริ่มต้นในบรรทัดใหม่และใช้เวลาเพียงไม่เกินความกว้างมากที่สุดเท่าที่จำเป็น

นี้เป็นแบบอินไลน์ <span> องค์ประกอบภายในย่อหน้า

ตัวอย่างขององค์ประกอบแบบอินไลน์:

  • <span>
  • <a>
  • <img>

display: none;

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

<script> องค์ประกอบใช้ display: none; เป็นค่าเริ่มต้นของ


แทนที่การเริ่มต้นค่าการแสดงผล

เป็นที่กล่าวถึงองค์ประกอบทุกคนมีค่าการแสดงผลเป็นค่าเริ่มต้น อย่างไรก็ตามคุณสามารถแทนที่นี้

การเปลี่ยนองค์ประกอบแบบอินไลน์กับองค์ประกอบบล็อกหรือในทางกลับกันจะมีประโยชน์สำหรับการทำหน้าดูวิธีที่เฉพาะเจาะจงและยังคงปฏิบัติตามมาตรฐานเว็บ

ตัวอย่างที่พบบ่อยคือการทำให้อินไลน์ <li> องค์ประกอบสำหรับเมนูแนวนอน:

ตัวอย่าง

li {
    display: inline;
}
ลองตัวเอง»
บันทึกหมายเหตุ: การตั้งค่าการแสดงผลคุณสมบัติขององค์ประกอบเฉพาะการเปลี่ยนแปลงวิธีการที่องค์ประกอบที่จะปรากฏนั้นไม่ใช่สิ่งที่ชนิดขององค์ประกอบที่มันเป็นดังนั้นองค์ประกอบที่ใกล้เคียงกับ display: block; ไม่ได้รับอนุญาตให้มีองค์ประกอบของบล็อกอื่น ๆ ที่อยู่ภายในนั้น

แสดงตัวอย่างต่อไปนี้ <span> องค์ประกอบที่เป็นองค์ประกอบของบล็อก:

ตัวอย่าง

span {
    display: block;
}
ลองตัวเอง»

ซ่อนองค์ประกอบ - display:none หรือ visibility:hidden ?

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

ตัวอย่าง

h1.hidden {
    display: none;
}
ลองตัวเอง»

visibility:hidden; ยังซ่อนองค์ประกอบ

แต่องค์ประกอบที่จะยังคงใช้พื้นที่เช่นเดียวกับก่อน องค์ประกอบที่จะถูกซ่อนไว้ แต่ยังคงส่งผลกระทบต่อรูปแบบ:

ตัวอย่าง

h1.hidden {
    visibility: hidden;
}
ลองตัวเอง»

ตัวอย่าง

ตัวอย่างเพิ่มเติม

display: none; เมื่อเทียบกับ visibility: hidden;
ตัวอย่างนี้แสดงให้เห็นถึง display: none; เมื่อเทียบกับ visibility: hidden;

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


ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»


CSS แสดง / คุณสมบัติของการเปิดเผย

คุณสมบัติ ลักษณะ
display ระบุว่าเป็นองค์ประกอบที่ควรจะแสดง
visibility ระบุหรือไม่ว่าเป็นองค์ประกอบที่ควรจะมองเห็น