คำถามติดแท็ก css

CSS (Cascading Style Sheets) เป็นภาษาสไตล์ชีตที่ใช้สำหรับอธิบายลักษณะและการจัดรูปแบบของ HTML (HyperText Markup Language), XML (Extensible Markup Language) เอกสาร XML และ Extensible Markup Language รวมถึงองค์ประกอบ SVG รวมถึง (แต่ไม่ จำกัด เฉพาะ) สีโครงร่างแบบอักษร และภาพเคลื่อนไหว นอกจากนี้ยังอธิบายถึงวิธีการแสดงองค์ประกอบบนหน้าจอบนกระดาษคำพูดหรือบนสื่ออื่น ๆ

10
แอตทริบิวต์ alt ภาพพื้นหลัง CSS
นี่คือสิ่งที่ฉันไม่เคยต้องรับมือมาก่อน ฉันจำเป็นต้องใช้แท็ก alt กับรูปภาพทั้งหมดในไซต์รวมถึงแท็กที่ใช้โดยแอตทริบิวต์ภาพพื้นหลัง CSS ไม่มีคุณสมบัติ CSS แบบนี้เท่าที่ฉันรู้ดังนั้นวิธีที่ดีที่สุดในการดำเนินการนี้คืออะไร?
117 html  css 

5
ปิด / ปิดการเปลี่ยน CSS3 ที่สืบทอดมา
ดังนั้นฉันจึงมีการเปลี่ยน css ต่อไปนี้ที่แนบมากับองค์ประกอบ: a { -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ; -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in; -o-transition:color 0.1s ease-in, background-color 0.1s ease-in; transition:color 0.1s ease-in, background-color 0.1s ease-in; } มีวิธีปิดการใช้งานช่วงการเปลี่ยนภาพที่สืบทอดมาในองค์ประกอบเฉพาะหรือไม่? a.tags { transition: none; } ดูเหมือนจะไม่ได้ทำงาน

20
CSS: เปลี่ยน image src บน img: hover
ฉันจำเป็นต้องเปลี่ยน<img>URL hoverของแหล่งข้อมูลเกี่ยวกับ ฉันได้ลองแล้ว แต่ใช้ไม่ได้: HTML <img id="my-img" src="http://dummyimage.com/100x100/000/fff"/> CSS #my-img:hover { content: url('http://dummyimage.com/100x100/eb00eb/fff'); } jsFiddle ความช่วยเหลือใด ๆ จะได้รับการชื่นชม ปรับปรุง: ใช้งานได้กับ Webkit / Google Chrome เท่านั้น
117 html  css 

