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

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 ไวยากรณ์

ตัวเลือกองค์ประกอบ
ตัวเลือก ID
ตัวเลือกระดับ (สำหรับองค์ประกอบทั้งหมด)
ตัวเลือกชั้น (เพียง <p> องค์ประกอบ)
การจัดกลุ่มเตอร์

ไวยากรณ์ CSS อธิบาย


พื้นหลัง CSS

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

คุณสมบัติพื้นหลังอธิบาย


CSS พรมแดน

ตั้งค่าความกว้างของเส้นขอบทั้งสี่
ตั้งค่าความกว้างของเส้นขอบด้านบน
ตั้งค่าความกว้างของเส้นขอบด้านล่าง
ตั้งค่าความกว้างของเส้นขอบด้านซ้าย
ตั้งค่าความกว้างของเส้นขอบด้านขวา
การตั้งค่ารูปแบบของเส้นขอบทั้งสี่
การตั้งค่ารูปแบบของชายแดนด้านบน
การตั้งค่ารูปแบบของชายแดนด้านล่าง
การตั้งค่ารูปแบบของเส้นขอบด้านซ้าย
การตั้งค่ารูปแบบของเส้นขอบด้านขวา
ตั้งค่าสีของเส้นขอบทั้งสี่
การตั้งค่าสีของเส้นขอบด้านบน
การตั้งค่าสีของเส้นขอบด้านล่าง
การตั้งค่าสีของเส้นขอบด้านซ้าย
การตั้งค่าสีของเส้นขอบด้านขวา
ทุกคุณสมบัติในหนึ่งชายแดนประกาศ
ตั้งค่าเส้นขอบที่แตกต่างกันในแต่ละด้าน
ทุกคุณสมบัติที่เส้นขอบด้านบนในการประกาศ
ทุกคุณสมบัติที่ขอบด้านล่างในการประกาศ
ทั้งหมดที่เหลือคุณสมบัติชายแดนในการประกาศ
ทุกคุณสมบัติที่เส้นขอบด้านขวาในการประกาศ

คุณสมบัติชายแดนอธิบาย


ขอบ CSS

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

คุณสมบัติ Margin อธิบาย


Padding CSS

ตั้งค่า padding ด้านซ้ายขององค์ประกอบ
ตั้งค่า padding ขวาขององค์ประกอบ
ตั้งค่า padding ด้านบนขององค์ประกอบ
ตั้งค่า padding ด้านล่างขององค์ประกอบ
ทุกคุณสมบัติในหนึ่งช่องว่างภายในประกาศ

คุณสมบัติ padding อธิบาย


CSS ข้อความ

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

คุณสมบัติข้อความอธิบาย


CSS แบบอักษร

ตั้งค่าแบบอักษรของข้อความ
กำหนดขนาดของตัวอักษร
กำหนดขนาดของตัวอักษรใน px ที่
กำหนดขนาดของตัวอักษรใน em ที่
กำหนดขนาดของตัวอักษรในเปอร์เซ็นต์และ em
การตั้งค่ารูปแบบของตัวอักษร
ตั้งค่าตัวแปรของตัวอักษร
ตั้งค่าความกล้าหาญของตัวอักษร
ทุกคุณสมบัติตัวอักษรในการประกาศ

คุณสมบัติแบบอักษรอธิบาย


ลิงค์ CSS

เพิ่มสีที่แตกต่างกันในการเข้าเยี่ยมชม / การเชื่อมโยง unvisited
ใช้ตกแต่งข้อความในการเชื่อมโยง
ระบุสีพื้นหลังสำหรับการเชื่อมโยง
เพิ่มรูปแบบอื่น ๆ ที่จะเชื่อมโยงหลายมิติ
ขั้นสูง - สร้างกล่องเชื่อมโยง
ขั้นสูง - สร้างกล่องการเชื่อมโยงที่มีเส้นขอบ

คุณสมบัติการเชื่อมโยงอธิบาย


รายการ CSS

ทั้งหมดเครื่องหมายรายการที่แตกต่างกันในรายการ
กำหนดให้ภาพเป็นเครื่องหมายรายการรายการ
ตำแหน่งเครื่องหมายรายการรายการ
ทุกคุณสมบัติในหนึ่งรายการประกาศ
รายการรูปแบบที่มีสี
เต็มความกว้างรายการเป้

คุณสมบัติของรายชื่ออธิบาย


ตาราง CSS

