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

ฉันกำลังพยายามเปลี่ยน CSS โดยใช้ jQuery: $(init); function init() { $("h1").css("backgroundColor", "yellow"); $("#myParagraph").css({"backgroundColor":"black","color":"white"); $(".bordered").css("border", "1px solid black"); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="bordered"> <h1>Header</h1> <p id="myParagraph">This is some paragraph text</p> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ฉันพลาดอะไรไปที่นี่?

133 javascript  jquery  css 

เช่นถ้าฉันมีสิ่งนี้: <a style="" href="page.html">page link</a> มีสิ่งใดบ้างที่ฉันสามารถใช้สำหรับแอตทริบิวต์สไตล์ที่จะทำให้ลิงก์นั้นไม่สามารถคลิกได้และจะไม่พาฉันไปที่ page.html หรือเป็นตัวเลือกเดียวของฉันที่จะไม่ห่อ 'ลิงค์หน้า' ในแท็กสมอ? แก้ไข:ฉันต้องการระบุว่าทำไมฉันจึงต้องการทำเช่นนี้เพื่อให้ผู้คนสามารถให้คำแนะนำที่ดีกว่า ฉันกำลังพยายามตั้งค่าแอปพลิเคชันของฉันเพื่อให้ผู้พัฒนาสามารถเลือกรูปแบบการนำทางที่ต้องการ ดังนั้นฉันมีรายการลิงก์และมีการเลือกเสมอในขณะนี้และอื่น ๆ ทั้งหมดไม่ได้ สำหรับลิงก์ที่ไม่ได้เลือกฉันต้องการให้ลิงก์เหล่านั้นเป็นแท็กจุดยึดที่สามารถคลิกได้ปกติ แต่สำหรับลิงก์ที่เลือกบางคนต้องการให้ลิงก์ยังคงสามารถคลิกได้ในขณะที่คนอื่นต้องการให้คลิกไม่ได้ ตอนนี้ฉันสามารถเขียนโปรแกรมได้โดยไม่ต้องพันแท็กรอบลิงก์ที่เลือก แต่ฉันคิดว่ามันจะดูสง่างามกว่าถ้าฉันสามารถใส่ลิงค์ที่เลือกไว้ในลักษณะดังนี้: <a id="current" href="link.html">link</a> จากนั้นให้นักพัฒนาซอฟต์แวร์ควบคุมสไตล์การเชื่อมโยงผ่าน CSS

132 html  css  anchor 

iPhone 5 มีหน้าจอที่ยาวขึ้นและไม่ดึงดูดมุมมองบนมือถือของเว็บไซต์ของฉัน คำถามเกี่ยวกับการออกแบบที่ตอบสนองใหม่สำหรับ iPhone 5 คืออะไรและฉันสามารถรวมกับคำค้นหาของ iPhone ที่มีอยู่ได้หรือไม่ ข้อความค้นหาสื่อปัจจุบันของฉันคือ: @media only screen and (max-device-width: 480px) {}

132 iphone  css  responsive-design  media-queries  iphone-5 

ฉันกำลังอยู่ในขั้นตอนการสร้างแอปพลิเคชั่นอินทราเน็ตขนาดเล็กและลองใช้แบบอักษร Adobe ที่ซื้อมาเมื่อเร็ว ๆ นี้โดยไม่มีโชค ตามที่ได้รับแจ้งในกรณีของเราไม่ใช่การละเมิดใบอนุญาต ฉันแปลงฟอนต์เวอร์ชัน. ttf / .otf เป็น. woff, .eot และ. svg เพื่อกำหนดเป้าหมายเบราว์เซอร์หลักทั้งหมด ไวยากรณ์ @ font-face ที่ฉันใช้นั้นเป็นแบบกันกระสุนจากFont Spring : @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot'); src: url('myfont-webfont.eot?#iehack') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } ฉันแก้ไขส่วนหัว HTTP (เพิ่ม Access-Control-Allow-Origin = "*") เพื่ออนุญาตการอ้างอิงข้ามโดเมน ใน FF และ Chrome ทำงานได้อย่างสมบูรณ์ …

132 internet-explorer  css  internet-explorer-9  font-face 

ก่อนหน้านี้ไซต์ของฉัน (www.heatexchangers.ca) ได้คะแนน 98% ใน Google Page Speed มีสองสิ่งที่ฉันไม่สามารถทำอะไรได้เลยเช่นสตริงการสืบค้นจากแบบอักษรของเว็บ ฉันมีความสุขมากกับสิ่งนี้เพราะสิ่งนี้แสดงถึงทุกสิ่งที่ฉันทำได้ เมื่อเร็ว ๆ นี้ Google ได้เพิ่มสิ่งอื่นที่มีผลต่อคะแนนความเร็วของหน้าและตอนนี้ฉันได้รับเพียง 89% สำหรับ Page Speed ​​และรับคำแนะนำนี้: กำจัด JavaScript และ CSS ที่ปิดกั้นการแสดงผลภายนอกในเนื้อหาครึ่งหน้าบน คำแนะนำในการแก้ไขปัญหานี้ดูเหมือนว่าจะเกี่ยวข้องกับการหลอกล่อไฟล์. css และ. js ของฉันทั้งหมดและแยกบางส่วนออกจากกันและเพิ่มแบบอินไลน์ใน html ของฉัน สิ่งนี้ทำให้ฉันสับสนเนื่องจากฉันอยู่ภายใต้การแสดงผลที่เราต้องเก็บ JS และ CSS ออกจาก HTML ให้มากที่สุด เนื้อหา "ครึ่งหน้าบน" คืออะไรกันแน่? หากเป็นลักษณะไม่กี่แบบเช่นแบบอักษรสีพื้นหลังเป็นต้น ฉันเห็นว่ามันอาจไม่ใช่เรื่องใหญ่เกินกว่าที่จะรวมไว้ในบรรทัด ฉันไม่พบรายการว่านี่คืออะไร

132 javascript  html  css  google-pagespeed 

ฉันมีสิ่งต่อไปนี้ใน CSS ของฉัน ระยะขอบ / การพายเรือ / เส้นขอบทั้งหมดจะถูกรีเซ็ตเป็น 0 #wrapper{width: 75%; min-width: 800px;} .content{text-align: justify; float: right; width: 90%;} .lbar{text-align: justify; float: left; width: 10%;} ตอนนี้เมื่อฉันเขียน HTML ของฉันเป็น <div id="wrapper"> <div class="content"> some text here </div> <div class="lbar"> some text here </div> </div> หน้าที่แสดงผลอย่างถูกต้อง อย่างไรก็ตามเมื่อฉันตรวจสอบองค์ประกอบdiv#wrapperจะแสดงว่า0pxสูง ฉันคาดว่ามันจะขยายไปจนจบdiv.contentและdiv.lbar... ทำไมสิ่งนี้ถึงเกิดขึ้น? อีกครั้งหน้าแสดงผลได้ดี พฤติกรรมนี้ทำให้ฉันงง

132 html  css 

มีใครรู้วิธีทำให้รูปภาพไม่สามารถลากและเลือกไม่ได้พร้อมกันใน Firefox โดยไม่ต้องใช้ Javascript ดูเหมือนจะไม่สำคัญ แต่นี่คือปัญหา: 1) สามารถลากและเน้นใน Firefox: <img src="..."> 2) เราจึงเพิ่มสิ่งนี้ แต่ยังสามารถไฮไลต์ภาพได้ขณะลาก: <img src="..." draggable="false"> 3) เราจึงเพิ่มสิ่งนี้เพื่อแก้ไขปัญหาการไฮไลต์ แต่ในทางตรงกันข้ามภาพจะลากได้อีกครั้ง แปลกฉันรู้! ใช้ FF 16.0.1 <img src="..." draggable="false" style="-moz-user-select: none;"> มีใครรู้บ้างว่าทำไมการเพิ่ม "-moz-user-select: none" จะทำให้ดีกว่าและปิดใช้งาน "draggable = false" หรือไม่? แน่นอนว่า webkit ทำงานได้ตามที่คาดไว้ ไม่มีอะไรอยู่ใน Interwebs เกี่ยวกับเรื่องนี้ ... มันจะดีมากถ้าเราสามารถส่องแสงในเรื่องนี้ด้วยกัน ขอบคุณ !! แก้ไข: นี่เป็นเรื่องเกี่ยวกับการป้องกันไม่ให้องค์ประกอบ UI …

