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

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

8
การตั้งค่าความสูงของแถวตาราง
ฉันมีรหัสนี้: <table class="topics" > <tr> <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">Test</td> <td style="padding: 0 4px 0 0;">1.0</td> <td>abc</td> </tr> <tr> <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">test2</td> <td style="padding: 0 4px 0 0;">1.3</td> <td>def</td> </tr> </table> แถวมีระยะห่างห่างกันเกินไป ฉันต้องการให้เส้นใกล้กันมากขึ้น สิ่งที่ฉันทำคือเพิ่ม CSS ต่อไปนี้ …
139 html  css 

6
เมนูแบบเลื่อนได้พร้อม Bootstrap - เมนูขยายคอนเทนเนอร์เมื่อไม่ควร
ฉันลองวิธีนี้ ( ซอของพวกเขา ) เพื่อเปิดใช้งานเมนูแบบเลื่อนได้ด้วย Bootstrap แต่ด้วยวิธีการนี้เมนูแบบเลื่อนได้จะขยายคอนเทนเนอร์ - ซอ - เมนูที่ไม่สามารถเลื่อนได้อย่างถูกต้องไม่ทำเช่นนี้ ฉันจะแก้ไขสิ่งนี้ได้อย่างไร ข้อเสนอแนะเกี่ยวกับวิธีการอื่น ๆ ที่เข้ากันได้กับ Bootstrap ก็มีค่าเช่นกัน! สำหรับการอ้างอิงนี่คือ HTML จากซอของวิธีแรก: <ul class="nav"> <li class="dropdown"> <a class="icon-key icon-white" data-toggle="dropdown" href="#" style= "font-weight: bold"></a> <div class="dropdown-menu" style="margin-left: 2em"> <ul class="dropdown-menu"> <!-- static non-scrollable menu header 1 --> </ul> </div> <div class="dropdown-menu" style="margin-left: …

9
CSS: ขนาดตัวอักษร 100% - 100% ของอะไร
มีหลาย บทความและคำถามเกี่ยวกับร้อยละขนาดอื่น ๆ เทียบกับขนาดตัวอักษร อย่างไรก็ตามฉันไม่สามารถทราบได้ว่าการอ้างอิงเปอร์เซ็นต์ควรเป็นอะไร ฉันเข้าใจว่านี่คือ 'ขนาดเท่ากันในทุกเบราว์เซอร์' ฉันยังอ่านสิ่งนี้เช่น: เปอร์เซ็นต์ (%): หน่วยเปอร์เซ็นต์นั้นเหมือนกับหน่วย“ em” มากพอสำหรับความแตกต่างพื้นฐาน ก่อนอื่นขนาดฟอนต์ปัจจุบันเท่ากับ 100% (เช่น 12pt = 100%) ในขณะที่ใช้หน่วยเปอร์เซ็นต์ข้อความของคุณยังคงสามารถปรับขนาดได้อย่างสมบูรณ์สำหรับอุปกรณ์มือถือและการเข้าถึง ที่มา: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ แต่ถ้าคุณพูดว่า "ie 12 pt = 100%" หมายความว่าคุณต้องกำหนดfont-size: 12ptก่อน นั่นเป็นวิธีการทำงานหรือไม่ คุณกำหนดขนาดในการวัดแบบสัมบูรณ์ก่อนแล้วจึงอ้างอิงสิ่งนี้ว่า '100%' ไม่สมเหตุสมผลนักตัวอย่างหลายคนบอกว่ามันมีประโยชน์ที่จะนำ: body { font-size: 100%; } ดังนั้นเมื่อทำสิ่งนี้ขนาดตัวอักษรจะสัมพันธ์กับอะไร? ฉันสังเกตเห็นว่าขนาดที่ฉันเห็นบนหน้าจอของฉันแตกต่างกันสำหรับแบบอักษรทุกตัว ยกตัวอย่างเช่น Arial ดูใหญ่กว่า Times New Roman นอกจากนี้ถ้าฉันจะทำเช่นนี้ขนาดร่างกาย = 100% …
138 css  font-size 

5
Bootstrap การป้อนข้อความแบบเต็มความกว้างภายในอินไลน์ฟอร์ม
ฉันดิ้นรนเพื่อสร้างกล่องข้อความที่เหมาะกับความกว้างทั้งหมดของพื้นที่เก็บของฉัน <div class="row"> <div class="col-md-12"> <form class="form-inline" role="form"> <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)"> <button type="submit" class="btn btn-lg">Search</button> </form> </div> </div> เมื่อฉันทำข้างต้นองค์ประกอบของฟอร์มทั้งสองนั้นเป็นแบบอินไลน์ตามที่คาดไว้ แต่อย่าใช้เวลาเกินสองสามคอลัมน์อย่างดีที่สุด การโฮเวอร์เหนือกองcol-md-12เพลิงแสดงให้เห็นว่าใช้ความกว้างเต็มตามที่คาดหวัง มันเป็นเพียงการป้อนข้อความที่ดูเหมือนจะไม่เต็ม ฉันพยายามเพิ่มค่าความกว้างในบรรทัดด้วย แต่ก็ไม่ได้เปลี่ยนแปลงอะไรเลย ฉันรู้ว่ามันควรจะง่ายเพียงแค่รู้สึกโง่จริง ๆ ตอนนี้ นี่คือซอ: http://jsfiddle.net/52VtD/4119/embedded/result/ แก้ไข: คำตอบที่เลือกนั้นละเอียดถี่ถ้วนในทุก ๆ ทางและเป็นความช่วยเหลือที่ยอดเยี่ยม มันคือสิ่งที่ฉันใช้ อย่างไรก็ตามฉันคิดว่าปัญหาเริ่มต้นของฉันเป็นปัญหากับเทมเพลต MVC5 เริ่มต้นภายใน Visual Studio 2013 ซึ่งมีอยู่ใน Site.css: input, …

