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

15

สัญลักษณ์แสดงหัวข้อย่อยที่กำหนดเองสำหรับ <li> องค์ประกอบใน <ul> ที่เป็นอักขระปกติไม่ใช่รูปภาพ

ฉันตระหนักดีว่าสามารถระบุกราฟิกที่กำหนดเองให้เป็นอักขระสัญลักษณ์แสดงหัวข้อย่อยแทนโดยใช้แอตทริบิวต์ CSS: list-style-image จากนั้นให้ URL อย่างไรก็ตามในกรณีของฉันฉันแค่ต้องการใช้สัญลักษณ์ '+' ฉันไม่ต้องการสร้างภาพกราฟิกสำหรับสิ่งนั้นแล้วชี้ไปที่มัน ฉันแค่สั่งให้รายการที่ไม่เรียงลำดับใช้สัญลักษณ์บวกเป็นสัญลักษณ์แสดงหัวข้อย่อย สามารถทำได้หรือฉันถูกบังคับให้ทำกราฟิกก่อน?

126 html css webkit mobile-webkit

5

การใช้ CSS วิธีเปลี่ยนเฉพาะคอลัมน์ที่ 2 ของตาราง

การใช้ css เท่านั้นฉันจะแทนที่ css ของคอลัมน์ที่ 2 ของตารางได้อย่างไร ฉันสามารถเข้าถึงคอลัมน์ทั้งหมดโดยใช้: .countTable table table td ฉันไม่สามารถเข้าไปที่ html ในหน้านี้เพื่อแก้ไขได้เนื่องจากไม่ใช่ไซต์ของฉัน ขอบคุณ

126 css

12

Bootstrap 4 เปลี่ยนสี Toggler ของแฮมเบอร์เกอร์

ฉันมีเว็บไซต์ bootstrap ที่เพิ่มตัวสลับแฮมเบอร์เกอร์เมื่อขนาดหน้าจอน้อยกว่า 992px รหัสเป็นดังนี้: <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> มีความเป็นไปได้ที่จะเปลี่ยนสีของปุ่มสลับแฮมเบอร์เกอร์หรือไม่?

126 css twitter-bootstrap bootstrap-4

5

การตัดตาราง CSS

เป็นไปได้ไหมที่จะสร้าง CSS grid wrap โดยไม่ต้องใช้มีเดีย ในกรณีของฉันฉันมีจำนวนรายการที่ไม่สามารถกำหนดได้ซึ่งฉันต้องการวางไว้ในตารางและฉันต้องการให้เส้นตารางนั้นรวมเข้าด้วยกัน ด้วยการใช้ Flexbox ฉันไม่สามารถจัดพื้นที่ได้อย่างน่าเชื่อถือ ฉันต้องการหลีกเลี่ยงการค้นหาสื่อมากมายเช่นกัน นี่คือโค้ดตัวอย่างบางส่วน : .grid { display: grid; grid-gap: 10px; grid-auto-flow: column; grid-template-columns: 186px 186px 186px 186px; } .grid > * { background-color: green; height: 200px; } <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด และนี่คือภาพ GIF: โปรดทราบว่าหากใครสามารถบอกฉันได้ว่าฉันสามารถหลีกเลี่ยงการระบุความกว้างของรายการทั้งหมดเช่นที่ฉันอยู่ด้วยgrid-template-columnsได้อย่างไรจะดีมาก ฉันต้องการให้เด็กระบุความกว้างของตัวเอง

126 html css css-grid

6

อะไรคือความแตกต่างระหว่าง width, innerWidth และ outerWidth, height, innerHeight และ outerHeight ใน jQuery

ฉันเขียนตัวอย่างเพื่อดูว่าอะไรคือความแตกต่าง แต่แสดงผลลัพธ์เดียวกันสำหรับฉันสำหรับความกว้างและความสูง <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var div = $('.test'); var width = div.width(); // 200 px var innerWidth = div.innerWidth(); // 200px var outerWidth = div.outerWidth(); // 200px var height = div.height(); // 150 px var innerHeight = div.innerHeight(); // 150 px var outerHeight = …

125 javascript jquery css dom styles

3

การวางภาพที่มุมขวาบน - CSS

ฉันต้องการแสดงภาพที่มุมขวาบนของ div (รูปภาพเป็นริบบิ้น "เส้นทแยงมุม") แต่เก็บข้อความปัจจุบันไว้ใน div ภายในเช่นติดอยู่ที่ด้านบนสุด ฉันลองสิ่งต่าง ๆ เช่นรวมภาพใน div อื่นหรือกำหนดคลาสของมันเช่น: .ribbon { position: relative; top: -16px; right: -706px; } <div id="content"> <img src="images/ribbon.png" class="ribbon"/> <div>some text...</div> </div> แต่ไม่มีโชค ผลลัพธ์ที่ดีที่สุดที่ฉันได้คือข้อความทั้งหมดเลื่อนลงเพื่อให้มีขนาดความสูงเท่ากันของรูปภาพ ความคิดใด ๆ ?

