เรียนรู้วิธีเลือกองค์ประกอบ HTML ทั้งหมดยกเว้นองค์ประกอบแรกด้วย CSS `:not(:first-child) ตัวเลือก หากคุณเพิ่มชุดกฎต่อไปนี้ในสไตล์ชีต CSS ของคุณ องค์ประกอบ h2 ทุกรายการในเว็บไซต์ของคุณทั้งหมดจะได้รับระยะขอบบนสุด 64px h2 { margin-top: 64px; } แต่ถ้าคุณไม่ต้องการให้ระยะขอบบนนั้นกับองค์ประกอบ h2
เรียนรู้ว่าเหตุใดคุณจึงมักจะได้รับประโยชน์จากการใช้การเว้นวรรคระหว่างตัวอักษรกับองค์ประกอบข้อความตัวพิมพ์ใหญ่ และวิธีดำเนินการด้วย CSS ในการพิมพ์ เมื่อคุณใช้ตัวพิมพ์ใหญ่/ตัวพิมพ์ใหญ่ทั้งหมด (ตัวพิมพ์ใหญ่) กับองค์ประกอบข้อความ คุณมักจะต้องเพิ่มพื้นที่หายใจระหว่างตัวอักษรเล็กน้อย ไม่เช่นนั้นจะแคบเกิน
เรียนรู้วิธีสร้างลูปสีพื้นหลังแบบเคลื่อนไหวอย่างง่ายด้วย CSS บริสุทธิ์โดยใช้คีย์เฟรมและคุณสมบัติแอนิเมชั่น CSS ต่างๆ ในตัวอย่างนี้ เรากำลังกำหนดเป้าหมาย HTML <body> องค์ประกอบโดยตรงกับ CSS แต่คุณสามารถใช้ตัวอย่างโค้ดต่อไปนี้กับองค์ประกอบ HTML คลาสหรือ ID The Code คุณสามารถใช้การสาธิตนี้เป็น
เรียนรู้วิธีทำให้องค์ประกอบซูม/ขยายขนาดบนโฮเวอร์ด้วย CSS บริสุทธิ์โดยใช้ transform วิธีการแปลงคุณสมบัติ:scale() . ซูม/ขยายขนาดขึ้นเมื่อวางเมาส์เหนือ ลองเลื่อนเมาส์ไปที่ช่องนี้: โดยขยายได้ 1.5 เท่าของขนาดดั้งเดิม — ดังนั้นมันจึงใหญ่ขึ้น 50% เมื่อคุณเลื่อนเมาส์ไปเหนือ (โฮเวอร์) CSS transform วิธี
เรียนรู้วิธีลบ/เพิกเฉยต่อเมาส์โอเวอร์/โฮเวอร์ (:hover ) เหตุการณ์ในองค์ประกอบ HTML เฉพาะโดยใช้ pointer-events ทรัพย์สิน ฉันเพิ่งสร้างหน้าแกลเลอรีของทีมสำหรับลูกค้ารายหนึ่งของฉัน แต่ละรายการในแกลเลอรีจะแสดงด้วยการ์ด UI ที่ใช้การซ้อนทับที่จะเปลี่ยนสีเมื่อคุณเลื่อนเมาส์ไปเหนือรายการนั้น แต่ฉันพบปัญหาซ
บางครั้งคุณถูกบังคับให้เขียน inline CSS เช่น ในเทมเพลตอีเมล HTML ขึ้นอยู่กับผู้ให้บริการอีเมล/จดหมายข่าวของคุณ แต่คุณจะรับเอฟเฟกต์โฮเวอร์ด้วย CSS แบบอินไลน์ได้อย่างไร คุณทำไม่ได้ แต่คุณสามารถสร้างเอฟเฟกต์โฮเวอร์แบบเดียวกันได้โดยใช้ onMouseOver . ของ JavaScript และ onMouseOut วิธีการ สมมติว่าคุณ
เรียนรู้วิธีทำให้แท็กล่วงหน้า HTML ของคุณตอบสนองอย่างรวดเร็ว 100% โดยการเพิ่มคุณสมบัติ CSS สองสามอย่าง ปัญหาที่ฉันมักพบในเว็บไซต์บทช่วยสอนอื่นๆ คือ ข้อมูลโค้ดขนาดยาว (ซึ่งหุ้มด้วย pre แท็ก) ล้นความกว้างของหน้า และทำให้เค้าโครงหน้าของหน้าขาด สิ่งนี้เกิดขึ้นเพราะโดยค่าเริ่มต้น pre แท็กมี CSS white-s
CodePen จากวิดีโอ
วันนี้ คุณจะได้เรียนรู้วิธีใช้ภาพเคลื่อนไหว CSS เพื่อทำให้ไอคอนลูกศร SVG เด้งขึ้นและลง คุณจะได้เรียนรู้วิธีปรับแต่งประเภทแอนิเมชั่น เวลา และระยะเวลาด้วยคุณสมบัติแอนิเมชั่น CSS มากมาย ทำไมสิ่งนี้จึงมีประโยชน์ แอนิเมชั่นเมื่อทำถูกต้องแล้วสามารถ: แนะนำผู้ใช้ของคุณ กระตุ้นให้ผู้ใช้ดำเนินการ ดึงดูดคว
คุณสงสัยหรือไม่ว่าทำไมเบราว์เซอร์บางตัวจึงเพิ่มสีพื้นหลังสีเหลืองที่น่าขยะแขยงลงในช่องป้อนข้อมูลอัตโนมัติในบางเว็บไซต์? ฉันไม่สามารถบอกคุณได้ว่าทำไมพวกเขาถึงทำอย่างนั้น แต่ฉันจะบอกวิธีกำจัดการดูหมิ่นนี้ให้เร็วที่สุด ตรวจสอบให้แน่ใจว่าไม่มีเด็กอยู่ด้วยก่อนที่คุณจะไปต่อ ทำไมถึงเป็น “ปัญหา”? อาจจะไ
ในการใช้อักษรตัวพิมพ์ใหญ่ตัวแรกในคำด้วย CSS เราใช้ first-letter ตัวเลือก: สมมติว่าคุณมีหัวเรื่องในอักษรตัวพิมพ์เล็กทั้งหมด: และคุณต้องการสร้าง t ของ นี้ ตัวพิมพ์ใหญ่ เพียงแนบ first-letter ตัวเลือกเป็น h2 ในสไตล์ชีต CSS ของคุณ: h2:first-letter { text-transform: capitalize; } คุณสามารถสมัคร firs
วิธีห่อบล็อกข้อความย่อหน้ารอบองค์ประกอบวงกลมด้วย CSS หากคุณต้องการให้การนำเสนอเนื้อหาของคุณน่าสนใจยิ่งขึ้นอีกเล็กน้อยและเป็นแบบนิตยสาร คุณสามารถใช้ CSS เพื่อทำให้ข้อความของคุณจัดแนวและตัดกับองค์ประกอบต่างๆ ในลักษณะที่น่าสนใจได้ ขั้นแรก มาเพิ่มเนื้อหา HTML: สังเกตว่า <article> องค์ประกอบมีค
สมมติว่าคุณมี flexbox คอนเทนเนอร์ที่มีปุ่มอยู่ข้างใน: หากคุณพยายามจัดตำแหน่งปุ่ม (องค์ประกอบลูก) ให้อยู่ตรงกลางในแนวนอนด้วย justify-content คุณสมบัติเช่นนี้: .container { height: 300px; display: flex; justify-content: center; } จากนั้นความสูงของปุ่ม (องค์ประกอบย่อย) จะขยายไปจนถึงความสูงของอ
เรียนรู้วิธีฝังวิดีโอ YouTube บนเว็บไซต์ของคุณและทำให้ตอบสนองได้อย่างเต็มที่จากมือถือไปยังอุปกรณ์เดสก์ท็อปด้วย CSS หากคุณคัดลอกโค้ดวิดีโอที่ฝังจาก YouTube และคุณจะได้รับ <iframe> เสื้อคลุมที่มีลักษณะคล้ายสิ่งนี้: ขออภัย iframes ต้องการความสูงและความกว้างคงที่เพื่อแสดงด้วยอัตราส่วนภาพที่ถูกต
เรียนรู้วิธีปิดใช้งานการเลือกข้อความโดยใช้ user-select คุณสมบัติ CSS. โดยค่าเริ่มต้น เว็บเบราว์เซอร์จะให้คุณเลือกข้อความบนเว็บไซต์ใดก็ได้ ตราบใดที่ข้อความนั้นเป็น ของจริง องค์ประกอบข้อความและไม่ใช่รูปภาพที่มีข้อความ คุณสามารถเลือกข้อความได้โดยใช้เมาส์หรือแป้นพิมพ์ เช่น cmd + a (Mac) หรือ ctrl + a
เรียนรู้วิธีสร้างสัญลักษณ์แสดงหัวข้อย่อยในรายการที่ไม่เรียงลำดับด้วยคุณสมบัติ CSS list-style-type . โดยค่าเริ่มต้น รายการแบบไม่เรียงลำดับ (<ul> ) บนหน้าเว็บใช้สัญลักษณ์แสดงหัวข้อย่อย สัญลักษณ์แสดงหัวข้อย่อยมีลักษณะดังนี้: ul { list-style-type: disc; } และมีลักษณะดังนี้: HTML CSS จาวาสคริ
เรียนรู้วิธีจัดรูปแบบรายการที่เรียงลำดับด้วยตัวเลขโรมันตัวพิมพ์ใหญ่ใน CSS ในการสร้างรายการสั่งซื้อใน HTML คุณใช้: ตัว <ol> เพื่อกำหนดองค์ประกอบรายการสั่งซื้อของคุณ ตัว <li> เพื่อกำหนดองค์ประกอบรายการของคุณ ตัวอย่าง: โดยค่าเริ่มต้น รายการที่เรียงลำดับจะได้รับการจัดรูปแบบด้วยตัวเลขทศ
เรียนรู้วิธีจัดรูปแบบรายการที่เรียงลำดับด้วยตัวเลขโรมันตัวพิมพ์เล็กใน CSS ในการสร้างรายการสั่งซื้อใน HTML คุณใช้: ตัว <ol> เพื่อกำหนดองค์ประกอบรายการสั่งซื้อของคุณ ตัว <li> เพื่อกำหนดองค์ประกอบรายการของคุณ ตัวอย่าง: โดยค่าเริ่มต้น รายการที่เรียงลำดับจะได้รับการจัดรูปแบบด้วยตัวเลขทศ
เรียนรู้สองวิธีในการจัดวางเค้าโครงหน้าเว็บของคุณให้อยู่กึ่งกลางด้วย CSS สมมติว่าคุณกำลังจัดรูปแบบเค้าโครงบทความสำหรับเว็บไซต์ของคุณ และต้องการจัดตำแหน่ง <article> ให้อยู่กึ่งกลาง องค์ประกอบตามแนวนอนตรงกลางหน้าของคุณ คุณสามารถทำได้สองวิธี วิธีที่ง่ายและคลาสสิกที่สุดในการจัดตำแหน่งองค์ประกอบใน
หากคุณใช้คุณสมบัติ CSS background-image เพื่อฝังรูปภาพเป็นพื้นหลังบนเว็บไซต์ของคุณ คุณ อาจ สังเกตว่ารูปภาพของคุณถูกทำซ้ำจนเต็มความกว้างและความสูงของหน้าเว็บของคุณ ที่เกิดขึ้นเพราะโดยค่าเริ่มต้น เบราว์เซอร์มีคุณสมบัติ CSS background-repeat ตั้งค่าเป็น repeat . หากต้องการหยุดไม่ให้แสดงภาพพื้นหลังซ้ำ
