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

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เคาน์เตอร์


การใช้เคาน์เตอร์ CSS

เคาน์เตอร์ CSS เป็นเหมือน "ตัวแปร" ค่าตัวแปรสามารถเพิ่มขึ้นตามกฎ CSS (ซึ่งจะติดตามกี่ครั้งพวกเขาจะใช้)

จะทำงานร่วมกับเคาน์เตอร์ CSS เราจะใช้คุณสมบัติดังต่อไปนี้:

  • counter-reset - สร้างหรือรีเซ็ตเคาน์เตอร์
  • counter-increment - เพิ่มขึ้นทีละค่าเคาน์เตอร์
  • content - แทรกเนื้อหาที่สร้างขึ้น
  • counter() หรือ counters() ฟังก์ชั่น - เพิ่มมูลค่าของเคาน์เตอร์เพื่อองค์ประกอบ

หากต้องการใช้ CSS เคาน์เตอร์ก็ต้องแรกถูกสร้างขึ้นด้วย counter-reset

ตัวอย่างต่อไปนี้สร้างเคาน์เตอร์สำหรับหน้าเว็บ (ในตัวเลือกของร่างกาย) แล้วเพิ่มค่าตัวนับสำหรับแต่ละ <h2> องค์ประกอบและเพิ่ม "Section < value of the counter >:" จุดเริ่มต้นของแต่ละ <h2> องค์ประกอบ:

ตัวอย่าง

body {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}
ลองตัวเอง»

เคาน์เตอร์รัง

ตัวอย่างต่อไปนี้สร้างหนึ่งเคาน์เตอร์สำหรับหน้า (มาตรา) และเคาน์เตอร์สำหรับแต่ละ <h1> องค์ประกอบ (ย่อย) "section" เคาน์เตอร์จะถูกนับสำหรับแต่ละ <h1> องค์ประกอบด้วย "Section < value of the section counter >." และ "subsection" เคาน์เตอร์จะถูกนับสำหรับแต่ละ <h2> องค์ประกอบด้วย "< value of the section counter >.< value of the subsection counter >" :

ตัวอย่าง

body {
    counter-reset: section;
}

h1 {
    counter-reset: subsection;
}

h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}
ลองตัวเอง»

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

ตัวอย่าง

ol {
    counter-reset: section;
    list-style-type: none;
}

li::before {
    counter-increment: section;
    content: counters(section,".") " ";
}
ลองตัวเอง»

คุณสมบัติ CSS เคาน์เตอร์

คุณสมบัติ ลักษณะ
content ใช้กับ :: :: ก่อนและหลังจากที่หลอกองค์ประกอบที่จะแทรกเนื้อหาที่สร้าง
counter-increment เพิ่มขึ้นทีละหนึ่งหรือค่าตัวนับเพิ่มเติม
counter-reset สร้างหรือรีเซ็ตหนึ่งหรือมากกว่าเคาน์เตอร์