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

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

11
Angular-cli จาก css เป็น scss
ฉันได้อ่านเอกสารซึ่งระบุว่าหากฉันต้องการใช้scssฉันต้องรันคำสั่งต่อไปนี้: ng set defaults.styleExt scss แต่เมื่อฉันทำและสร้างไฟล์นั้นฉันยังคงได้รับข้อผิดพลาดนี้ในคอนโซลของฉัน: styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/Egen/Code/angular/src/styles.css'(…)

16
วิธีทำให้ Bootstrap 4 การ์ดมีความสูงเท่ากันในคอลัมน์การ์ด?
ฉันใช้ Bootstrap 4 alpha 2 และใช้ประโยชน์จากการ์ด โดยเฉพาะอย่างยิ่งฉันกำลังทำงานกับตัวอย่างนี้ที่นำมาจากเอกสารอย่างเป็นทางการ ฉันจะทำให้การ์ดทั้งหมดมีความสูงเท่ากันได้อย่างไร? ตอนนี้ฉันคิดได้ทั้งหมดคือการตั้งค่ากฎ CSS ต่อไปนี้: .card { min-height: 200px; } แต่นั่นเป็นเพียงวิธีแก้ปัญหาแบบฮาร์ดโค้ดที่ใช้ไม่ได้กับเคสทั่วไป รหัสในมุมมองของฉันเหมือนกับรหัสในเอกสารคือ: <div class="card-columns"> <div class="card"> <img class="card-img-top" data-src="..." alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title that wraps to a new line</h4> <p class="card-text">This is a longer card with supporting text below as …

2
รูปแบบการก่ออิฐ CSS เท่านั้น
ฉันจำเป็นต้องใช้รูปแบบการก่ออิฐค่อนข้างทำงาน อย่างไรก็ตามด้วยเหตุผลหลายประการฉันไม่ต้องการใช้ JavaScript เพื่อทำมัน พารามิเตอร์: องค์ประกอบทั้งหมดมีความกว้างเท่ากัน องค์ประกอบมีความสูงที่ไม่สามารถคำนวณฝั่งเซิร์ฟเวอร์ (รูปภาพพร้อมข้อความจำนวนมาก) ฉันสามารถอยู่กับคอลัมน์จำนวนคงที่ถ้าฉันต้อง มีวิธีการแก้ปัญหาที่น่ารำคาญนี้ที่ทำงานในเบราว์เซอร์ที่ทันสมัยคุณสมบัติcolumn-count ปัญหาของการแก้ปัญหานั้นก็คือการเรียงลำดับองค์ประกอบในคอลัมน์: ในขณะที่ฉันต้องการองค์ประกอบที่จะสั่งซื้อในแถวอย่างน้อยประมาณ: แนวทางที่ฉันได้ลองแล้วไม่ได้ผล: ทำรายการdisplay: inline-block: เปลืองพื้นที่แนวตั้ง ทำรายการfloat: left: ฮ่า ๆ ๆ ตอนนี้ฉันสามารถเปลี่ยนการเรนเดอร์ฝั่งเซิร์ฟเวอร์และเรียงลำดับรายการใหม่โดยหารจำนวนรายการด้วยจำนวนคอลัมน์ แต่มันซับซ้อนข้อผิดพลาดง่าย (ขึ้นอยู่กับวิธีที่เบราว์เซอร์ตัดสินใจแบ่งรายการเป็นคอลัมน์) ดังนั้นฉันต้องการ เพื่อหลีกเลี่ยงถ้าเป็นไปได้ มีเวทเฟล็กบ็อกซ์แบบใหม่ที่ทำให้สิ่งนี้เป็นไปได้หรือไม่?
134 html  css  flexbox  css-grid 

4
Fade Effect บน Link Hover?
ในหลาย ๆ ไซต์เช่นhttp://www.clearleft.comคุณจะสังเกตเห็นว่าเมื่อลิงก์ถูกวางไว้เหนือลิงก์เหล่านี้จะจางหายไปเป็นสีที่แตกต่างกันเมื่อเทียบกับการเปลี่ยนทันทีซึ่งเป็นการกระทำเริ่มต้น ฉันคิดว่า JavaScript ใช้เพื่อสร้างเอฟเฟกต์นี้มีใครรู้บ้างไหม?
134 css  hover  fade  effect 

3
CSS @ font-face -“ src: local ('☺')” หมายความว่าอย่างไร
ฉันใช้@font-faceเป็นครั้งแรกและดาวน์โหลดชุดแบบอักษรจาก fontquirrel โค้ดที่แนะนำให้ใส่ลงใน CSS ของฉันคือ: @font-face { font-family: 'junctionregularRegular'; src: url('Junction-webfont.eot'); src: local('☺'), url('Junction-webfont.woff') format('woff'), url('Junction-webfont.ttf') format('truetype'), url('Junction-webfont.svg#webfontoNEpZXy2') format('svg'); } ตอนนี้สิ่งที่ใบหน้ายิ้มทำให้ฉันนิ่งงัน แต่จำนวน URL ใน src ก็เช่นกัน - ทำไมพวกเขาถึงแนะนำไฟล์จำนวนมากและทั้งหมดจะถูกส่งไปยังเบราว์เซอร์เมื่อมีการแสดงผลเพจหรือไม่? มีอันตรายใด ๆ ในการลบทั้งหมดยกเว้น. ttf?
134 css  font-face 

