セレクタスタイルシート：フロントエンド（9）〜CSS学習（III）を学べます

主な内容

CSSの概要
三つの方法HTMLとCSSの組み合わせ：行内样式表、内嵌样式表、外部样式表
四つの基本的なCSSの标签选择器セレクタ：类选择器、ID选择器、、通用选择器
CSSセレクタのいくつか后代选择器の拡張機能：交集选择器、、并集选择器
CSSスタイルの優先順位

CSSの概要

CSS：カスケーディングスタイルシート、カスケーディングスタイルシート。CSSの役割は、様々なスタイル、ページの定義を追加するためのHTMLページのタグを表示することです。簡単に言えば：CSSのWebコンテンツの表示スタイルと分離し、表示を改善しました。

最新バージョンは、CSS CSS3、私たちが学んでいるCSS2.1です。

次に、我々はあなたがCSSを使用したい理由について話しています。

HTMLの欠陥：

さまざまなデバイスに適応することはできません
これは、ブラウザが十分に大きい知性でなければならない必要が
ノー別々のデータと表示
それは十分に強力ではありません

CSSの利点：

そして、データが別々に表示することを
ネットワークトラフィックを削減
視覚効果は、サイト全体で一貫しています
開発効率向上（低下結合、HTML、CSS書き込むための責任者を記述するための責任者）

知識のCSSフォーカス

ボックスモデル、フロート、ポジショニング

CSS全体的な認知

ラップではなく、敏感なスペースにCSSの影響を受けません。しかし、標準の構文が存在しなければなりません。コロン、セミコロンは省略できません。

CSSの構文

:(構文）は、実際にキーと値のペアであります

セレクタ{
    プロパティ名：プロパティの値。
    プロパティ名：プロパティの値。
}

説明：

ページ上の特定の要素、セレクタ必須の括弧の代わりにセレクタ。
これは、属性名の後にコロンで区切る必要があり、プロパティ値の後にセミコロン（最後のプロパティセミコロンすることはできません）を使用します。
属性名とコロンの間にスペース（経験）を持っていないことが最善です。
プロパティに複数の値がある場合には、複数の値をスペースで区切っ

例えば：

P {色：赤;}

コメントのCSSコード

フォーマット：

< スタイルタイプ= "テキスト/ cssの" >

    / *
        特定のコメント
    * /

    P { 
        フォント重量：太字。
        フォントスタイル：イタリック; 
        色：赤; 
    }

</ スタイル>

注：CSSだけ/* */このコメント、ない//ようにコメント。そして、コメントへの書き込み<style>タグが内部にああを有効にすると考えます。

次に、私たちは本当に少しCSSの知識の話をするために開始したいです。

CSS方法を学習するには？CSSの知識は二つの部分があります：1）セレクタ、どのように選挙を、どの2）プロパティ、スタイルがあります

CSSのいくつかの簡単な一般的なプロパティ

フォントの色

赤色;

フォントサイズ

フォントサイズ：40ピクセル;

背景色

背景色：青。

大胆な

フォント重量：太字;

通常は、通常の手段です。

斜体

フォントスタイル：イタリック;

斜体は正常ではありません

下線

テキスト装飾：なし;

ウェイHTMLの組み合わせとCSS（スタイルシート）

CSSとHTMLの組み合わせ3通りの方法があります。

インラインスタイル：特定のタグでスタイルプロパティ。唯一このラベルの範囲。
組み込みスタイルシート：ページの先頭に使用して<style>タグを。このページの範囲。
外部スタイルシートのCSSファイルを導入する方法。この方法の導入は二つのタイプに分けられます。
- 1、使用して<link>ラベルを。例えば：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
- 図2は、インポートを使用して、に書き込まれなければならない<style>タグ、及び最初のものでなければなりません。例えば：@import url(a.css) ;

スタイルの違いを導入する方法の二種類：外部スタイルシートは、タグを記述することはできませんが、import文を書くことができます。

インラインスタイル：方法と組み合わせて1、CSSとHTML

スタイル属性を使用しました。範囲は、このラベルにのみ適用されます。

より柔軟な方法が、地元の修正のためにあまりにも面倒同じラベルの複数のために同じスタイル定義。

< p型スタイル=「色：白;背景色：赤は」>私はそう簡単に紐ないんだけど。</ p型>

2、CSSとHTMLを組み合わせ方法：埋め込まれたスタイルシート

headタグの中に参加し<style>たラベル、統一された複数のラベルは、このページの範囲を変更します。

この方法は、それは統一スタイルのシングルページのセットが、ローカルの柔軟性のために十分ではないことができます。

< スタイルタイプ=「テキスト/ CSS」> 
    P { 
        フォント重量：太字。
        フォントスタイル：イタリック; 
        色：赤; 
    }

</ スタイル>

 < ボディ> 
    < p型>クリーンに</ p型> 
    < p型スタイル=「色：ブルー」>あなたが知っている</ p型> 
 </ ボディ>

三つの方法と組み合わせて3、CSSとHTML：外部スタイルシートのCSSファイルの導入

はじめにスタイルシートファイルの方法は2種類に分けられます。

（1）<link>ラベル。例えば：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
（2）インポートは、で書かれなければならない<style>タグ、及び最初のものでなければなりません。例えば：@import url(a.css) ;

スタイルの違いを導入する方法の二種類：外部スタイルシートは、タグを記述することはできませんが、import文を書くことができます。

ここでは、知識の補充を再訪：<link>rel属性ラベル：誰のプロパティの値は、次の2つです。

stylesheet：スタイルシートの定義
alternate stylesheet：候補スタイルシート

例えば

その後、我々は、HTMLファイル内で参照3枚のスタイルシートを持っています：

<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
<link rel = "alternate stylesheet" type = "text/css" href = "b.css" title="第二种样式"></link>
<link rel = "alternate stylesheet" type = "text/css" href = "c.css" title="第三种样式"></link>

上面引入的三个样式表中，后面两个样式表作为备选。注意备选的样式表中，title属性不要忘记写，不然显示不出来效果的。现在来看一下效果：（在IE中打开网页）

CSS的四种基本选择器

CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS的选择器分为两大类：基本选择题和扩展选择器。

基本选择器：

标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用）

1、标签选择器：选择器的名字代表html页面上的标签

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

举例：

p{
    font-size:14px;
}

上方选择器的意思是说：所有的<p>标签里的内容都将显示14号字体。

【总结】需要注意的是：

（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input。

（2）无论这个标签藏的多深，一定能够被选择上。

（3）选择的所有，而不是一个。

2、ID选择器：规定用`#`来定义

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。

举例：

#mytitle{
    border:3px dashed green;
}