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

25

ฉันจะลบเส้นขอบออกจาก iframe ที่ฝังอยู่ในเว็บแอปได้อย่างไร ตัวอย่างของ iframe คือ: <iframe src="myURL" width="300" height="300">Browser not compatible.</iframe> ฉันต้องการเปลี่ยนจากเนื้อหาในหน้าของฉันไปเป็นเนื้อหาของ iframe ให้ราบรื่นโดยสมมติว่าสีพื้นหลังมีความสอดคล้องกัน เบราว์เซอร์เป้าหมายคือ IE6 เท่านั้นและน่าเสียดายที่โซลูชันสำหรับผู้อื่นจะไม่ช่วย

707 html css iframe internet-explorer-6 noborder

20

ฉันสามารถใช้ a: before หรือ: หลังจาก pseudo-element บนฟิลด์อินพุตได้หรือไม่?

ฉันกำลังพยายามใช้:afterองค์ประกอบหลอก CSS บนinputเขตข้อมูล แต่มันไม่ทำงาน ถ้าฉันใช้กับ a spanมันใช้งานได้ดี <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> ใช้งานได้ (ทำให้ยิ้มหลังจาก "buu!" และก่อน "เพิ่มเติม") <span class="mystyle">buuu!</span>a some more สิ่งนี้ใช้ไม่ได้ - มีเพียงบางสีเท่านั้นค่าสีแดง แต่ไม่มีรอยยิ้ม <input class="mystyle" type="text" value="someValue"> ผมทำอะไรผิดหรือเปล่า? ฉันควรใช้ตัวเลือกหลอกอื่น หมายเหตุ: ฉันไม่สามารถเพิ่มสิ่งspanรอบตัวของฉันinputเพราะมันถูกสร้างขึ้นโดยการควบคุมของบุคคลที่สาม

686 html css pseudo-element css-content

15

ผู้จัดการ CSS Explosion

ฉันใช้ CSS เป็นอย่างมากสำหรับเว็บไซต์ที่ฉันใช้งานอยู่ ตอนนี้ CSS สไตล์ทั้งหมดจะถูกนำไปใช้ในแต่ละแท็กดังนั้นตอนนี้ฉันกำลังพยายามที่จะย้ายไปที่สไตล์ภายนอกเพิ่มเติมเพื่อช่วยในการเปลี่ยนแปลงในอนาคต แต่ตอนนี้ปัญหาคือฉันสังเกตว่าฉันได้รับ "CSS Explosion" ฉันกลายเป็นเรื่องยากที่จะตัดสินใจว่าจะจัดระเบียบและเก็บข้อมูลนามธรรมภายในไฟล์ CSS ได้ดีที่สุด ฉันใช้divแท็กจำนวนมากในเว็บไซต์ย้ายจากเว็บไซต์ที่ใช้ตารางเป็นหลัก ดังนั้นฉันจะได้รับตัวเลือก CSS จำนวนมากที่มีลักษณะเช่นนี้: div.title { background-color: blue; color: white; text-align: center; } div.footer { /* Styles Here */ } div.body { /* Styles Here */ } /* And many more */ มันยังไม่เลวร้ายนัก แต่ในขณะที่ฉันเป็นผู้เริ่มต้นฉันสงสัยว่าคำแนะนำจะทำอย่างไรดีที่สุดในการจัดระเบียบส่วนต่าง ๆ ของไฟล์ CSS ฉันไม่ต้องการให้มีแอตทริบิวต์ …

682 css organization

12

จะจัดแนวรายการยืดหยุ่นได้อย่างไร

มีวิธี flexbox-ish มากขึ้นในการจัดแนว "ที่อยู่ติดต่อ" ทางด้านขวามากกว่าที่จะใช้position: absoluteหรือไม่? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="c"><a …

681 html css flexbox

25

วิธีจัดองค์ประกอบ "ตำแหน่ง: สัมบูรณ์" ให้อยู่ตรงกลาง