125 html css

9

รูปภาพ URI ข้อมูลที่เล็กที่สุดเท่าที่จะเป็นไปได้สำหรับภาพโปร่งใส

ฉันใช้รูปภาพ 1x1 แบบโปร่งใสกับภาพพื้นหลังเพื่อให้สามารถใช้สไปรต์และยังคงให้ข้อความแสดงแทนสำหรับไอคอนบางตัว ฉันต้องการใช้ URI ข้อมูลสำหรับรูปภาพเพื่อลดจำนวนคำขอ HTTP แต่สตริงที่เล็กที่สุดเท่าที่จะเป็นไปได้ในการสร้างรูปภาพโปร่งใสคืออะไร ฉันรู้ว่าฉันสามารถใช้ data URI: s สำหรับรูปภาพจริงแทนสไปรต์ แต่มันง่ายกว่าที่จะรักษาเมื่อทุกอย่างถูกเก็บไว้ใน CSS แทนที่จะกระจัดกระจายไปทั่ว

125 css css-sprites

12

การตั้งค่ากฎคลาสหลอก CSS จาก JavaScript

ฉันกำลังหาวิธีเปลี่ยนกฎ CSS สำหรับตัวเลือกคลาสหลอก (เช่น: link,: hover ฯลฯ ) จาก JavaScript ดังนั้นอะนาล็อกของโค้ด CSS: a:hover { color: red }ใน JS ฉันไม่พบคำตอบจากที่อื่น หากใครรู้ว่านี่เป็นสิ่งที่เบราว์เซอร์ไม่รองรับนั่นก็จะเป็นประโยชน์เช่นกัน

125 javascript css pseudo-class css-in-js

5

แสดงหน้าจอโหลดเมื่อนำทางระหว่างเส้นทางใน Angular 2

ฉันจะแสดงหน้าจอโหลดได้อย่างไรเมื่อฉันเปลี่ยนเส้นทางใน Angular 2

125 html css angular angular2-routing

2

วิธีลบคุณสมบัติสไตล์เดียวด้วย jquery

ฉันมี div กับคุณสมบัติstyle="-moz-user-select:none; position:static !important;"นี้ ฉันต้องการลบ-moz-user-select Tried with $ (selector) .css () แต่ฉันไม่รู้ว่าจะตั้งค่าอะไรเพราะ "ไม่มี"

125 jquery css

7

คะแนนในความจำเพาะของ CSS คำนวณอย่างไร

การค้นคว้าข้อมูลเฉพาะที่ฉันพบในบล็อกนี้ - http://www.htmldog.com/guides/cssadvanced/specificity/ ระบุว่าความจำเพาะเป็นระบบการให้คะแนนแบบจุดสำหรับ CSS มันบอกเราว่าองค์ประกอบมีค่า 1 คะแนนคลาสมีค่า 10 คะแนนและ ID มีค่า 100 คะแนน นอกจากนี้ยังกล่าวอีกว่าคะแนนเหล่านี้รวมและจำนวนเงินโดยรวมคือความจำเพาะของตัวเลือกนั้น ตัวอย่างเช่น: body = 1 point body .wrapper = 11 points body .wrapper #container = 111 points ดังนั้นเมื่อใช้จุดเหล่านี้ฉันคาดว่า CSS และ HTML ต่อไปนี้จะส่งผลให้ข้อความเป็นสีน้ำเงิน: #a { color: red; } .a .b .c .d .e .f .g .h .i …

125 css css-selectors css-specificity

7

เหตุใด CSS จึงไม่รองรับการเว้นช่องว่างเชิงลบ

ฉันเห็นหลายครั้งแล้วว่าโอกาสในการเพิ่มช่องว่างในเชิงลบอาจช่วยให้การพัฒนา CSS ขององค์ประกอบหน้าบางอย่างดีขึ้นและง่ายขึ้น อย่างไรก็ตามไม่มีข้อกำหนดสำหรับการเว้นวรรคเชิงลบใน W3C CSS เหตุผลเบื้องหลังนี้คืออะไร? มีสิ่งกีดขวางคุณสมบัติที่ทำให้ไม่สามารถใช้งานได้หรือไม่? ขอบคุณสำหรับคำตอบ อัปเดต ตามที่ฉันเห็นตัวอย่างเช่นในกรณีที่คุณใช้ฟอนต์ที่มีอะไรบางอย่างเช่นเว้นระยะห่างแนวตั้ง 20px และคุณต้องการใช้เส้นขอบประกับด้านล่างของฟอนต์ให้พูดเมื่อไฮเปอร์ลิงก์ปรากฏขึ้น ในกรณีเช่นนี้คุณจะพบว่าสไตล์นั้นดูซอมซ่อเกินไปเนื่องจากเส้นประจะปรากฏใต้คำที่ระบุ 20px หากคุณใช้ระยะขอบติดลบจะไม่ได้ผลเนื่องจากระยะขอบจะเปลี่ยนพื้นที่นอกเส้นขอบ ช่องว่างภายในเชิงลบอาจช่วยได้ในสถานการณ์เช่นนี้

