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

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

10
アプリケーションが.cssファイルを取得しない（flask / python）
テンプレートをレンダリングしていますが、外部スタイルシートでスタイルを設定しようとしています。ファイル構成は以下の通りです。 /app - app_runner.py /services - app.py /templates - mainpage.html /styles - mainpage.css mainpage.htmlは次のようになります <html> <head> <link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css"> </head> <body> <!-- content --> 私のスタイルはどれも適用されていません。それはhtmlが私がレンダリングしているテンプレートであるという事実と関係がありますか？Pythonは次のようになります。 return render_template("mainpage.html", variables..) まだテンプレートをレンダリングできるので、これだけが機能していることがわかります。ただし、HTMLの「head」タグ内の「スタイル」ブロックから外部ファイルにスタイリングコードを移動しようとすると、すべてのスタイリングがなくなり、HTMLページのみが残りました。誰かが私のファイル構造でエラーを見ますか？
112 python  html  css  templates  flask 
3
Eclipse内でCSSの前処理を統合する方法は？[閉まっている]
閉まっている。この質問はスタックオーバーフローのガイドラインを満たしていません。現在、回答を受け付けていません。 この質問を改善してみませんか？Stack Overflowのトピックとなるように質問を更新します。 5年前休業。 この質問を改善する できれば.scssファイルの構文を強調表示して、EclipseでSCSSファイルを編集したいと思います。 私はこれらのリソースが貴重であると感じました： http://sass-lang.com/editors.html-.scssファイル専用のエディタはありません。 http://colorer.sourceforge.net/eclipsecolorer-.scssファイルのみ Eclipseエディター内でSCSS開発を統合するにはどうすればよいですか？ または、より一般的には、CSSプリプロセッサをEclipseに統合するにはどうすればよいですか？
10
Internet Explorer 9のグラデーション
IE9内のグラデーションのベンダープレフィックスを知っている人はいますか？それとも、まだ独自のフィルターを使用しているはずですか？ 他のブラウザについて私が持っているのは： background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */ おまけとして、誰もがOperaのベンダープレフィックスも知っていますか？
7
MacのSafariで選択した要素の光沢を削除するにはどうすればよいですか？
MacおよびiOSデバイスのSafariでは<select>、背景色のある要素はそれ自体に光沢を生成します。これは、他のオペレーティングシステムでは発生しないようです。 たとえば、次のスタイルプロパティを持つselect要素があります。 select { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 3px 6px; margin: 10px 0 7px; width: 250px; background-color: #BD2786; color: white; letter-spacing: -.04em; font-weight: bold; border: 0; } そして、私の要素には必要な背景色がありますが、光沢はまだ残っています。誰もがそれをフラットカラーにする方法を知っていますか？
3
ブートストラップ4：画面の右側にドロップダウンメニューが表示されなくなります
ドロップダウンアイテムがページから外れないようにすることはできません。BS3でいくつか試してみましたが、うまくいかないようです。ml-autoが原因かどうかはわかりません。（if-elseステートメントは無視してください） これがCodePenです： <div class="container-fluid"> <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse" style="background-color: #3c763d!important;"> <button class="navbar-toggler navbar-toggler-right navbar-toggler-custom" type="button" data-toggle="collapse" data-target="#searchNav" aria-controls="searchav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span …
9
Twitterのブートストラップ2.1.0で新しいaffixプラグインを使用する方法
そのトピックに関するブートストラップのドキュメントは、少しわかりにくいです。ドキュメントのようにnavbarを付けて同様の動作を実現したい：navbarは段落/ページの見出しの下にあり、下にスクロールすると、最初にスクロールしてページの上部に到達し、そこに固定してさらにスクロールダウンします。 。 ：jsFiddleは、ナビゲーションバーのコンセプトでは動作しませんので、私は、最小限の例として使用するために別のページを設定したhttp://i08fs1.ira.uka.de/~s_drr/navbar.html これをナビゲーションバーとして使用します。 <div class="navbar affix-top" data-spy="affix" data-offset-top="50"> <div class="navbar-inner"> <div class="container"> <div class="span12"> <a class="brand" href="#">My Brand</a> This is my navbar. </div> </div> <!-- container --> </div> <!-- navbar-inner --> </div> <!-- navbar --> 私data-offset-topは値0になりたいと思います（バーが一番上に「くっついている」はずですが、50では少なくともいくつかの効果が見られます。 JavaScriptコードも配置する場合： <script> $(document).ready (function (){ $(".navbar").affix (); }); </script> 助けてくれてありがとう。
5
YouTube iframeに不透明なdivをオーバーレイ
YouTube iframe埋め込み動画の上に半透明の不透明度でdivをオーバーレイするにはどうすればよいですか？ <iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe> <div id="overlay"></div> CSS #overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.8; /*background:rgba(255,255,255,0.8); or just this*/ z-index:50; color:#fff; } 編集（明確化を追加）： HTML5が近づいており、フラッシュの代わりにそれを使用するデバイスが増えているため、YouTube動画の埋め込みが複雑になっていますが、ありがたいことにYouTubeは、埋め込み動画の互換性に関するすべての問題を処理する特別な埋め込み可能なiFrameを提供していますが、ビデオオブジェクトを半透明のdivでオーバーレイする以前の方法は無効になり<param name="wmode" value="transparent">ました。オブジェクトにiFrame を追加したので、オブジェクトに追加できなくなりました。不透明なdivを上に追加するにはiframe埋め込みビデオ？
110 html  css  iframe  youtube  overlay 
1
非表示属性（HTML5）とdisplay：noneルール（CSS）の違いは何ですか？
HTML5には、hiddenコンテンツを非表示にするために使用できる新しいグローバル属性があります。 <article hidden> <h2>Article #1</h2> <p>Lorem ipsum ...</p> </article> CSSにはdisplay:noneルールがあり、コンテンツを非表示にするためにも使用できます。 article { display:none; } 見た目は同じです。意味的に違いは何ですか？計算的に？ どちらを使用するかについて、どのようなガイドラインを検討する必要がありますか？ TIA。 編集：@newtronの応答（下記）に基づいて、さらに検索を行いました。このhidden属性は昨年激しく争われ、（どうやら）HTML5仕様にはほとんど入っていませんでした。一部は冗長であり、目的がないと主張した。私が言えることから、最終的な評価は次のとおりです。私がWebブラウザーのみを対象にしている場合、違いはありません。（1つのページでは、Webブラウザーdisplay:noneが非表示属性を実装するために使用されたとさえ主張していました。）しかし、アクセシビリティを検討している場合（たとえば、コンテンツがスクリーンリーダーで読み取られることを期待している場合）、違いがあります。CSSルールdisplay:noneは私のコンテンツをWebブラウザーから隠すかもしれませんが、対応するariaルール（例えば、aria-hidden="false"）それを読もうとするかもしれません。したがって、私は今、@ newtronの答えが正しいことに同意します。あなたの助けをありがとう@newtron。
110 css  html  visibility 
16
改行を使用する場合のHTML要素間の空白の削除
約10 img秒の行があるページがあります。HTMLを読みやすくするために、それぞれの間に改行を入れたいimgタグのが、そうすると画像間に空白が表示されてしまいます。タグの間ではなく、タグの中央で中断する以外にできることはありますか？ 編集：これは私がこれまでに持っているもののスクリーンショットです。PHPを使用して、本の背表紙の画像をランダムな組み合わせで表示してほしい。これが、個別のimgタグが必要な理由です。
110 html  css  image 
11
コンテンツのないdivに幅を持たせるにはどうすればよいですか？
に幅を追加しようとしdivていますが、コンテンツがないため問題が発生しているようです。 ここに私が持っているCSSとHTMLがありますが、機能していません： CSS body{ margin:0 auto; width:1000px } ul{ width:800px; } ul li{ clear:both; } .test1{ width:200px; float:left; } HTML <body> <div id="test"> <ul> <li> <div class="test1">width1</div> <div class="test1">width2</div> <div class="test1">width3</div> </li> <li> <div class="test1"></div> <div class="test1">width2</div> <div class="test1">width3</div> </li> <li> <div class="test1"></div> <div class="test1">width2</div> <div class="test1">width3</div> </li> </ul> </div>
110 html  css  width  css-float 
29
ブートストラップモーダル：背景がトグルでトップにジャンプ
モーダルで問題があります。ページ上にモーダルを切り替えるボタンがあります。モーダルが表示されると、ページはトップにジャンプします。 解決策などを見つけるためにできることはすべてやったが、本当に迷っている。 編集： 私も試してみまし$('#myModal').modal('show');たが、まったく同じ効果があります。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.