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

14

คุณสามารถใช้ CSS เพื่อสะท้อน / พลิกข้อความได้หรือไม่?

เป็นไปได้ที่จะใช้ CSS / CSS3 เพื่อสะท้อนข้อความ โดยเฉพาะฉันมีกรรไกรนี้ถ่าน“ ✂” ( &#9986;) ที่ฉันต้องการแสดงให้ชี้ไปทางซ้ายและไม่ถูกต้อง

235 html css

7

ฉันจะทำ svg scale ด้วย container parent ได้อย่างไร?

ฉันต้องการให้สเกลเนื้อหาขององค์ประกอบแบบอินไลน์ svg เมื่อขนาดไม่ใช่ภาษาท้องถิ่น แน่นอนว่าฉันสามารถแยกเป็นไฟล์และปรับให้เป็นแบบนั้นได้ index.html: <img src="foo.svg" style="width: 100%;" /> foo.svg: <svg width="123" height="456"></svg> อย่างไรก็ตามฉันต้องการเพิ่มสไตล์เพิ่มเติมให้กับ SVG ผ่าน CSS ดังนั้นการลิงก์ภายนอกจะไม่ใช่ตัวเลือก ฉันจะสร้างสเกล SVG แบบอินไลน์ได้อย่างไร

235 css html svg scaling

6

Chrome / Safari ไม่เติมเต็มความสูงของเฟล็กซ์พล็อต

ฉันต้องการมีเมนูแนวตั้งที่มีความสูงเฉพาะ เด็กแต่ละคนต้องเติมความสูงของผู้ปกครองและมีข้อความที่อยู่ตรงกลาง จำนวนลูกเป็นแบบสุ่มดังนั้นฉันต้องทำงานกับค่าแบบไดนามิก Div .containerมีจำนวนลูกที่สุ่ม ( .item) ที่จะต้องเติมความสูงของพาเรนต์เสมอ เพื่อให้บรรลุว่าฉันใช้ flexbox สำหรับการสร้างลิงก์ที่มีข้อความตรงกลางฉันใช้display: table-cellเทคนิค แต่การใช้ตารางแสดงผลต้องใช้ความสูง 100% ปัญหาของฉัน.item-inner { height: 100% }คือไม่ทำงานใน webkit (Chrome) มีการแก้ไขสำหรับปัญหานี้หรือไม่? หรือมีเทคนิคที่แตกต่างกันในการ.itemเติมเต็มความสูงของผู้ปกครองด้วยข้อความแนวตั้งที่ตรงกลาง ตัวอย่างที่นี่ jsFiddle ควรดูใน Firefox และ Chrome .container { height: 20em; display: flex; flex-direction: column; border: 5px solid black } .item { flex: 1; border-bottom: 1px solid white; …

235 css google-chrome webkit flexbox

12

ฉันจะแทนที่สไตล์ Bootstrap CSS ได้อย่างไร

ฉันต้องแก้ไขbootstrap.cssเพื่อให้พอดีกับเว็บไซต์ของฉัน ฉันรู้สึกดีกว่าที่จะสร้างcustom.cssไฟล์แยกต่างหากแทนที่จะแก้ไขbootstrap.cssโดยตรงเหตุผลหนึ่งที่ควรbootstrap.cssได้รับการอัปเดตฉันจะพยายามรวมการแก้ไขทั้งหมดของฉันอีกครั้ง ฉันจะเสียสละเวลาโหลดสำหรับสไตล์เหล่านี้ แต่มันเล็กน้อยสำหรับสไตล์ที่ฉันกำลังเอาชนะ ฉันจะแทนที่bootstrap.cssเพื่อที่ฉันจะลบสไตล์ของสมอ / คลาส? ตัวอย่างเช่นหากฉันต้องการลบกฎการจัดแต่งทรงผมทั้งหมดสำหรับlegend: legend { display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: inherit; color: #333333; border: 0; border-bottom: 1px solid #e5e5e5; } ฉันสามารถลบได้ทั้งหมดbootstrap.cssแต่ถ้าความเข้าใจเกี่ยวกับแนวปฏิบัติที่ดีที่สุดในการเอาชนะ CSS นั้นถูกต้องฉันควรทำอย่างไร เพื่อความชัดเจนฉันต้องการลบสไตล์ของตำนานทั้งหมดและใช้ค่า CSS ของพาเรนต์ ดังนั้นเมื่อรวมคำตอบของปราณาแล้วฉันจะทำสิ่งต่อไปนี้หรือไม่? legend { display: inherit !important; width: inherit !important; padding: inherit !important; margin-bottom: …

234 html css twitter-bootstrap

9

เปลี่ยนเคอร์เซอร์เป็นตัวชี้นิ้ว

ฉันมีสิ่งนี้aและฉันไม่รู้ว่าฉันต้องใส่ลงใน "onmouseover" เพื่อที่เคอร์เซอร์จะเปลี่ยนเป็นตัวชี้นิ้วเหมือนลิงค์ปกติ: <a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a> ฉันอ่านที่ไหนสักแห่งที่ฉันต้องใส่: onmouseover="cursor: hand (a pointing hand)" แต่มันไม่ทำงานสำหรับฉัน รวมทั้งฉันไม่แน่ใจว่านี่เป็น JavaScript, CSS หรือ HTML ธรรมดา ๆ

234 html css mouseevent

10

วิธีการจัด iframe ในแนวนอนเป็นศูนย์?

พิจารณาตัวอย่างต่อไปนี้: ( การสาธิตสด ) HTML: <div>div</div> <iframe></iframe> CSS: div, iframe { width: 100px; height: 50px; margin: 0 auto; background-color: #777; } ผลลัพธ์: ทำไมการiframeจัดแนวกลางจึงไม่เหมือนdiv? ฉันจะจัดตำแหน่งจากส่วนกลางได้อย่างไร?

234 html css iframe alignment center-align

3

CSS เพื่อตั้งค่าขนาดกระดาษ A4

ฉันต้องการจำลองกระดาษ A4 ในเว็บและอนุญาตให้พิมพ์หน้านี้ตามที่ปรากฏในเบราว์เซอร์ (Chrome, โดยเฉพาะ) ฉันตั้งขนาดองค์ประกอบเป็น 21 ซม. x 29.7 ซม. แต่เมื่อฉันส่งไปที่การพิมพ์ (หรือตัวอย่างก่อนพิมพ์) มันคลิปหน้าของฉัน ดูตัวอย่างสดนี้! body { margin: 0; padding: 0; background-color: #FAFAFA; font: 12pt "Tahoma"; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 21cm; min-height: 29.7cm; padding: 2cm; margin: 1cm auto; border: 1px #D3D3D3 solid; border-radius: …

233 css printing print-preview

8

ใช้สไตล์ CSS กับองค์ประกอบย่อย

ฉันต้องการใช้สไตล์เฉพาะกับตารางใน DIV กับคลาสเฉพาะ: หมายเหตุ: ฉันต้องการใช้ css-selector สำหรับองค์ประกอบของเด็ก ทำไม # 1 จึงใช้งานได้และ # 2 ไม่ได้ 1: div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;} 2: div.test th, td, caption {padding:40px 100px 40px 50px;} HTML: <html> <head> <style> div.test > th, td, caption {padding:40px 100px 40px 50px;} </style> </head> <body> …

232 css css-selectors

8

แสดงผลสตริงใน HTML และรักษาช่องว่างและการแบ่งบรรทัด

ฉันมีแอป MVC3 ที่มีหน้ารายละเอียด เป็นส่วนหนึ่งของที่ฉันมีคำอธิบาย (ดึงจาก db) ที่มีช่องว่างและบรรทัดใหม่ เมื่อมีการแสดงผลบรรทัดใหม่และช่องว่างจะถูกละเว้นโดย html ฉันต้องการเข้ารหัสช่องว่างและบรรทัดใหม่เพื่อไม่ให้ถูกละเว้น คุณจะทำอย่างไร ฉันลอง HTML.Encode แต่มันก็จบลงด้วยการแสดงการเข้ารหัส (และไม่ได้แม้แต่ในช่องว่างและบรรทัดใหม่ แต่ในอักขระพิเศษอื่น ๆ )

232 html css newline whitespace line-breaks

9

ขนาดอินพุตกับความกว้าง

<input name="txtId" type="text" size="20" /> หรือ <input name="txtId" type="text" style="width: 150px;" /> สิ่งที่เป็นรหัสข้ามเบราว์เซอร์ที่ดีที่สุด? แน่นอนมันขึ้นอยู่กับข้อกำหนด แต่ฉันอยากรู้ว่าผู้คนตัดสินใจอย่างไรและพื้นฐานอะไร

231 html css

29

ตาราง HTML ที่มีส่วนหัวคงที่หรือไม่

มีเทคนิค CSS / JavaScript ข้ามเบราว์เซอร์เพื่อแสดงตาราง HTML แบบยาวเช่นว่าส่วนหัวคอลัมน์จะคงที่บนหน้าจอและไม่เลื่อนไปตามส่วนของตาราง นึกถึงเอฟเฟกต์ "freeze panes" ใน Microsoft Excel ฉันต้องการที่จะสามารถเลื่อนดูเนื้อหาของตาราง แต่จะสามารถดูส่วนหัวคอลัมน์ที่ด้านบนเสมอ

231 javascript css html-table

14

วิธีจัดกึ่งกลางข้อความในแนวตั้งด้วยไอคอนขนาดใหญ่ที่น่ากลัวแบบอักษร?

ให้บอกว่าฉันมีปุ่มบูตที่มีไอคอนตัวอักษรที่ยอดเยี่ยมและข้อความบางส่วน: <div> <i class='icon icon-2x icon-camera'></i> hello world </div> ฉันจะทำให้ข้อความปรากฏกึ่งกลางในแนวตั้งได้อย่างไร ข้อความอยู่ในแนวเดียวกับขอบด้านล่างของไอคอนทันที: http://jsfiddle.net/V7DLm/1/ แก้ไข: ฉันมีทางออกที่เป็นไปได้: http://jsfiddle.net/CLdeG/1/แต่มันให้ความรู้สึกค่อนข้างยุ่งเหยิง - แนะนำแท็ก p เพิ่มเติมใช้การดึงซ้ายและแสดง: ตาราง บางทีใครบางคนสามารถแนะนำวิธีที่ง่ายขึ้น

231 html css font-awesome

15

วิธีการสร้างเงาเพียงด้านเดียวขององค์ประกอบ?

มีวิธีวางเงาที่ด้านล่างเท่านั้นหรือไม่ ฉันมีเมนูที่มี 2 ภาพติดกัน ฉันไม่ต้องการเงาที่เหมาะสมเพราะมันซ้อนทับภาพที่ถูกต้อง ฉันไม่ชอบที่จะใช้ภาพสำหรับสิ่งนี้ดังนั้นจึงมีวิธีที่จะวางเฉพาะที่ด้านล่าง: box-shadow-bottom: 10px #FFF; หรือคล้ายกัน -moz-box-shadow: 0px 3px 3px #000; -webkit-box-shadow: 0px 3px 3px #000; box-shadow-bottom: 5px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

230 css

13

CSS สอง divs ติดกัน

ฉันต้องการที่จะให้ทั้งสอง<div>อยู่ติดกัน ด้านขวา<div>ประมาณ 200px; และด้านซ้าย<div>จะต้องเติมส่วนที่เหลือของความกว้างของหน้าจอ? ฉันจะทำสิ่งนี้ได้อย่างไร

230 html css

9

ตัวเลือก CSS3: ประเภทแรกที่มีชื่อคลาสหรือไม่

เป็นไปได้ไหมที่จะใช้ตัวเลือก CSS3 :first-of-typeเพื่อเลือกองค์ประกอบแรกที่มีชื่อคลาสที่กำหนด ฉันไม่ประสบความสำเร็จในการทดสอบดังนั้นฉันจึงคิดว่าไม่ รหัส ( http://jsfiddle.net/YWY4L/ ): p:first-of-type {color:blue} p.myclass1:first-of-type {color:red} .myclass2:first-of-type {color:green} <div> <div>This text should appear as normal</div> <p>This text should be blue.</p> <p class="myclass1">This text should appear red.</p> <p class="myclass2">This text should appear green.</p> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

230 css css-selectors

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