css構文規則画面適応およびエントリ適用優先度
5704 ワード
1.
!importantは、指定したスタイルエントリの適用優先度を向上させます.
div { color: #f00 !important; color: #000;}上記コードでは、IE 6および以下のブラウザdivのテキスト色は#000である!importantは後のルールを上書きしていません.他のブラウザのdivのテキスト色は#f 00です
2.画面を適応させる方法:
/*スタイルコードインポートスタイルファイル*/
1つ目の方法:
2つ目の方法:
以下css 800とする.cssのコード
以下css 1280とする.cssのコード
以下css 1440とする.cssのコード
3つ目の方法:
!importantは、指定したスタイルエントリの適用優先度を向上させます.
div { color: #f00 !important; color: #000;}上記コードでは、IE 6および以下のブラウザdivのテキスト色は#000である!importantは後のルールを上書きしていません.他のブラウザのdivのテキスト色は#f 00です
2.画面を適応させる方法:
/*スタイルコードインポートスタイルファイル*/
1つ目の方法:
2つ目の方法:
以下css 800とする.cssのコード
1 #container{
2 width:760px;
3 height:300px;
4 border:1px solid red;
5 background-color:red;
6 }
以下css 1280とする.cssのコード
1 #container{
2 width:1004px;
3 height:300px;
4 border:1px solid red;
5 background-color:red;
6 }
以下css 1440とする.cssのコード
1 #container{
2 width:1320px;
3 height:300px;
4 border:1px solid red;
5 background-color:red;
6 }
3つ目の方法:
1 *{
2 margin:0;
3 border:0;
4 padding:0;
5 }
6 #container{
7 width:1240px;
8 height:300px;
9 background-color:red;
10 margin:0 auto;
11 }
12
13 /* 1260px , */
14 @media (max-width:1260px) {
15 #container{
16 width:930px;
17 background-color:green;
18 }
19 }
20
21 /* 800px , */
22 @media (max-width:800px) {
23 #container{
24 width:760px;
25 background-color:blue;
26 }
27 }
28
29 </style>