การเขียนโปรแกรม css

14

ฉันจะใช้ตัวยกได้เฉพาะใน CSS เท่านั้น? ฉันมีสไตล์ชีทที่ฉันทำเครื่องหมายลิงก์ภายนอกด้วยอักขระตัวยก แต่ฉันมีเวลายากที่จะจัดแนวอักขระให้ถูกต้อง สิ่งที่ฉันมีในขณะนี้มีลักษณะเช่นนี้: a.external:after { font-size: 50%; vertical-align: top; content: "+"; } แต่มันไม่ทำงาน โดยธรรมชาติแล้วฉันจะใช้<sup>-tag เฉพาะในกรณีที่contentจะอนุญาตให้ใช้ HTML ...

320 css

11

เคียวรีสื่อสามารถปรับขนาดตามองค์ประกอบ div แทนหน้าจอได้หรือไม่?

ฉันต้องการใช้เคียวรีสื่อบันทึกเพื่อปรับขนาดองค์ประกอบตามขนาดของdivองค์ประกอบที่มีอยู่ฉันไม่สามารถใช้ขนาดหน้าจอได้เนื่องจากใช้divเป็นเพียงวิดเจ็ตภายในเว็บเพจและขนาดอาจแตกต่างกันไป ปรับปรุง ดูเหมือนว่าจะมีงานที่ทำอยู่ในตอนนี้: https://github.com/ResponsiveImagesCG/cq-demos

317 css media-queries

23

คุณสมบัติรัศมีของ CSS3 และการยุบขอบ: การยุบไม่ผสมกัน ฉันจะใช้รัศมีเส้นขอบเพื่อสร้างตารางที่ยุบด้วยมุมที่ถูกปัดเศษได้อย่างไร

แก้ไข - ชื่อเรื่อง:มีทางเลือกในการประสบความสำเร็จborder-collapse:collapseในCSS(ในการสั่งซื้อที่จะมีการยุบตารางมุมโค้งมน)? เนื่องจากปรากฎว่าการทำให้เส้นขอบของตารางยุบลงไม่สามารถแก้ปัญหารากได้ฉันจึงอัปเดตชื่อเพื่อให้สะท้อนการอภิปรายได้ดียิ่งขึ้น ฉันกำลังพยายามทำตารางที่มีมุมโค้งมนโดยใช้CSS3 border-radiusคุณสมบัติ รูปแบบตารางที่ฉันใช้มีลักษณะดังนี้: table { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px } นี่คือปัญหา ฉันต้องการตั้งค่าborder-collapse:collapseคุณสมบัติและเมื่อชุดนั้นborder-radiusไม่ทำงานอีกต่อไป มีวิธีตาม CSS ที่ฉันสามารถรับผลเช่นเดียวกับที่border-collapse:collapseไม่ใช้จริงหรือไม่ การแก้ไข: ฉันได้ทำหน้าง่าย ๆ เพื่อแสดงปัญหาที่นี่ (Firefox / Safari เท่านั้น) ดูเหมือนว่าปัญหาส่วนใหญ่คือการตั้งค่าตารางให้มีมุมมนไม่ส่งผลต่อมุมของtdองค์ประกอบมุม ถ้าตารางมีสีเดียวทั้งหมดนี่คงไม่ใช่ปัญหาเพราะฉันสามารถสร้างยอดและล่างtdกลมสำหรับแถวแรกและแถวสุดท้ายตามลำดับ อย่างไรก็ตามฉันใช้สีพื้นหลังที่แตกต่างกันสำหรับตารางเพื่อแยกความแตกต่างของส่วนหัวและสำหรับการสตริปดังนั้นtdองค์ประกอบภายในจะแสดงมุมโค้งมนของพวกเขาเช่นกัน สรุปโซลูชั่นที่นำเสนอ: การล้อมรอบโต๊ะด้วยองค์ประกอบอื่นที่มีมุมโค้งมนไม่ได้ผลเพราะมุมสี่เหลี่ยมของตาราง "มีเลือดออก" การระบุความกว้างของเส้นขอบเป็น 0 จะไม่ยุบตาราง tdมุมด้านล่างยังคงเป็นสี่เหลี่ยมจัตุรัสหลังจากกำหนดระยะห่างระหว่างเซลล์เป็นศูนย์ การใช้จาวาสคริปต์แทนทำได้โดยหลีกเลี่ยงปัญหา การแก้ปัญหาที่เป็นไปได้: ตารางถูกสร้างขึ้นใน PHP ดังนั้นฉันสามารถใช้คลาสที่แตกต่างกับแต่ละด้านนอก / tds และสไตล์แต่ละมุมแยกจากกัน ฉันไม่อยากทำสิ่งนี้เนื่องจากมันไม่ได้สวยงามมากและมีความเจ็บปวดเล็กน้อยที่จะนำไปใช้กับหลาย ๆ ตารางดังนั้นโปรดให้คำแนะนำต่อไป วิธีแก้ปัญหาที่เป็นไปได้ 2 คือใช้ …

