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

メディアクエリscreenとの違いは何only screenですか？ <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> なぜ使用する必要があるのonly screenですか？screenそれ自体は、画面だけにレンダリングされるのに十分な情報を提供していませんか？ 私はこれら3つの異なる方法のいずれかを使用する多くのレスポンシブWebサイトを見てきました。 @media screen and (max-width:632px) @media (max-width:632px) @media only screen and (max-width:632px)

487 css  media-queries 

CSSファイルで背景画像URLのようなものを定義するとき、相対URLを使用するとき、それはどこに相対的ですか 例えば： ファイルに次のもの/stylesheets/base-styles.cssが含まれているとします。 div#header { background-image: url('images/header-background.jpg'); } このスタイルシートを別のドキュメントに含める場合<link ... />、CSSファイルの相対URLは、スタイルシートドキュメントに相対的/stylesheets/か、それが含まれている現在のドキュメントに相対的か。次のような可能なパス： /item/details.html /about/index.html /about/extra/other.html /index.html

484 html  css 

class="row"Twitterブートストラップフレームワークを使用して要素にマージントップを追加する方法

483 css  twitter-bootstrap 

これは以前に言及/質問されたはずだと確信していますが、運のない年齢を探していました。私の用語は間違っているはずです！ 少し前に見たツイートで、特定の要素のスタイルシートに以前に設定されたスタイルを削除するcssルールが利用可能であることを示唆していたのを漠然と覚えています。 良い使用例は、モバイルファーストのRWDサイトであり、小さな画面ビューの特定の要素に使用されるスタイル設定の多くが、デスクトップビューの同じ要素に対して「リセット」または削除する必要があります。 次のようなものを達成できるCSSルール： .element { all: none; } 使用例： /* mobile first */ .element { margin: 0 10; transform: translate3d(0, 0, 0); z-index: 50; display: block; etc.. etc.. } @media only screen and (min-width: 980px) { .element { all: none; } } したがって、すべてのプロパティを宣言する必要なく、スタイルをすばやく削除または再設定できます。 理にかなっていますか？

481 css 

私は自分のサイトで一貫性を保ち、乱雑さを減らすために再利用可能なCSSクラスをいくつか作成しようとしていますが、頻繁に使用するものを標準化しようとしています。 <div>高さを設定したくないコンテナがあります（これはサイトの場所によって異なるため）、内部にはヘッダー<div>があり、次に項目の順序付けされていないリストがあり、すべてCSSが適用されていますそれら。 次のようになります。 ヘッダーの高さがわかっているので、順序付けられていないリストがコンテナの残りのスペースを占めるようにしたい。リストの高さを「マイナスの結果」として指定する方法がわかりません。<div><div>18px100%18px この質問がSOの他のいくつかのコンテキストで質問されるのを見たことがありますが、私の特定のケースについてもう一度尋ねる価値があると思いました。この状況で誰かアドバイスはありますか？

479 css  height  pixel 

例えば： div > p.some_class { /* Some declarations */ } >記号は正確にはどういう意味ですか？

476 css  css-selectors 

私はgreasemonkeyのユーザースクリプトのソースを見ていたところ、CSSに次のことがわかりました。 .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} greasemonkeyスクリプトは、サーバー上でホストするのではなく、ソース内で可能なすべてのものをバンドルすることを望んでいることを理解できます。しかし、このテクニックを以前に見たことがなかったので、その使用を検討しましたが、いくつかの理由で魅力的であると思われます。 ページ読み込み時のHTTPリクエストの量を減らし、パフォーマンスを向上させます CDNがない場合は、画像とともに送信されるCookieによって生成されるトラフィックの量が減少します CSSファイルをキャッシュできます CSSファイルはGZIPPEDできます IE6（例えば）が背景画像のキャッシュに問題があることを考えると、これは最悪の考えではないようです... それで、これは良い習慣か悪い習慣ですか、なぜそれを使用せず、画像をbase64エンコードするためにどのツールを使用するのですか？ 更新-テストの結果 画像でテスト：http://fragged.org/dev/map-shot.jpg - 133.6Kb テストURL：http : //fragged.org/dev/base64.html 専用のCSSファイル： http://fragged.org/dev/base64.css - 178.1Kb GZIPエンコーディングサーバー側 クライアントに送信される結果のサイズ（YSLOWコンポーネントテスト）：59.3Kb クライアントブラウザに送信されたデータの保存：74.3Kb いいですが、小さい画像にはあまり役に立たないと思います。 更新：Googleのソフトウェアエンジニア、ブライアンマクエードは、PageSpeedに取り組んでおり、ChromeDevSummit 2013で、CSSのdata：urisは、講演中にクリティカル/最小限のCSSを提供するためのレンダリングブロッキングアンチパターンと見なされると述べました#perfmatters: Instant mobile web apps。http://developer.chrome.com/devsum​​mit/sessionsを参照してください。実際のスライド

