แผ่นโกง CSS ที่รวดเร็วและใช้งานได้จริงของ Toptal

เผยแพร่แล้ว: 2022-03-11

Cascading Style Sheets หรือ CSS สั้น ๆ เป็นภาษาของสไตล์ชีตที่เขียนด้วยภาษามาร์กอัป CSS กำหนดองค์ประกอบการนำเสนอ ลักษณะ และการจัดรูปแบบของเอกสารเว็บ เช่น เค้าโครง สี และฟอนต์

ไวยากรณ์ CSS นั้นครอบคลุม และไม่ใช่เรื่องง่ายที่จะรู้ไวยากรณ์ที่แน่นอน หรือรู้คุณสมบัติ CSS ที่มีอยู่ทั้งหมดและค่าที่เกี่ยวข้องเสมอไป เพื่อช่วยนักพัฒนาและนักออกแบบ CSS Toptal ได้สร้างคู่มืออ้างอิงฉบับย่อและเสนอให้ชุมชนดาวน์โหลดฟรี คู่มืออ้างอิง CSS ประกอบด้วยไวยากรณ์ CSS ตัวเลือกที่สำคัญที่สุด คุณสมบัติ ขนาดและหน่วย และข้อมูล CSS ที่เป็นประโยชน์อื่นๆ ในรูปแบบที่สั้นและให้ข้อมูล เราหวังว่าคุณจะพบว่า CSS cheat sheet เป็นทรัพยากรที่มีค่า

คุณยังสามารถตรวจสอบหน้าทรัพยากร Toptal เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับข้อผิดพลาดทั่วไปของ CSS, คู่มือการจ้างงาน CSS, คำถามสัมภาษณ์ CSS และเคล็ดลับ CSS และแนวทางปฏิบัติที่ดีที่สุด

คลิกที่นี่เพื่อดาวน์โหลด CSS Cheat Sheet

CSS Cheat Sheet

ไวยากรณ์		รุ่นกล่อง
/* ความคิดเห็น */ @ประเภทสื่อ { ตัวเลือก { คุณสมบัติ: ค่า; } } หมายเหตุ: ประเภทสื่อเป็นตัวเลือก
สไตล์อินไลน์ <tag>
สไตล์ฝังตัว <head> <style type="text/css"> ตัวเลือก { คุณสมบัติ: ค่า; } </style> </head>
สไตล์ชีตภายนอก <head> <link rel="สไตล์ชีต" type="text/css" href="style.css" /> </head>		กล่อง
		ระยะขอบ	ขอบบน ขอบขวา ขอบล่าง ระยะขอบซ้าย