ระบุขอบสีดำสำหรับตารางองค์ประกอบ TH และ TD
การใช้งานของชายแดนยุบ
ชายแดนเดี่ยวรอบโต๊ะ
ระบุความกว้างและความสูงของตาราง
ตั้งค่าการจัดตำแหน่งแนวนอนของเนื้อหา (text-align)
ตั้งแนวตั้งของเนื้อหา (แนวตั้ง-align)
ระบุช่องว่างสำหรับ TH และ TD องค์ประกอบ
วงเวียนแนวนอน
ตาราง Hoverable
ตารางลาย
ระบุสีของเส้นขอบตาราง
ตั้งตำแหน่งของคำบรรยายใต้ภาพตาราง
ตารางที่ตอบสนองต่อ
สร้างตารางแฟนซี

คุณสมบัติของตารางอธิบาย


CSS แบบกล่อง

ระบุองค์ประกอบที่มีความกว้างรวมของ 250px

รูปแบบกล่องอธิบาย


เค้าโครง CSS

วาดเส้นรอบองค์ประกอบ (ร่าง)
การตั้งค่ารูปแบบของร่าง
การตั้งค่าสีของเค้าร่าง
ตั้งค่าความกว้างของร่าง

คุณสมบัติ Outline อธิบาย


CSS มิติ

ตั้งค่าความสูงและความกว้างขององค์ประกอบ
ตั้งค่าความกว้างสูงสุดขององค์ประกอบ
ตั้งค่าความสูงและความกว้างขององค์ประกอบที่แตกต่างกัน
ตั้งค่าความสูงและความกว้างของภาพโดยใช้ร้อยละ
ตั้งนาทีความกว้างและความกว้างสูงสุดขององค์ประกอบ
ชุดนาทีความสูงและแม็กซ์ความสูงขององค์ประกอบ

คุณสมบัติมิติอธิบาย


การแสดงผล CSS

วิธีการซ่อนองค์ประกอบ (visibility:hidden)
วิธีการไม่แสดงองค์ประกอบ (display:none)
วิธีการแสดงองค์ประกอบระดับบล็อกเป็นองค์ประกอบแบบอินไลน์
วิธีการแสดงองค์ประกอบแบบอินไลน์เป็นองค์ประกอบระดับบล็อก
วิธีการที่จะใช้ CSS ร่วมกับจาวาสคริปต์ในการแสดงเนื้อหาที่ซ่อน

อธิบายคุณสมบัติการแสดงผล


ตำแหน่ง CSS

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

คุณสมบัติ Positioning อธิบาย


ลอย CSS

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

คุณสมบัติลอยอธิบาย


CSS สอดคล้ององค์ประกอบ

ศูนย์สอดคล้องกับอัตรากำไรขั้นต้น
ซ้าย / ขวาสอดคล้องกับตำแหน่ง
ซ้าย / ขวาสอดคล้องกับตำแหน่ง - โซลูชั่น Crossbrowser
ซ้าย / ขวาสอดคล้องกับลอย
ซ้าย / ขวาสอดคล้องกับลอย - โซลูชั่น Crossbrowser

ตําแหน่งคุณสมบัติอธิบาย


CSS combinators

เลือกลูกหลาน
เลือกเด็ก
เลือกพี่น้องที่อยู่ติดกัน
เลือกทั่วไปพี่น้อง

Combinator เตอร์อธิบาย


CSS สร้างเนื้อหา

ใส่ URL ในวงเล็บหลังจากการเชื่อมโยงกับสถานที่ให้บริการเนื้อหาแต่ละ
เลขส่วนและส่วนย่อยด้วย "Section 1", "1.1", "1.2" ฯลฯ
ระบุเครื่องหมายคำพูดด้วยคำพูดที่สถานที่ให้บริการ


CSS Pseudo-ชั้นเรียน

เพิ่มสีที่แตกต่างกันในการเชื่อมโยงหลายมิติ
เพิ่มรูปแบบอื่น ๆ ที่จะเชื่อมโยงหลายมิติ
การใช้: โฟกัส
:first-child - ตรงกับองค์ประกอบ P แรก
:first-child - ตรงกับองค์ประกอบแรกที่ผมในองค์ประกอบ P ทั้งหมด
:first-child - ตรงทุกองค์ประกอบของฉันในทุกองค์ประกอบ P ลูกคนแรก
ใช้ :lang

หลอกเรียนอธิบาย


CSS Pseudo-องค์ประกอบ

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

หลอกองค์ประกอบอธิบาย


บาร์ CSS นำร่อง

สไตล์ครบแถบนำทางแนวตั้ง
สไตล์ครบแถบแนวนอน

แถบนำทางอธิบาย


CSS เมนูแบบเลื่อนลง