317 html css rounded-corners html-table

10

ฉันจะ“ ปิดการใช้งาน” ซูมบนหน้าเว็บมือถือได้อย่างไร?

ฉันกำลังสร้างหน้าเว็บสำหรับมือถือที่เป็นแบบฟอร์มขนาดใหญ่ที่มีอินพุตข้อความจำนวนมาก อย่างไรก็ตาม (อย่างน้อยบนโทรศัพท์มือถือ Android ของฉัน) ทุกครั้งที่ฉันคลิกที่อินพุตบางส่วนหน้าทั้งหมดจะซูมเข้าไปที่นั่นบดบังส่วนที่เหลือของหน้า มีคำสั่ง HTML หรือ CSS เพื่อปิดใช้งานการซูมประเภทนี้ในหน้าเว็บ moble หรือไม่?

316 html css mobile

8

ฉันสามารถมีภาพพื้นหลังหลายภาพโดยใช้ CSS ได้หรือไม่

เป็นไปได้หรือไม่ที่จะมีภาพพื้นหลังสองภาพ? ตัวอย่างเช่นฉันต้องการให้ทำซ้ำภาพหนึ่งภาพที่ด้านบน (ซ้ำ -x) และอีกหนึ่งภาพที่ทำซ้ำทั่วทั้งหน้า (ซ้ำ) โดยที่อีกภาพหนึ่งอยู่ด้านหลังของหน้าซึ่งอยู่ด้านบนสุด ฉันพบว่าฉันสามารถบรรลุเอฟเฟ็กต์ที่ต้องการสำหรับภาพพื้นหลังสองภาพโดยการตั้งค่าพื้นหลังของ html และเนื้อหา: html { background: url(images/bg.png); } body { background: url(images/bgtop.png) repeat-x; } CSS นี้ "ดี" หรือไม่ มีวิธีที่ดีกว่านี้ไหม? แล้วถ้าฉันต้องการภาพพื้นหลังสามภาพขึ้นไปล่ะ?

316 css background-image

10

ความกว้างของกอง 100% ลบด้วยจำนวนพิกเซลคงที่

ฉันจะบรรลุโครงสร้างต่อไปนี้โดยไม่ใช้ตารางหรือ JavaScript ได้อย่างไร เส้นขอบสีขาวแสดงถึงขอบของ divs และไม่เกี่ยวข้องกับคำถาม ขนาดของพื้นที่ตรงกลางจะแตกต่างกันไป แต่จะมีค่าพิกเซลที่แน่นอนและโครงสร้างทั้งหมดควรปรับขนาดตามค่าเหล่านั้น หากต้องการทำให้มันง่ายขึ้นฉันต้องการวิธีตั้งค่าความกว้าง "100% - n px" ให้กับ div ด้านบนกลางและล่างกลาง ฉันขอขอบคุณโซลูชันข้ามเบราว์เซอร์ที่สะอาดตา แต่ในกรณีที่เป็นไปไม่ได้ CSS แฮ็กจะทำ นี่คือโบนัส โครงสร้างอื่นที่ฉันพยายามและจบลงด้วยการใช้ตารางหรือ JavaScript มันแตกต่างกันเล็กน้อย แต่แนะนำปัญหาใหม่ ฉันได้ใช้มันเป็นส่วนใหญ่ในระบบหน้าต่างที่ใช้ jQuery แต่ฉันต้องการที่จะไม่ใช้เลย์เอาต์ของสคริปต์และควบคุมขนาดขององค์ประกอบเดียวเท่านั้น (อันกลาง)

316 html css height width

15

วิธีโหลดไฟล์ CSS โดยใช้ Javascript

