プログラミング css

2

私はちょうどサスを発見しました、そして私はそれについてとても興奮しています。私のウェブサイトでは、子コンビネーター（E > F）を使用してスタイル設定されたツリーのようなナビゲーションメニューを実装しています。 Sassでこのコードをより単純な（またはより良い）構文で書き換える方法はありますか？ #foo > ul > li > ul > li > a { color: red; }

125 css css-selectors sass

15

画像ではなく通常の文字である<ul>の<li>要素のカスタム箇条書き記号

CSS属性を使用して、カスタムグラフィックを置換弾丸文字として指定できることに気づきました。 list-style-image そして、それにURLを与えます。ただし、私の場合は、「+」記号のみを使用します。そのためのグラフィックを作成し、それをポイントする必要はありません。順序付けられていないリストに、プラス記号を箇条書き記号として使用するように指示するだけです。これを実行できますか、それとも最初にグラフィックにする必要がありますか？

125 html css webkit mobile-webkit

3

右上に画像を配置する-CSS

divの右上隅に画像を表示する必要がありますが（画像は「対角線」のリボンです）、内部のdivに含まれる現在のテキストを維持します。別のdivに画像を含めるか、そのクラスを次のように定義するなど、さまざまなことを試しました。 .ribbon { position: relative; top: -16px; right: -706px; } <div id="content"> <img src="images/ribbon.png" class="ribbon"/> <div>some text...</div> </div> しかし運がありません。私が得た最良の結果は、画像の同じ高さサイズですべてのテキストが下にスクロールされたことです。何か案が？

125 html css

9

透過画像で可能な最小のデータURI画像

スプライトを使用し、一部のアイコンに代替テキストを提供できるように、背景画像付きの透明な1x1画像を使用しています。画像のデータURIを使用してHTTPリクエストの数を減らしたいのですが、透明な画像を作成するために可能な最小の文字列は何ですか？スプライトの代わりに実際の画像にデータURI：を使用できることはわかっていますが、すべてを散らばるのではなくCSSに保持すると、維持が簡単になります。

125 css css-sprites

12

スクロールバーがChromeのページの幅に追加されないようにする

StackаэтотвопросестьответынаStack Overflowнарусском：スクロールとパディング Chromeで.htmlページを一定の幅に維持しようとすると、小さな問題が発生します。たとえば、ビューポート（右の単語？）の高さからオーバーフローするコンテンツがたくさんあるページ（1）があるため、垂直スクロールバーがあります。そのページ（1）ページ（2）では、同じレイアウト（メニュー、div、...など）を持っていますが、コンテンツが少ないため、垂直スクロールバーはありません。問題は、ページ（1）ではスクロールバーが要素を少し左に押しているように見える（幅に追加されているか？）一方で、すべてがページ（2）の中央に表示されていることです。私はまだHTML / CSS / JSの初心者ですが、これはそれほど難しいことではないと確信していますが、解決策を見つけることができませんでした。IE10とFireFox（干渉しないスクロールバー）では意図したとおりに機能しますが、これはChromeでのみ発生しました。

125 html css google-chrome scrollbar

10

矢印スタイルの変更を選択

選択の矢印を自分の写真に置き換えようとしています。同じサイズのdivに選択を含めています。選択の背景を透明に設定し、背景のdivの右上隅に画像（矢印と同じサイズ）を含めています。 Chromeでのみ機能します。これを取得しているFirefoxおよびIE9で動作させるにはどうすればよいですか。 .styled-select { width: 100px; height: 17px; overflow: hidden; overflow: -moz-hidden-unscrollable; background: url(images/downarrow_blue.png) no-repeat right white; border: 2px double red; display: inline-block; position: relative; } .styled-select select { background: transparent; -webkit-appearance: none; width: 100px; font-size: 11px; border: 0; height: 17px; position: absolute; left: 0; top: 0; } body …

125 css select

5

Angular 2のルート間をナビゲートするときにロード画面を表示する

Angular 2でルートを変更するときにロード画面を表示するにはどうすればよいですか？

124 html css angular angular2-routing

5

クラス名によるDOM要素の取得

私はPHP DOMを使用しており、DOMノード内の指定されたクラス名を持つ要素を取得しようとしています。そのサブ要素を取得する最良の方法は何ですか？更新：私はMechanizePHPを使用することになりました。

124 php css dom

7

CSS特異性のポイントはどのように計算されますか