ตัวเลือก		การขยายความ	padding-top padding-ขวา padding-ด้านล่าง padding-left
*	องค์ประกอบทั้งหมด
แท็ก	องค์ประกอบแท็กทั้งหมด	ชายแดน	ขอบบน ขอบขวา ขอบล่าง ขอบซ้าย
แท็ก *	องค์ประกอบทั้งหมดภายในแท็ก
แท็ก tag2	องค์ประกอบ tag2 ภายใน tag	เส้นขอบสี	ขอบด้านบนสี ขอบขวาสี ขอบด้านล่างสี ขอบซ้ายสี
แท็ก tag2	องค์ประกอบแท็กและ tag2 ทั้งหมด
แท็ก > tag2	tag2 เป็นลูกของ tag	แนวชายแดน	border-top-style border-right-style ขอบด้านล่างสไตล์ border-left-style
แท็ก + แท็ก2	tag2 นำหน้าด้วย tag
.ระดับ	องค์ประกอบที่มีคลาส 'คลาส'	border-width	border-top-width border-right-width ขอบล่างกว้าง border-left-width
tag.class	แท็กทั้งหมดที่มีคลาส 'คลาส'
#ไอดี	องค์ประกอบที่มีรหัส 'id'	ขนาดและสี
แท็ก#id	แท็ก id 'id'	ขนาดสัมพัทธ์	เอ็ม \| rem \| อดีต \| ch vw \| vh \| vmin \| vmax \| %
หลอกตัวเลือก
:คล่องแคล่ว	เพิ่มสไตล์ให้กับองค์ประกอบที่ใช้งาน	ขนาดที่แน่นอน	ซม. \| มม \| ใน px \| pt \| พีซี
:หลังจาก	เพิ่มเนื้อหาหลังองค์ประกอบ
:ก่อน	เนื้อหาโฆษณาก่อนองค์ประกอบ	สี	เลขฐานสิบหก #ff00ff
:ลูกคนแรก	เพิ่มสไตล์ให้ลูกคนแรก		RGB rgb(255,0,255)
:จดหมายฉบับแรก	เพิ่มสไตล์ให้กับตัวละครตัวแรก	การวางตำแหน่ง
:เส้นแรก	เพิ่มสไตล์ให้กับบรรทัดแรก	ตำแหน่ง	แน่นอน \| คงที่ \| ญาติ \| คงที่ \| สืบทอด
:จุดสนใจ	เพิ่มสไตล์ให้กับองค์ประกอบที่เน้น
:โฮเวอร์	เพิ่มสไตล์เมื่อวางเมาส์ไว้บนสุด	ลอย	ซ้าย \| ขวา \| ไม่มี \| สืบทอด
:link	เพิ่มสไตล์ให้กับลิงค์ที่ยังไม่ได้เยี่ยมชม
:เยี่ยมชม	เพิ่มสไตล์ให้กับลิงค์ที่เข้าชม	ด้านบนขวา ล่างซ้าย	ตั้งค่าออฟเซ็ตจากขอบ
ข้อความ
ตระกูลอักษร	ระบุตระกูลแบบอักษร	แจ่มใส	ซ้าย \| ขวา \| ทั้งสอง \| ไม่มี \| สืบทอด
ขนาดตัวอักษร	ระบุขนาดตัวอักษร
รูปแบบตัวอักษร	ปกติ \| ตัวเอียง \| เฉียง \| สืบทอด	แสดง	ระบุองค์ประกอบการวางในโฟลว์เอกสาร

แบบอักษรตัวแปร	ปกติ \| ตัวพิมพ์เล็ก \| สืบทอด	ล้น	มองเห็นได้ \| ซ่อนไว้ \| เลื่อน \| รถยนต์ \| สืบทอด
แบบอักษร -น้ำหนัก	ปกติ \| ตัวหนา \| โดดเด่นยิ่งขึ้น \| ไฟแช็ก \| int (100- 900) \| สืบทอด
		ทัศนวิสัย	มองเห็นได้ \| ซ่อนไว้ \| ยุบ \| สืบทอด
สี	กำหนดสีของข้อความ
ความสูงของเส้น	ปกติ \| int \| % \| สืบทอด	z-index	รถยนต์ \| int \| สืบทอด
text-align	ซ้าย \| ขวา \| ศูนย์ \| ให้เหตุผล \| สืบทอด	ขนาด
		ความสูง	รถยนต์ \| int \| % \| สืบทอด
ข้อความ- การตกแต่ง	ไม่มี \| ขีดเส้นใต้ \| ขีดเส้น \| เส้นผ่าน \| กะพริบตา \| สืบทอด	ความสูงสูงสุด	ไม่มี \| int \| % \| สืบทอด
		ความกว้างสูงสุด	ไม่มี \| int \| % \| สืบทอด
ข้อความเยื้อง	int \| % \| สืบทอด	นาทีความสูง	int \| % \| สืบทอด
ข้อความ- แปลง	ไม่มี \| ใช้ประโยชน์จาก \| ตัวพิมพ์ใหญ่ \| ตัวพิมพ์เล็ก \| สืบทอด	นาทีความกว้าง	int \| % \| สืบทอด
		ความกว้าง	รถยนต์ \| int \| % \| สืบทอด
แนวตั้ง -จัดตำแหน่ง	int \| % \| พื้นฐาน \| ย่อย \| สุดยอด \| ด้านบน \| text-top ตรงกลาง \| ด้านล่าง \| text-bottom \| สืบทอด	อื่น
		พื้นหลัง	รูปแบบ: พื้นหลัง (สี) (ภาพ) (ซ้ำ) (ตำแหน่ง)
สีขาว -ช่องว่าง	ปกติ \| นาวแรป \| ก่อน \| พรีไลน์ \| ห่อก่อน\| สืบทอด
		เคอร์เซอร์	กำหนดประเภทของเคอร์เซอร์
การเว้นวรรค	ปกติ \| ความยาว \| สืบทอด	คำพูด	กำหนดประเภทของเครื่องหมายคำพูด