Responsive Web Design-CSS

2016 ワード

前回私は简単に最も基础的な応答式の设计を言って、ここで私はCSSについていくつか知识を言います.
CSSをロードするにはタグにタグを追加する必要がありますが、具体的にはこれは言いません.ロードの仕方は2種類ある.普通はこう書きます

<head>
<link rel="stylesheet" href="styles/mystyle.css">
</head>

実はHTML 5にはこう書くこともできます

<head>
<style>
@import url(styles/mystyle.css)
</style>
</head>

今はそんなことをする人は少ないだろう.
言ってる!importantというものは、多くのフレームワークの中でいくつかの属性がマークされているのを見ることができます!important.これはどういう意味ですか.

p { font-weight: bold; color: blue !important; }

例えば上の例では、color属性がマークされています!important. この意味は

ラベルの中のすべての文字の色が青いことです.このプロパティは、このラベル内の他の文字色のプロパティをすべて上書きします.

#example{color: blue}
<p id="example">text here</p>

idがexampleのラベル文字の色を青に指定します

.example{color:red}
<p class="example">text</p>

classがexampleのラベルフォントを赤にする
CSSはまたネストすることができて、例えば

.example {
    color: blue;
    p {
        padding: 5px; 
   }
}

<div class="example">
    <p>some text</p>
</div>

このdivではexampleスタイルを用いる、このexampleスタイル内のすべてのp内マージンは5 pxである.
次に箱の模型について話して、これはここで私は詳しく言わないで、みんなの1つのとても良いウェブサイトを紹介してCSSの配置を勉強して、筆者はこのウェブサイトで学んだのです
http://zh.learnlayout.com/
次にあなたのCSSコードをどのように組織するかについて話しましょう.次の2つをお勧めします

/* Main Content ----------------------------- */
styles for typography, layout, etc. in main content
/* Header ----------------------------- */
styles for typography, layout, etc. in header
/* Footer ----------------------------- */
styles for typography, layout, etc. in footer

または

/* Typography ----------------------------- */
p { ... }
header p { ... }
footer p { ... }
.classname p { ... }
li { ... }
footer li { ... }
.classname li { ... }
/* Layout ----------------------------- */
header { ... }
footer { .... }

構造がはっきりしている
次の記事ではmedia queryという応答的な設計において重要なことについてお話しします

クライアントフィルタデータ:CSS,jQuery,Reactの比較

サービス側管理クライアントスクリプト-Page.ClientScript