ฉันมีปัญหาตรงกลางองค์ประกอบที่มีแอตทริบิวต์ชุดposition absoluteไม่มีใครรู้ว่าทำไมภาพไม่ได้อยู่ตรงกลาง? body { text-align: center; } #slideshowWrapper { margin-top: 50px; text-align: center; } ul#slideshow { list-style: none; position: relative; margin: auto; } ul#slideshow li { position: absolute; } ul#slideshow li img { border: 1px solid #ccc; padding: 4px; height: 450px; } <body> <div id="slideshowWrapper"> <ul id="slideshow"> <li><img src="img/dummy1.JPG" alt="Dummy …

679 html css css-position centering

5

ใน CSS Flexbox เหตุใดจึงไม่มีคุณสมบัติ "ปรับรายการ" และ "จัดชิดขอบ"

พิจารณาแกนหลักและแกนไขว้ของเฟล็กซ์คอนเทนเนอร์: ที่มา: W3C ในการจัดแนวไอเท็มแบบเฟล็กซ์ตามแกนหลักมีหนึ่งคุณสมบัติ: justify-content ในการจัดแนวไอเท็มแบบเฟล็กซ์ตามแนวแกนข้ามมีคุณสมบัติสามอย่าง: align-content align-items align-self ในภาพด้านบนแกนหลักเป็นแนวนอนและแกนไขว้เป็นแนวตั้ง นี่เป็นทิศทางเริ่มต้นของ flex container อย่างไรก็ตามทิศทางเหล่านี้สามารถเปลี่ยนได้อย่างง่ายดายด้วยflex-directionคุณสมบัติ /* main axis is horizontal, cross axis is vertical */ flex-direction: row; flex-direction: row-reverse; /* main axis is vertical, cross axis is horizontal */ flex-direction: column; flex-direction: column-reverse; (แกนไขว้จะตั้งฉากกับแกนหลักเสมอ) ประเด็นของฉันในการอธิบายวิธีการทำงานของแกนคือดูเหมือนจะไม่มีอะไรพิเศษเกี่ยวกับทิศทางใดทิศทางหนึ่ง แกนหลักแกนไขว้พวกเขาทั้งสองมีความสำคัญเท่าเทียมกันและflex-directionทำให้สามารถสลับไปมาได้ง่าย เหตุใดแกนไขว้จึงได้รับคุณสมบัติการจัดตำแหน่งสองแบบเพิ่มเติม ทำไมalign-contentและถูกalign-itemsรวมเข้าในคุณสมบัติเดียวสำหรับแกนหลัก? ทำไมแกนหลักไม่ได้รับjustify-selfคุณสมบัติ? สถานการณ์ที่คุณสมบัติเหล่านี้มีประโยชน์: วางสิ่งของแบบยืดหยุ่นไว้ที่มุมของภาชนะบรรจุแบบยืดหยุ่น …

677 css flexbox language-lawyer w3c

12

Flexbox: จัดกึ่งกลางในแนวนอนและแนวตั้ง

วิธีจัดกึ่งกลาง div ในแนวนอนและแนวตั้งภายในคอนเทนเนอร์โดยใช้ flexbox ในตัวอย่างด้านล่างฉันต้องการให้แต่ละตัวเลขด้านล่างซึ่งกันและกัน (เป็นแถว) ซึ่งอยู่กึ่งกลางแนวนอน .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; } …

671 html css flexbox

4

wildcard * ใน CSS สำหรับคลาส

ฉันมี divs เหล่านี้ที่ผมจัดแต่งทรงผมด้วย.tocolorแต่ฉันยังต้องระบุที่ไม่ซ้ำ 1,2,3,4 ฯลฯ tocolor-1ดังนั้นฉันเพิ่มว่ามันเป็นชั้นอื่น <div class="tocolor tocolor-1"> tocolor 1 </div> <div class="tocolor tocolor-2"> tocolor 2 </div> <div class="tocolor tocolor-3"> tocolor 3 </div> <div class="tocolor tocolor-4"> tocolor 4 </div> .tocolor{ background: red; } มีวิธีที่จะมีเพียงแค่ 1 คลาสtocolor-*หรือไม่ ฉันพยายามใช้ไวด์การ์ด*เหมือนใน css นี้ แต่มันไม่ทำงาน .tocolor-*{ background: red; }

