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

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

30
ทำให้ div เติมความสูงของพื้นที่หน้าจอที่เหลือ
ฉันกำลังทำงานกับเว็บแอปพลิเคชันที่ฉันต้องการให้เนื้อหาเต็มความสูงของหน้าจอ หน้ามีส่วนหัวซึ่งมีโลโก้และข้อมูลบัญชี นี่อาจเป็นความสูงตามอำเภอใจ ฉันต้องการให้ div เนื้อหาเติมส่วนที่เหลือของหน้าลงไปด้านล่าง ฉันมีส่วนหัวและเนื้อหาdiv divในขณะนี้ฉันใช้ตารางสำหรับเค้าโครงดังนี้: CSS และ HTML #page { height: 100%; width: 100% } #tdcontent { height: 100%; } #content { overflow: auto; /* or overflow: hidden; */ } <table id="page"> <tr> <td id="tdheader"> <div id="header">...</div> </td> </tr> <tr> <td id="tdcontent"> <div id="content">...</div> </td> </tr> </table> …
1910 html  css  html-table 

13
SCSS กับ Sass ต่างกันอย่างไร
จากสิ่งที่ฉันได้อ่าน Sass เป็นภาษาที่ทำให้ CSS มีประสิทธิภาพมากขึ้นด้วยการสนับสนุนตัวแปรและคณิตศาสตร์ ความแตกต่างกับ SCSS คืออะไร? มันควรจะเป็นภาษาเดียวกันหรือไม่? ที่คล้ายกัน? แตกต่างกันอย่างไร
1900 css  sass 

20
สามเหลี่ยม CSS ทำงานอย่างไร
ตั้งค่าใหม่แล้วStack Overflow ที่แยกออกมาจากส่วนที่เหลือ : ตั้งค่าไว้ CSS? มี CSS รูปร่างที่แตกต่างกันมากมายที่CSS Tricks - รูปร่างของ CSSและฉันงงกับสามเหลี่ยมเป็นพิเศษ: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id="triangle-up"></div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล มันทำงานอย่างไรและทำไม?

30
วิธีจัดแนวช่องทำเครื่องหมายและป้ายกำกับให้ข้ามเบราว์เซอร์อย่างสม่ำเสมอ
นี่เป็นหนึ่งในปัญหาเล็ก ๆ น้อย ๆ ของ CSS ที่ทำให้ฉันมีปัญหาตลอดเวลา คนรอบกองซ้อนล้นแนวตั้งcheckboxesและข้ามเบราว์เซอร์labelsอย่างต่อเนื่องได้อย่างไร เมื่อใดก็ตามที่ฉันจัดแนวพวกเขาอย่างถูกต้องใน Safari (มักใช้บน) พวกเขาจะปิดใน Firefox และ IE อย่างสมบูรณ์ แก้ไขใน Firefox และ Safari และ IE จะสับสนอย่างหลีกเลี่ยงไม่ ฉันเสียเวลากับเรื่องนี้ทุกครั้งที่ฉันกรอกแบบฟอร์มvertical-align: baselineinput นี่คือรหัสมาตรฐานที่ฉันใช้: <form> <div> <label><input type="checkbox" /> Label text</label> </div> </form> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ฉันมักจะใช้การรีเซ็ตของ Eric Meyer เพื่อให้องค์ประกอบของฟอร์มค่อนข้างชัดเจนในการแทนที่ รอคอยที่จะมีเคล็ดลับหรือลูกเล่นที่คุณมีให้!