125 html css padding

2

รัศมีขอบเป็นเปอร์เซ็นต์ (%) และพิกเซล (px) หรือ em

ถ้าฉันใช้ค่าพิกเซลหรือ emสำหรับ border-radius รัศมีขอบจะเป็นส่วนโค้งวงกลมหรือรูปเม็ดยาเสมอแม้ว่าค่าจะมากกว่าด้านที่ใหญ่ที่สุดขององค์ประกอบก็ตาม เมื่อฉันใช้เปอร์เซ็นต์รัศมีขอบจะเป็นรูปไข่และเริ่มต้นที่ตรงกลางของแต่ละด้านขององค์ประกอบทำให้เป็นรูปวงรีหรือวงรี : ค่าพิกเซลสำหรับรัศมีขอบ: แสดงข้อมูลโค้ด div { background: teal; border-radius: 999px; width: 230px; height: 100px; padding: 40px 10px; box-sizing: border-box; font-family: courier; color: #fff; } <div>border-radius:999px;</div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ค่าเปอร์เซ็นต์สำหรับรัศมีขอบ: แสดงข้อมูลโค้ด div { background: teal; border-radius: 50%; width: 230px; height: 100px; padding:40px 10px; box-sizing:border-box; font-family:courier; color:#fff; } <div>border-radius:50%;</div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด …

125 css css-shapes

12

ป้องกันไม่ให้แถบเลื่อนเพิ่มขึ้นในความกว้างของหน้าบน Chrome

Наэтотвопросестьответына Stack Overflow нарусском : scroll & padding ฉันมีปัญหาเล็กน้อยในการพยายามทำให้หน้า. html ของฉันมีความกว้างที่สม่ำเสมอบน Chrome ตัวอย่างเช่นฉันมีหน้า (1) ที่มีเนื้อหาจำนวนมากที่ล้นความสูงของวิวพอร์ต (คำขวา?) ดังนั้นจึงมีแถบเลื่อนแนวตั้ง ในหน้านั้น (1) ในหน้า (2) ฉันมีเค้าโครงเหมือนกัน (เมนู, div, ... ฯลฯ ) แต่มีเนื้อหาน้อยกว่าจึงไม่มีแถบเลื่อนแนวตั้งอยู่ในนั้น ปัญหาคือในหน้า (1) แถบเลื่อนดูเหมือนจะดันองค์ประกอบไปทางซ้ายเล็กน้อย (เพิ่มความกว้าง?) ในขณะที่ทุกอย่างปรากฏตรงกลางหน้า (2) ฉันยังคงเป็นมือใหม่ใน HTML / CSS / JS และฉันค่อนข้างเชื่อว่านี่ไม่ใช่เรื่องยาก แต่ฉันไม่มีโชคในการหาวิธีแก้ปัญหา มันทำงานได้ตามที่ตั้งใจไว้ใน IE10 และ FireFox (แถบเลื่อนที่ไม่รบกวน) ฉันพบสิ่งนี้ใน Chrome เท่านั้น

125 html css google-chrome scrollbar

6

วิธีสร้างปุ่ม HTML แบบโปร่งใส

ฉันใช้ Dreamweaver เพื่อสร้างเว็บไซต์และฉันคิดว่าจะใช้ Photoshop เพื่อสร้างพื้นหลัง ฉันตัดสินใจที่จะทำเช่นนั้นเพียงเพราะในกรณีที่ฉันเลือกที่จะเปลี่ยนชื่อปุ่มได้อย่างง่ายดายเพียงแค่แก้ไขรหัสฉันสามารถอ้างถึงรหัสได้ ถ้าฉันจะสร้างปุ่มโดยใช้ Photoshop ฉันจะไม่สามารถแก้ไขข้อความในปุ่มเหล่านั้นหรือในองค์ประกอบใด ๆ ได้อย่างง่ายดาย ดังนั้นคำถามของฉันจึงง่ายมากฉันจะสร้างปุ่มที่มีรูปแบบอินไลน์เรียบง่ายได้อย่างไรทำให้โปร่งใสโดยที่ยังคงมองเห็นค่าของปุ่มได้ .button { background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; } มันยังคงทิ้งขอบเงาไว้หลังจากที่คุณคลิก

125 html css

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