670 css css-selectors wildcard

30

ทำไมไม่ใช้ตารางสำหรับการจัดวางใน HTML? [ปิด]

ตามที่เป็นอยู่ในปัจจุบันคำถามนี้ไม่เหมาะสำหรับรูปแบบคำถาม & คำตอบของเรา เราคาดหวังว่าคำตอบจะได้รับการสนับสนุนจากข้อเท็จจริงการอ้างอิงหรือความเชี่ยวชาญ แต่คำถามนี้อาจเรียกร้องให้มีการอภิปรายโต้แย้งโต้แย้งหรือการอภิปรายเพิ่มเติม หากคุณรู้สึกว่าคำถามนี้สามารถปรับปรุงและเปิดใหม่ได้โปรดไปที่ศูนย์ช่วยเหลือเพื่อขอคำแนะนำ ปิดให้บริการใน8 ปีที่ผ่านมา ล็อคแล้ว คำถามและคำตอบนี้ถูกล็อคเนื่องจากคำถามอยู่นอกหัวข้อ แต่มีความสำคัญทางประวัติศาสตร์ ขณะนี้ไม่ยอมรับคำตอบหรือการโต้ตอบใหม่ ดูเหมือนว่าเป็นความคิดเห็นทั่วไปที่ไม่ควรใช้ตารางสำหรับเค้าโครงใน HTML ทำไม? ฉันไม่เคยเห็นความขัดแย้งที่ดีในเรื่องนี้ คำตอบปกติคือ: เป็นการดีที่จะแยกเนื้อหาออกจากเค้าโครงแต่นี่เป็นข้อโต้แย้งที่ผิดพลาด Cliche คิด ฉันเดาว่าเป็นความจริงที่การใช้องค์ประกอบตารางสำหรับเค้าโครงมีส่วนเกี่ยวข้องกับข้อมูลตารางเพียงเล็กน้อย แล้วอะไรล่ะ เจ้านายของฉันสนใจไหม ผู้ใช้ของฉันสนใจหรือไม่ บางทีฉันหรือเพื่อนนักพัฒนาของฉันที่ต้องดูแลหน้าเว็บ ... ตารางรักษาได้น้อยลงหรือไม่ ฉันคิดว่าการใช้ตารางนั้นง่ายกว่าการใช้ div และ CSS โดยวิธีการ ... ทำไมการใช้ div หรือการแยกเนื้อหาที่ดีจากการจัดวางและตารางไม่ดี? การรับเลย์เอาต์ที่ดีกับ div เท่านั้นมักจะต้องใช้ div ที่ซ้อนกันมากมาย การอ่านรหัสฉันคิดว่าเป็นวิธีอื่น ๆ คนส่วนใหญ่เข้าใจ HTML และเข้าใจ CSS ไม่มาก เป็นการดีกว่าสำหรับ SEO …

665 html css

16

พื้นหลัง CSS ยืดและปรับขนาด

มีวิธีในการรับพื้นหลังใน CSS เพื่อขยายหรือขยายเพื่อเติมในคอนเทนเนอร์หรือไม่

653 html css

10

ฉันสามารถเขียน CSS selector การเลือกองค์ประกอบที่ไม่มีคลาสหรือคุณสมบัติที่แน่นอนได้หรือไม่?

ฉันต้องการเขียนกฎตัวเลือก CSS ที่เลือกองค์ประกอบทั้งหมดที่ไม่มีคลาสที่แน่นอน ตัวอย่างเช่นกำหนด HTML ต่อไปนี้: <html class="printable"> <body class="printable"> <h1 class="printable">Example</h1> <nav>  </nav> <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a> <p class="printable"> This page is super interresting and you should print it! </p> </body> </html> ผมอยากจะเขียนตัวเลือกที่เลือกองค์ประกอบทั้งหมดที่ไม่ได้มีคลาส "พิมพ์" ซึ่งในกรณีนี้เป็นnavและองค์ประกอบ เป็นไปได้ไหม หมายเหตุ: ใน HTML จริงที่ฉันต้องการใช้นี้จะมีองค์ประกอบมากมายที่ไม่มีคลาส "ที่พิมพ์ได้" มากกว่าที่จะทำ (ฉันรู้ว่ามันเป็นอีกวิธีหนึ่งในตัวอย่างด้านบน)

