CSS-簡易ラベル属性学習まとめ

6716 ワード

ここ数日ずっとフロントエンドのウェブページの内容を学んで、いつでもこれらのCSSの属性を見ることができることを望んで、この総括を載せました.
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>

**フロントエンドcss書き込み三角形**

jqフィルタセレクタ