132 css  html  firefox  draggable 

ฉันจะป้องกันไม่ให้ข้อความในบล็อก div ล้นออกมาได้หรือไม่

132 html  css  overflow 

ฉันไม่สามารถเข้าถึง HTML หรือ PHP สำหรับเพจและสามารถแก้ไขผ่าน CSS เท่านั้น ฉันได้ทำการแก้ไขบนไซต์และเพิ่มข้อความผ่านอิลิเมนต์::afterหรือ::beforeหลอกและพบว่าควรใช้ Escape Unicode สำหรับสิ่งต่างๆเช่นเว้นวรรคก่อนหรือหลังเนื้อหาที่เพิ่ม ฉันจะเพิ่มหลายบรรทัดในcontentคุณสมบัติได้อย่างไร ในตัวอย่างองค์ประกอบเส้นแบ่ง HTML เป็นเพียงการแสดงภาพสิ่งที่ฉันต้องการบรรลุเท่านั้น: #headerAgentInfoDetailsPhone::after { content: 'Office: XXXXX <br /> Mobile: YYYYY '; }

132 css 

ฉันใช้แท็ก img ของ HTML เพื่อแสดงรูปภาพในแอปพลิเคชันของเรา ฉันได้ตั้งค่าแอตทริบิวต์ความสูงและความกว้างเป็น 64 ฉันต้องการแสดงความละเอียดของภาพใด ๆ (เช่น 256x256, 1024x768, 500x400, 205x246 เป็นต้น) เป็น 64x64 แต่การตั้งค่าแอตทริบิวต์ความสูงและความกว้างของแท็ก img เป็น 64 จะไม่คงอัตราส่วนภาพไว้ดังนั้นภาพจึงดูบิดเบี้ยว สำหรับการอ้างอิงของคุณรหัสที่แน่นอนของฉันคือ: <img src="Runtime Path to photo" border="1" height="64" width="64">