เป็นไปได้ไหมที่จะนำเข้า CSS สไตล์ชีทไปยังหน้า html โดยใช้ Javascript ถ้าเป็นเช่นนั้นจะทำอย่างไร? PS จาวาสคริปต์จะถูกโฮสต์ในเว็บไซต์ของฉัน แต่ฉันต้องการให้ผู้ใช้สามารถใส่<head>แท็กของเว็บไซต์ของพวกเขาและมันควรจะสามารถนำเข้าไฟล์ css ที่โฮสต์บนเซิร์ฟเวอร์ของฉันลงในหน้าเว็บปัจจุบัน (ทั้งไฟล์ css และไฟล์จาวาสคริปต์จะโฮสต์บนเซิร์ฟเวอร์ของฉัน)

316 javascript html css dhtml

3

ฉันจะมีคอลัมน์ความกว้างคงที่สองคอลัมน์พร้อมคอลัมน์ยืดหยุ่นหนึ่งคอลัมน์ได้อย่างไร

ฉันกำลังพยายามตั้งค่ารูปแบบ flexbox ด้วยสามคอลัมน์ที่คอลัมน์ด้านซ้ายและขวามีความกว้างคงที่และคอลัมน์กลางจะงอเพื่อเติมเต็มพื้นที่ว่าง แม้จะมีการตั้งค่าขนาดสำหรับคอลัมน์ แต่ดูเหมือนว่าจะลดลงเมื่อหน้าต่างย่อขนาดลง ใครรู้วิธีการทำเช่นนี้? สิ่งเพิ่มเติมที่ฉันต้องทำคือซ่อนคอลัมน์ด้านขวาตามการโต้ตอบของผู้ใช้ในกรณีนี้คอลัมน์ด้านซ้ายจะยังคงความกว้างคงที่ แต่คอลัมน์กลางจะเติมส่วนที่เหลือของพื้นที่ #container { display: flex; justify-content: space-around; align-items: stretch; max-width: 1200px; } .column.left { width: 230px; } .column.right { width: 230px; border-left: 1px solid #eee; } .column.center { border-left: 1px solid #eee; } <div id="container"> <div class="column left"> <p>Anxiety was a blog series …

316 html css flexbox

6

มีตัวเลือก CSS สำหรับชายน์โดยตรงคนแรกเท่านั้นหรือไม่

ฉันมี html ต่อไปนี้ <div class="section"> <div>header</div> <div> contents <div>sub contents 1</div> <div>sub contents 2</div> </div> </div> และรูปแบบดังต่อไปนี้: DIV.section DIV:first-child { ... } ด้วยเหตุผลบางอย่างที่ผมไม่เข้าใจว่ารูปแบบจะได้รับนำไปใช้กับ"เนื้อหาย่อย 1" <div>เช่นเดียวกับ"หัว" <div> ฉันคิดว่าตัวเลือกเกี่ยวกับสไตล์จะใช้กับลูกโดยตรงคนแรกของ div ที่มีคลาสที่เรียกว่า "ส่วน" ฉันจะเปลี่ยนตัวเลือกเพื่อให้ได้สิ่งที่ต้องการได้อย่างไร

315 html css css-selectors

8

CSS เลื่อนที่กำหนดเองสำหรับ Firefox

ฉันต้องการปรับแต่งแถบเลื่อนด้วย CSS ฉันใช้โค้ด CSS ของ WebKit ซึ่งทำงานได้ดีสำหรับ Safari และ Chrome: ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } ฉันจะทำสิ่งเดียวกันใน Firefox ได้อย่างไร ฉันรู้ว่าฉันสามารถทำได้โดยใช้ jQuery แต่ฉันอยากทำด้วย CSS บริสุทธิ์ถ้าทำได้ จะขอบคุณสำหรับคำแนะนำจากผู้เชี่ยวชาญของใครบางคน!

313 css firefox webkit scrollbar

15

วิธีลบการขีดเส้นใต้สำหรับจุดยึด (ลิงค์)?

มีอยู่แล้ว (ใน CSS) เพื่อหลีกเลี่ยงการขีดเส้นใต้สำหรับข้อความและลิงค์ที่แนะนำในหน้า ..

313 html css underline

1

เหตุใดจึงไม่ทำงอรายการที่ย่อขนาดเนื้อหาที่ผ่านมา

