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

11

ฉันกำลังทำงานกับไซต์ที่มีการแทรกตัวแบ่งบรรทัดเช่นเดียวกับ<br>ในหัวเรื่องบางส่วน สมมติว่าฉันไม่สามารถแก้ไขซอร์ส HTML ได้มีวิธีใดบ้างที่ CSS ฉันสามารถเพิกเฉยต่อช่วงพักเหล่านี้ได้ ฉันกำลังเพิ่มประสิทธิภาพไซต์บนมือถือดังนั้นฉันจึงไม่ต้องการใช้ JavaScript จริงๆ

115 css

8

ฉันจะกำหนดช่องว่างแนวตั้งระหว่างรายการได้อย่างไร

ภายใน<ul>องค์ประกอบสามารถจัดรูปแบบระยะห่างแนวตั้งระหว่างบรรทัดได้อย่างชัดเจนด้วยแอตทริบิวต์ line-height คำถามของฉันคือภายใน<ul>องค์ประกอบฉันจะกำหนดระยะห่างแนวตั้งระหว่างรายการได้อย่างไร

115 html css html-lists

10

แอปพลิเคชันไม่ดึงไฟล์. css (flask / python)

ฉันกำลังแสดงเทมเพลตซึ่งฉันกำลังพยายามจัดรูปแบบด้วยสไตล์ชีตภายนอก โครงสร้างไฟล์มีดังนี้ /app - app_runner.py /services - app.py /templates - mainpage.html /styles - mainpage.css mainpage.html มีลักษณะดังนี้ <html> <head> <link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css"> </head> <body>  ไม่มีการใช้สไตล์ของฉันเลย มีส่วนเกี่ยวข้องกับข้อเท็จจริงที่ว่า html เป็นเทมเพลตที่ฉันกำลังแสดงอยู่หรือไม่? งูเหลือมมีลักษณะเช่นนี้ return render_template("mainpage.html", variables..) ฉันรู้ว่าสิ่งนี้ใช้ได้ผลดีเพราะฉันยังสามารถแสดงเทมเพลตได้ อย่างไรก็ตามเมื่อฉันพยายามย้ายโค้ดสไตล์จากบล็อก "style" ภายในแท็ก "head" ของ html ไปยังไฟล์ภายนอกการจัดแต่งทรงผมทั้งหมดก็หายไปโดยเหลือเพียงหน้า html ใครเห็นข้อผิดพลาดเกี่ยวกับโครงสร้างไฟล์ของฉัน

115 python html css templates flask

5

ตำแหน่งของฉัน: Sticky Element ไม่เหนียวเมื่อใช้ flexbox

ฉันติดอยู่กับเรื่องนี้เล็กน้อยและคิดว่าฉันจะแชร์สิ่งนี้position: sticky+ flexbox gotcha: เหนียว Div ของฉันทำงานได้ดีจนกระทั่งฉันเปลี่ยนมุมมองของฉันไปยังคอนเทนเนอร์กล่องดิ้นและทันใดนั้น div ก็ไม่เหนียวเมื่อถูกห่อด้วยแม่แบบ flexbox .flexbox-wrapper { display: flex; height: 600px; } .regular { background-color: blue; } .sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: red; } <div class="flexbox-wrapper"> <div class="regular"> This is the regular box </div> <div class="sticky"> This is the sticky box …

115 css flexbox css-position sticky

8

รักษาอัตราส่วนของภาพเมื่อเปลี่ยนความสูง

เมื่อใช้โมเดล CSS flex box ฉันจะบังคับให้รูปภาพคงอัตราส่วนได้อย่างไร JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/ สังเกตว่ารูปภาพยืดหรือหดเพื่อให้เต็มความกว้างของคอนเทนเนอร์ ไม่เป็นไร แต่เราสามารถยืดหรือหดความสูงเพื่อรักษาสัดส่วนของภาพได้หรือไม่? HTML <div class="slider"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> </div> CSS .slider { display: flex; } .slider img { margin: 0 5px; }

114 html css flexbox

2

ตัวเลือก CSS โดยแอตทริบิวต์สไตล์อินไลน์

มีตัวเลือก CSS เพื่อเลือกองค์ประกอบนี้ตามค่าแอตทริบิวต์สไตล์อินไลน์หรือไม่ <div style='display:block'>...</div> สิ่งที่ต้องการ div[cssAttribute=cssValue]

114 html css css-selectors inline-styles

5

วิธีจัดกึ่งกลาง div ในแนวนอนภายใน div หลัก

ฉันจะศูนย์วิธีdivแนวนอนภายในแม่divด้วยCSS? <div id='parent' style='width: 100%;'> <div id='child' style='width: 50px; height: 100px;'>Text</div> </div>

114 html css

5

สีเส้นขอบที่กำหนดเองของสามเหลี่ยม CSS

กำลังพยายามใช้สีฐานสิบหกที่กำหนดเองสำหรับสามเหลี่ยม css ของฉัน (เส้นขอบ) อย่างไรก็ตามเนื่องจากมันใช้คุณสมบัติเส้นขอบฉันจึงไม่แน่ใจว่าจะทำอย่างไร ฉันต้องการหลีกเลี่ยง javascript และ css3 เพียงเพราะความเข้ากันได้ ฉันพยายามให้สามเหลี่ยมมีพื้นหลังสีขาวที่มีเส้นขอบ 1px (รอบ ๆ ด้านที่ทำมุมของสามเหลี่ยม) ด้วยสี # CAD5E0 เป็นไปได้หรือไม่ นี่คือสิ่งที่ฉันมีจนถึงตอนนี้: .container { margin-left: 15px; width: 200px; background: #FFFFFF; border: 1px solid #CAD5E0; padding: 4px; position: relative; min-height: 200px; } .container:after { content: ''; display: block; position: absolute; top: 10px; left: …