このブログを偶然見つけました-http ://www.htmldog.com/guides/cssadvanced/specificity/ 特異性はCSSのポイントスコアリングシステムであると述べています。要素は1ポイント、クラスは10ポイント、IDは100ポイントの価値があることを示しています。さらに、これらのポイントが合計され、全体の量はそのセレクターの特異性であるとも言えます。例えば： body = 1ポイント body .wrapper = 11ポイント body .wrapper #container = 111ポイントしたがって、これらのポイントを使用すると、次のCSSおよびHTMLによりテキストが青色になることが期待されます。 #a { color: red; } .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o { color: blue; } <div class="a"> <div class="b"> <div class="c"> <div class="d"> <div …

124 css css-selectors css-specificity

7

CSSが負のパディングをサポートしないのはなぜですか？

私はこれを何度も見てきたが、負のパディングの可能性が、特定のページ要素のCSSの開発を改善するのに役立つ可能性がある。しかし、W3C CSSには負のパディングの規定はありません。この背後にある理由は何ですか？そのような使用を妨げるプロパティへの障害はありますか？ご回答ありがとうございます。更新たとえば、20pxの垂直方向のスペースがあるフォントを使用していて、ハイパーリンクが表示されたときなどに、フォントの下部に破線のボーダーを適用したい場合などです。このような場合、破線の枠線が指定した単語の20ピクセル下に表示されるため、スタイルが粗末すぎることがわかります。負のマージンを使用する場合、マージンは境界の外側の領域を変更するため、機能しません。このような状況では、負のパディングが役立つ場合があります。

124 html css padding

5

CSSを使用して、テーブルの2列目のみを変更する方法

cssのみを使用して、テーブルの2番目の列のみのcssをオーバーライドするにはどうすればよいですか。私はすべての列にアクセスできます： .countTable table table td 私のサイトではないため、このページのhtmlにアクセスして変更することはできません。ありがとう。

124 css

6

jQueryの幅、innerWidthとouterWidth、高さ、innerHeightとouterHeightの違いは何ですか

違いを確認するためにいくつかの例を書きましたが、幅と高さの結果は同じです。 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var div = $('.test'); var width = div.width(); // 200 px var innerWidth = div.innerWidth(); // 200px var outerWidth = div.outerWidth(); // 200px var height = div.height(); // 150 px var innerHeight = div.innerHeight(); // 150 px var outerHeight = div.outerHeight(); …

124 javascript jquery css dom styles

8

破線のボーダーストロークの長さとストローク間の距離を制御する

CSSで破線の境界線の長さと距離を制御することはできますか？以下の例は、ブラウザによって表示が異なります。 div { border: dashed 4px #000; padding: 20px; display: inline-block; } <div>I have a dashed border!</div> コードスニペットを実行するHide resultsスニペットを展開大きな違い：IE 11 / Firefox / Chrome 破線の境界線の外観をより詳細に制御できる方法はありますか？

124 css border css-shapes

10

オーバーフロースクロールcssがdivで機能していません

HTMLページのスクロールに関する問題のCSS / Javascriptソリューションを探しています。 div、ヘッダー、ラッパーdivを含む3つのdivがあります。ラッパーdivに垂直スクロールバーが必要です。高さは自動またはコンテンツに基づいて100％にする必要があります。ヘッダーは修正する必要があり、全体的なスクロールバーは必要ないのでoverflow:hidden、bodyタグで指定しました。ラッパーdivに垂直スクロールバーが必要です。どうすれば修正できますか？ HTML <div id="container"> <div class="header"></div> <div class="wrapper"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris …

124 css

2

パーセンテージ（％）およびピクセル（px）またはemでのボーダー半径

border-radiusにピクセル値またはem値を使用する場合、値が要素の最大の辺より大きい場合でも、エッジの半径は常に円弧または丸薬の形状になります。パーセンテージを使用すると、エッジの半径は楕円形になり、要素の各辺の中央から始まり、楕円または楕円形になります。 border-radiusのピクセル値：コードスニペットを表示 div { background: teal; border-radius: 999px; width: 230px; height: 100px; padding: 40px 10px; box-sizing: border-box; font-family: courier; color: #fff; } <div>border-radius:999px;</div> コードスニペットを実行する結果を非表示スニペットを展開 border-radiusのパーセント値：コードスニペットを表示 div { background: teal; border-radius: 50%; width: 230px; height: 100px; padding:40px 10px; box-sizing:border-box; font-family:courier; color:#fff; } <div>border-radius:50%;</div> コードスニペットを実行する結果を非表示スニペットを展開パーセンテージで表した境界半径が、ピクセルまたはem値で設定された境界半径と同じように機能しないのはなぜですか？

124 css css-shapes

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

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