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

นี่อาจเป็นเข็มทิศ 101 แต่มีใครเขียน mixin ซึ่งกำหนดค่าอัลฟาของสีหรือไม่? ตามหลักการแล้วฉันต้องการให้ mixin ใช้การกำหนดสีในรูปแบบใดก็ได้และใช้ความโปร่งใส: @include set-alpha( red, 0.5 ); //prints rgba(255, 0, 0, 0.5); @include set-alpha( #ff0000, 0.5 ); //prints rgba(255, 0, 0, 0.5); @include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5);

86 css  sass  compass-sass  rgba 

มีวิธีจัดรูปแบบ<option>องค์ประกอบที่เลือกในปัจจุบันใน<select>องค์ประกอบหรือไม่ จากนั้นฉันสามารถให้สีพื้นหลังกับองค์ประกอบตัวเลือกที่เลือกในปัจจุบันได้หรือไม่? ด้วยวิธีนี้ฉันสามารถจัดรูปแบบตัวเลือกที่สามารถดูได้ในเมนูแบบเลื่อนลงแบบปิด

86 html  css  css-selectors  pseudo-class 

ฉันมี: ไฟล์ JS ที่ฉันต้องการรวมไฟล์ LESS ไฟล์ที่ฉันต้องการรวบรวมลงใน CSS (แก้ไข @imports เป็นบันเดิลเดียว) ฉันหวังว่าจะระบุสิ่งเหล่านี้เป็นอินพุตแยกกันสองตัวและมีเอาต์พุตแยกกันสองตัว (น่าจะเป็นผ่าน extract-text-webpack-plugin) Webpack มีปลั๊กอิน / ตัวโหลดที่เหมาะสมทั้งหมดในการคอมไพล์ แต่ดูเหมือนจะไม่ชอบการแยก ฉันเคยเห็นตัวอย่างของผู้ที่ต้องการไฟล์ LESS โดยตรงจาก JS เช่นrequire('./app.less');ไม่มีเหตุผลอื่นใดนอกจากบอกให้ webpack รวมไฟล์เหล่านั้นลงในบันเดิล สิ่งนี้ช่วยให้คุณมีจุดเข้าเพียงจุดเดียว แต่ดูเหมือนว่าฉันผิดจริงๆ - ทำไมฉันต้องใช้ LESS ใน JS ของฉันในเมื่อมันไม่เกี่ยวข้องกับรหัส JS ของฉัน ฉันลองใช้จุดเข้าหลายจุดส่งทั้ง JS รายการและไฟล์ LESS หลักเข้ามา แต่เมื่อใช้จุดเข้าหลายจุด webpack จะสร้างบันเดิลที่ไม่เรียกใช้ JS เมื่อโหลด - มันรวมเข้าด้วยกันทั้งหมด แต่ไม่รู้ สิ่งที่ควรดำเนินการเมื่อเริ่มต้น ฉันใช้ …

86 javascript  css  webpack  build  css-preprocessor 

ฉันมี div: <div class="test" id="someElement" style="position: absolute"></div> มีวิธีตรวจสอบองค์ประกอบบางอย่างหรือไม่: $("#someElement") มีคลาสเฉพาะ (ในกรณีของฉันคือ "test") อีกวิธีหนึ่งมีวิธีตรวจสอบว่า en element มีลักษณะที่แน่นอนหรือไม่? ในตัวอย่างนี้ฉันต้องการทราบว่าองค์ประกอบมี " position: absolute" หรือไม่ ขอบคุณมาก!

86 javascript  jquery  css 

โดยค่าเริ่มต้นความสูงของ DIV จะถูกกำหนดโดยเนื้อหา แต่ฉันลบล้างสิ่งนั้นและตั้งค่าความสูงอย่างชัดเจนด้วย jQuery: $('div#someDiv').height(someNumberOfPixels); ฉันจะย้อนกลับได้อย่างไร ฉันต้องการลบสไตล์ความสูงและทำให้กลับไปเป็นความสูงอัตโนมัติ / ธรรมชาติ

86 jquery  html  css  layout 

ความกว้างที่ปลอดภัยเป็นพิกเซลในการพิมพ์หน้าเว็บคือเท่าใด หน้าของฉันมีภาพขนาดใหญ่และฉันต้องการให้แน่ใจว่าจะไม่ถูกตัดออกเมื่อพิมพ์ ฉันรู้เกี่ยวกับระยะขอบเบราว์เซอร์และขนาดกระดาษ US Letter / DIN A4 ที่แตกต่างกัน ดังนั้นเราจึงมีขนาดตัวอักษรมาตรฐานและค่า DPI เริ่มต้นบางค่า แต่ฉันสามารถแปลงค่าเหล่านี้เป็นค่าพิกเซลเพื่อระบุในwidthแอตทริบิวต์ของรูปภาพได้หรือไม่

86 css  printing 

เมื่อเร็ว ๆ นี้ฉันเจอตัวอย่างบางส่วนที่ทำสิ่งต่างๆเช่น: <dl> <dt>Full Name:</dt> <dd><input type="text" name="fullname"></dd> <dt>Email Address:</dt> <dd><input type="text" name="email"></dd> </dl> สำหรับการทำรูปแบบ HTML ทำไมถึงเป็นเช่นนั้น? ข้อดีของการใช้ตารางคืออะไร?

86 html  css  forms 

ฉันพบตัวอย่างของเทมเพลตอีเมลที่ตอบสนองซึ่งมีตัวเลือก CSS ดังต่อไปนี้: a[class="btn"] เหตุใดจึงใช้ไวยากรณ์นี้ถ้ามันเหมือนกับ: a.btn มันมีผลกระทบกับเบราว์เซอร์มือถือหรืออย่างอื่นหรือไม่?

