CSS-簡易ラベル属性学習まとめ
6716 ワード
ここ数日ずっとフロントエンドのウェブページの内容を学んで、いつでもこれらのCSSの属性を見ることができることを望んで、この総括を載せました.
CSSフルネーム:cascading style sheet
CSSのメンテナもw 3 chttp://www.w3school.com.cn
行間スタイル:ラベルのプロパティstyleで開始ラベルに書く項目で行間スタイルの使用を禁止します(構造スタイル動作の3つの分離)!!内部スタイルシート:ラベル
を介してheadラベルのサブセット構造スタイルとして動作する3つの分離
外部スタイルシート:
外部リンクファイル、ファイルタイプは.css
すべてのスタイルがこのファイルに書き込まれています.
HTMLではlinkタグで外部のcssファイルをリンクし、linkタグはheadタグの内部に置かなければならない
CSSフルネーム:cascading style sheet
CSSのメンテナもw 3 chttp://www.w3school.com.cn
1.様式の3つの書き方
行間スタイル:ラベルのプロパティstyleで開始ラベルに書く項目で行間スタイルの使用を禁止します(構造スタイル動作の3つの分離)!!内部スタイルシート:ラベル
を介してheadラベルのサブセット構造スタイルとして動作する3つの分離
外部スタイルシート:
外部リンクファイル、ファイルタイプは.css
すべてのスタイルがこのファイルに書き込まれています.
HTMLではlinkタグで外部のcssファイルをリンクし、linkタグはheadタグの内部に置かなければならない
2.具体的なスタイルの使い方
1.width
2.Height
幅と高さ0帯単位の他の値を持たなくてもpx
3.color
テキスト色の設定:3原色(red green blue)16進数英語
color:rgb(0~255,0~255,0~255);
color:#EEFF66;
color:red;CSS 3新透明度rgba
color:rgba(0~255,0~255,0~255,0~1);最後は透明度1が不透明であることを表し、色が薄くなるのではなく、本当に透明であることに注意する.
5.line-height行高
/* */
line-height: 40px;6.text
text-decoration
/* underline， ， overline */
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
text-decoration: none; /* */text-align
/* left center right*/
text-align: center;text-indent
/* px em ， 2em*/
text-indent: 2em;letter-spacing
/* */
letter-spacing: 3px;7.border
solid実線
double二重線
dashedは破線を定義します.ほとんどのブラウザで実線として表示されます.
dottedは点状の枠線を定義します.ほとんどのブラウザで実線として表示されます.
/* : solid */
border: #000 30px solid;
/* left right top bottom*/
border-right: 4px solid green;8.displayは要素が生成すべきボックスのタイプを規定する
/*dispaly */
/* */
display: inline;
/* */
display: inline-block;
/* */
display: block;
/* */
display: none;9.overflowは、コンテンツが要素ボックスからオーバーフローしたときに発生することを規定します.
/* */
overflow: hidden;
/*x */
overflow-x: scroll;
/*y */
overflow-y: scroll;
/* ， */
overflow: auto;10.特殊な
/* */
vertical-align: bottom;3.セレクタ
優先度:
style="color:#399 ea;">ワイルドカード*<ラベル<クラスclass(.)< ID (#)< 行間(style)
クラスclass:英字で始まり、小文字で複数の名前を統一し、スペースで区切る
id:一意性を持つ
子孫セレクタ:スペースを隔ててスペースを見ると子孫だと思います
子孫セレクタ:(上のスペースを>に置き換えます)大きい番号は、サブセット要素
交差セレクタ:ラベルとクラスを同時に選択一般的にラベルコーディネートクラスp.hahaha
パラレルセットセレクタ:「都」をカンマで区切る
セレクタ例
<style>
div{
width:200px; height: 200px;
border: 2px solid red;
}
/* */
.header p span{
/*background: purple;*/
}
/* */
.header>span{
background: green;
}
/* */
.header span.child-span{
background: orange;
}
/* , */
/*h2{
color:red;
}
h3{
color:red;
}
h4{
color:red;
}*/
h2, .h3, h4{
color:orange;
}
</style>
</p><div class="header">
<p>
<span>span</span>
</p>
<h2>
<span>h2-span</span>
</h2>
<span class="child-span">child-span</span>
<span>div-span</span>
</div>
<span>span-outer</span>
<h2>h2</h2>
<h3 class="h3">h3</h3>
<h4>h4</h4>
<p><strong> </strong></p>
<p><strong> </strong><br/> <br/> ， ， <br/> ， ， ， <br/> , </p>
<p><strong> ：</strong></p>
<pre><code>margin: 20px 40px 60px 80px;</code></pre> <br><p> :</p><pre><code>margin-left:40px;</code></pre> <br><p> :</p><pre><code>/* auto - */
margin: 0px auto;</code></pre> <br><p> マージン の い は マージン<br/>1. を きくする<br/>2. は を け、 ( )は を けない</p><br><p><br/><brフローティング がどの にフローティングするか</p><pre><code>/*
:
: ！！！ ，
*/
float:left;</code></pre> <br><p>2つの が1 に ぶ 、2つの はフローティング</p>を します.<br><p> に ドキュメントストリームの でレイアウトを み てるのは です: を くすることができて1 に ぶことができなくて、1 に ぶことができて を くすることができません</p><br><p> </p> <br><p> </p><br><p> を して、ある の にコンテンツを <br/>この を すると、 が コンテンツの ろに コンテンツを できます.<br/>デフォルトでは、この は ですが、 displayを してブロック に できます.<br/>contentは <br/>clearはどの のフローティング(both,left,right,none,inherit)</p>をクリアするか<pre><code>/* */
.parent{
width:500px;
border: 1px solid purple;
float: left;
}
/* */
.parent:after{
content: ''; display: block; clear: both;
}</code></pre> <br><p> </p><pre><code> /* */
background-color: yellowgreen;
/* */
background-image: url(img/5.jpg);
/* */
background-repeat:no-repeat;
/* x y */
background-size: cover;
background-size: contain;
/* left top right bottom*/
background-position: 30px 50px;
background-position: 50%;
background-position: right bottom;
background-position: center;
/* */
/*fixed ， 。
scroll 。 。*/
background-attachment: fixed;
/* */
background: orange url(img/1.jpg) no-repeat 30px center;</code></pre> <br><p> <br/> の : とは、 くの さな を きな に することである.サーバのストレスもある されました.</p> <pre><code>div{
width:16px; height: 16px;
border:1px solid red;
background-image: url(img/all.png);
/* 193 ， 991 */
background-position: -193px -991px;
}</code></pre> <br><p> </p> <br></div> <br></div><br></div><br></div></body></html>