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

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

15
วิธีการลบไฮไลท์ชายแดนในองค์ประกอบข้อความที่ป้อนเข้า
เมื่อองค์ประกอบ HTML เน้น '(เลือก / แท็บปัจจุบัน) เบราว์เซอร์จำนวนมาก (อย่างน้อย Safari และ Chrome) จะใส่เส้นขอบสีน้ำเงินรอบ ๆ สำหรับเลย์เอาต์ที่ฉันกำลังทำอยู่นี่เป็นสิ่งที่ทำให้เสียสมาธิและดูไม่ถูกต้อง <input type="text" name="user" class="middle" id="user" tabindex="1" /> Firefox ดูเหมือนจะไม่ทำเช่นนี้หรืออย่างน้อยจะให้ฉันควบคุมด้วย: border: x; ถ้ามีคนบอกฉันได้ว่าประสิทธิภาพของ IE ฉันจะอยากรู้อยากเห็น การได้รับ Safari เพื่อลบแสงน้อยนี้จะดี
610 css  input  safari  webkit  border 
25
ตรวจสอบว่าองค์ประกอบมีคลาสใน JavaScript หรือไม่?
ใช้ JavaScript ธรรมดา (ไม่ใช่ jQuery) มีวิธีการตรวจสอบว่าองค์ประกอบมีคลาสหรือไม่? ขณะนี้ฉันกำลังทำสิ่งนี้: var test = document.getElementById("test"); var testClass = test.className; switch (testClass) { case "class1": test.innerHTML = "I have class1"; break; case "class2": test.innerHTML = "I have class2"; break; case "class3": test.innerHTML = "I have class3"; break; case "class4": test.innerHTML = "I have class4"; break; …
586 javascript  html  css  dom 
21
ภาพบังคับ CSS ปรับขนาดและรักษาอัตราส่วน
ฉันทำงานกับภาพและฉันพบปัญหาอัตราส่วนภาพ <img src="big_image.jpg" width="900" height="600" alt="" /> อย่างที่คุณเห็นheightและwidthมีการระบุไว้แล้ว ฉันเพิ่มกฎ CSS สำหรับภาพ: img { max-width:500px; } แต่สำหรับbig_image.jpgผมได้รับและwidth=500 height=600ฉันจะตั้งค่าขนาดภาพใหม่ได้อย่างไรในขณะที่รักษาอัตราส่วนภาพ
577 css  image  aspect-ratio 
30
Bootstrap modal ปรากฏภายใต้พื้นหลัง
ฉันใช้รหัสสำหรับ modal โดยตรงจากตัวอย่าง Bootstrap และรวมเฉพาะ bootstrap.js (ไม่ใช่ bootstrap-modal.js) อย่างไรก็ตามคำกริยาของฉันปรากฏใต้จางสีเทา (ฉากหลัง) และไม่สามารถแก้ไขได้ นี่คือสิ่งที่ดูเหมือนว่า: ดูซอนี้สำหรับวิธีหนึ่งในการทำให้เกิดปัญหานี้อีกครั้ง โครงสร้างพื้นฐานของรหัสนั้นเป็นดังนี้: <body> <p>Lorem ipsum dolor sit amet.</p> <div class="my-module"> This container contains the modal code. <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body">Modal</div> </div> </div> </div> </div> </body> body { padding-top: 50px; } .my-module { position: …
26
ปุ่มอัพโหลดองค์ประกอบไฟล์แบบฟอร์ม Twitter Bootstrap
เหตุใดจึงไม่มีปุ่มอัปโหลดองค์ประกอบไฟล์แฟนซีสำหรับ twitter bootstrap มันจะหวานถ้าปุ่มหลักสีฟ้าถูกนำมาใช้สำหรับปุ่มอัปโหลด เป็นไปได้ไหมที่จะใช้ปุ่มอัพโหลดในการใช้ CSS? (ดูเหมือนองค์ประกอบเบราว์เซอร์ดั้งเดิมที่ไม่สามารถจัดการได้)
23
คุณจะรับเนื้อหาที่เป็นศูนย์กลางโดยใช้ Twitter Bootstrap ได้อย่างไร
ฉันพยายามทำตามตัวอย่างพื้นฐานมาก ใช้หน้าเริ่มต้นและระบบกริดฉันหวังว่าต่อไปนี้: <div class="row"> <div class="span12"> <h1>Bootstrap starter template</h1> <p>Example text.</p> </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ... จะสร้างข้อความกึ่งกลาง อย่างไรก็ตามมันยังคงปรากฏบนด้านซ้ายสุด ผมทำอะไรผิดหรือเปล่า?
21
ตัดคำในตาราง HTML
ฉันใช้คำword-wrap: break-wordสั่งตัดคำในdivs และspans อย่างไรก็ตามดูเหมือนว่าจะไม่ทำงานในเซลล์ตาราง ฉันมีตารางตั้งค่าwidth:100%โดยมีหนึ่งแถวและสองคอลัมน์ ข้อความในคอลัมน์แม้ว่าจะมีสไตล์ด้านบนword-wrapแต่ก็ไม่ได้ห่อ ทำให้ข้อความผ่านขอบเขตของเซลล์ สิ่งนี้เกิดขึ้นกับ Firefox, Google Chrome และ Internet Explorer นี่คือลักษณะที่มา: td { border: 1px solid; } <table style="width: 100%;"> <tr> <td> <div style="word-wrap: break-word;"> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word </div> </td> <td><span style="display: inline;">Short word</span></td> </tr> </table> เรียกใช้ข้อมูลโค้ดHide resultsขยายตัวอย่างข้อมูล คำที่ยาวด้านบนมีขนาดใหญ่กว่าขอบเขตของหน้าเว็บของฉัน แต่ไม่ได้ตัดกับ HTML ด้านบน ฉันลองทำตามคำแนะนำด้านล่างเพื่อเพิ่มtext-wrap:suppressและtext-wrap:normalแต่ก็ไม่ได้ช่วยอะไร
566 html  css  html-table 
8
Normalize.css และรีเซ็ต CSS แตกต่างกันอย่างไร
ฉันรู้ว่า CSS รีเซ็ตคืออะไร แต่เมื่อเร็ว ๆ นี้ฉันได้ยินเกี่ยวกับสิ่งใหม่นี้ที่ชื่อว่า Normalize.css Normalize.cssและรีเซ็ต CSSแตกต่างกันอย่างไร ความแตกต่างระหว่าง normalizing CSS และการรีเซ็ต CSS คืออะไร? เป็นเพียงคำศัพท์ใหม่สำหรับการรีเซ็ต CSS หรือไม่
565 css  normalize-css 
18
Angular: คลาสที่มีเงื่อนไขพร้อม * ngClass
เกิดอะไรขึ้นกับรหัสแองกูลาร์ของฉัน ฉันได้รับ: Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass ... HTML <ol class="breadcrumb"> <li *ngClass="{active: step==='step1'}" (click)="step='step1; '">Step1</li> <li *ngClass="{active: step==='step2'}" (click)="step='step2'">Step2</li> <li *ngClass="{active: step==='step3'}" (click)="step='step3'">Step3</li> </ol>
3
เหตุใดเบราว์เซอร์จึงตรงกับตัวเลือก CSS จากขวาไปซ้าย
CSS Selectors ถูกจับคู่โดยเครื่องมือเบราว์เซอร์จากขวาไปซ้าย ดังนั้นพวกเขาจึงหาเด็ก ๆ ก่อนจากนั้นตรวจสอบผู้ปกครองเพื่อดูว่าตรงกับส่วนที่เหลือของกฎหรือไม่ ทำไมนี้ มันเป็นเพียงเพราะสเป็คบอกว่า? มันจะมีผลต่อเค้าโครงท้ายที่สุดหรือไม่หากประเมินจากซ้ายไปขวา สำหรับฉันวิธีที่ง่ายที่สุดที่จะทำคือใช้ตัวเลือกที่มีจำนวนองค์ประกอบน้อยที่สุด ดังนั้น IDs เป็นอันดับแรก (เนื่องจากควรคืนค่า 1 องค์ประกอบเท่านั้น) จากนั้นอาจคลาสหรือองค์ประกอบที่มีจำนวนโหนดน้อยที่สุด - เช่นอาจมีเพียงหนึ่งช่วงบนหน้าดังนั้นไปที่โหนดนั้นโดยตรงด้วยกฎใด ๆ ที่อ้างอิงช่วง นี่คือลิงค์บางส่วนที่สำรองข้อมูลการอ้างสิทธิ์ของฉัน http://code.google.com/speed/page-speed/docs/rendering.html https://developer.mozilla.org/en/Writing_Efficient_CSS ดูเหมือนว่าจะทำเช่นนี้เพื่อหลีกเลี่ยงการดูเด็กทุกคนของพ่อแม่ (ซึ่งอาจเป็นจำนวนมาก) มากกว่าพ่อแม่ทุกคนของเด็กที่จะต้องเป็นหนึ่ง แม้ว่า DOM จะลึกมันก็จะดูที่หนึ่งโหนดต่อระดับแทนที่จะเป็นหลาย ๆ ในการจับคู่ RTL ง่ายกว่าหรือเร็วกว่าในการประเมิน CSS selectors LTR หรือ RTL
7
ทำให้ div เลื่อนในแนวตั้งโดยใช้ CSS
นี้ <div id="" style="overflow:scroll; height:400px;"> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ช่วยให้divผู้ใช้สามารถเลื่อนทั้งในแนวนอนและแนวตั้ง ฉันจะเปลี่ยนเพื่อให้ div สามารถเลื่อนได้ในแนวตั้งเท่านั้น ?
560 html  css 
21
ขยาย div เพื่อเติมความกว้างที่เหลือ
ฉันต้องการเค้าโครง div สองคอลัมน์ที่แต่ละอันสามารถมีความกว้างของตัวแปรเช่น div { float: left; } .second { background: #ccc; } <div>Tree</div> <div class="second">View</div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ฉันต้องการ div 'view' เพื่อขยายความกว้างทั้งหมดที่มีหลังจาก div 'tree' เติมเต็มพื้นที่ที่ต้องการ ขณะนี้ div 'มุมมอง' ของฉันมีการปรับขนาดเนื้อหาที่มีอยู่จะดีถ้า div ทั้งคู่ใช้ความสูงทั้งหมด ข้อจำกัดความรับผิดชอบไม่ซ้ำกัน: ขยาย div เป็นความกว้างสูงสุดเมื่อ float: left ถูกตั้งค่า เนื่องจากมีส่วนที่เหลือมีความกว้างคงที่ ช่วยด้วย div - ทำ div ให้พอดีกับความกว้างที่เหลืออยู่ เพราะฉันต้องการสองคอลัมน์ที่จัดชิดซ้าย
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.