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

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

8
การปรับและขนาดภาพให้พอดีกับ div (bootstrap)
ฉันกำลังพยายามทำให้ภาพพอดีกับ div ขนาดที่กำหนด น่าเสียดายที่รูปภาพไม่เป็นไปตามสัดส่วนและแทนที่จะย่อขนาดให้เป็นขนาดที่ไม่ใหญ่พอ ฉันไม่แน่ใจว่าวิธีที่ดีที่สุดคือวิธีใดในการทำให้ภาพพอดีกับภายใน หากรหัสนี้ไม่เพียงพอฉันยินดีที่จะจัดหาเพิ่มเติมและฉันพร้อมที่จะแก้ไขข้อผิดพลาดอื่น ๆ ที่ฉันมองข้ามไป นี่คือ HTML <div class="span3 top1"> <div class="row"> <div class="span3 food1"> <img src="images/food1.jpg" alt=""> </div> </div> <div class="row"> <div class="span3 name1"> heres the name </div> </div> <div class="row"> <div class="span3 description1"> heres where i describe and say "read more" </div> </div> </div> CSS …
4
ทำให้เด็กมองเห็นได้ภายนอกโอเวอร์โฟลว์: ผู้ปกครองที่ซ่อนอยู่
ใน CSS overflow:hiddenมีการตั้งค่าบนคอนเทนเนอร์หลักเพื่อให้สามารถขยายได้ตามความสูงของลูกที่ลอยอยู่ แต่มันยังมีคุณสมบัติที่น่าสนใจอีกอย่างเมื่อรวมกับmargin: auto... หากพี่น้องก่อนหน้านี้เป็นองค์ประกอบลอยจริงจะปรากฏขึ้นมาเคียงข้างกัน นั่นคือถ้าพี่น้องเป็นfloat:leftคอนเทนเนอร์ด้วยfloat:none overflow:hiddenจะปรากฏทางด้านขวาของพี่น้องโดยไม่มีการขึ้นบรรทัดใหม่เหมือนกับว่ามันลอยอยู่ในโฟลว์ปกติ หากพี่น้องก่อนหน้านี้เป็นfloat:rightคอนเทนเนอร์จะปรากฏทางด้านซ้ายของพี่น้อง การปรับขนาดคอนเทนเนอร์นี้จะแสดงให้เห็นว่าอยู่กึ่งกลางระหว่างองค์ประกอบลอย บอกว่าถ้าคุณมีพี่น้องสองคนก่อนหน้านี้หนึ่งfloat:leftอื่น ๆfloat:right, ภาชนะที่จะปรากฏเป็นศูนย์กลาง inbetween สอง นี่คือปัญหา ... ฉันจะรักษาเค้าโครงประเภทนั้นได้อย่างไรโดยไม่มีการปิดบังเด็ก Googling ทั่วทั้งเว็บช่วยให้ฉันมีวิธีการclear:bothและขยายคอนเทนเนอร์ ... แต่ฉันไม่พบวิธีอื่นในการรักษาศูนย์กลางเด็กก่อนหน้าซ้าย / ขวา หากคุณสร้างคอนเทนเนอร์คอนเทนเนอร์overflow:visibleนั้นก็จะเพิกเฉยต่อการจัดวางองค์ประกอบที่ลอยอยู่และปรากฏเป็นชั้น ๆ อยู่ด้านบนขององค์ประกอบลอย ดังนั้นคำถาม : ฉันต้องมีคอนเทนเนอร์overflow:hiddenเพื่อรักษาเค้าโครง ... จะทำยังไงให้เด็ก ๆ ไม่สวมหน้ากาก ฉันจำเป็นต้องให้เด็กอยู่ในตำแหน่งที่สัมพันธ์กับผู้ปกครองนอกคอนเทนเนอร์อย่างแน่นอน หรือ ฉันจะทำอย่างไรoverflow:visibleเพื่อให้ฉันอย่างสามารถวางตำแหน่งของเด็กที่สัมพันธ์กับผู้ปกครองนอกภาชนะ ... ยังรักษาพี่น้องลอยเหมือนรูปแบบการไหล?
10
เค้าโครงตาราง CSS: เหตุใดแถวตารางจึงไม่ยอมรับระยะขอบ
.container { width: 850px; padding: 0; display: table; margin-left: auto; margin-right: auto; } .row { display: table-row; margin-bottom: 30px; /* HERE */ } .home_1 { width: 64px; height: 64px; padding-right: 20px; margin-right: 10px; display: table-cell; } .home_2 { width: 350px; height: 64px; padding: 0px; vertical-align: middle; font-size: 150%; display: table-cell; …
100 html  css 
6
การจัดแนวลูกลอย: div ซ้ายไปที่กึ่งกลาง
ฉันต้องการให้กลุ่มรูปภาพแสดงในแนวนอนทั่วทั้งหน้า แต่ละภาพมีลิงก์อยู่ด้านล่างดังนั้นฉันจึงต้องใส่คอนเทนเนอร์ไว้รอบ ๆ รูปภาพ / ลิงก์กลุ่มแต่ละรายการ สิ่งที่ใกล้เคียงที่สุดที่ฉันได้รับในสิ่งที่ฉันต้องการคือวางไว้ใน div ที่ลอย: ซ้าย ปัญหาคือฉันต้องการให้คอนเทนเนอร์จัดตำแหน่งกึ่งกลางไม่ให้ชิดซ้าย ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร
100 html  css 
6
: ลูกคนแรกไม่ทำงานตามที่คาดไว้
ฉันพยายามที่จะเลือกเป็นครั้งแรกh1ภายในกับชั้นที่เรียกว่าdiv detail_containerใช้งานได้หากh1เป็นองค์ประกอบแรกภายในนี้divแต่ถ้ามาหลังจากนี้ulจะใช้ไม่ได้ <style type="text/css"> .detail_container h1:first-child { color:blue; } </style> </head> <body> <div class="detail_container"> <ul> <li></li> <li></li> </ul> <h1>First H1</h1> <h1>Second H1</h1> </div> </body> </html> ฉันรู้สึกว่า CSS ที่ฉันมีจะเลือกเป็นอันดับแรกh1ไม่ว่าจะอยู่ที่divใดก็ตาม ฉันจะทำให้มันทำงานได้อย่างไร?
100 css  css-selectors 
12
วิธีใช้ Checkbox ภายใน Select Option
ลูกค้าให้ฉันออกแบบซึ่งมีเมนู Select Option ที่มีช่องทำเครื่องหมายพร้อมกับชื่อรายการเป็นแต่ละรายการในรายการ เป็นไปได้หรือไม่ที่จะเพิ่มช่องทำเครื่องหมายในเมนู Select Option หมายเหตุ: นักพัฒนาต้องเพิ่ม id ของตัวเองเพื่อให้เมนูมีประสิทธิภาพฉันต้องการโค้ด HTML CSS เท่านั้นถ้าเป็นไปได้
3
จะสร้างกฎ css สำหรับองค์ประกอบทั้งหมดยกเว้นคลาสเดียวได้อย่างไร
ฉันได้สร้าง CSS สไตล์ชีตสำหรับโครงการของฉันแล้ว มีวิธีใดบ้างที่ฉันสามารถสร้างกฎ css ที่ใช้กับองค์ประกอบตารางทั้งหมดยกเว้นองค์ประกอบตารางที่เป็นของคลาส "dojoxGrid" สิ่งที่ต้องการ: .not(dojoxGrid) table{ width:100%; border-top:1px solid #dddddd; border-left:1px solid #dddddd; border-right:1px solid #dddddd; margin:1em auto; border-collapse:collapse; }
100 css  css-selectors 
18
รวมไฟล์ CSS, javascript ใน Yii Framework
วิธีรวมไฟล์ Javascript หรือ CSS ใน Yii Framework ฉันต้องการสร้างเพจบนไซต์ของฉันที่มีแอปพลิเคชัน Javascript ทำงานอยู่เล็กน้อยดังนั้นฉันจึงต้องการรวม.jsและ.cssไฟล์ในมุมมองที่เจาะจง
99 javascript  php  css  yii 
13
jQuery Popup Bubble / Tooltip [ปิด]
ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน5 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันกำลังพยายามสร้าง "ฟอง" ที่สามารถป๊อปอัปเมื่อonmouseoverเหตุการณ์เริ่มขึ้นและจะยังคงเปิดอยู่ตราบเท่าที่เมาส์อยู่เหนือรายการที่โยนonmouseoverเหตุการณ์หรือหากเลื่อนเมาส์ไปที่ฟอง ฟองของฉันจะต้องมีมารยาทในการใช้ HTML และการจัดรูปแบบรวมทั้งไฮเปอร์ลิงก์รูปภาพ ฯลฯ โดยพื้นฐานแล้วฉันทำได้สำเร็จโดยเขียน JavaScript ที่น่าเกลียดประมาณ 200 บรรทัด แต่ฉันต้องการหาปลั๊กอิน jQuery หรือวิธีอื่นในการทำความสะอาดเล็กน้อย
99 javascript  jquery  html  css 
2
ตัวเลือกแอตทริบิวต์ CSS ไม่ทำงานกับ href
ฉันจำเป็นต้องใช้ตัวเลือกแอตทริบิวต์ใน css เพื่อเปลี่ยนลิงค์สีและรูปภาพที่แตกต่างกัน แต่มันใช้ไม่ได้ ฉันมี html นี้: <a href="/manual.pdf">A PDF File</a> และ css นี้: a { display: block; height: 25px; padding-left: 25px; color:#333; font: bold 15px Tahoma; text-decoration: none; } a[href='.pdf'] { background: red; } ทำไมพื้นหลังถึงไม่เป็นสีแดง
6
วิธีใช้ Chrome Web Inspector เพื่อดูโค้ดโฮเวอร์
การใช้ Chromes Web Inspector เพื่อดูโค้ดมีประโยชน์มาก แต่คุณจะดูตัวอย่างรหัสโฮเวอร์ของปุ่มได้อย่างไร? คุณจะต้องวางเมาส์เหนือปุ่มจึงไม่สามารถใช้ (เมาส์) ในตัวตรวจสอบได้ มีทางลัดหรือวิธีอื่น ๆ ในการดำเนินการนี้ในผู้ตรวจสอบหรือไม่?
9
ฉันสามารถปิด CSS: hover effect ผ่าน JavaScript ได้หรือไม่
ฉันพยายามป้องกันไม่ให้เบราว์เซอร์ใช้เอ:hoverฟเฟกต์ของ CSS ผ่าน JavaScript ฉันตั้งค่าaและa:hoverสไตล์ใน CSS ของฉันเพราะฉันต้องการเอฟเฟกต์โฮเวอร์ถ้า JS ไม่พร้อมใช้งาน แต่ถ้า JS เป็นใช้ได้ผมต้องการที่จะเขียนทับผลโฉบ CSS ของฉันกับความนุ่มนวลหนึ่ง (โดยใช้สี jQuery ปลั๊กอินเช่น.) ฉันลองสิ่งนี้: $("ul#mainFilter a").hover( function(e){ e.preventDefault(); ...do my stuff... }, function(e){ e.preventDefault(); ...do my stuff... }); ฉันลองใช้ด้วยreturn false;แต่มันไม่ได้ผล นี่คือตัวอย่างของปัญหาของฉัน: http://jsfiddle.net/4rEzz/ ลิงก์ควรจางลงโดยไม่เป็นสีเทา ดังที่กล่าวไว้โดย fudgey วิธีแก้ปัญหาคือการรีเซ็ตรูปแบบโฮเวอร์โดยใช้.css()แต่ฉันจะต้องเขียนทับทุกคุณสมบัติเดียวที่ระบุใน CSS (ดูที่นี่: http://jsfiddle.net/raPeX/1/ ) ฉันกำลังมองหาวิธีแก้ปัญหาทั่วไป ไม่มีใครรู้วิธีการทำเช่นนี้? PS: ฉันไม่ต้องการเขียนทับทุกสไตล์ที่ฉันตั้งไว้สำหรับการวางเมาส์เหนือ
99 javascript  jquery  css 
5
วิธีเชื่อมต่อและลดขนาดไฟล์ CSS และ JavaScript หลายไฟล์ด้วย Grunt.js (0.3.x)
หมายเหตุ: คำถามนี้เกี่ยวข้องกับ Grunt 0.3.x เท่านั้นและถูกทิ้งไว้ให้อ้างอิง สำหรับความช่วยเหลือเกี่ยวกับ Grunt 1.x รุ่นล่าสุดโปรดดูความคิดเห็นของฉันด้านล่างคำถามนี้ ฉันกำลังพยายามใช้ Grunt.js เพื่อตั้งค่ากระบวนการสร้างอัตโนมัติสำหรับการเชื่อมต่อครั้งแรกจากนั้นจึงลดขนาดไฟล์ CSS และ JavaScript ฉันสามารถเชื่อมต่อและย่อขนาดไฟล์ JavaScript ของฉันได้สำเร็จแม้ว่าทุกครั้งที่ฉันเรียกใช้คำรามดูเหมือนว่าจะต่อท้ายไฟล์แทนที่จะเขียนทับ สำหรับการย่อขนาดหรือแม้แต่การเชื่อมต่อ CSS ฉันยังไม่สามารถดำเนินการได้ในตอนนี้! ในแง่ของโมดูล CSS แสมผมได้ลองใช้consolidate-css, grunt-cssและcssminแต่จะไม่มีประโยชน์ ไม่สามารถเข้าใจวิธีการใช้งานได้! โครงสร้างไดเร็กทอรีของฉันเป็นดังนี้ (เป็นแอ็พพลิเคชัน node.js ทั่วไป): app.js คำราม js /public/index.html / public / css / [ไฟล์ css ต่างๆ] / public / js / [ไฟล์ javascript ต่างๆ] …
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.