ข้อความแบบเลื่อนลง
เมนูแบบเลื่อนลง
เมนูแบบเลื่อนลงจัดชิดขวา
ภาพแบบเลื่อนลง
แถบนำทางแบบเลื่อนลง

dropdowns อธิบาย


CSS คำแนะนำเครื่องมือ

คำแนะนำเครื่องมือที่เหมาะสม
เคล็ดลับเครื่องมือซ้าย
เคล็ดลับเครื่องมือด้านบน
เคล็ดลับเครื่องมือด้านล่าง
เคล็ดลับที่มีลูกศร
คำแนะนำเครื่องมือเคลื่อนไหว

คำแนะนำเครื่องมืออธิบาย


แกลลอรี่ภาพ CSS

แกลเลอรี่ภาพ
แกลเลอรี่ภาพที่ตอบสนองต่อ

แกลเลอรี่ภาพอธิบาย


CSS ทึบภาพ

การสร้างภาพโปร่งใส - ผลการวางเมาส์
การสร้างความโปร่งใสที่มีกล่องข้อความบนภาพพื้นหลัง

ภาพทึบแสงอธิบาย


Sprites CSS ภาพ

เทพดาภาพ
เทพดาภาพ - รายการนำทาง
เทพดาภาพที่มีผลกระทบโฉบ

สไปรท์ภาพอธิบาย


CSS Attribute Selectors

เลือกทั้งหมด <a> องค์ประกอบที่มีคุณลักษณะเป้าหมาย
เลือกทั้งหมด <a> องค์ประกอบที่มี target = "_ blank" แอตทริบิวต์
เลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ชื่อที่มีรายการพื้นที่ที่แยกออกจากกันของคำซึ่งหนึ่งในนั้นคือ "ดอกไม้"
เลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์ระดับที่ขึ้นต้นด้วย "top" (ต้องเป็นทั้งคำ)
เลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์ระดับที่ขึ้นต้นด้วย "top" (ไม่ต้องเป็นทั้งคำ)
เลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์ระดับที่ลงท้ายด้วย "test"
เลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์คลาสที่ประกอบด้วย "te"

แอตทริบิวต์เตอร์อธิบาย


รูปแบบ CSS

ช่องใส่เต็มความกว้าง
ช่องใส่เบาะ
ช่องใส่เป้
ด้านล่างช่องใส่ขอบ
ช่องใส่สี
ช่องใส่ที่มุ่งเน้น
ช่องใส่ 2 ที่มุ่งเน้น
การป้อนข้อมูลที่มีไอคอน / ภาพ
ป้อนข้อมูลการค้นหาเคลื่อนไหว
textareas จัดแต่งทรงผม
จัดแต่งทรงผมเลือกเมนู
จัดแต่งทรงผมปุ่มการป้อนข้อมูล

รูปแบบที่อธิบาย


เคาน์เตอร์ CSS

สร้างเคาน์เตอร์
เคาน์เตอร์ซ้อน 1
เคาน์เตอร์ซ้อนกัน 2

เคาน์เตอร์อธิบาย


CSS3 มุมโค้งมน

เพิ่มมุมโค้งมนกับองค์ประกอบ
รอบแต่ละมุมแยกต่างหาก
สร้างมุมเป็นรูปวงรี

มุมโค้งมน CSS3 อธิบาย


รูปภาพ CSS3 ชายแดน

สร้างภาพบริเวณรอบ ๆ ชายแดนองค์ประกอบโดยใช้คำหลักรอบ
สร้างภาพบริเวณรอบ ๆ ชายแดนองค์ประกอบโดยใช้คำหลักยืด
ชายแดนภาพ - ค่าชิ้นที่แตกต่างกัน

ภาพชายแดน CSS3 อธิบาย


พื้นหลัง CSS3

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

ภูมิหลัง CSS3 อธิบาย


ไล่ระดับสี CSS3

ลาดเชิงเส้น - บนลงล่าง
ลาดเชิงเส้น - ซ้ายไปขวา
ลาดเชิงเส้น - เส้นทแยงมุม
ลาดเชิงเส้น - มีมุมที่ระบุ
ลาดเชิงเส้น - หยุดอยู่กับหลายสี
ลาดเชิงเส้น - สีของรุ้ง + ข้อความ
ลาดเชิงเส้น - ด้วยความโปร่งใส
ลาดเชิงเส้น - ลาดเชิงเส้นซ้ำ
รัศมีการไล่โทนสี - หยุดเว้นระยะเท่ากันสี
ไล่โทนสีรัศมี - หยุดเว้นระยะสีที่แตกต่างกัน
รัศมีการไล่โทนสี - รูปร่างชุด
รัศมีการไล่โทนสี - คำหลักที่ขนาดแตกต่างกัน
รัศมีการไล่โทนสี - ลาดรัศมีซ้ำ