ฉันมี 4 flexbox column และทุกอย่างทำงานได้ดี แต่เมื่อฉันเพิ่มข้อความลงในคอลัมน์และตั้งเป็นขนาดตัวอักษรขนาดใหญ่มันทำให้คอลัมน์กว้างกว่าที่ควรจะเป็นเนื่องจากคุณสมบัติ flex ฉันพยายามใช้word-break: break-wordและช่วย แต่เมื่อฉันปรับขนาดคอลัมน์เป็นความกว้างขนาดเล็กมากตัวอักษรในข้อความจะถูกแบ่งออกเป็นหลายบรรทัด (หนึ่งตัวอักษรต่อบรรทัด) แต่คอลัมน์นั้นไม่ได้รับความกว้างที่เล็กกว่าขนาดตัวอักษรหนึ่งตัว . ดูวิดีโอนี้ (ในตอนแรกคอลัมน์แรกมีขนาดเล็กที่สุด แต่เมื่อฉันปรับขนาดหน้าต่างมันเป็นคอลัมน์ที่กว้างที่สุดฉันแค่ต้องการเคารพการตั้งค่าเฟล็กต์เสมอขนาดเฟล็กต์ 1: 3: 4: 4) ฉันรู้ว่าการตั้งค่าขนาดตัวอักษรและการเว้นช่องว่างเล็กลงจะช่วยได้ ... แต่มีวิธีแก้ไขปัญหาอื่นอีกหรือไม่ overflow-x: hiddenฉันไม่สามารถใช้ JSFiddle .container { display: flex; width: 100% } .col { min-height: 200px; padding: 30px; word-break: break-word } .col1 { flex: 1; background: orange; font-size: 80px …

312 html css flexbox

21

ข้อความไดนามิกขนาดอัตโนมัติเพื่อเติมขนาดภาชนะคงที่

ฉันต้องการแสดงข้อความที่ผู้ใช้ป้อนลงใน div ขนาดคงที่ สิ่งที่ฉันต้องการคือการปรับขนาดตัวอักษรโดยอัตโนมัติเพื่อให้ข้อความเติมในกล่องให้มากที่สุด ดังนั้น - หาก div คือ 400px x 300px ถ้ามีคนป้อน ABC แล้วมันเป็นตัวอักษรที่ใหญ่มาก หากพวกเขาป้อนย่อหน้าก็จะเป็นตัวอักษรขนาดเล็ก ฉันอาจต้องการเริ่มต้นด้วยขนาดตัวอักษรสูงสุด - อาจเป็น 32px และในขณะที่ข้อความมีขนาดใหญ่เกินไปที่จะพอดีกับคอนเทนเนอร์ให้ย่อขนาดของตัวอักษรจนกว่าจะพอดี

312 jquery html css

10

รับ div ส่วนสูงด้วย JavaScript ธรรมดา

Наэтотвопросестьответына Stack Overflow нарусском : Узнатьвысотуэлементачерез Javascript, еслионапрописанавстилевом มีความคิดเห็นเกี่ยวกับวิธีเพิ่มความสูงของ div โดยไม่ใช้ jQuery หรือไม่? ฉันถูกค้นหามากเกิน Stack สำหรับคำถามนี้และดูเหมือนว่าทุกคำตอบจะชี้ไปที่ของ .height()jQuery ฉันลองอะไรทำนองmyDiv.style.heightนั้น แต่มันก็ไม่ได้ผลอะไรเลยแม้แต่ตอนที่ div ของฉันมีwidthและheightตั้งค่าใน CSS

312 javascript html css

9

ฉันจะเปลี่ยนความหนาของแท็ก <hr> ของฉันได้อย่างไร

ฉันต้องการเปลี่ยนความหนาของกฎแนวนอนของฉัน ( <hr>) ใน CSS ฉันรู้ว่ามันสามารถทำได้ในรูปแบบ HTML เช่นนั้น - <hr size="10"> แต่ผมได้ยินว่านี้จะเลิกเป็นที่กล่าวถึงในMDN ที่นี่ ใน CSS ฉันพยายามใช้height:1pxแต่ไม่เปลี่ยนความหนา ฉันต้องการ<hr>เส้น0.5pxหนา ฉันใช้ Firefox 3.6.11 บน Ubuntu

311 html css user-interface

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