CSSスタイル学習（A）

この部分では：
、CSSプロファイル
 は2つのスタイル属性
 3、CSSセレクタは、
    （a）基材セレクタ
     （b）は、擬似クラスセレクタ
             1）リンク擬似クラスセレクタ
             2）擬似クラスのコンフィギュレーションセレクタ
             3）ターゲット擬似クラスを選択しますである
     （C）属性セレクタ
     （iv）の関係セレクタ
     （E）擬似要素セレクタ
 4、方法が提供されるCSSスタイル

CSSスタイルは、Webページの重要な一部であり、化粧品のように、善と悪と、ページの利用者の第一印象を決定します。

A、CSSのプロフィール

一般的に精製プロセスのためのフォント、色、背景、要素サイズ、ページレイアウトを実現する、ラベルのパターンを増やすことで、CSSスタイルシートスタックと呼ばれます。

基本的な構文：

キーと値のペアの形式で
セミコロンで終了

第二に、スタイル属性

（いくつかの単純なプロパティを直接コメントで書かれて行くことはありませんが、より多くの、より詳細な使用方法をあなた自身の表情、ここだけで簡単に属性）

<style>
	p{
		/* 斜体 */
	  	font-style: italic;
	  	/* 字体大小 */
	  	font-size: 30px;
	  	/* font-family的值填写中文如果出现乱码，可以尝试英文名字或unicode编码 */
	  	font-family:"宋体";
	  	/* 粗体 */
	  	font-weight:bold;
        /* 红色字体 */
        color:red;
	}
</style>
<body>
    <p>这是一段字体为30像素的文字</p>
    <p>这是一段字体为30像素的文字</p>
</body>

結果を実現：
ここに画像を挿入説明
次のようにCSSのコードの最適化方式を簡素化するために多くの利便性を提供し、これらのコードなどを最適化することができます

<style>
	p{
		/* {font: font-style font-weight font-size/line-height font-family;}  */
		font:italic bold 30px/10px "宋体";
        /* 红色字体 */
        color:red;
        
	}
</style>
<body>
    <p>这是一段字体为30像素的文字</p>
    <p>这是一段字体为30像素的文字</p>
</body>

結果を実現：
ここに画像を挿入説明

三、CSSセレクタ

（A）ベースセレクタ

<style>
   /* 标签选择器 */
    p{
        color:red;
    }
    /* id选择器 */
    #span_1{
        color:blueviolet;
    }
    /* 类选择器 */
    .span_2{
        color:orange;
    }
    .size{
        font-size: 20px;
    }
</style>
<body>
    <p>第一段文字</p>
    <p>第二段文字</p>
    <p>第三段文字</p>
    <span id="span_1">第四段文字</span><br/>
    <span class="span_2">第五段文字</span><br/>
    <span class="span_2">第六段文字</span>
    <span class="span_2 size">多类名的情况</span>
</body>

クラスマルチラベル名は、複数のクラス名、および各クラス名に設定されている効果がラベルに同時に達成することができ、異なるCSSスタイルを設定しています。

効果を達成するために：
ここに画像を挿入説明
IDセレクタ、セレクタクラスとタグセレクタ、およびセレクタワイルドカード（*）に加えて、すべてのタグは、スタイルを設定することができます。

（B）擬似クラスセレクタ

1）擬似リンククラスセレクタ

<style>
    /* 链接未点击过的状态 */
    a:link{
        color:green;
    }
    /* 点击过的状态 */
    a:visited{
        color:yellow;
    }
    /* 鼠标悬停时的状态 */
    a:hover{
        color:yellowgreen;
    }
    /* 按下鼠标的状态 */
    a:active{
        color:violet;
    }
</style>

擬似クラスセレクタの2）構造

：まず、子供が最初のサブ要素を選択します
：最後の子は、最後の子要素を選択し、
：N番目の子（n）はn番目の要素を選択します
：N番目-最後の子（n）はn番目の要素の逆を選択します

<style>
    div p:first-child{
        color:red;
    }
    div p:last-child{
        color:orange;
    }
    div p:nth-child(3){
        color:orchid;
    }
    div p:nth-last-child(3){
        color:palegreen;
    }
</style>

結果を実現：
ここに画像を挿入説明

3）擬似対象クラスセレクタ

：同じ第1のサブエレメントの第一の型の選択素子
：最後の子要素を選択するのと同様の最終-の型の要素
：N次の型（n）は、同一のn番目の要素の要素を選択します
：のみ-の型の選択されたサブエレメントタグタイプ固有のタグで

<style>
    div>p:first-of-type{
        color:red;
    }
    div>span:last-of-type{
        color:violet;
    }
    div>p:nth-of-type(3){
        color:blue;
    }
    div :only-of-type{
        color:rgb(24, 155, 179);
    }