การไล่ระดับสี CSS3 อธิบาย


CSS3 ผลกระทบเงา

ผลเงาเรียบง่าย
เพิ่มสีให้เงา
เพิ่มผลเบลอให้เงา
ข้อความสีขาวกับสีดำเงา
นีออนสีแดงเงาเรืองแสง
สีแดงและสีฟ้าเรืองแสงนีออนเงา
ข้อความสีขาวกับสีดำ, สีฟ้า, และ darkblue เงา
เพิ่มง่ายกล่องเงาองค์ประกอบ
เพิ่มสีสันให้กับกล่องเงา
เพิ่มสีสันและความเบลอผลกระทบต่อกล่องเงา
สร้างการ์ดกระดาษเหมือน (ข้อความ)
สร้างการ์ดกระดาษเหมือน (ภาพโพลารอยด์)

CSS3 ผลกระทบเงาอธิบาย


CSS3 ข้อความ

ระบุวิธีการซ่อนล้นเนื้อหาควรจะส่งสัญญาณให้กับผู้ใช้
วิธีการแสดงเนื้อหาล้นเมื่อเลื่อนเมาส์ไปวางองค์ประกอบ
อนุญาตให้คำยาวจะสามารถที่จะถูกทำลายและห่อบนบรรทัดถัดไป
ระบุกฎบรรทัดหมด

ข้อความ CSS3 อธิบาย


CSS3 อักษร

การใช้งานแบบอักษร "ตัวเอง" ใน @font-face กฎ
การใช้งานแบบอักษร "ตัวเอง" ใน @font-face กฎ (ตัวหนา)

แบบอักษร CSS3 อธิบาย


CSS3 แปลง 2D

translate() - ย้ายองค์ประกอบจากตำแหน่งปัจจุบัน
rotate() - หมุนตามเข็มนาฬิกาเป็นองค์ประกอบ
rotate() - หมุนองค์ประกอบทวนเข็มนาฬิกา
scale() - การเพิ่มองค์ประกอบ
scale() - ลดองค์ประกอบ
skewX() - skews องค์ประกอบพร้อม X-แกน
skewY() - skews องค์ประกอบพร้อม Y-แกน
skew() - skews องค์ประกอบพร้อม X และ Y-แกน
matrix() - หมุน, ขนาด, ย้ายและเอียงองค์ประกอบ

CSS3 2D แปลงอธิบาย


CSS3 แปลง 3D

rotateX() - หมุนองค์ประกอบรอบแกน X ของตนที่ได้รับปริญญา
rotateY() - หมุนองค์ประกอบรอบแกน Y ของตนที่ได้รับปริญญา
rotateZ() - หมุนองค์ประกอบรอบแกน Z ของตนที่ได้รับปริญญา

CSS3 3D แปลงอธิบาย


CSS3 Transitions

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

เปลี่ยน CSS3 อธิบาย


CSS3 ภาพเคลื่อนไหว

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

ภาพเคลื่อนไหว CSS3 อธิบาย


CSS3 แสดงสินค้า

ภาพที่โค้งมน
ภาพวงกลม
ภาพ
ภาพการเชื่อมโยง
ภาพที่ตอบสนองต่อ
ข้อความภาพ (มุมบนซ้าย)
ข้อความภาพ (มุมขวาบน)
ข้อความภาพ (มุมล่างซ้าย)
ข้อความภาพ (มุมขวาล่าง)
ข้อความภาพ (ศูนย์กลาง)
ภาพโพลารอยด์
กรองภาพระดับสีเทา
ขั้นสูง - ภาพ Modal ด้วย CSS และ JavaScript

CSS3 รูปภาพอธิบาย


ปุ่ม CSS3

ปุ่ม CSS พื้นฐาน
ปุ่มสี
ขนาดปุ่ม
ปุ่มโค้งมน
เส้นขอบปุ่มสี
ปุ่ม Hoverable
ปุ่มเงา
ปุ่มสำหรับผู้พิการ
ความกว้างของปุ่ม
กลุ่มปุ่ม
กลุ่มปุ่มเป้
ปุ่มเคลื่อนไหว (เลื่อนผล)
ปุ่มเคลื่อนไหว (ระลอกผล)
ปุ่มเคลื่อนไหว (Pressed ผล)

ปุ่ม CSS3 อธิบาย


CSS3 เลข

