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

สมมติว่าฉันมีส่วนประกอบ Angular2 //home.component.ts import { Component } from 'angular2/core'; @Component({ selector: "home", templateUrl: "app/components/templates/home.component.html", styleUrls: ["app/components/styles/home.component.css"] }) export class HomeComponent { public width: Number; public height: Number; } ไฟล์ html เทมเพลตสำหรับคอมโพเนนต์นี้ //home.component.html <div class="home-component">Some stuff in this div</div> และสุดท้ายไฟล์ css สำหรับคอมโพเนนต์นี้ //home.component.css .home-component{ background-color: red; width: 50px; height: 50px; } …

108 css  angular 

เป็นไปได้ไหมที่จะเปลี่ยน<span>แท็ก (หรือ<div>) เพื่อจัดรูปแบบเนื้อหาล่วงหน้าเช่น<pre>แท็กจะใช้ CSS เพียงอย่างเดียว

108 html  css 

ในซอด้านล่างฉันได้เปลี่ยนการมองเห็นและความทึบแยกกัน ผลงานหลังทำ แต่อดีตไม่ทำ ยิ่งไปกว่านั้นในกรณีของการมองเห็นเวลาในการเปลี่ยนแปลงจะถูกตีความว่าล่าช้าเมื่อวางเมาส์เหนือ เกิดขึ้นทั้งใน Chrome และ Firefox นี่คือบั๊กหรือไม่? http://jsfiddle.net/0r218mdo/3/ กรณีที่ 1: #inner{ visibility:hidden; transition:visibility 1000ms; } #outer:hover #inner{ visibility:visible; } กรณีที่ 2: #inner1{ opacity:0; transition:opacity 1000ms; } #outer1:hover #inner1{ opacity:1; }

108 css  css-transitions 

ฉันกำลังพยายามซ้อนผ้าใบสองผืนเข้าด้วยกันและทำให้เป็นผ้าใบสองชั้น ฉันเห็นตัวอย่างที่นี่: <div style="position: relative;"> <canvas id="layer1" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> <canvas id="layer2" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> </div> แต่ฉันต้องการกำหนดแนวผ้าใบทั้งสองที่ตรงกลางหน้าจอ ถ้าฉันตั้งค่าleftเป็นค่าคงที่ในขณะที่ฉันเปลี่ยนการวางแนวของหน้าจอ (ขณะที่ฉันกำลังทำ aps บน iPad) ผืนผ้าใบจะไม่อยู่ตรงกลางหน้าจอเหมือนกับการทำงานของมัน <div align="center"> ใครสามารถช่วยกรุณา?

108 css  html5-canvas 

ตัวเลือกทั้งสองนี้แตกต่างกันอย่างไร .classA.classB { border: 1px solid; } .classA .classB { border: 1px solid; }

108 css  css-selectors 

ฉันกำลังเล่นกับ CSS3 และพยายามที่จะบรรลุเอฟเฟกต์ข้อความเช่นนี้ (เงาด้านในที่พร่ามัวสีดำ): แต่ฉันไม่สามารถหาวิธีสร้างเงาของข้อความภายในข้อความได้ ฉันสงสัยว่ามันยังคงเป็นไปได้หรือไม่เพราะองค์ประกอบกล่องเงาสามารถทำให้เงาภายในเป็นแบบนี้: box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5); ความคิดใด ๆ ?

107 css  text  shadow 

ฉันมีปลั๊กอินกราฟที่แทรกผืนผ้าใบและคำอธิบายแผนภูมิ<table>ลงในคอนเทนเนอร์ ในปลั๊กอินtableนี้ไม่มีwidthกำหนดไว้และใน CSS ของฉันมีความกว้างสำหรับตารางภายในคอนเทนเนอร์ที่ปลั๊กอินของฉันถูกแทรก ดังนั้น div ใหม่จึงสืบทอดtable{ width: 100%}มาจาก CSS และแสดงผลผิด ฉันพยายามใช้width: initial;ดูดีบน Chrome แต่IE ไม่ชอบให้ ตรวจสอบความเข้ากันได้ของเบราว์เซอร์ ฉันยอมรับการเปลี่ยน / บังคับใช้ CSS แบบอินไลน์ในสคริปต์ / ปลั๊กอินเนื่องจากต้องใช้งานได้ในทุกสภาพแวดล้อม ทางออกที่ดีที่สุดคืออะไร?

107 css  internet-explorer  cross-browser  width 

ปิด. คำถามนี้เป็นคำถามปิดหัวข้อ ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน9 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันไม่แน่ใจมาตลอดว่าจะเริ่มจากจุดใดเพื่อเป็นแนวทางปฏิบัติที่ดีที่สุดทั่วไป ใช่ฉันรู้ว่ามันขึ้นอยู่กับการออกแบบของคุณ - แต่อะไรที่พบบ่อยที่สุด? นี่คือสิ่งที่ฉันมีในตอนนี้ในฐานะผู้เริ่มต้น: h1 { font-size: 24px;} h2 { font-size: 22px;} h3 { font-size: 18px;} h4 { font-size: 16px;} h5 { font-size: 12px;} h6 { font-size: 10px;} ใช่เราไม่ได้ใช้ EM ในงานปัจจุบันของฉัน ขอบคุณ

