การเขียนโปรแกรม css

10

ฉันกำลังพยายามปรับขนาด img ด้วยเปอร์เซ็นต์ของตัวมันเอง ตัวอย่างเช่นฉันต้องการลดขนาดรูปภาพลงครึ่งหนึ่งโดยปรับขนาดเป็น 50% แต่การนำไปใช้width: 50%;จะปรับขนาดรูปภาพเป็น 50% ขององค์ประกอบคอนเทนเนอร์ (องค์ประกอบหลักซึ่งอาจเป็น<body>ตัวอย่าง) คำถามคือฉันสามารถปรับขนาดรูปภาพด้วยเปอร์เซ็นต์ของตัวมันเองโดยไม่ใช้ javascript หรือฝั่งเซิร์ฟเวอร์ได้หรือไม่? (ฉันไม่มีข้อมูลโดยตรงเกี่ยวกับขนาดภาพ) ฉันค่อนข้างแน่ใจว่าคุณไม่สามารถทำสิ่งนี้ได้ แต่ฉันต้องการดูว่ามีโซลูชัน CSS ที่ชาญฉลาดเท่านั้นหรือไม่ ขอบคุณ!

109 html css image

6

ฉันจะใช้การเปลี่ยน CSS3 กับคุณสมบัติทั้งหมดยกเว้นตำแหน่งพื้นหลังได้อย่างไร