10
จะทำให้ IFrame ตอบสนองใน iOS Safari ได้อย่างไร
ปัญหาคือเมื่อคุณต้องใช้ IFrames เพื่อแทรกเนื้อหาลงในเว็บไซต์จากนั้นในโลกเว็บสมัยใหม่คาดว่า IFrame จะตอบสนองได้เช่นกัน ในทางทฤษฎีมันง่ายเพียงแค่ผู้ช่วยใช้<iframe width="100%"></iframe>หรือตั้งค่าความกว้างของ CSS iframe { width: 100%; }อย่างไรก็ตามในทางปฏิบัติมันไม่ได้ง่ายขนาดนั้น แต่ก็สามารถทำได้ หากiframeเนื้อหาตอบสนองอย่างสมบูรณ์และสามารถปรับขนาดได้เองโดยไม่มีแถบเลื่อนภายใน iOS Safari จะปรับขนาดiframeโดยไม่มีปัญหาใด ๆ หากคุณพิจารณารหัสต่อไปนี้: <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9,10,11" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Iframe Isolation Test</title> <style type="text/css" rel="stylesheet"> #Main { padding: 10px; } </style> </head> <body> <h1>Iframe Isolation Test 13.17</h1> <div …
134 html  css  iframe 


14
สร้างไอคอน Font Awesome เป็นวงกลม?
ฉันใช้ฟอนต์ที่ยอดเยี่ยมในบางโปรเจ็กต์ แต่ฉันมีบางอย่างที่อยากทำกับฟอนต์ไอคอนน่ากลัวฉันสามารถเรียกไอคอนแบบนี้ได้อย่างง่ายดาย: <i class="fa fa-lock"></i> เป็นไปได้ไหมที่ไอคอนทั้งหมดจะอยู่ในวงกลมกลมที่มีเส้นขอบ? สิ่งนี้ฉันมีภาพ: การใช้ i { background-color: white; border-radius: 50%; border: 1x solid grey; padding: 10px; } จะทำเอฟเฟกต์ แต่ปัญหาคือไอคอนมักจะใหญ่กว่าที่ข้อความหรือองค์ประกอบข้างๆมีวิธีแก้ไขอย่างไร?
134 css  font-awesome 

7
css overflow - มีข้อความเพียง 1 บรรทัด
ฉันมีdivสไตล์ css ต่อไปนี้: width:335px; float:left; overflow:hidden; padding-left:5px; เมื่อฉันแทรกdivข้อความยาวๆ เข้าไปในนั้นมันจะแตกเป็นบรรทัดใหม่และแสดงข้อความทั้งหมด สิ่งที่ฉันต้องการคือมีข้อความเพียงบรรทัดเดียวที่จะไม่แตกบรรทัด เมื่อข้อความยาวฉันต้องการให้ข้อความล้นนี้หายไป ฉันคิดจะตั้งความสูง แต่ดูเหมือนจะผิด บางทีถ้าฉันเพิ่มความสูงที่เหมือนกับฟอนต์มันควรจะใช้งานได้และไม่ก่อให้เกิดปัญหาในเบราว์เซอร์อื่น? ฉันจะทำเช่นนั้นได้อย่างไร?
134 html  css  overflow 

13
การวางตำแหน่งองค์ประกอบ <div> ตรงกลางหน้าจอ
ฉันต้องการจัดตำแหน่งองค์ประกอบ&lt;div&gt;(หรือ a &lt;table&gt;) ที่กึ่งกลางของหน้าจอโดยไม่คำนึงถึงขนาดหน้าจอ กล่าวอีกนัยหนึ่งช่องว่างด้านซ้ายบน "ด้านบน" และ "ด้านล่าง" ควรเท่ากันและช่องว่างด้านซ้ายบนด้านขวาและด้านซ้ายควรเท่ากัน ฉันต้องการทำสิ่งนี้ให้สำเร็จด้วย CSS เท่านั้น ฉันได้ลองทำสิ่งต่อไปนี้แล้ว แต่ใช้งานไม่ได้: &lt;body&gt; &lt;div style="top:0px; border:1px solid red;"&gt; &lt;table border="1" align="center"&gt; &lt;tr height="100%"&gt; &lt;td height="100%" width="100%" valign="middle" align="center"&gt; We are launching soon! &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; หมายเหตุ: เป็นวิธีที่ดีหาก&lt;div&gt;องค์ประกอบ (หรือ&lt;table&gt;) เลื่อนไปพร้อมกับเว็บไซต์หรือไม่ เพียงต้องการให้อยู่กึ่งกลางเมื่อหน้าโหลด
134 javascript  css  html 