475 css  base64  background-image  data-uri 

とにかく得ることのあるの丸みを帯びた角を上のアウトラインのdiv elementと同様に、border-radius？

473 html  css 

2つの特定のクラスに設定されているクラス属性の値に基づいてCSSで要素を選択する方法はありますか？たとえば、3つのdivがあるとします。 <div class="foo">Hello Foo</div> <div class="foo bar">Hello World</div> <div class="bar">Hello Bar</div> fooとbarクラスの両方のメンバーであるという事実に基づいて、リストの2番目の要素のみを選択するためにどのCSSを記述できますか？

472 css  css-selectors 

メディアクエリの調査を行っていますが、特定のサイズのデバイスをターゲットにする方法がまだわかりません。 デスクトップ、タブレット、モバイルをターゲットにしたい。多少の不一致があることは承知していますが、これらのデバイスをターゲットにするために使用できる汎用システムがあればよいでしょう。 私が見つけたいくつかの例： # Mobile only screen and (min-width: 480px) # Tablet only screen and (min-width: 768px) # Desktop only screen and (min-width: 992px) # Huge only screen and (min-width: 1280px) または： # Phone only screen and (max-width:320px) # Tablet only screen and (min-width:321px) and (max-width:768px) # Desktop only screen …

471 css  mobile  media-queries  tablet 

検索ページの背景画像として使用しているJPEGファイルがあり、Backbone.jsコンテキスト内で作業しているため、CSSを使用して設定しています。 background-image: url("whatever.jpg"); CSS 3のぼかしフィルターを背景にのみ適用したいのですが、その1つの要素だけにスタイルを設定する方法がわかりません。私が試した場合： -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); background-imageCSSのすぐ下で、背景だけでなくページ全体のスタイルを設定します。画像だけを選択してそれにフィルターを適用する方法はありますか？または、ページの他のすべての要素のぼかしをオフにする方法はありますか？

467 css  background-image  css-filters 

単純な形状を白で表示する透明なPNGが与えられた場合、CSSを使用してこれの色を何らかの方法で変更できますか？ある種のオーバーレイまたはそうでないものは？

464 css  image  colors  png  overlay 

私はこれと交互の行の色のテーブルを使用しています。 tr.d0 td { background-color: #CC9999; color: black; } tr.d1 td { background-color: #9999CC; color: black; } <table> <tr class="d0"> <td>One</td> <td>one</td> </tr> <tr class="d1"> <td>Two</td> <td>two</td> </tr> </table> コードスニペットを実行する結果を非表示スニペットを展開 ここではのクラスtrを使用していますが、だけに使用したいと思いtableます。テーブルにクラスを使用すると、これがtr代替に適用されます。 CSSを使用してこのようにHTMLを記述できますか？ <table class="alternate_color"> <tr><td>One</td><td>one</td></tr> <tr><td>Two</td><td>two</td></tr> </table> CSSを使用して行に「ゼブラストライプ」を持たせるにはどうすればよいですか？

462 html  css  html-table 

ブラウザ間でCSSまたはHTMLを使用してチェックボックスのサイズを設定することは可能ですか？ widthそして、sizeIE6 +での作業ではなく、私は小さいサイズを設定しても、チェックボックスステー16×16のFirefox、と。

459 html  css 

私がやりたいことは、特定のものdivがホバーされると、別ののプロパティに影響を与えることdivです。 例えば、でこのJSFiddleデモ、ときにホバーを超える#cubeことに変更background-colorはなく、私が欲しいのは、私が上にマウスを移動するときということで#container、#cube影響を受けています。 div { outline: 1px solid red; } #container { width: 200px; height: 30px; } #cube { width: 30px; height: 100%; background-color: red; } #cube:hover { width: 30px; height: 100%; background-color: blue; } <div id="container"> <div id="cube"> </div> </div> コードスニペットを実行する結果を非表示スニペットを展開

459 html  css  hover