11
จะตรวจสอบว่าใช้แบบอักษรใดตัวหนึ่งในหน้าเว็บได้อย่างไร
สมมติว่าฉันมีกฎ CSS ต่อไปนี้ในหน้าของฉัน: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ฉันจะตรวจสอบว่าใช้แบบอักษรตัวใดตัวหนึ่งในเบราว์เซอร์ของผู้ใช้ได้อย่างไร แก้ไขสำหรับคนที่สงสัยว่าทำไมฉันถึงต้องการทำสิ่งนี้:แบบอักษรที่ฉันตรวจพบมีสัญลักษณ์ที่ไม่สามารถใช้งานได้ในแบบอักษรอื่นและเมื่อผู้ใช้ไม่มีแบบอักษรที่ฉันต้องการแสดงลิงก์ที่ขอให้ผู้ใช้ดาวน์โหลดแบบอักษรนั้น สามารถใช้เว็บแอปพลิเคชันของฉันด้วยแบบอักษรที่ถูกต้อง ขณะนี้ฉันกำลังแสดงลิงค์แบบอักษรดาวน์โหลดสำหรับผู้ใช้ทั้งหมดฉันต้องการแสดงเฉพาะสำหรับผู้ที่ไม่มีแบบอักษรที่ถูกต้องติดตั้ง
138 javascript  html  css  fonts 