ฉันต้องการใช้การเปลี่ยน CSS กับคุณสมบัติทั้งหมดนอกเหนือจากตำแหน่งพื้นหลัง ฉันพยายามทำด้วยวิธีนี้: .csstransitions a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .csstransitions a { -webkit-transition: background-position 0s ease 0s; -moz-transition: background-position 0s ease 0s; -o-transition: background-position 0s ease 0s; -ms-transition: background-position 0s ease …

109 css css-transitions

16

คุณจะปรับแต่งตัวเลขในรายการสั่งซื้อได้อย่างไร?

ฉันจะจัดเรียงตัวเลขไปทางซ้ายในรายการสั่งซื้อได้อย่างไร? 1. an item // skip some items for brevity 9. another item 10. notice the 1 is under the 9, and the item contents also line up เปลี่ยนตัวอักษรหลังตัวเลขในรายการสั่งซื้อ? 1) an item นอกจากนี้ยังมีโซลูชัน CSS ในการเปลี่ยนจากตัวเลขเป็นรายการตามตัวอักษร / โรมันแทนการใช้แอตทริบิวต์ type ในองค์ประกอบ ol ฉันสนใจคำตอบที่ใช้ได้กับ Firefox 3 เป็นส่วนใหญ่

109 html css html-lists roman-numerals

9

ฉันจะปรับขนาดรูปภาพแบบไดนามิกด้วย CSS ได้อย่างไรเมื่อความกว้าง / ความสูงของเบราว์เซอร์เปลี่ยนไป

ฉันสงสัยว่าฉันจะปรับขนาดภาพพร้อมกับหน้าต่างเบราว์เซอร์ได้อย่างไรนี่คือสิ่งที่ฉันได้ทำไปแล้ว (หรือดาวน์โหลดทั้งไซต์ใน ZIP ) วิธีนี้ใช้งานได้ใน Firefox แต่มีปัญหาใน Chrome: รูปภาพไม่ได้ปรับขนาดเสมอไปทั้งนี้ขึ้นอยู่กับขนาดของหน้าต่างเมื่อโหลดหน้า วิธีนี้ยังใช้งานได้ดีใน Safari แต่บางครั้งภาพจะโหลดด้วยความกว้าง / ความสูงต่ำสุด อาจจะเกิดจากขนาดภาพผมไม่แน่ใจ (ถ้าโหลดได้ก็ลองรีเฟรชหลาย ๆ ครั้งเพื่อดูบั๊ก) มีความคิดอย่างไรที่ฉันจะทำให้กันกระสุนได้มากขึ้น? (หากจำเป็นต้องใช้ JavaScript ฉันก็สามารถใช้งานได้เช่นกัน แต่ควรใช้ CSS)

109 css image browser resize window

7

HTML Span align center ไม่ทำงาน?

ฉันมี HTML: <div align="center" style="border:1px solid red"> This is some text in a div element! </div> Div กำลังเปลี่ยนระยะห่างบนเอกสารของฉันดังนั้นฉันจึงต้องการใช้ช่วงนี้แทน แต่สแปนไม่ได้รวมศูนย์เนื้อหา: <span style="border:1px solid red;align=center"> This is some text in a div element! </span> ฉันจะแก้ไขปัญหานี้ได้อย่างไร แก้ไข: รหัสที่สมบูรณ์ของฉัน: <html> <body> <p>This is a paragraph. This text has no alignment specified.</p> <span style="border:1px solid …

109 html css

11

วิธีเพิ่มรัศมีเส้นขอบบนแถวตาราง

ใครรู้วิธีแต่ง tr ตามที่เราชอบบ้าง? ฉันใช้การยุบเส้นขอบบนตารางหลังจากนั้น tr สามารถแสดงเส้นขอบทึบ 1px ที่ฉันให้ได้ อย่างไรก็ตามเมื่อฉันลอง-moz-border-radiusแล้วมันไม่ได้ผล แม้แต่ระยะขอบธรรมดาก็ไม่ได้ผล

109 css

12

เพิ่มช่องว่างระหว่างองค์ประกอบ HTML โดยใช้ CSS เท่านั้น

ฉันมีองค์ประกอบ HTML ที่เหมือนกันหลายรายการต่อกัน: <span>1</span> <span>2</span> <span>3</span> ฉันกำลังมองหาวิธีที่ดีที่สุดในการเพิ่มพื้นที่ระหว่างองค์ประกอบโดยใช้CSS เท่านั้น [no space] [1] [space 10px] [2] [space 10px] [3] [no space] นอกจากนี้: โปรดจดบันทึกความเข้ากันได้ของเบราว์เซอร์ของใบเสร็จของคุณ อัปเดต ดูเหมือนว่าฉันพูดไม่ชัด ฉันไม่ต้องการใช้มาร์กอัป HTML เพิ่มเติมใด ๆ เช่น <span></span> <span></span> <span class="last_span"></span> ฉันไม่ต้องการใช้ตาราง ฉันต้องการให้ CSS กำหนดเป้าหมายช่วงแรกและช่วงสุดท้ายโดยอัตโนมัติ ฉันไม่ต้องการใช้จาวาสคริปต์ ข้อกำหนดเพิ่มเติม: ช่วงสุดท้ายต้องไม่ใช่ LAST CHILD ของแท็กหลัก แต่จะเป็นช่วงสุดท้ายของแท็กหลัก Spans ไม่มีแท็กอื่น ๆ ระหว่างพวกเขา

109 css layout receipt

7

มี "pointer-events: hoverOnly" หรือคล้ายกันใน CSS หรือไม่

เพิ่งเล่นกับpointer-eventsคุณสมบัติใน CSS ฉันมีที่ฉันต้องการที่จะมองไม่เห็นเหตุการณ์ของเมาส์ทั้งหมดยกเว้นdiv:hover ดังนั้นคำสั่งคลิกทั้งหมดจะไปที่คำสั่งdivด้านล่าง แต่ div สามารถรายงานได้ว่าเมาส์อยู่เหนือหรือไม่ยังอยู่ ใครช่วยบอกทีว่าทำได้ไหม HTML: <div class="layer" style="z-index:20; pointer-events:none;">Top layer</div> <div class="layer" style="z-index:10;">Bottom layer</div> CSS: .layer { position:absolute; top:0px; left:0px; height:400px; width:400px; }

109 html css pointer-events

6

ต้นไม้ใน Twitter Bootstrap [ปิด]

ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน6 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันพยายามสร้างทรี (เช่นไดเร็กทอรีทรี) ที่ใช้ CSS ให้มากที่สุดและ JS ให้น้อยที่สุด (เฉพาะสำหรับสถานะ ฯลฯ ) และฉันต้องการทราบว่ามีปลั๊กอินทรีที่ดีสำหรับbootstrap หรือไม่หรือjQuery UI-บูต สำหรับการอ้างอิงหรือสำหรับคนที่สับสนเกี่ยวกับคำถามนี้ฉันกำลังมองหาบางอย่างเช่นdynatreeสำหรับ bootstrap

108 javascript jquery twitter-bootstrap css jquery-ui

5

เส้นขอบข้อความโดยใช้ css (เส้นขอบรอบข้อความ)

มีวิธีรวมเส้นขอบรอบข้อความเหมือนภาพด้านล่างหรือไม่?

108 text css

6

ฉันควรใช้สัญกรณ์โคลอนเดี่ยวหรือคู่สำหรับองค์ประกอบหลอก?

เนื่องจาก IE7 และ IE8 ไม่รองรับสัญกรณ์ double-colon สำหรับองค์ประกอบหลอก (เช่น::afterหรือ::first-letter) และเนื่องจากเบราว์เซอร์รุ่นใหม่รองรับสัญกรณ์ single-colon (เช่น:after) เพื่อความเข้ากันได้แบบย้อนกลับฉันควรใช้สัญกรณ์ single-colon แต่เพียงผู้เดียวและเมื่อ ส่วนแบ่งการตลาดของ IE8 ลดลงสู่ระดับเล็กน้อยย้อนกลับไปและค้นหา / แทนที่ในฐานรหัสของฉัน? หรือฉันควรใส่ทั้งสองอย่าง: .foo:after, .foo::after { /*styles*/ } การใช้ double alone นั้นดูไร้สาระถ้าฉันสนใจผู้ใช้ IE8 (ผู้น่าสงสาร)

108 css internet-explorer-8 css-selectors internet-explorer-7 pseudo-element

7

ระยะขอบลบใน CSS ทำงานอย่างไรและเหตุใด (margin-top: -5! = margin-bottom: 5)

เคล็ดลับทั่วไปสำหรับองค์ประกอบการวางตำแหน่งแนวตั้งคือการใช้ CSS ต่อไปนี้: .item { position:absolute; top:50%; margin-top:-8px; /* half of height */ height: 16px; } เมื่อเห็นในมุมมองเมตริกเช่นเดียวกับใน Chrome นี่คือสิ่งที่คุณเห็น: อย่างไรก็ตามไม่มีการแสดงระยะขอบภาพเมื่อคุณวางเมาส์เหนือองค์ประกอบนั่นคือระยะขอบอยู่ 'นอก' เส้นขอบและสามารถมองเห็นได้ แต่ระยะขอบติดลบจะไม่ปรากฏขึ้น พวกเขามีลักษณะอย่างไรและอะไรที่ทำให้มันแตกต่างกัน? ทำไมmargin-top:-8px ไม่เหมือนกับ margin-bottom:8px ? อัตรากำไรเชิงลบทำงานอย่างไรและอะไรคือสัญชาตญาณเบื้องหลัง พวกเขา 'ชน' (ในกรณีmargin-top < 0) สิ่งของได้อย่างไร?

108 css margin

4

CSS3: คลาสหลอกที่ไม่ถูกเลือก

ฉันรู้ว่ามี:checkedคลาสหลอกCSS3 อย่างเป็นทางการแต่มี:uncheckedคลาสหลอกและพวกเขารองรับเบราว์เซอร์เดียวกันหรือไม่ การอ้างอิงของ Sitepointไม่ได้กล่าวถึงอย่างใดอย่างหนึ่งอย่างไรก็ตามข้อมูลจำเพาะ whatwgนี้(อะไรก็ได้) ทำ ฉันรู้ว่าผลลัพธ์เดียวกันนี้สามารถทำได้เมื่อรวมคลาสหลอก:checkedและ:not()คลาสหลอก แต่ฉันยังอยากรู้อยากเห็น: input[type="checkbox"]:not(:checked) { /* styles */ } แก้ไข: w3c แนะนำเทคนิคเดียวกัน คุณสามารถเลือกช่องทำเครื่องหมายที่ไม่ได้ทำเครื่องหมายโดยใช้คลาสหลอกเทียม: :not(:checked)

108 css css-selectors pseudo-class

1

เส้นขอบรอบองค์ประกอบ tr ไม่แสดง?

ดูเหมือนว่า Chrome / Firefox ไม่ทำให้เส้นขอบบนแต่มันทำให้ชายแดนถ้าเลือกเป็นtrtable tr td ฉันจะตั้งค่าเส้นขอบบน tr ได้อย่างไร การลองของฉันไม่ได้ผล: table tr { border: 1px solid black; } <table> <tbody> <tr> <td> Text </td> </tr> </tbody> </table> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด http://jsfiddle.net/edi9999/VzPN2/ นี่เป็นคำถามที่คล้ายกัน: ตั้งค่าเส้นขอบเป็นตาราง tr ทำงานได้ทุกอย่างยกเว้น IE 6 และ 7แต่ดูเหมือนว่าจะใช้ได้ทุกที่ยกเว้น IE

108 html css html-table

3

ค่าตัวแปรเชิงลบ Sass?

ฉันมีตัวเลือก scss สองตัวที่ฉันใช้จำนวนบวกและลบเท่ากันดังใน: padding: 0 15px 15px; margin: 0 -15px 20px -15px; ฉันต้องการใช้ตัวแปรสำหรับจำนวน 15px ทั้งหมด แต่ไม่ได้ผล: $pad: 15px; padding: 0 $pad $pad; margin: 0 -$pad 20px -$pad; จำนวนมาร์จิ้นจะแปลงเป็นจำนวนบวก ฉันพลาดอะไรไปรึเปล่า?

108 css sass compass-sass

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