タグ付けされた質問 「css」

質問はほとんどすべてを言います。 たとえば、Twitter Bootstrapを使用している場合、BootstrapのCSSクラスから継承するクラスを自分のSASSスタイルシートで定義できますか？または、SASSの継承は単一ファイルのスコープ内でのみ機能しますか？

102 css  inheritance  stylesheet  sass 

以下HTMLとCSS .container { position: relative; border: solid 1px red; height: 256px; width: 256px; overflow: auto; } .full-height { position: absolute; top: 0; left: 0; right: 128px; bottom: 0; background: blue; } <div class="container"> <div class="full-height"> </div> </div> コードスニペットを実行する結果を非表示スニペットを展開 インナーdivは、必要に応じて、コンテナーのヘッド全体を占めます。他のフローのコンテンツをコンテナーに追加すると、次のようになります。 .container { position: relative; border: solid 1px red; height: 256px; width: …

102 html  css 

この質問は以前に尋ねられましたが、解決策は私の場合には適用されません。特定の背景画像がページに不可欠であるため、それらを確実に印刷したい。（CSSスプライトとして使用されている画像がいくつかあるため、ページ内の画像ではありません。） 同じ質問に対する別の解決策はlist-style-image、を使用することを提案しています。これは、アイコンごとに異なる画像がある場合にのみ機能し、CSSスプライトは使用できません。 アイコンをインラインで配置した別のページを作成する以外に、別の解決策はありますか？

102 css  printing  background-image 

これが機能していないように見えるため、私がやっていること以外に、これを行うことは可能ですか？そのclass.subclass専用のCSSを使用するために、クラスの下にあるサブクラスを持つことができるようにしたいと思います。 CSS .area1 { border:1px solid black; } .area1.item { color:red; } .area2 { border:1px solid blue; } .area2.item { color:blue; } HTML <div class="area1"> <table> <tr> <td class="item">Text Text Text</td> <td class="item">Text Text Text</td> </tr> </table> </div> <div class="area2"> <table> <tr> <td class="item">Text Text Text</td> <td class="item">Text Text Text</td> …

102 css 

jQueryでテキストを点滅させる簡単な方法とそれを停止する方法は何ですか？IE、FF、Chromeで動作する必要があります。ありがとう

102 javascript  jquery  html  css 

HTMLテキストボックスのサイズを設定するにはどうすればよいですか？

102 css 

ngStyleを使用して背景画像を追加する方法 私のコードは動作しません： this.photo = 'http://dl27.fotosklad.org.ua/20121020/6d0d7b1596285466e8bb06114a88c903.jpg'; <div [ngStyle]="{'background-image': url(' + photo + ')}"></div>

102 javascript  html  css  angular 

入力フィールドとラベルフィールドがあります。 <label class="adm" for="UserName">User name</label> <input class="adm" id="UserName" name="UserName" size="30" type="text" value="" /> およびCSS： body,html { font-family: Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; color: #111;} label.adm { font-size:0.9em; margin:0 0 3px 3px; display: block;} input.adm { font-size:0.9em; margin:0 0 3px 3px; } Firefoxでコードを開くと、フォントが異なります。Firebugは、継承する必要があることを示し、計算結果を見ると、ラベルがVerdanaを使用していることを示しています。ただし、入力は「MS Shell Dlg」を使用していることを示しています。 誰が何が起こっているのか、なぜそれが通常のCSSルールに従っていないように見えるのか説明できますか？

102 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; }

102 css  css-transitions 

各SVGファイル内ではなく、外部スタイルシートを使用して色を変更したいSVGグラフィックがいくつかあります。グラフィックをインラインで配置するのではなく、画像フォルダに保存して、ポイントします。 ツールチップが機能するようにこれらをこの方法で実装し<a>、リンクを許可するためにそれぞれをタグでラップしました。 <a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a> そして、これがSVGグラフィックのコードです： <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="stylesheets/main.css" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69"> <g> <path d="M28.44......./> </g> </svg> 次のコードを外部CSSファイル（main.css）に追加しました。 .socIcon g {fill:red;} ただし、グラフィックには影響しません。.socIcon gパス{}と.socIconパス{}も試しました。 何かが正しくない、おそらく私の実装では外部CSSの変更が許可されていないか、または手順を逃しましたか？よろしくお願いします！外部スタイルシートを介してSVGグラフィックの色を変更する機能が必要なだけですが、ツールチップとリンク機能を失うことはありません。（私はツールチップなしで生きることができるかもしれません。）ありがとう！

102 html  css  svg  stylesheet  external 

フレックスボックスのレイアウト行がブラウザウィンドウの残りの垂直方向のスペースを消費することをどのように確認できますか 3列のフレックスボックスレイアウトがあります。最初の2行は固定の高さですが、3行目は動的であり、ブラウザーの高さいっぱいまで拡大したいと思います。 列3を作成する行3に別のフレックスボックスがあります。これらの列内の要素を適切に調整するには、背景色やベースでのアイテムの配置などについて、ブラウザーの高さ全体を理解する必要があります。主要なレイアウトは、最終的には次のようになります。 .vwrapper { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; //height: 1000px; } .vwrapper #row1 { background-color: red; } .vwrapper #row2 { background-color: blue; } .vwrapper #row3 { background-color: green; flex 1 1 auto; display: flex; } .vwrapper #row3 #col1 { background-color: yellow; …

102 html  css  flexbox 

段落の2行目からインデントするにはどうすればよいですか？ 私はもう試した p { text-indent: 200px; } p:first-line { text-indent: 0; } そして p { margin-left: 200px; } p:first-line { margin-left: 0; } そして (with position:relative;) p { left: 200px; } p:first-line { left: 0; }

102 html  css  text  pseudo-class  indentation 

SVG rect要素にグラデーションを適用しようとしています。 現在、私はfill属性を使用しています。私のCSSファイル： rect { cursor: pointer; shape-rendering: crispEdges; fill: #a71a2e; } また、rect要素はブラウザで表示したときに正しい塗りつぶし色になります。 ただし、この要素に線形グラデーションを適用できるかどうか知りたいですか？

102 css  svg  gradient  linear-gradients 

の要素がありclass='myTestClass'ます。この要素のすべての子にcssスタイルを適用するにはどうすればよいですか？子の要素にのみスタイルを適用したいと思います。その孫ではありません。 使用できます .myTestClass > div { margin: 0 20px; } これはすべてのdiv子供に有効ですが、すべての子供に有効なソリューションが必要です。使えると思ったのです*が .myTestClass > * { margin: 0 20px; } 動作しません。 編集 .myTestClass > *セレクタは、Firefox 26にルールを適用しない、及び放火犯に係るマージンのために他のルールが存在しません。そして、に置き換える*と機能しdivます。

102 css  css-selectors 

<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8"> <div v-for="job in job"> <div class="text-center"> <h1>{{ job.job_title }}</h1> <p><strong>Google Inc. </strong> - {{ job.location }}</p> <h2><u>Job Description</u></h2> </div> <p v-html="desc"></p> <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p> <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button> </div> </div> <div class="hidden-sm-down col-md-4"></div> </div> </div> このボタンを中央に配置する方法がわかりません。BS 3ではセンターブロックを使用しますが、BS4ではそれはオプションではありません。何かアドバイス？

102 css  twitter-bootstrap  bootstrap-4