644 html css css-selectors

23

ตำแหน่งคงที่ แต่สัมพันธ์กับคอนเทนเนอร์

ฉันพยายามที่จะแก้ไขdivดังนั้นมันมักจะติดที่ด้านบนของหน้าจอโดยใช้: position: fixed; top: 0px; right: 0px; อย่างไรก็ตามdivอยู่ภายในคอนเทนเนอร์กึ่งกลาง เมื่อฉันใช้position:fixedมันแก้ไขความdivสัมพันธ์กับหน้าต่างเบราว์เซอร์เช่นมันขึ้นทางด้านขวาของเบราว์เซอร์ แต่ควรได้รับการแก้ไขโดยสัมพันธ์กับคอนเทนเนอร์ ฉันรู้ว่าposition:absoluteสามารถนำมาใช้ในการแก้ไขปัญหาเป็นองค์ประกอบเทียบกับแต่เมื่อคุณเลื่อนหน้าเว็บลงหายไปองค์ประกอบและไม่ติดไปด้านบนเช่นเดียวกับdivposition:fixed มีการแฮ็กหรือวิธีแก้ปัญหาเพื่อให้บรรลุนี้

639 css position css-position fixed

26

แปลงภาพเป็นสีเทาใน HTML / CSS

มีวิธีง่าย ๆ ในการแสดงบิตแมปสีในระดับสีเทาด้วยHTML/CSSหรือไม่ ไม่จำเป็นต้องเข้ากันได้กับ IE (และฉันคิดว่ามันจะไม่เป็นอย่างนั้น) - ถ้ามันทำงานใน FF3 และ / หรือ Sf3 นั่นก็ดีพอสำหรับฉัน ฉันรู้ว่าฉันสามารถทำได้ทั้งกับSVGCanvas และตอนนี้ดูเหมือนว่าจะมีงานเยอะมาก มีวิธีที่คนขี้เกียจอย่างแท้จริงในการทำเช่นนี้?

619 image css grayscale

11

กำหนดเป้าหมายเฉพาะ Firefox ด้วย CSS

การใช้ความคิดเห็นแบบมีเงื่อนไขทำให้ง่ายต่อการกำหนดเป้าหมาย Internet Explorer ด้วยกฎ CSS เฉพาะเบราว์เซอร์:  บางครั้งมันเป็นเอ็นจิ้นตุ๊กแก (Firefox) ที่ทำงานผิดปกติ อะไรจะเป็นวิธีที่ดีที่สุดในการกำหนดเป้าหมายเฉพาะ Firefox ด้วยกฎ CSS ของคุณและไม่ใช่เบราว์เซอร์อื่น ๆ นั่นคือไม่เพียง แต่ Internet Explorer ควรละเว้นกฎ Firefox เท่านั้น แต่ควรใช้ WebKit และ Opera หมายเหตุ:ฉันกำลังมองหาโซลูชัน 'สะอาด' การใช้ดมกลิ่นเบราว์เซอร์ JavaScript เพื่อเพิ่มคลาส 'firefox' ลงใน HTML ของฉันไม่ถือว่ามีคุณสมบัติที่ดีในความคิดของฉัน ฉันอยากจะเห็นบางสิ่งที่ขึ้นอยู่กับความสามารถของเบราว์เซอร์ความคิดเห็นตามเงื่อนไขเป็นเพียง 'พิเศษ' สำหรับ IE ...

616 css firefox css-hack

8

การลบหลายคลาส (jQuery)

มีวิธีใดที่ดีกว่าในการเขียนสิ่งนี้: $('element').removeClass('class1').removeClass('class2'); ฉันไม่สามารถใช้removeClass();เพราะจะเป็นการลบคลาสทั้งหมดที่ฉันไม่ต้องการ

615 jquery css

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