CSS(上)

CSS

 

          (カスケーディング・スタイル・シート)

カスケーディングスタイルシート(英語名:カスケーディングスタイルシート)は、HTML(標準一般化マークアップ言語のアプリケーション)またはXML(標準一般化マークアップ言語のサブセット)およびその他の文書スタイルのコンピュータ言語を表すために使用されるの一種です。CSSは、静的スクリプト言語の様々なページは、動的ページの各要素のためにフォーマットすることができます修正することはできません。  
三のCSSリファレンス:
指定されたファイルmycss.cssアドレス内のリンクのhrefタグ
風のラベルは、直接CSSのコードを書きます
個々のラベルにCSSを書きます

 

 

 
<! - <リンクのrel = "スタイルシート"のhrefを= "mycss.css"> - > 
<! - <スタイル> - >
<! - P { - >
<! -色:赤; - - >
<! - } - >
<! - </スタイル> - >
 
 
<!DOCTYPE HTML> 
<HTML LANG = "EN">
<ヘッド>
の<meta charsetが= "UTF-8">
<タイトル>三种方式</ TITLE>
<スタイル>
#のD9 {
色:黒;
}

、P {
色:オレンジレッド。
}
</スタイル>
</ HEAD>
<BODY>
<Pスタイル= "色:フクシア;">!你们一定努力啊</ P>
<! - <リンクのrel = "スタイルシート"のhref = "mycss.css" > - >
<Pスタイル= "色:青">你们</ P>
<PのID = "D9"> ???没了</ P>
<時間>
</ body>
</ HTML>
结果。

 

 

タグセレクタ:名札
P {
色:赤;
}
クラスセレクタ:Pointクラス名+
.c1 {
色:黄色;
}
IDセレクター:#+ ID値
#{D1
色:緑;
}
一般的な/グローバルセレクタ
{*
色:ブルー;
}

近接の原理:同じセレクタ下1. 
2.セレクタ異なる場合:


インライン> IDセレクタ>クラスセレクタ>タグセレクタ

 

 

 

 

 

 

 

 

 

組み合わせセレクター:

子孫セレクタ
DIVスパン{
色:赤;
}
子セレクタ
DIV>スパン{
色:アクア;
}
隣接セレクタ:直後
{DIV +スパン
:オレンジ色;
}
兄弟セレクタ:同じレベル次のラベルのすべて
〜スパンDIV {
色:ブラウン;
}

属性セレクタ

 

 

 

 パケット

要素CCTV同時に複数の、我々は、各パターン集合のための要素を繰り返す必要がない場合、我々は、要素が複数のセレクタとの間に均一なパターンに配置されたセレクタにカンマで区切られたパケットを使用することができます。

例えば、DIV、P、{用

赤色 ;}

 

 ネスティング

#A1は、.b1は、種々のセレクタはコンマを使用してリンクすなわちまたがります 


 

/ *接続状態* / 
A:リンク{
色:ピンク;
}
/ *マウスサスペンド状態* /
A:ホバー{
色:赤;
}
/ *マウスクリックの状態が* /
A:アクティブ{
カラー:パープル;
}
/ *アクセス状態の後に* /
:{訪問
色:dimgrey;
}
/ *入力ボックスは、合焦状態を得ることがクリックされたが、* /呼ばれる
INPUT:フォーカス{
背景色:オレンジ;
}
INPUT:ホバー{
背景色:赤。
}

 疑似クラスセレクタ

リンク{

赤色

}

 

A:ホバー{

色:YELLO

}

To:vistied {

青色

}

入力:フォーカス{

概要:なし。

背景色:#eee}

 

 ショー

:第一子のインスタンス効果。

<!DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <スタイル> 
        P:第一子{ 
            フォント重量:太字; 
            カラー:ゴールド
        } 

        リー:最初の子{ 
            テキスト変換:大文字; 
            色:赤
        } 
    </スタイル> 
</ HEAD> 
<BODY> 
の<div> 
    <P>これらは必要な手順は次のとおりです。</ P> 
    <UL> 
        <LI> Intertキー</ LI> 
        <LI>キーを回し<強いです>時計回り</ strong>の</ LI>
    <P>ド<em>のない</ em>のアクセラレータと同時にブレーキを押します。</ p> 
</ div> 
</ BODY> 
</ HTML>

  

 

以下の結果を変更する最初の要素だけを見ることができる実証

 

 

 

<ヘッド> 
<スタイルタイプ= "テキスト/ cssの"> 
P> I:第一子{ 
  フォント重量:太字; 
    カラー:ゴールド; 
  } 
</スタイル> 
</ HEAD> 

<BODY> 
<P>一部の<私>テキスト1 </ I>。いくつかの<私>テキスト2 </ I>。</ P> 
<P>一部の<私>テキスト1 </ I>。いくつかの<私>テキスト2 </ I>。</ P> 
<P>一部の<私>テキスト1 </ I>。いくつかの<私>テキスト2 </ I>。</ P> 
<P>一部の<私>テキスト1 </ I>。いくつかの<私>テキスト2 </ I>。</ P> 
</ BODY> 
</ HTML>

  

 

 どこに最初のpに属するすべてのP> I I I代表はクラスとして選択されます。

 

 

擬似要素セレクタ

最初の一文字

P:最初の文字{

フォントサイズ:48px;

赤色;

}

コモン、最初の文字に特別なスタイルを設定します

 

 

各<p>要素の前に挿入しGKD

P:前{

内容: 'GKD'

色: 'BULE'}

後に

浮動の問題を解決するのに役立ち、の終わりに含有量を増加させるために使用することができます

P:{の後

内容:「???概要」

赤色}

 

 

優先イラスト:

                                         >>>> >>>> >>>>>

 

                                         >>>> >>>> >>>>>

 

 

おすすめ

転載: www.cnblogs.com/Sunbreaker/p/11460265.html