86 css  css-selectors 

ปัญหาการตั้งศูนย์ CSS โดยทั่วไปไม่ได้ผลสำหรับฉันปัญหาคือฉันไม่ทราบความกว้าง px ที่เสร็จสิ้นแล้ว ฉันมี div สำหรับการนำทางทั้งหมดแล้วแต่ละปุ่มภายในพวกเขาจะไม่อยู่ตรงกลางอีกต่อไปเมื่อมีปุ่มมากกว่าหนึ่งปุ่ม :( CSS .nav{ margin-top:167px; width:1024px; height:34px; } .nav_button{ height:34px; margin:0 auto; margin-right:10px; float:left; } HTML <div class="nav"> <div class="nav_button"> <div class="b_left"></div> <div class="b_middle">Home</div> <div class="b_right"></div> </div> <div class="nav_button"> <div class="b_left"></div> <div class="b_middle">Contact Us</div> <div class="b_right"></div> </div> </div> ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมอย่างมาก. ขอบคุณ ผลลัพธ์ …

86 css  button  center 

ดังที่คุณทราบแล้วคุณอาจมีหลายคลาสในองค์ประกอบโดยคั่นด้วยช่องว่าง ตัวอย่าง <div class="content main"></div> และด้วย CSS คุณสามารถกำหนดเป้าหมายdivด้วย.contentหรือ.main. มีวิธีกำหนดเป้าหมายเฉพาะในกรณีที่มีทั้งสองคลาสหรือไม่? ตัวอย่าง <div class="content main">I want this div</div> <div class="content">I don't care about this one</div> <div class="main">I don't want this</div> ฉันจะใช้ตัวเลือก CSS ใดเพื่อรับตัวเลือกแรกdivเท่านั้น (สมมติว่าฉันใช้ไม่ได้.content:first-childหรือคล้ายกัน)

86 css  css-selectors 

ฉันต้องการให้ div อยู่ในตำแหน่งกึ่งกลางและพอดีกับความกว้างของเนื้อหาในเวลาเดียวกัน ตอนนี้ฉันทำแบบนี้: .mydiv-centerer{ text-align: center; .mydiv { background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7); border-radius: 10px 10px 10px 10px; box-shadow: 0 0 5px #0099FF; color: white; margin: 10px auto; padding: 10px; text-align: justify; width: -moz-fit-content; } } ตอนนี้คำสั่งสุดท้าย"width: -moz-fit-content;" คือว่าสิ่งที่ฉันต้องการ! ปัญหาเดียวคือ .. มันใช้งานได้บน Firefox เท่านั้น …

86 firefox  css  cross-browser 

<div style="display:inline-block;width:100px;"> very long text </div> วิธีใดก็ตามในการใช้ pure css เพื่อตัดข้อความที่ยาวเกินไปแทนที่จะแสดงในบรรทัดใหม่ถัดไปและแสดงสูงสุด 100px เท่านั้น

86 html  css 

สมมติว่าคุณมีไซต์ที่สร้างขึ้นแบบไดนามิกซึ่งมีผู้คนมากเกินไปทั้งในอดีตและปัจจุบันและตอนนี้คุณมีชุดสไตล์ชีตที่ใช้ร่วมกันซึ่งมี CSS มากกว่า 20,000 บรรทัด ไม่มีการจัดระเบียบเลยมีตัวเลือกคลาสและตัวเลือกตามรหัส แต่ยังมีตัวเลือกตามแท็กมากเกินไป แล้วบอกว่าคุณมีเทมเพลต 100 แบบที่ใช้สไตล์เหล่านี้ผ่านตัวควบคุมบางตัว มีเครื่องมือบางอย่างที่ใช้งานได้เหมือน Firebug หรือไม่ที่คุณสามารถชี้ไปที่ url และจะกำหนดตัวเลือก CSS ที่เกี่ยวข้องทั้งหมดสำหรับหน้านั้นและถ่ายโอนข้อมูลไปยังไฟล์หรือไม่ โดยพื้นฐานแล้ววิธีการแยกสไตล์ชีทที่แชร์บนหน้าทีละหน้า

86 css 

ฉันต้องการลบคำแนะนำเครื่องมือ "ไม่ได้เลือกไฟล์" ออกจากการป้อนไฟล์ใน Google Chrome (ฉันเห็นว่าไม่มีคำแนะนำเครื่องมือแสดงใน Firefox) โปรดสังเกตว่าฉันไม่ได้พูดถึงข้อความในช่องป้อนข้อมูล แต่เกี่ยวกับคำแนะนำเครื่องมือที่ปรากฏขึ้นเมื่อคุณเลื่อนเมาส์ไปที่อินพุต ฉันได้ลองโดยไม่มีโชค: $('#myFileInput').attr('title', '');

86 javascript  jquery  html  css  google-chrome 

ฉันจะใช้vertical-alignเช่นเดียวกับfloatในdivคุณสมบัติ? ใช้vertical-alignงานได้ดีถ้าฉันไม่ใช้ไฟล์float. แต่ถ้าใช้ลูกลอยแล้วไม่ได้ผล เป็นสิ่งสำคัญสำหรับฉันที่จะใช้float:rightสำหรับ div สุดท้าย ฉันกำลังพยายามติดตามหากคุณลบ float ออกจาก div ทั้งหมดก็จะใช้ได้ดี: <div class="wrap"> <div class="left">First div, float left, has more text.</div> <div class="left2">Second div, float left </div> <div class="right">Third div, float right</div> </div> CSS: .wrap{ width: 500px; overflow:hidden; background: pink; } .left { width: 150px; margin-right: 10px; background: yellow; float:left; …

86 html  css  vertical-alignment