เลขที่เรียบง่าย
เลขที่ใช้งานและ hoverable
โค้งมนเลขที่ใช้งานและ hoverable
ผลการเปลี่ยนแปลง Hoverable
เลขเป้
โค้งมนขอบเลขหน้า
การแบ่งหน้าด้วยช่องว่างระหว่างการเชื่อมโยง
ขนาดเลขหน้า
การแบ่งหน้าด้วยช่องว่างระหว่างการเชื่อมโยง
เลขหน้าเป็นศูนย์กลาง
สวดมนต์

CSS3 เลขอธิบาย


คอลัมน์หลาย CSS3

สร้างหลายคอลัมน์
ระบุช่องว่างระหว่างคอลัมน์
ระบุรูปแบบของการปกครองระหว่างคอลัมน์
ระบุความกว้างของการปกครองระหว่างคอลัมน์
ระบุสีของการปกครองระหว่างคอลัมน์
ระบุความกว้างสไตล์และสีของกฎระหว่างคอลัมน์
ระบุจำนวนคอลัมน์องค์ประกอบควรช่วงข้าม
ระบุปัญหาความกว้างที่เหมาะสมสำหรับคอลัมน์

หลายคอลัมน์ CSS3 อธิบาย


CSS3 ส่วนติดต่อผู้ใช้

ขอให้ผู้ใช้ปรับขนาดความกว้างของสิ่งนั้น ๆ
ขอให้ผู้ใช้ปรับขนาดความสูงของสิ่งนั้น ๆ
ขอให้ผู้ใช้ปรับขนาดทั้งความกว้างและความสูงขององค์ประกอบ
เพิ่มช่องว่างระหว่างร่างและเส้นขอบของสิ่งนั้น ๆ

ส่วนติดต่อผู้ใช้ CSS3 อธิบาย


CSS3 กล่องขนาด

ความกว้างขององค์ประกอบโดยไม่ต้องกล่องปรับขนาด
ความกว้างขององค์ประกอบพร้อมกล่องปรับขนาด
องค์ประกอบของแบบฟอร์ม + กล่องปรับขนาด

กล่องปรับขนาด CSS3 อธิบาย


CSS3 flexbox

flexbox กับสามรายการดิ้น
flexbox กับสามรายการดิ้น - ทิศทาง RTL
ดิ้นทิศทาง - แถวย้อนกลับ
ดิ้นทิศทาง - คอลัมน์
ดิ้นทิศทาง - คอลัมน์ย้อนกลับ
ปรับเนื้อหา - ดิ้นสิ้น
ปรับเนื้อหา - ศูนย์บริการ
ปรับเนื้อหา - พื้นที่ระหว่าง
ปรับเนื้อหา - พื้นที่รอบ
จัด-รายการ - ยืด
จัด-รายการ - เฟล็กซ์เริ่มต้น
จัด-รายการ - ดิ้นสิ้น
จัดรายการที่ - ศูนย์บริการ
จัด-รายการ - พื้นฐาน
ดิ้นห่อ - nowrap
ดิ้นห่อ - ห่อ
ดิ้นห่อ - ห่อกลับ
จัดเนื้อหา - ศูนย์บริการ
สั่งซื้อรายการดิ้น
ขอบขวา: อัตโนมัติ
margin: อัตโนมัติ = ศูนย์กลางที่สมบูรณ์แบบ
จัดตัวเองในรายการเฟล็กซ์
ระบุความยาวของรายการดิ้นเมื่อเทียบกับส่วนที่เหลือของรายการดิ้น
สร้างเว็บไซต์ที่ตอบสนองกับ flexbox

CSS3 flexbox อธิบาย


CSS3 สื่อแบบสอบถาม

เปลี่ยนพื้นหลังสีเพื่อ LightGreen ถ้าวิวพอร์ตเป็น 480px กว้างหรือกว้าง
แสดงเมนูที่จะลอยไปทางซ้ายของหน้าถ้าวิวพอร์ตเป็น 480px กว้างหรือกว้าง

CSS3 คำสั่งสื่ออธิบาย


CSS3 คำสั่งสื่อ - ตัวอย่างเพิ่มเติม

หน้า HTML
ความกว้างจาก 520 699px - สมัครไอคอนอีเมลไปที่การเชื่อมโยงแต่ละ
ความกว้างตั้งแต่ 700 ถึง 1000px - คำนำการเชื่อมโยงกับข้อความ
ความกว้างด้านบน 1001PX - สมัครที่อยู่อีเมลเพื่อการเชื่อมโยง
ความกว้างด้านบน 1151px - เพิ่มไอคอนที่เราใช้มาก่อน
ใช้รายการของการเชื่อมโยงอีเมลในแถบด้านข้างในหน้าเว็บ

สื่อ CSS3 แบบสอบถามตัวอย่างอธิบาย