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

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

14
<body>に適用されたoverflow:hiddenはiPhone Safariで機能しますか?
んoverflow:hiddenに適用される&lt;body&gt;iPhoneのSafariで動作しますか?そうではないようです。それを達成するためにウェブサイト全体にラッパーを作成することはできません... あなたは解決策を知っていますか? 例:長いページがあり、「折り目」の下にあるコンテンツを非表示にしたいのですが、iPhone / iPadで動作するはずです。
131 iphone  css  ipad  safari  overflow 

8
:: afterまたは:: before疑似要素コンテンツに改行を追加する
ページのHTMLまたはPHPにアクセスできず、CSSを介してのみ編集できます。私はサイトに変更を加えて、::afterまたはを介してテキストを追加しています::before疑似要素を、追加されたコンテンツの前後のスペースなどにエスケープUnicodeを使用する必要があることを発見しました。 contentプロパティに複数の行を追加するにはどうすればよいですか? 例では、HTMLの改行要素は、私が達成したいことを視覚化することのみを目的としています。 #headerAgentInfoDetailsPhone::after { content: 'Office: XXXXX &lt;br /&gt; Mobile: YYYYY '; }
131 css 

4
インラインスタイルのCSS疑似クラス
Наэтотвопросестьответына スタックオーバーフローнарусском:Какпрописать:ホバーвнутриスタイル=」「? インラインスタイルを使用して疑似クラスを持つことは可能ですか? 例: &lt;a href="http://www.google.com" style="hover:text-decoration:none;"&gt;Google&lt;/a&gt; 上記のHTMLが機能しないことはわかっていますが、似たようなものはありますか? PS私は外部スタイルシートを使用する必要があることを知っています。インラインスタイルを使用してこれを行うことができるかどうかだけ私は気になりました。

10
iframeを介して埋め込まれたYouTubeビデオz-indexを無視しますか?
水平マルチレベルドロップダウンナビゲーションメニューを実装しようとしています。メニューのすぐ下(垂直方向)に、iframeを介して埋め込まれたYouTubeビデオがあります。Firefoxのメインレベルのナビゲーション項目の1つにカーソルを合わせると、ドロップダウンメニューがビデオの上に正しく表示されます。 ただし、ChromeとIE9では、メニューとiframeの間にある小さなスペース領域に、ドロップダウンの一部しか表示されません。残りはiframeの背後にあるようです。 問題はiframe ではなく、YouTubeビデオに関連しているようです。テストするために、iframeをビデオではなく別のWebサイトに向け、ドロップダウンメニューはIEでも正常に機能しました。 質問1:WTF? 質問2:z-index:-999 !important; iframe に明示的にを配置しても、この問題が引き続き発生するのはなぜですか? YouTubeの埋め込みコードに含まれている内部CSSはありますか?
130 css  iframe  youtube 

7
CSSスタイルのオーバーライドとリセット:autoまたはnoneは機能しません
すべてのテーブルに定義されている次のCSSスタイルをオーバーライドしたいと思います。 table { font-size: 12px; width: 100%; min-width: 400px; display:inline-table; } というクラスの特定のテーブルがあります'other'。 最後に、テーブルの装飾は次のようになります。 table.other { font-size: 12px; } 私は3つのプロパティを削除する必要が:width、min-widthおよびdisplay noneまたはautoでリセットしようとしましたが、助けにはなりませんでした。 table.other { width: auto; min-width: auto; display:auto; } table.other { width: none; min-width: none; display:none; }
130 css  width  overriding 

7
CSSまたはHTMLにdata / base64として画像を埋め込む必要がありますか
サーバーでのリクエスト数を減らすために、いくつかの画像(PNGとSVG)をBASE64として直接cssに埋め込みました。(ビルドプロセスで自動化されています) このような: background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...); これは良い習慣ですか?これを回避する理由はありますか?データURLをサポートしていない主要なブラウザーはありますか? おまけの質問:CSSとJSでもこれを行うのは理にかなっていますか?
130 html  css  base64 

5
マージン0で自動中央揃えできないのはなぜですか?
ある#headerdivがあり100% width、そのdiv内に順序付けられていないリストがあります。margin: 0 auto順不同リストに適用しましたが、ヘッダーdiv内の中央に配置されません。 誰か教えて頂けますか?親divの幅を定義すると、順序付けられていないリストはで中央揃えできるはずだと思いましたmargin: 0 auto。何が欠けていますか? これが私のコードです: &lt;style&gt; * { margin: 0; padding: 0; } #header { width: 100%; background-color: #333; min-height: 160px; font-family:Arial, Helvetica, sans-serif; } #sitename { font-size: 50px; width: 620px; margin:0 auto; padding-top: 35px; color:#999; } #header ul { float: right; margin: 0 auto; } #header …
130 html  css  margin 

5
n番目の子を持つ最後のn項目を選択することはできますか?
標準リストを使用して、最後の2つのリスト項目を選択しようとしています。私はさまざまな順列を持っAn+Bていますが、最後の2は何も選択していないようです。 li:nth-child(n+2) {} /* selects from the second onwards */ li:nth-child(n-2) {} /* selects everything */ li:nth-child(-n+2) {} /* selects first two only */ li:nth-child(-n-2) {} /* selects nothing */ のような新しいCSS3セレクターを知ってい:nth-last-child()ますが、可能であれば、さらにいくつかのブラウザーで動作するものを好みます(特にIEについては気にしません)。
130 css  css-selectors 