132 html  css 

ฉันต้องการไอคอนเล็ก ๆ ที่น่าประทับใจเมื่อคลิกแล้วจะเป็นการลบข้อความในกล่อง <INPUT> นี่เป็นการประหยัดพื้นที่แทนที่จะมีลิงค์ที่ชัดเจนด้านนอกของกล่องอินพุต ทักษะ CSS ของฉันอ่อนแอ ... นี่คือภาพหน้าจอของลักษณะที่ iPhone ดู

131 javascript  iphone  html  css 

ฉันมีรหัสต่อไปนี้: @color : #d14836; .stripes span { -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)), color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent), to(transparent)); ฉันต้องแปลงไป@colorrgba(209, 72, 54, 1) ดังนั้นฉันต้องแทนที่rgba(209, 72, …

131 css  less 

เราต้องการที่จะใช้ไอคอนFont Awesome ( http://fortawesome.github.com/Font-Awesome/ ) เป็นสัญลักษณ์แสดงหัวข้อย่อยสำหรับรายการที่ไม่มีการเรียงลำดับใน CMS เท็กซ์เอดิเตอร์บน CMS จะเอาต์พุต HTML แบบ raw เท่านั้นดังนั้นอิลิเมนต์ / คลาสเพิ่มเติมไม่สามารถเพิ่มได้ นี่หมายถึงการแสดงไอคอนเมื่อมาร์คอัพมีลักษณะดังนี้: <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> ปัญหาแรกที่ฉันสามารถดูได้ว่า Font Awesome ต้องการแอตทริบิวต์ font-family ที่แตกต่างกันหรือไม่ซึ่งจะต้องใช้องค์ประกอบแยกต่างหาก เป็นไปได้โดยใช้ CSS บริสุทธิ์หรือไม่ หรือฉันจะต้องผนวกองค์ประกอบไปที่จุดเริ่มต้นของแต่ละรายการโดยใช้บางสิ่งบางอย่างเช่น jQuery ฉันรู้ว่าเราสามารถใช้แบ็คกราวด์แบ็คกราวด์ได้ แต่จะดีมากถ้าใช้ Font Awesome หากเป็นไปได้

131 css  font-awesome 

อะไรคือวิธีที่เหมาะสม / ได้รับการยอมรับในการใช้สไตล์ชีตแยกต่างหากสำหรับมุมมองต่างๆที่แอปพลิเคชันของฉันใช้ ตอนนี้ฉันกำลังวางองค์ประกอบลิงก์ใน html ของมุมมอง / บางส่วนที่ด้านบน แต่ฉันได้รับแจ้งว่านี่เป็นการปฏิบัติที่ไม่ดีแม้ว่าเบราว์เซอร์ที่ทันสมัยทั้งหมดจะรองรับ แต่ฉันสามารถเห็นได้ว่าทำไมจึงขมวด ความเป็นไปได้อื่น ๆ คือการวางสไตล์ชีตแยกต่างหากใน index.html ของheadฉัน แต่ฉันต้องการให้มันโหลดสไตล์ชีตก็ต่อเมื่อมุมมองถูกโหลดในชื่อของประสิทธิภาพ นี่เป็นการปฏิบัติที่ไม่ดีเนื่องจากการจัดรูปแบบจะไม่มีผลจนกว่าจะโหลด css จากเซิร์ฟเวอร์ทำให้เกิดการแฟลชของเนื้อหาที่ไม่ได้ฟอร์แมตอย่างรวดเร็วในเบราว์เซอร์ที่ทำงานช้าหรือไม่ ฉันยังไม่เห็นสิ่งนี้แม้ว่าฉันจะทดสอบในพื้นที่ก็ตาม มีวิธีโหลด CSS ผ่านวัตถุที่ส่งไปยัง Angular $routeProvider.whenหรือไม่? ขอบคุณล่วงหน้า!

131 css  model-view-controller  angularjs 

เพื่อลดจำนวนคำขอบนเซิร์ฟเวอร์ฉันได้ฝังรูปภาพ (PNG & SVG) เป็น BASE64 ลงใน css โดยตรง (อัตโนมัติในกระบวนการสร้าง) แบบนี้: background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...); นี่เป็นแนวทางปฏิบัติที่ดีหรือไม่? มีเหตุผลบางประการที่ควรหลีกเลี่ยงสิ่งนี้หรือไม่? มีเบราว์เซอร์หลักบางตัวที่ไม่รองรับ data url หรือไม่? คำถามโบนัส: การทำเช่นนี้กับ CSS & JS ยังสมเหตุสมผลหรือไม่

131 html  css  base64