7
วิธีเปลี่ยนสีดำเป็นสีที่กำหนดโดยใช้ฟิลเตอร์ CSS เท่านั้น
คำถามของฉัน: กำหนดสี RGB เป้าหมายสิ่งที่เป็นสูตรการเปลี่ยนสีสีดำ ( #000) เป็นสีที่ใช้เพียงฟิลเตอร์ CSS ? เพื่อให้ได้รับคำตอบจะต้องมีฟังก์ชัน (ในภาษาใดก็ได้) ที่จะยอมรับสีเป้าหมายเป็นอาร์กิวเมนต์และส่งคืนfilterสตริงCSS ที่เกี่ยวข้อง บริบทนี้คือความจำเป็นในการเปลี่ยนสี SVG ภายในไฟล์background-image. ในกรณีนี้ก็คือการสนับสนุนคุณสมบัติคณิตศาสตร์เท็กซ์บางอย่างใน KaTeX: https://github.com/Khan/KaTeX/issues/587 ตัวอย่าง หากสีเป้าหมายเป็น#ffff00(สีเหลือง) วิธีแก้ไขปัญหาที่ถูกต้องคือ: filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg) ( สาธิต ) ที่ไม่ใช่เป้าหมาย นิเมชั่น โซลูชันที่ไม่ใช่ตัวกรอง CSS เริ่มจากสีอื่นที่ไม่ใช่สีดำ การดูแลเกี่ยวกับสิ่งที่เกิดขึ้นกับสีอื่นที่ไม่ใช่สีดำ ผลลัพธ์จนถึงตอนนี้ การค้นหาพารามิเตอร์ของรายการตัวกรองแบบคงที่: https://stackoverflow.com/a/43959856/181228 จุด ด้อย: ไม่มีประสิทธิภาพสร้างสีที่เป็นไปได้เพียง 16,777,216 สี (676,248 กับhueRotateStep=1) โซลูชันการค้นหาที่เร็วขึ้นโดยใช้SPSA : https://stackoverflow.com/a/43960991/181228 ได้รับรางวัล …

7
ฉันสามารถรวม: nth-child () หรือ: nth-of-type () กับตัวเลือกโดยพลการได้หรือไม่?
มีวิธีเลือกลูกที่ n ทุกตัวที่ตรงกับ (หรือไม่ตรง) กับตัวเลือกโดยพลการหรือไม่? ตัวอย่างเช่นฉันต้องการเลือกทุกแถวตารางคี่ แต่อยู่ในส่วนย่อยของแถว: table.myClass tr.row:nth-child(odd) { ... } <table class="myClass"> <tr> <td>Row <tr class="row"> <!-- I want this --> <td>Row <tr class="row"> <td>Row <tr class="row"> <!-- And this --> <td>Row </table> แต่:nth-child()ก็ดูเหมือนว่าจะนับทุกtrองค์ประกอบโดยไม่คำนึงถึงหรือไม่ว่าพวกเขากำลังของ "แถว" ชั้นดังนั้นผมจึงจบลงด้วยหนึ่งแม้ "แถว" องค์ประกอบแทนของทั้งสองฉันกำลังมองหา :nth-of-type()สิ่งเดียวกันที่เกิดขึ้นกับ ใครช่วยอธิบายว่าทำไม?
117 css  css-selectors 

10
การเปลี่ยนแอตทริบิวต์สไตล์องค์ประกอบแบบไดนามิกโดยใช้ JavaScript
ฉันมีสไตล์ชีตบางอย่างสำหรับ div ตอนนี้ฉันต้องการแก้ไขแอตทริบิวต์หนึ่งของ div แบบไดนามิกโดยใช้ js ฉันจะทำได้อย่างไร? document.getElementById("xyz").style.padding-top = "10px"; ถูกต้องหรือไม่
117 javascript  html  css 

16
ข้อความจุดไข่ปลาล้นสองบรรทัด
ฉันรู้ว่าคุณสามารถใช้กฎ CSS ร่วมกันเพื่อทำให้ข้อความลงท้ายด้วยจุดไข่ปลา (... ) เมื่อถึงเวลาที่จะล้น (ออกจากขอบเขตของผู้ปกครอง) เป็นไปได้ไหม (อย่าลังเลที่จะพูดว่าไม่) เพื่อให้ได้เอฟเฟกต์เดียวกัน แต่ให้ตัดข้อความมากกว่าหนึ่งบรรทัด นี่คือการสาธิต div { width: 300px; height: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } อย่างที่คุณเห็นข้อความจะลงท้ายด้วยจุดไข่ปลาเมื่อกว้างกว่าความกว้างของ div อย่างไรก็ตามยังมีพื้นที่เพียงพอสำหรับข้อความที่จะตัดบรรทัดที่สองและดำเนินการต่อไป สิ่งนี้ถูกขัดจังหวะโดยwhite-space: nowrapซึ่งจำเป็นเพื่อให้จุดไข่ปลาทำงาน ความคิดใด ๆ ? PS: ไม่มีโซลูชัน JS CSS บริสุทธิ์ถ้าเป็นไปได้
117 html  css 

11
แสดงภาพขณะโหลดขณะที่ $ .ajax ดำเนินการ
ฉันแค่สงสัยว่าจะแสดงภาพที่บ่งชี้ว่าคำขอ async กำลังทำงานอยู่ได้อย่างไร ฉันใช้รหัสต่อไปนี้เพื่อดำเนินการร้องขอ async: $.ajax({ url: uri, cache: false, success: function(html){ $('.info').append(html); } }); ความคิดใด ๆ ?
116 javascript  jquery  css 

5
CSS container div ไม่ได้รับความสูง
ฉันต้องการให้คอนเทนเนอร์ div ของฉันได้รับความสูงสูงสุดของความสูงของเด็ก โดยไม่รู้ว่าเด็กdivจะมีความสูงเท่าใด ผมพยายามออกในJSFiddle ภาชนะdivเป็นสีแดง ซึ่งไม่ปรากฏขึ้น ทำไม?

6
มี CSS ที่ไม่เท่ากับตัวเลือกหรือไม่?
มีบางอย่างเช่น! = (ไม่เท่ากัน) ใน CSS หรือไม่? เช่นฉันมีรหัสต่อไปนี้: input { ... ... } แต่สำหรับบางอินพุตฉันจำเป็นต้องโมฆะสิ่งนี้ ฉันต้องการทำเช่นนั้นโดยการเพิ่มคลาส "รีเซ็ต" ลงในแท็กอินพุตเช่น <input class="reset" ... /> จากนั้นก็ข้ามแท็กนี้จาก CSS ฉันจะทำเช่นนั้นได้อย่างไร? วิธีเดียวที่ฉันเห็นคือเพิ่มคลาสบางส่วนในแท็กอินพุตและเขียน CSS ใหม่ดังนี้: input.mod { ... ... }
116 html  css  css-selectors 

16
วิธีปิดการใช้งาน CSS ในเบราว์เซอร์เพื่อการทดสอบ
มีวิธีใดบ้างที่ฉันสามารถปิดการใช้งาน CSS ภายนอกทั้งหมดในเบราว์เซอร์ (Firefox, Chrome ... ) เมื่อใช้การเชื่อมต่ออินเทอร์เน็ตที่ช้าลงบางครั้งเบราว์เซอร์จะโหลดเฉพาะ HTML เปล่าที่ไม่มีข้อมูล CSS ดูเหมือนว่าเพจจะถูกวางแบบดิบบนหน้าจอ คุณจะสังเกตเห็นสิ่งนี้กับ StackOverflow ด้วย ฉันต้องการตรวจสอบให้แน่ใจว่าหน้าเว็บของฉันปรากฏขึ้นแม้ว่าจะไม่ได้โหลดไฟล์ CSS ก็ตาม ฉันไม่ได้หมายความว่าฉันต้องการแปลง CSS ภายนอกเป็นแบบอินไลน์ แต่ฉันต้องการวิธีปิดการใช้งาน CSS ทั้งหมดอย่างชัดเจนจากเบราว์เซอร์เพื่อให้ฉันสามารถเปลี่ยนตำแหน่งองค์ประกอบของฉันได้ดีขึ้นและอ่านได้ ฉันรู้ว่าฉันสามารถลบรายการ <link rel = 'stylesheet'> ได้ แต่จะเกิดอะไรขึ้นถ้าฉันมีหน้าที่เชื่อมโยงจำนวนมาก
116 html  css  browser 


5
มี CSS max-width ที่เทียบเท่ากับอีเมล HTML หรือไม่
ฉันกำลังพยายามสร้างอีเมล HTML ที่จะแสดงอย่างถูกต้องในโปรแกรมรับส่งเมลที่ใช้กันอย่างแพร่หลายทั้งหมด ฉันกำลังรวมอีเมลทั้งหมดไว้ในตารางและฉันต้องการให้มีความกว้างไม่เกิน 98% ของความกว้างที่มี แต่ไม่เกิน 800 พิกเซล แบบนี้: <table style="width:98%; max-width:800px;"> แต่ฉันไม่ได้ทำแบบนั้นเนื่องจากตาม Outlook 2007 นี้ไม่รองรับคุณสมบัติความกว้าง CSS ฉันกำลังทำสิ่งนี้แทน: <table width="98%"> มีวิธีใดบ้างในการตั้งค่าความกว้างสูงสุดโดยไม่ต้องอาศัย CSS?
116 html  email  html-email  css 

10
Flexbox ไม่อยู่ตรงกลางในแนวตั้งใน IE
ฉันมีหน้าเว็บง่ายๆที่มีเนื้อหา Lipsum ซึ่งอยู่กึ่งกลางของหน้า หน้านี้ทำงานได้ดีใน Chrome และ Firefox หากฉันลดขนาดของหน้าต่างเนื้อหาจะเต็มหน้าต่างจนกว่าจะไม่สามารถเพิ่มแถบเลื่อนและเติมเนื้อหาออกจากหน้าจอไปทางด้านล่าง อย่างไรก็ตามเพจไม่ได้อยู่กึ่งกลางใน IE11 ฉันสามารถทำให้หน้าอยู่ตรงกลางใน IE ได้โดยการงอร่างกาย แต่ถ้าทำเช่นนั้นเนื้อหาจะเริ่มออกจากหน้าจอไปทางด้านบนและตัดส่วนบนของเนื้อหาออก ด้านล่างนี้คือสองสถานการณ์ ดู Fiddles ที่เกี่ยวข้อง หากปัญหายังไม่ชัดเจนให้ลดขนาดของหน้าต่างผลลัพธ์เพื่อบังคับให้สร้างแถบเลื่อน หมายเหตุ: แอปพลิเคชันนี้กำหนดเป้าหมายเฉพาะ Firefox, Chrome และ IE (IE11) เวอร์ชันล่าสุดซึ่งทั้งหมดนี้รองรับคำแนะนำของผู้สมัคร Flexboxดังนั้นความเข้ากันได้ของคุณลักษณะจึงไม่ควรเป็นปัญหา (ในทางทฤษฎี) แก้ไข : เมื่อใช้ Fullscreen API เพื่อแสดง div ด้านนอกแบบเต็มหน้าจอเบราว์เซอร์ทั้งหมดจะอยู่ตรงกลางอย่างถูกต้องโดยใช้ CSS ดั้งเดิม อย่างไรก็ตามเมื่อออกจากโหมดเต็มหน้าจอ IE จะเปลี่ยนกลับไปอยู่ตรงกลางในแนวนอนและแนวตั้งด้านบน แก้ไข : IE11 ใช้การใช้ Flexbox ที่ไม่ใช่ผู้ขายโดยเฉพาะ การอัปเดตรูปแบบกล่องยืดหยุ่น ("Flexbox") …

12
ความยาวของเส้นขอบเล็กกว่าความกว้าง div?
ฉันมีรหัสต่อไปนี้ div { width:200px; border-bottom:1px solid magenta; height:50px; } การสาธิต ความกว้างของ div คือ 200px ดังนั้น border-bottom จึงเป็น 200px เช่นกัน แต่ฉันจะทำอย่างไรถ้าฉันต้องการ border-bottom เพียง 100px โดยไม่เปลี่ยนความกว้างของ div
116 html  css 

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.