7
วิธีจัดตำแหน่งตารางที่กึ่งกลางของ div ในแนวนอนและแนวตั้ง
เราสามารถตั้งค่าภาพเป็นภาพพื้นหลังได้&lt;div&gt;ดังนี้ &lt;style&gt; #test { background-image: url(./images/grad.gif); background-repeat: no-repeat; background-position: center center; width:80%; margin-left:10%; height:200px; background-color:blue; } &lt;/style&gt; &lt;div id="test"&gt;&lt;/div&gt; ฉันต้องการตั้งตารางที่กึ่งกลางของ&lt;div&gt;แนวนอนและแนวตั้ง มีการใช้โซลูชันข้ามเบราว์เซอร์CSSหรือไม่?
134 css 

2
: after vs. :: after
มีความแตกต่างในการทำงานระหว่าง CSS 2.1 :afterและ::afterตัวเลือกหลอกCSS 3 หรือไม่(นอกเหนือจาก::afterไม่รองรับในเบราว์เซอร์รุ่นเก่า) มีเหตุผลในทางปฏิบัติที่จะใช้ข้อกำหนดใหม่กว่านี้หรือไม่?

15
ใช้ CSS เพื่อเพิ่มเครื่องหมายดอกจัน 'ฟิลด์ที่ต้องระบุ' เพื่อสร้างอินพุต
เป็นวิธีที่ดีในการเอาชนะความจริงที่โชคร้ายที่รหัสนี้จะไม่ทำงานตามที่ต้องการคืออะไร: &lt;div class="required"&gt; &lt;label&gt;Name:&lt;/label&gt; &lt;input type="text"&gt; &lt;/div&gt; &lt;style&gt; .required input:after { content:"*"; } &lt;/style&gt; ในโลกที่สมบูรณ์แบบทุกสิ่งที่ต้องการinputจะได้รับเครื่องหมายดอกจันน้อยซึ่งบ่งบอกว่าจำเป็นต้องมีข้อมูล วิธีการแก้ปัญหานี้เป็นไปไม่ได้เนื่องจาก CSS ถูกแทรกหลังจากเนื้อหาองค์ประกอบไม่ใช่หลังจากองค์ประกอบเอง แต่สิ่งที่ชอบจะเหมาะ ในไซต์ที่มีฟิลด์ที่ต้องการเป็นพันฉันสามารถย้ายเครื่องหมายดอกจันหน้าอินพุตโดยเปลี่ยนหนึ่งบรรทัดเป็นหนึ่งบรรทัด ( :afterเป็น:before) หรือฉันสามารถย้ายไปยังจุดสิ้นสุดของป้ายกำกับได้ (.required label:after ) หรือด้านหน้าฉลากหรือ ตำแหน่งบนกล่องบรรจุ ฯลฯ ... นี่เป็นสิ่งสำคัญไม่เพียง แต่ในกรณีที่ฉันเปลี่ยนใจเกี่ยวกับสถานที่ที่จะใส่เครื่องหมายดอกจันทุกที่ แต่สำหรับกรณีแปลก ๆ ที่รูปแบบฟอร์มไม่อนุญาตให้ใช้เครื่องหมายดอกจันในตำแหน่งมาตรฐาน นอกจากนี้ยังทำงานได้ดีกับการตรวจสอบความถูกต้องที่ตรวจสอบแบบฟอร์มหรือไฮไลต์การควบคุมที่สมบูรณ์ที่ไม่ถูกต้อง สุดท้ายไม่เพิ่มมาร์กอัปเพิ่มเติม มีวิธีแก้ปัญหาที่ดีที่มีข้อดีของโค้ดที่เป็นไปไม่ได้ทั้งหมดหรือเกือบทั้งหมดหรือไม่?

6
ลบรัศมีขอบออกจาก Select tag ใน bootstrap 3
ดูเหมือนจะเป็นปัญหาเล็กน้อย แต่ฉันคิดไม่ออก ในเว็บไซต์ของ Bootstraps พวกเขามีตัวอย่างเลือก เมื่อดูโค้ดดูเหมือนว่าจะมีรัศมีขอบเป็น 4 ในองค์ประกอบที่เลือกนั้น ความหวังของฉันคือการเปลี่ยนรัศมีขอบเป็น 0 จะลบรัศมีขอบออกจากองค์ประกอบที่เลือกอย่างไรก็ตามนั่นไม่ใช่กรณี - ดังที่เห็นในภาพด้านล่าง ฉันได้สำรวจ CSS ทั้งหมดที่เปลี่ยนแปลงองค์ประกอบที่เลือกนั้น แต่ดูเหมือนว่าจะไม่มีการลบรัศมีขอบ


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