Latest web development tutorials
×

CSS หลักสูตร

CSS หลักสูตร CSS แนะนำโดยย่อ CSS ไวยากรณ์ CSS Id และ Class ผู้เลือก CSS สร้าง CSS พื้นหลัง(background) CSS ข้อความ(text) CSS แบบอักษร(Fonts) CSS ลิงค์(link) CSS ลักษณะของรายการ(ul) CSS ตาราง(table) CSS รูปแบบกล่อง CSS กรอบ(border) CSS เส้นแสดงรูปร่าง(outline) CSS ขอบ(margin) CSS การกรอก(padding) CSS การจัดกลุ่มและการสร้างรัง CSS ขนาด(Dimension) CSS แสดงผล(display) CSS ตั้งอยู่(position) CSS ลอย(float) CSS เป็นเส้นตรง(align) CSS การรวมกันของเตอร์ CSS หลอกชั้นเรียน CSS องค์ประกอบหลอก CSS ป้าย CSS เมนูแบบเลื่อนลง CSS แกลเลอรี่ภาพ CSS ภาพใส/ทึบแสง CSS ภาพโมเสคเทคโนโลยี CSS ประเภทสื่อ CSS แอตทริบิวต์เตอร์ CSS ย่อ CSS ตัวอย่าง

CSS3 หลักสูตร

CSS3 หลักสูตร CSS3 แนะนำโดยย่อ CSS3 กรอบ(border) CSS3 พื้นหลัง CSS3 การเปลี่ยนแปลงอย่างค่อยเป็นค่อยไป CSS3 ผลข้อความ CSS3 แบบอักษร CSS3 2D เปลี่ยนแปลง CSS3 3D เปลี่ยนแปลง CSS3 การเปลี่ยนแปลง CSS3 นิเมชั่น CSS3 หลายคอลัมน์ CSS3 ส่วนติดต่อผู้ใช้

CSS ออกแบบที่ตอบสนอง

Viewport ตารางมุมมอง คำสั่งสื่อ ภาพ วีดีโอ(video) กรอบ

CSS คู่มืออ้างอิง

CSS คู่มืออ้างอิง CSS ผู้เลือก CSS อ้างอิงคำพูด CSS Web แบบอักษรปลอดภัย CSS นิเมชั่น CSS หน่วย CSS สี CSS ค่าสี CSS ชื่อสี CSS สีเลขฐานสิบหก

การแสดงผล CSS (แสดง) และการมองเห็น (มองเห็น)

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

กล่อง 1

2 กล่อง
3 กล่อง

องค์ประกอบที่ซ่อน - display: none หรือการมองเห็น: ซ่อน

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

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

ตัวอย่าง

h1.hidden {visibility:hidden;}

ลอง»

display: none เพื่อซ่อนองค์ประกอบและองค์ประกอบที่ซ่อนอยู่จะไม่ใช้พื้นที่ใด ในคำอื่น ๆ องค์ประกอบนี้ไม่ได้ซ่อนเฉพาะและพื้นที่ที่ถูกครอบครองโดยองค์ประกอบเดิมจะหายไปจากเค้าโครงหน้า

ตัวอย่าง

h1.hidden {display:none;}

ลอง»


การแสดงผล CSS - Block และองค์ประกอบแบบอินไลน์

บล็อกองค์ประกอบเป็นองค์ประกอบการขึ้นทั้งความกว้างของตัวแบ่งบรรทัดก่อนและหลังจากที่มัน

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

  • <h1>
  • <p>
  • <div>

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

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

  • <span>
  • <a>

วิธีการเปลี่ยนองค์ประกอบการแสดงผล

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

ตัวอย่างต่อไปนี้จะแสดงรายการเป็นองค์ประกอบแบบอินไลน์:

ตัวอย่าง

li {display:inline;}

ลอง»

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

ตัวอย่าง

span {display:block;}

ลอง»

หมายเหตุ: การเปลี่ยนแปลงประเภทขององค์ประกอบการแสดงผลให้ดูว่าองค์ประกอบที่จะแสดงมันเป็นสิ่งที่ชนิดขององค์ประกอบตัวอย่างเช่นองค์ประกอบแบบอินไลน์ตั้งค่าการแสดง: บล็อกไม่ได้รับอนุญาตให้มีภายในองค์ประกอบของบล็อกซ้อนกันของตัวเอง


ตัวอย่าง

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

วิธีการแสดงองค์ประกอบแบบอินไลน์

ตัวอย่างนี้แสดงให้เห็นถึงวิธีการแสดงแบบอินไลน์ขององค์ประกอบ

วิธีการแสดงองค์ประกอบบล็อก

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

วิธีการใช้คุณสมบัติการล่มสลายของตาราง

ตัวอย่างนี้แสดงให้เห็นถึงวิธีการที่จะใช้ตารางของคุณสมบัติการล่มสลาย