</style>
<div>
    <span>第一段文字</span>
    <p>第二段文字</p>
    <p>第三段文字</p>
    <p>第四段文字</p>
    <p>第五段文字</p>
    <div>only</div>
    <p>第六段文字</p>
    <p>第七段文字</p>
    <span>第八段文字</span>
</div>

ディスプレイ：
ここに画像を挿入説明

：ルートは、ルート要素を選択し、すなわち、HTMLタグ
：（）ラベル以外のすべてのラベルを選択しません
：空の選択があることを選択することができないテキストノードを持つ空のラベル
：ターゲットの選択はターゲットを起動します。いわゆるターゲットは、タグのidはIDタグは、ターゲットをアクティブ化されたラベルがクリックされた後、リンクアドレスのラベル、この時、として使用されています。

<style>
    :root{
        background: gray;
    }
    p:not(.second){
        color:salmon;
    }
    p:empty{
        width: 20px;
        height: 20px;
        background: rebeccapurple;
    }
    :target{
        color: aqua;
    }
</style>
<p id="first">ssss</p>
<p class="second">aaaa</p>
<p class="second">bbbb</p>
<p>bbbb</p>
<p><p>
<a href="#foot" id="head">链接</a>
<a href="#head" id="foot">链接</a>

ディスプレイ：
ここに画像を挿入説明

（C）属性セレクタ

簡単に言えば、タブを選択し、プロパティを指定

対応する値と同一【のattribute = value]属性値
[属性〜=値]と同一であるか又は部分的に同一の属性値に対応する値
[属性^ =値] value属性の値が先頭に対応
[属性$ =値]端部に対応するvalue属性値
[属性* =値]の値に対応する属性値に含まれています
[属性| =値]全体の単語の先頭に対応するvalue属性値

<style>
    p[id="cat"]{
        color:red;
    }
    p[class~="dog"]{
        color:orchid;
    }
    p[class~="bird"]{
        color:palegreen;
    }
    p[info^="love"]{
        color: blueviolet;
    }
    p[info$="ful"]{
        color: wheat;
    }
    p[info*="ick"]{
        color: salmon;
    }
    p[info|="clear"]{
        color: aqua;
    }
</style>

結果を実現：
ここに画像を挿入説明

（IV）セレクタとの間の関係を

<style>
	/* 这里以空格隔开的是后代选择器,隔了两代选取到p标签 */
	.outside .first{
	    color:red;
	}
	/* 这里的'div.inside'是交集选择器,以'>'隔开的是子代选择器 */
	div.inside>p{
	    font-size: 20px;
	}
	/* 这里以'+'隔开的是兄弟选择器,以','隔开的是并集选择器 */
	.first+p,.third{
	    color: blue;
	}
</style>
<div class="outside">
    <div class="inside">
        <p class="first">66666</p>
        <p class="second">77777</p>
        <p class="third">88888</p>
    </div>
</div>

実装の影響：
ここに画像を挿入説明

（E）擬似要素セレクタ

<style>
	/* 选中第一行第一个文字 */
	p::first-letter {
	   font-size: 30px;
	   color: firebrick;
	}
	/* 选中第一行 */
	p::first-line {
	   font-size: 20px;
	   color: greenyellow;
	}
	/* 高亮选中的文字 */
	p::selection {
	   color: red;
	}
</style>
<p>
    HTML 标签原本被设计为用于定义文档内容。<br/>通过使用 h1、p、table 这样的标签，<br/>
    HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。<br/>
    同时文档布局由浏览器来完成，而不使用任何的格式化标签。
</p>

結果を実現：
ここに画像を挿入説明

第四に、CSSスタイルのアプローチを設定します

まず、3つの方法の効果は、より多くのCSSスタイルは、式乱雑長いコードを防ぐアウトリーチをお勧めする場合、まったく同じです。
1）インライン
スタイルパターンを直接法に関連付けられたタグの上に形成されて書き込みます。

<p style="color:red">CSS内联式</p>

達成される効果：
ここに画像を挿入説明
2）埋め込まれた
第1のヘッドによっては、ラベルスタイルのタグを書き込み、その後スタイルCSSセレクタスタイルのラベルによる方法を記述し、全体のソースコードからの眺めは、コードブロックに埋め込まれています。

<style>
    p{
        color:red;
    }
</style>
<p>CSS内联式</p>

実装の影響：

3）チェーン
外部スタイルCSSが提供する導入されたCSSファイル

まず、自分で作成したCSSファイルは、
ここに画像を挿入説明
次のように読み取ります。

p{
    color:red;
}

ページのコード

<head>
	<link href="css_03.css" type="text/css" rel="StyleSheet"/>
</head>

<p>CSS内联式</p>

Lalo_isy

公開された26元の記事・ウォンの賞賛6 ・ビュー1496

プライベートの手紙の懸念