8
การผนวก“? v = 1” ต่อท้ายกับ CSS และ Javascript URL ในลิงก์และแท็กสคริปต์ทำอะไร
ฉันได้ดูเทมเพลตสำเร็จรูปของ HTML 5 (จากhttp://html5boilerplate.com/ ) และสังเกตเห็นการใช้"?v=1"URL ในเมื่ออ้างถึงไฟล์ CSS และ Javascript สิ่งที่ผนวก"?v=1"เข้ากับ CSS และ Javascript URL ในลิงค์และแท็กสคริปต์จะทำอย่างไร ไม่ทั้งหมด URL ที่มี Javascript "?v=1"(เช่นจากตัวอย่างดังต่อไปนี้js/modernizr-1.5.min.js) มีเหตุผลที่เป็นกรณีนี้หรือไม่? ตัวอย่างจากindex.html: <!-- CSS : implied media="all" --> <link rel="stylesheet" href="css/style.css?v=1"> <!-- For the less-enabled mobile browsers like Opera Mini --> <link rel="stylesheet" media="handheld" href="css/handheld.css?v=1"> <!-- All JavaScript at …
138 html  css  browser-cache 

11
การดาวน์โหลดแบบอักษร Google และตั้งค่าไซต์ออฟไลน์ที่ใช้
ฉันมีแม่แบบและมีการอ้างอิงถึงแบบอักษร Google เช่นนี้: <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'> ฉันจะดาวน์โหลดและตั้งค่าให้ใช้ในหน้าของฉันที่ใช้งานออฟไลน์อยู่ตลอดเวลาได้อย่างไร

3
วิธีการลบคุณสมบัติด้านซ้ายเมื่อตำแหน่ง: สัมบูรณ์?
ฉันกำลังแทนที่ CSS ของไซต์เป็นเวอร์ชัน RTL เมื่อมีการเลือกภาษาเฉพาะ ฉันมีองค์ประกอบที่ต้องมีตำแหน่งที่แน่นอน ในเวอร์ชัน LTR ฉันทำleft: 0px;และจัดชิดซ้าย ในเวอร์ชัน RTL ฉันต้องการทำสิ่งที่ตรงกันข้ามrightแต่leftคุณสมบัติไม่ได้ถูกแทนที่ดังนั้นจึงยังคงอยู่ทางซ้าย ฉันพยายามแฮ็คด้วย!importantแต่ไม่ได้ผล ฉันได้ลองตั้งค่าleft: noneแล้ว แต่ไม่ได้ผล ฉันจะตั้งค่าเป็นไม่มีหรือลบออกทั้งหมดในขณะที่ลบล้างได้อย่างไร
138 css  css-position 

6
ตารางความกว้าง 100% ล้นคอนเทนเนอร์ div [ซ้ำ]
คำถามนี้มีคำตอบอยู่แล้วที่นี่ : ตารางล้นออกนอก div (9 คำตอบ) ปิด2 เดือนที่แล้ว . ฉันมีปัญหากับตาราง html ที่ล้นเป็นคอนเทนเนอร์หลัก .page { width: 280px; border:solid 1px blue; } .my-table { word-wrap: break-word; } .my-table td { border:solid 1px #333; } <div class="page"> <table class="my-table"> <tr> <th>Header Text</th> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> <th>Header Text</th> </tr> …
138 html  css  html-table 

4
ซ่อนตำแหน่งแน่นอนและโอเวอร์โฟลว์
เรามี DIV สองตัวตัวหนึ่งฝังอยู่ในอีกอันหนึ่ง หาก DIV ด้านนอกไม่อยู่ในตำแหน่งที่แน่นอน DIV ด้านในซึ่งอยู่ในตำแหน่งสัมบูรณ์จะไม่เป็นไปตามส่วนล้นที่ซ่อนอยู่ของ DIV ด้านนอก ( ตัวอย่าง ) มีโอกาสหรือไม่ที่จะทำให้ DIV ด้านในเป็นไปตามส่วนล้นที่ซ่อนอยู่ของ DIV ด้านนอกโดยไม่ตั้งค่า DIV ด้านนอกให้อยู่ในตำแหน่งที่แน่นอน (สาเหตุที่ทำให้เลย์เอาต์ทั้งหมดของเราสกปรก) นอกจากนี้ยังมีตำแหน่งสัมพัทธ์สำหรับ DIV ภายในของเราไม่ได้เป็นตัวเลือกที่เราต้อง "เติบโตออก" ของ TD ตาราง ( exmple ) มีทางเลือกอื่นอีกไหม?

4
ปิดการใช้งานการเลื่อนบนร่างกาย
ฉันต้องการปิดการเลื่อนบน HTML bodyทั้งหมด ฉันได้ลองใช้ตัวเลือกต่อไปนี้: overflow: hidden; (ไม่ทำงานไม่ได้ปิดใช้งานการเลื่อนเพียงแค่ซ่อนแถบเลื่อน) position: fixed; (วิธีนี้ใช้งานได้ แต่เลื่อนไปที่ด้านบนสุดซึ่งเป็นที่ยอมรับไม่ได้สำหรับแอปพลิเคชันเฉพาะนี้) ฉันไม่พบทางเลือกอื่นสำหรับสองตัวเลือกนี้มีอีกหรือไม่?
138 html  css  scroll 


5
จะตรวจสอบได้อย่างไรว่าระบบปฏิบัติการอยู่ในโหมดมืดในเบราว์เซอร์?
คล้ายกับ " จะตรวจสอบได้อย่างไรว่า OS X อยู่ในโหมดมืด " สำหรับเบราว์เซอร์เท่านั้น มีใครพบว่ามีวิธีตรวจสอบว่าระบบของผู้ใช้อยู่ใน OS X Dark Mode ใหม่ใน Safari / Chrome / Firefox หรือไม่? เราต้องการเปลี่ยนการออกแบบเว็บไซต์ของเราให้เป็นมิตรกับโหมดมืดตามโหมดการทำงานปัจจุบัน
138 css  macos  safari 

4
ข้อผิดพลาดแสดง“ ล้มเหลวในการรับข้อความสำหรับสไตล์ชีท (#): ไม่พบสไตล์ชีทที่มีรหัสที่ระบุ” สิ่งนี้หมายความว่าอย่างไร
ฉันได้รับข้อผิดพลาดนี้ใน Chrome เมื่อโหลดแอปพลิเคชันที่ฉันกำลังทำงานอยู่: ไม่สามารถรับข้อความสำหรับสไตล์ชีท 50: ไม่พบสไตล์ชีทพร้อมรหัสที่ระบุ การโหลดหน้าต่อมาจะเกิดข้อผิดพลาดซ้ำ แต่ด้วยหมายเลขอื่น: ไม่สามารถรับข้อความสำหรับสไตล์ชีท 152: ไม่พบสไตล์ชีทพร้อมรหัสที่ระบุ สิ่งนี้จะเกิดขึ้นใน Chrome และเฉพาะกับแอปพลิเคชันนี้เท่านั้น ไม่มีการติดตามสแต็คการอ้างอิงหรือข้อมูลอื่นใดเกี่ยวกับสิ่งที่ได้รับรหัสสิ่งที่สไตล์ชีทที่เป็นปัญหาหรือสิ่งที่ทำให้เกิดปัญหานี้โดยทั่วไป ฉันจะค้นหาสิ่งที่ทำให้เกิดข้อผิดพลาดนี้และแก้ไขได้อย่างไร
137 css  google-chrome 

7
ใช้สไตล์กับแท็ก td ระดับแรกเท่านั้น
มีวิธีการนำสไตล์ของคลาสไปใช้กับแท็ก td เพียงระดับเดียวหรือไม่? <style>.MyClass td {border: solid 1px red;}</style> <table class="MyClass"> <tr> <td> THIS SHOULD HAVE RED BORDERS </td> <td> THIS SHOULD HAVE RED BORDERS <table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table> </td> </tr> </table>
137 css  css-selectors 

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