Html5 - CSSスタイルはjqueryモバイルスタイルでオーバーライドされています

Question

私はhtml5、css、jquery mobileを使ってアプリケーションを開発しています。しかし、html要素とCSSは、jquery-mobileデフォルトスタイルシート（jquery.mobile-1.0.css）によってオーバーライドされています。

どうすればこの問題を解決できますか？私は自分のページに自分のスタイルを使いたいだけです。例えば、私はbodyタグに与えるBGCOLOR =「赤」場合、それは動作しません。..

私にいくつかの提案を与えてください....

....

Answer 1

使用CSSをあなたに感謝し、必要に応じて!importantというマーク属性を付けます。

body { background-color: #f00; } 

これが機能しない場合は、 jQueryのモバイルCSSから別のセレクタがそれを上書きしますので、!importantを使用します。

body { background-color: #f00 !important; } 

優先順位のルールはここで説明されていますhttp://www.w3.org/TR/CSS21/cascade.html#specificity - しかし、通常は単にあなたのルールがすでに動作するかどうかテストするか、それは!importantが十分である必要があるかどうか。

jQueryモバイルCSSの後に、あなたのスタイルシートを含めてください。 !importantがなくてもスタイルシートの均等に重み付けされたルールが優先されます。代わりに、最初にあなたのstyle.cssを含むの

Answer 2

、

<link href="query.mobile-1.0.css" rel="stylesheet" type="text/css"> 
<link href="style.css" rel="stylesheet" type="text/css"> 

Answer 3

bgcolor="red"のような最後の

では、CSSが、HTML属性ではないことをロード。

jQueryモバイルCSSの後にカスタムCSSファイルを読み込むようにウェブサイトを変更します。カスタムCSSファイルでスタイルを宣言します。以下のようになります。

Answer 4

JQuery Mobileは、より具体的にする必要があるボディの背景をターゲットにするようにボディスタイルのサブクラスを作成します。

あなたに調整を追加するJQM CSSファイルの後に宣言されたCSSファイル。

次を使用して、各テーマボディの背景をターゲットにすることができます：

.ui-body-a, 
.ui-overlay-a { 
/* green 4FFF19 ellipse */ 
    background-image: -webkit-gradient(radial, center center, 0, center center,  497, color-stop(0, #4FFF19), color-stop(1, #264C73)); 
    /* Webkit (Chrome 11+) */ 
} 

これは、例えば、テーマaをターゲットにしています。それは学ぶために少し汗をかいた。

これを使うと、JQMテーマローラーが提供していないラジアルグラデーションの背景などを作成することができます。さまざまな放射状グラデーションのCSSを作成するのに適したページは、すべての場所のMicrosoftページです。http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.htmlです。

Good Luck。