30
แปลง HTML + CSS เป็น PDF [ปิด]
ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นไปตามหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน3 ปีที่ผ่านมา ฉันมีเอกสาร HTML (ไม่ใช่ XHTML) ที่แสดงผลได้ดีใน Firefox 3 และ IE 7 มันใช้ CSS พื้นฐานที่ค่อนข้างเป็นธรรมในการจัดวางและปรับใน HTML ตอนนี้ฉันแปลงไฟล์เป็น PDF ฉันเหนื่อย: DOMPDF : มันมีปัญหาใหญ่กับตาราง ฉันแยกตารางที่ซ้อนกันขนาดใหญ่ออกมาและมันช่วย (ก่อนที่มันจะใช้หน่วยความจำสูงสุด 128M ก่อนจะตาย - นั่นเป็นข้อ จำกัด ของฉันในหน่วยความจำใน php.ini) แต่มันทำให้โต๊ะยุ่งเหยิงและดูเหมือนจะไม่ได้ ภาพ ตารางเป็นเพียงสิ่งพื้นฐานที่มีรูปแบบเส้นขอบเพื่อเพิ่มบางบรรทัดที่จุดต่าง ๆ ; HTML2PDF และ HTML2PS : จริงๆแล้วฉันโชคดีกว่านี้ มันแสดงผลภาพบางภาพ (ภาพทั้งหมดเป็น …
1628 php  html  css  pdf  pdf-generation 

16
คลิกที่องค์ประกอบ div ถึงองค์ประกอบพื้นฐาน
ฉันมีdivที่มีพร้อมกับbackground:transparent borderภายใต้สิ่งนี้divฉันมีองค์ประกอบมากขึ้น divขณะนี้ฉันสามารถคลิกองค์ประกอบพื้นฐานเมื่อฉันคลิกนอกซ้อนทับ อย่างไรก็ตามฉันไม่สามารถคลิกองค์ประกอบพื้นฐานได้เมื่อคลิกที่โอเวอร์เลย์divโดยตรง ฉันต้องการที่จะคลิกผ่านสิ่งนี้divเพื่อให้ฉันสามารถคลิกที่องค์ประกอบพื้นฐาน
1591 css 

26
ดึงตำแหน่ง (X, Y) ขององค์ประกอบ HTML ที่สัมพันธ์กับหน้าต่างเบราว์เซอร์
ฉันต้องการทราบวิธีรับตำแหน่ง X และ Y ขององค์ประกอบ HTML เช่นimgและdivใน JavaScript ที่สัมพันธ์กับหน้าต่างเบราว์เซอร์
1567 javascript  html  css  dom  position 

30
ฉันจะสร้างตัวแทนสำหรับกล่อง 'เลือก' ได้อย่างไร
ฉันใช้ตัวยึดตำแหน่งสำหรับการป้อนข้อความที่ใช้งานได้ดี แต่ฉันต้องการใช้ตัวยึดตำแหน่งสำหรับ selectboxes ของฉันเช่นกัน แน่นอนฉันสามารถใช้รหัสนี้: <select> <option value="">Select your option</option> <option value="hurr">Durr</option> </select> แต่ 'เลือกตัวเลือกของคุณ' เป็นสีดำแทนที่จะเป็นสีอ่อน ดังนั้นทางออกของฉันอาจเป็นไปตาม CSS jQuery ก็ใช้ได้เช่นกัน สิ่งนี้ทำให้ตัวเลือกเป็นสีเทาเท่านั้นในดรอปดาวน์ (ดังนั้นหลังจากคลิกลูกศร): option:first { color: #999; } คำถามคือ: ผู้คนสร้างตัวยึดตำแหน่งใน Selectboxes ได้อย่างไร แต่มันก็ได้รับคำตอบแล้วเสียงเชียร์ และการใช้ผลลัพธ์นี้ในค่าที่เลือกจะเป็นสีเทาเสมอ (แม้หลังจากเลือกตัวเลือกจริง): select { color: #999; }

30
ฉันจะปรับขนาดรูปภาพโดยอัตโนมัติเพื่อให้พอดีกับคอนเทนเนอร์ 'div' ได้อย่างไร
คุณปรับขนาดภาพขนาดใหญ่โดยอัตโนมัติอย่างไรเพื่อให้พอดีกับคอนเทนเนอร์ div ความกว้างขนาดเล็กลงในขณะที่ยังคงอัตราส่วนความกว้าง: ความสูง ตัวอย่าง: stackoverflow.com - เมื่อภาพถูกแทรกลงบนแผงแก้ไขและภาพมีขนาดใหญ่เกินไปที่จะพอดีกับหน้าภาพจะถูกปรับขนาดโดยอัตโนมัติ
1511 html  css  image  autoresize 

30
วิธีจัดแนวภาพใน div ในแนวตั้ง
คุณจะจัดแนวรูปภาพภายในของที่บรรจุได้divอย่างไร? ตัวอย่าง ในตัวอย่างของฉันฉันจำเป็นต้องตั้งศูนย์ให้<img>ตรง<div>กับclass ="frame": <div class="frame" style="height: 25px;"> <img src="http://jsfiddle.net/img/logo.png" /> </div> .frameความสูงของภาพได้รับการแก้ไขและไม่ทราบความสูงของภาพ ฉันสามารถเพิ่มองค์ประกอบใหม่ได้.frameถ้านั่นเป็นทางออกเดียว ฉันพยายามทำสิ่งนี้บน Internet Explorer 7 และใหม่กว่า WebKit, Gecko ดู jsfiddle ที่นี่ .frame { height: 25px; /* Equals maximum image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; } img { …

30
การเปลี่ยนผ่านคุณสมบัติการแสดงผล CSS
ขณะนี้ฉันกำลังออกแบบเมนู CSS 'mega dropdown' - โดยทั่วไปแล้วเป็นเมนูแบบเลื่อนลง CSS-only ทั่วไป แต่เมนูที่มีเนื้อหาประเภทต่างๆ ในขณะนี้ดูเหมือนว่าการเปลี่ยน CSS 3 จะไม่ใช้กับคุณสมบัติ 'display'นั่นคือคุณไม่สามารถทำการเปลี่ยนแปลงใด ๆ จากdisplay: noneเป็นdisplay: block(หรือชุดค่าผสม) มีวิธีใดบ้างสำหรับเมนูระดับสองจากตัวอย่างด้านบนเพื่อ 'จางหายไป' เมื่อมีคนอยู่เหนือรายการเมนูระดับบนสุดหรือไม่ ฉันทราบว่าคุณสามารถใช้ช่วงการเปลี่ยนภาพได้visibility:แต่ฉันไม่สามารถคิดวิธีการใช้งานได้อย่างมีประสิทธิภาพ ฉันได้ลองใช้ความสูง แต่ก็ล้มเหลวอย่างน่าสังเวช ฉันก็ทราบด้วยว่ามันเป็นเรื่องเล็กน้อยที่จะบรรลุเป้าหมายนี้โดยใช้ JavaScript แต่ฉันต้องการท้าทายตัวเองให้ใช้ CSS เพียงอย่างเดียวและฉันคิดว่าฉันกำลังจะมาถึงในระยะสั้น ๆ
1446 css  css-transitions 

30
จะวาง div ในแนวตั้งตรงกลางสำหรับเบราว์เซอร์ทั้งหมดได้อย่างไร?
ฉันต้องการจัดกึ่งกลางdivแนวตั้งด้วย CSS ฉันไม่ต้องการตารางหรือ JavaScript แต่ใช้ CSS เท่านั้น ฉันพบวิธีแก้ไขปัญหาบางอย่าง แต่ทั้งหมดขาดการสนับสนุน Internet Explorer 6 <body> <div>Div to be aligned vertically</div> </body> ฉันจะจัดกึ่งกลางdivแนวตั้งในเบราว์เซอร์หลักทั้งหมดรวมถึง Internet Explorer 6 ได้อย่างไร


7
Sass Variable ในฟังก์ชั่น CSS calc ()
ฉันพยายามใช้calc()ฟังก์ชันในสไตล์ชีต Sass แต่ฉันมีปัญหา นี่คือรหัสของฉัน: $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) ถ้าฉันใช้ตัวอักษร50pxแทนที่จะเป็นbody_paddingตัวแปรฉันจะได้สิ่งที่ต้องการ อย่างไรก็ตามเมื่อฉันเปลี่ยนเป็นตัวแปรนี่คือผลลัพธ์: body { padding-top: 50px; height: calc(100% - $body_padding); } ฉันจะทำให้ Sass รับรู้ได้อย่างไรว่ามันจำเป็นต้องเปลี่ยนตัวแปรภายในcalcฟังก์ชั่น?
1345 css  sass  css-calc 

24
ฉันจะจัดสไตล์แบบเลื่อนลง <select> ด้วย CSS เท่านั้นได้อย่างไร
มีวิธี CSS-only ในการกำหนดสไตล์ของ&lt;select&gt;ดรอปดาวน์หรือไม่? ฉันต้องมีสไตล์ &lt;select&gt;รูปแบบให้มากที่สุดเท่าที่จะเป็นไปได้โดยมนุษย์ คุณสมบัติอะไรที่ฉันสามารถใช้ใน CSS ได้? รหัสนี้จะต้องเข้ากันได้กับเบราว์เซอร์หลักทั้งหมด: Internet Explorer 6, 7 และ 8 Firefox การแข่งรถวิบาก ฉันรู้ว่าฉันทำได้ด้วย JavaScript: ตัวอย่างตัวอย่าง และฉันไม่ได้พูดถึงสไตล์ที่เรียบง่าย ฉันอยากรู้ว่าอะไรที่ดีที่สุดที่เราสามารถทำได้กับ CSS เท่านั้น ฉันพบคำถามที่คล้ายกันใน Stack Overflow และอันนี้ใน Doctype.com

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