107 html  css  frontend 

ฉันต้องการเพิ่มตัวคั่นระหว่างองค์ประกอบของการนำทาง ตัวคั่นคือภาพ โครงสร้าง HTML ของฉันเป็นเหมือน: ol > li > a > img. ฉันมาถึงสองวิธีที่เป็นไปได้: หากต้องการเพิ่มliแท็กสำหรับการแยก (โห่!) รวมตัวคั่นในรูปภาพของแต่ละองค์ประกอบ (ซึ่งดีกว่า แต่มีความเป็นไปได้ที่ผู้ใช้อาจคลิกเช่น "หน้าแรก" แต่ไปที่ "บริการ" เนื่องจากเป็นตัวคั่นที่อยู่ด้านหลังอีกอันและผู้ใช้อาจคลิกตัวคั่นที่ เป็นของ "บริการ"); จะทำอย่างไร?

107 css  navigation  usability  separator 

ฉันพยายามดูผ่านเครื่องมือสำหรับนักพัฒนาของ Chrome ว่าคำแนะนำเครื่องมือมีโครงสร้างอย่างไรบนไซต์ อย่างไรก็ตามแม้ว่าฉันจะวางเมาส์เหนือรายการนั้น แต่เมื่อฉัน "ตรวจสอบองค์ประกอบ" ก็ไม่มีสิ่งใดแสดงสำหรับคำแนะนำเครื่องมือใน html ฉันรู้ว่าฉันสามารถตั้งค่ารูปแบบเป็น:hoverได้ แต่ฉันยังไม่เห็น html หรือ css ของคำแนะนำเครื่องมือ ความคิดใด ๆ ?

107 html  css  hover  google-chrome-devtools 

ฉันกำลังสร้างโฮมเพจโดยใช้ Bootstrap, JQuery และ Chart.js (v2) ฉันทำให้การติดตั้งใช้งานได้โดยใช้ v1 แต่เพิ่งเข้าสู่ Bower และดาวน์โหลด v2 โดยใช้สิ่งนั้น ฉันกำลังสร้างตาราง 4 คอลัมน์แต่ละคอลัมน์มีแผนภูมิวงกลม แต่การปรับขนาดใน v2 ทำให้ฉันสับสนในการทำงาน ฉันต้องการให้แผนภูมิตอบสนองเพื่อให้ปรับขนาดได้อย่างเหมาะสมกับอุปกรณ์ขนาดเล็กเช่นแท็บเล็ตและสมาร์ทโฟนและปัญหาอย่างหนึ่งของฉันคือการกำจัดตำนานของแผนภูมิรวมถึงข้อมูลการวางเมาส์เมื่อวางเมาส์เหนือส่วนต่างๆของ แผนภูมิ. index.html <body> <div class="container"> <div class="row"> <div class="col-xs-3"> <canvas id="chart1"></canvas> </div> <div class="col-xs-3"> <canvas id="chart1"></canvas> </div> <div class="col-xs-3"> <canvas id="chart1"></canvas> </div> <div class="col-xs-3"> <canvas id="chart1"></canvas> </div> </div> </div> </body> …

107 javascript  jquery  css  charts  chart.js2 

http://jsfiddle.net/S8g4E/ ฉันมีตู้คอนเทนเนอร์divกับลูกสองคน ลูกคนแรกมีส่วนสูงที่กำหนด ฉันจะทำให้ลูกคนที่สองครอบครอง "พื้นที่ว่าง" ของภาชนะdivโดยไม่ให้ความสูงเฉพาะได้อย่างไร ในตัวอย่างสีชมพูdivควรใช้พื้นที่สีขาวด้วย คล้ายกับคำถามนี้: ทำอย่างไรให้ div ครอบครองส่วนสูงที่เหลืออยู่? แต่ฉันไม่ต้องการที่จะให้ตำแหน่งที่แน่นอน

107 html  css  height  parent 

เมื่อ SVG รวมอยู่ในเอกสารโดยตรงโดยใช้<svg>แท็กคุณสามารถใช้สไตล์ CSS กับ SVG ผ่านสไตล์ชีทของเอกสาร อย่างไรก็ตามฉันกำลังพยายามใช้สไตล์กับ SVG ซึ่งฝังอยู่ (โดยใช้<object>แท็ก) เป็นไปได้ไหมที่จะใช้รหัสต่อไปนี้? object svg { fill: #fff; }

107 html  css  svg 

ฉันต้องการลดความสว่างของภาพใน CSS ฉันค้นหามามาก แต่สิ่งที่ฉันมีคือวิธีเปลี่ยนความทึบ แต่นั่นทำให้ภาพสว่างขึ้น ใครช่วยฉันได้บ้าง

107 css 

ฉันมีหน้าที่มี div เหมือนด้านล่าง <div id="container"> <div id="A"> </div> <div id="B"> <div id="B1"></div> <div id="B2">B2</div> </div> <div id="C"></div> <div id="D"> </div> </div> ด้วยสไตล์เป็น; html, body { margin: 0; padding: 0; border: 0; } #B, #C, #D { position: absolute; } #A{ top: 0; width: 100%; height: 35px; background-color: #99CC00; } #B …

107 css