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

CSS(Cascading Style Sheets)は、HTML(HyperText Markup Language)、XML(Extensible Markup Language)ドキュメント、および色、レイアウト、フォントを含む(これらに限定されない)SVG要素の外観とフォーマットを記述するために使用される表現スタイルシート言語です。とアニメーション。また、画面、紙、音声、またはその他のメディアで要素をレンダリングする方法についても説明します。



6
Chrome / Safariがフレックスの親の高さを100%満たしていない
特定の高さの垂直メニューが欲しいのですが。 各子は親の高さを埋め、テキストは中央揃えにする必要があります。 子の数はランダムなので、動的な値を使用する必要があります。 Div .containerにはランダムな数の子(.item)が含まれ、常に親の高さを満たす必要があります。それを実現するために、フレックスボックスを使用しました。 テキストを中央に揃えてリンクを作成するには、display: table-cellテクニックを使用しています。ただし、テーブルディスプレイを使用するには、高さを100%にする必要があります。 私の問題は.item-inner { height: 100% }、webkit(Chrome)で動作しないことです。 この問題の修正はありますか? または、すべて.itemを中央に揃えた垂直のテキストで親の高さを満たすようにする別のテクニックはありますか? ここの例jsFiddle、FirefoxとChromeで表示する必要があります .container { height: 20em; display: flex; flex-direction: column; border: 5px solid black } .item { flex: 1; border-bottom: 1px solid white; } .item-inner { height: 100%; width: 100%; display: table; } a { background: orange; …

12
Bootstrap CSSスタイルをオーバーライドするにはどうすればよいですか?
bootstrap.css私のウェブサイトに合うように変更する必要があります。直接custom.css変更bootstrap.cssするのではなく、別のファイルを作成する方が良いと思います。1つの理由はbootstrap.css、更新を取得する必要があるためです。すべての変更を再度含めようとすると苦労します。これらのスタイルの読み込み時間を少し犠牲にしますが、オーバーライドするいくつかのスタイルでは無視できます。 アンカー/クラスのスタイルbootstrap.cssを削除するようにオーバーライドするにはどうすればよいですか?たとえば、次のスタイリングルールをすべて削除したい場合legend: legend { display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: inherit; color: #333333; border: 0; border-bottom: 1px solid #e5e5e5; } ですべて削除できbootstrap.cssますが、CSSのオーバーライドに関するベストプラクティスについての私の理解が正しい場合は、代わりに何をすべきですか? 明確にするために、これらの凡例のスタイルをすべて削除し、親のCSS値を使用したいと思います。プラナフの答えを組み合わせて、私は次のことをしますか? legend { display: inherit !important; width: inherit !important; padding: inherit !important; margin-bottom: inherit !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; …

9
カーソルを指ポインターに変更
私はこれを持っaていますが、カーソルが通常のリンクのように指のポインタに変わるように「onmouseover」に挿入する必要があることを知りません: <a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a> 私はどこかに置く必要があることを読みました: onmouseover="cursor: hand (a pointing hand)" しかし、それは私のために働いていません。 さらに、これがJavaScript、CSS、または単なるHTMLと見なされるかどうかはわかりません。
234 html  css  mouseevent 

10
iframeを水平方向に中央揃えする方法は?
次の例を検討してください:(ライブデモ) HTML: <div>div</div> <iframe></iframe> CSS: div, iframe { width: 100px; height: 50px; margin: 0 auto; background-color: #777; } 結果: なぜがのiframeように中央揃えにならないのdivですか?どうすれば中央に配置できますか?

3
A4用紙サイズを設定するCSS
私はWebでA4用紙をシミュレートし、ブラウザー(具体的にはChrome)で表示されるようにこのページを印刷できるようにする必要があります。要素のサイズを21cm x 29.7cmに設定しましたが、印刷(または印刷プレビュー)に送信すると、ページがクリップされます。 このライブの例をご覧ください! body { margin: 0; padding: 0; background-color: #FAFAFA; font: 12pt "Tahoma"; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 21cm; min-height: 29.7cm; padding: 2cm; margin: 1cm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); …

8
HTMLで文字列をレンダリングし、スペースと改行を保持する
詳細ページのあるMVC3アプリがあります。その一部として、スペースと改行を含む説明(dbから取得)があります。レンダリングされると、新しい行とスペースはHTMLによって無視されます。それらが無視されないように、それらのスペースと改行をエンコードしたいと思います。 どうやってやるの? HTML.Encodeを試してみましたが、エンコードが表示されました(スペースや改行ではなく、他のいくつかの特殊文字にも表示されました)

8
子要素にCSSスタイルを適用する
特定のクラスを持つDIV内のテーブルにのみスタイルを適用したい: 注:子要素にはcss-selectorを使用します。 #1が機能し、#2が機能しないのはなぜですか? 1: div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;} 2: div.test th, td, caption {padding:40px 100px 40px 50px;} HTML: <html> <head> <style> div.test > th, td, caption {padding:40px 100px 40px 50px;} </style> </head> <body> <div> <table border="2"> <tr><td>some</td></tr> <tr><td>data</td></tr> <tr><td>here</td></tr> </table> </div> <div class="test"> <table …
232 css  css-selectors 

9
入力サイズと幅
<input name="txtId" type="text" size="20" /> または <input name="txtId" type="text" style="width: 150px;" /> 最適なクロスブラウザコードはどれですか? もちろん、要件によって異なりますが、人々がどのように決定し、どのような根拠に基づいているかを知りたいのです。
231 html  css 

29
ヘッダーが固定されたHTMLテーブル?
列ヘッダーが画面上で固定されたまま、表の本文と共にスクロールしないように、長いHTML表を表示するクロスブラウザーCSS / JavaScriptテクニックはありますか?Microsoft Excelの「フリーズペイン」効果について考えてみます。 テーブルの内容をスクロールできるようにしたいが、常に上部に列ヘッダーが表示されるようにしたい。

14
大きなフォントの素晴らしいアイコンでテキストを垂直方向に中央揃えする方法は?
font-awesomeアイコンとテキストを備えたブートストラップボタンがあるとします。 <div> <i class='icon icon-2x icon-camera'></i> hello world </div> テキストを垂直方向の中央に表示するにはどうすればよいですか?テキストがアイコンの下端に揃えられました:http : //jsfiddle.net/V7DLm/1/ 編集: 私は可能な解決策を持っています:http://jsfiddle.net/CLdeG/1/しかしそれは少しハックに感じます-追加のpタグを導入し、pull-leftとdisplay:tableを使用します。多分誰かがより簡単な方法を提案することができます。
231 html  css  font-awesome 

15
要素の片側だけにドロップシャドウを作成する方法は?
影を下だけに落とす方法はありますか?2つの画像が隣り合っているメニューがあります。右の画像と重なっているので、右の影は必要ありません。私はこれに画像を使いたくないので、以下のようにそれを下にのみドロップする方法があります: box-shadow-bottom: 10px #FFF; または類似? -moz-box-shadow: 0px 3px 3px #000; -webkit-box-shadow: 0px 3px 3px #000; box-shadow-bottom: 5px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
230 css 

13
CSS 2つのdivが隣同士
2つ<div>のsを隣同士に配置したい。右<div>は約200pxです。左<div>は残りの画面幅を埋める必要がありますか?これどうやってするの?
230 html  css 

9
CSS3セレクター:クラス名を持つ最初のタイプ?
CSS3セレクターを使用することは可能ですか :first-of-typeして、特定のクラス名の最初の要素を選択することはできますか?テストで成功しなかったので、成功していないと思いますか? コード(http://jsfiddle.net/YWY4L/): p:first-of-type {color:blue} p.myclass1:first-of-type {color:red} .myclass2:first-of-type {color:green} <div> <div>This text should appear as normal</div> <p>This text should be blue.</p> <p class="myclass1">This text should appear red.</p> <p class="myclass2">This text should appear green.</p> </div> コードスニペットを実行するHide resultsスニペットを展開
230 css  css-selectors 

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.