9
入力内のパディングは幅を100%に分割します
オブジェクトにパディングを設定すると、明示的に設定されていても、その幅が変化することがわかりました。これの背後にある論理を論じることはできますが、いくつかの要素でいくつかの問題を引き起こします。 ほとんどの場合、子要素を追加して、100%に設定された子要素ではなく、その要素にパディングを追加しますが、フォーム入力の場合、これは可能な手順ではありません。 これを見てください:http : //sandman.net/test/formcss.html 2番目の入力は、パディングが5pxに設定されています。これは、デフォルト設定よりもずっと好みです。ただし、残念ながら、これにより、入力がすべての方向に10px成長します(100%の幅に10pxが追加されるなど)。 ここでの問題は、入力内に子要素を追加できないため、修正できないことです。だから問題は: 幅を100%に保ちながら、入力内にパディングを追加する方法はありますか?フォームは異なる幅の親でレンダリングされるため、100%にする必要があるため、親の幅は事前にわかりません。
130 css  input  padding 

4
CSSのマージン/パディング率が常に幅に対して計算されるのはなぜですか?
あなたが見ればCSSボックスモデルの仕様は、次のことを守っます: [マージン]パーセンテージは、生成されたボックスの包含ブロックの幅を基準に計算されます。これは「margin-top」と「margin-bottom」にも当てはまることに注意してください。包含ブロックの幅がこの要素に依存する場合、結果のレイアウトはCSS 2.1で定義されていません。 (強調鉱山) これは確かに本当です。しかし、なぜですか?このように設計することを誰に強制するのでしょうか?必要なシナリオを考えるのは簡単です。たとえば、特定のものが常にページの上部から25%下になるようにすることですが、垂直方向のパディングを水平方向のサイズに対して相対的にする必要がある理由を思い付くのは困難です。親。 これが私が言及している現象の例です: &lt;div style="border: 1px solid red; margin: 0; padding: 0; width: 200px; height: 800px;"&gt; This div is 200x800. &lt;div style="border: 1px solid blue; margin: 10% 0 0 10%;"&gt; This div has top-margin of 10% and left-margin of 10% with respect to its parent. &lt;/div&gt; &lt;/div&gt; …
130 w3c  css 


14
行の高さに影響するHTMLの<sup />タグ、一貫性を保つにはどうすればよいですか?
&lt;sup&gt;複数行の&lt;p&gt;タグにタグがある場合、上付き文字が付いている行の行間隔は、行の高さに関係なく、他の行よりも大きくなり&lt;p&gt;ます。 明確にするために編集する:&lt;p&gt;s がたくさんあるわけではなく、それぞれが1行にあります。&lt;p&gt;複数行に折り返すのに十分なコンテンツが含まれているシングルがあります。本文のどこかに(どこでも)&lt;sup&gt;またはがあります&lt;sub&gt;。これは、上または下に余分なスペースを追加することにより、その行の行の高さに影響します。上の行の高さを大きく設定し&lt;p&gt;ても、問題は変わりません。行の高さが増加しますが、余分なスペースは残ります。 どのようにして一貫性を持たせることができますか。つまり、すべての行にaが含まれているかどうかに関係なく、すべての行の間隔が同じ&lt;sup&gt;ですか? ソリューションはクロスブラウザである必要があります(IE 6 +、FF、Safari、Opera、Chrome)

7
通常のリンクを使用してフォームを送信する
フォームを送信したいのですが。しかし、私は種類を提出して入力ボタンを使用しての基本的な方法が、つもりはありませんリンクを。 下の画像はその理由を示しています。画像リンクを使用してフォームを保存/送信しています。画像リンクに標準のcssマークアップを使用しているため、入力送信ボタンを使用したくありません。 onClick = "document.formName.submit()"をa要素に適用しようとしましたが、htmlメソッドを使用します。 何か案は?
130 html  css  forms  hyperlink  submit 

6
Lessで文字列を連結する
これは無理だと思いますが、道があればお願いしたいと思いました。アイデアは私がウェブリソースフォルダへのパスの変数を持っているということです: @root: "../img/"; @file: "test.css"; @url: @root@file; .px { background-image: url(@url); } 結果としてこれが得られます: .px { background-image: url("../img/" "test.css"); } しかし、私は文字列を次のように1つの文字列に結合したいと思います。 .px { background-image: url("../img/test.css"); } Lessで文字列を連結することは可能ですか?
129 css  path  web  less  concat 

15
CSSテキスト変換はすべて大文字で大文字にします
これが私のHTMLです: &lt;a href="#" class="link"&gt;small caps&lt;/a&gt; &amp; &lt;a href="#" class="link"&gt;ALL CAPS&lt;/a&gt; ここに私のCSSがあります: .link {text-transform: capitalize;} 出力は次のとおりです。 Small Caps &amp; ALL CAPS そして私は出力が: Small Caps &amp; All Caps 何か案は?
129 css 

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