114 css border css-shapes

11

อักขระ Unicode เป็นสัญลักษณ์แสดงหัวข้อย่อยสำหรับรายการใน CSS

ฉันจำเป็นต้องใช้ตัวอย่างเช่นสัญลักษณ์รูปดาว (★) เป็นสัญลักษณ์แสดงหัวข้อย่อยสำหรับรายการ ฉันได้อ่านโมดูล CSS3: รายการที่อธิบายวิธีใช้ข้อความที่กำหนดเองเป็นสัญลักษณ์แสดงหัวข้อย่อย แต่ไม่ได้ผลสำหรับฉัน ฉันคิดว่าเบราว์เซอร์ไม่รองรับ::markerองค์ประกอบหลอก ฉันจะทำได้อย่างไรโดยไม่ต้องใช้ภาพ

114 html css html-lists

8

เปลี่ยนสีข้อความตามความสว่างของพื้นที่พื้นหลังที่ปกคลุม?

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

114 javascript jquery html css sass

5

เลือกองค์ประกอบที่เกิดขึ้นก่อนหลังจากองค์ประกอบอื่น

ฉันมีโค้ด HTML ต่อไปนี้ในหน้า: <h4>Some text</h4> <p> Some more text! </p> ในของ.cssฉันฉันมีตัวเลือกต่อไปนี้เพื่อจัดรูปแบบh4องค์ประกอบ โค้ด HTML ด้านบนเป็นเพียงส่วนเล็ก ๆ ของโค้ดทั้งหมด มีอีกหลายdivอย่างที่ห่อหุ้มไว้เป็นของ shadowbox: #sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4 { color : #614E43; margin-top : 5px; margin-left : 6px; } ดังนั้นฉันจึงมีสไตล์ที่ถูกต้องสำหรับh4องค์ประกอบของฉันแต่ฉันก็ต้องการจัดสไตล์pแท็กใน HTML ของฉันด้วย เป็นไปได้ด้วย CSS-selectors หรือไม่? และถ้าใช่ฉันจะทำอย่างไร

114 html css css-selectors

1

ความแตกต่างระหว่างความง่ายในการเปลี่ยน CSS3 และการทำให้ง่ายออก

ความแตกต่างระหว่างการเปลี่ยน CSS3 ฯease-in, ease-outฯลฯ ?

114 css css-transitions

9

วิธีใช้แบบอักษร San Francisco ใหม่ของ Apple บนหน้าเว็บ

ฉันต้องการใช้แบบอักษรใหม่ของ San Francisco บนไซต์ ฉันพยายามแล้ว: font: 'San Francisco', Helvetica, Arial, san-serif; ไม่มีประโยชน์ ฉันได้ลองตอบคำถามนี้แล้ว แต่@font-faceไม่ใช่วิธีแก้ปัญหาที่นี่

114 css

4

ตัวเลือกเมาส์ลงใน CSS คืออะไร?

ฉันสังเกตเห็นว่าปุ่มและองค์ประกอบอื่น ๆ มีสไตล์เริ่มต้นและทำงานใน 3 ขั้นตอน ได้แก่ มุมมองปกติมุมมองโฮเวอร์ / โฟกัสและมุมมองแบบเลื่อนลง / คลิกใน CSS ฉันสามารถเปลี่ยนรูปแบบของมุมมองปกติและมุมมองโฮเวอร์ได้ดังนี้: button{ background:#333; color:#FFF; } button:hover{ background:#000; color:#EEE; } แต่ฉันจะเลือกมูสดาวน์ได้อย่างไร? ฉันต้องการสิ่งนี้: button:mousedown{ //some styling } ขอบคุณ

114 html css css-selectors

9

จัดแนวบล็อกแบบอินไลน์สองบล็อกซ้ายและขวาในบรรทัดเดียวกัน

ฉันจะจัดเรียงบล็อกแบบอินไลน์สองบล็อกเพื่อให้บล็อกหนึ่งอยู่ทางซ้ายและอีกอันอยู่ในบรรทัดเดียวกันได้อย่างไร ทำไมถึงยากขนาดนี้? มีบางอย่างเช่น \ hfill ของ LaTeX ที่สามารถใช้ช่องว่างระหว่างพวกเขาเพื่อให้บรรลุสิ่งนี้หรือไม่? ฉันไม่ต้องการใช้โฟลทเพราะด้วยอินไลน์บล็อกฉันสามารถจัดแนวเส้นฐานได้ และเมื่อหน้าต่างมีขนาดเล็กเกินไปสำหรับทั้งคู่ด้วยบล็อกแบบอินไลน์ฉันสามารถเปลี่ยนการจัดแนวข้อความเป็นกึ่งกลางได้ การวางตำแหน่งสัมพัทธ์ (พาเรนต์) + ค่าสัมบูรณ์ (องค์ประกอบ) มีปัญหาเช่นเดียวกับการลอยตัว HTML5: <header> <h1>Title</h1> <nav> <a>A Link</a> <a>Another Link</a> <a>A Third Link</a> </nav> </header> css: header { //text-align: center; // will set in js when the nav overflows (i think) } h1 { display: inline-block; …

114 css html

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