Div+Css(1)_html/css_WEB-ITnose

　　前天，在CSDN上看到一篇文章《有理想的程序员必须知道的15件事》 原文链接：http://sd.csdn.net/a/20110421/296282.html

　　看了这篇文章，其中两点印象挺深刻的。

　　1，多看的同时多练

　　2，通过学习把理解到的东西通过写博的方式分享出来。（希望大家指出不足之处）

　　故以后只要有时间我都会通过写博的方式把学到的点滴分享出来。

　　今天，作为菜鸟的我看了一个讲Div+Css的视频教程。

　　主要学到了：

　　　　1，Css样式的种类。第一：内联式样式表，第二：嵌入式样式表，第三：外部样式表，第四：输入样式表。

　　　　什么是内联式样式表？

　　　　

------这种方式现在已经比较少用了。

　　　　什么是嵌入式样式表？

　　　　

　　　　

　　　　

　　　　

　　　　

　　　　　

我是中国人

　

　　　　　　........(主体内容)

　　　　

　　　　

　　　　什么是外部样式表?

　　　　意思就是：把样式写在一个外部的.Css文件中，然后通过在html页面上引用该文件。任何html页面都可以引用。

　　　　引用方法如下：

　　　　

　　　　

　　　　 (注意： href="存放.css文件的地址")

　　　　

　　　　

　　　　　

我是中国人

　

　　　　

　　　　

　　　　什么是输入样式表？

　　　　将Css文件输入到另一个Css文件中。

　　　　假如你有一个test1.Css文件

　　　　P{

　　　　　　　　font-size:16px;

　　　　　　　　color:Red;

　　　　　　　　background-color:Green;

　　　　　　　　text-decoration:underline

　　　　　　}

　　　　还有一个test2.css文件

　　　　div{

  　　　　　　color:Yellow;

　　　　　　　font-size:20px

　　　　　　}

　　　　此时只要在test1.css文件里输入

　　　　@import url（test2.css文件的地址） ----此时在页面中只要引用test1.css文件。就相当于引用了在这之前的test1.css和test2.css两个文件

　　　　2，学到第二点：样式规则的选择器，第一：html selector;第二：class selector；第三：id selector ；第四：关联选择器；第五：组合选择器；第六：伪元素选择器

　　　　什么是html选择器？

　　　　就是直接在前边写html标签。如：

标签，标签，

标签等

　　　　　　　div{--这就是html选择器形式

　　　　　　　　color:Yellow;

　　　　　　　　font-size:20px

　　　　　　　　}

　　　　什么是class选择器？

　　　　　　.lei{--这就是class选择器形式

　　　　　　　　color:Yellow;

　　　　　　　　font-size:20px

　　　　　　　　}

　　　　在页面中可以这样调用 ：

我是中国人

p .one{} -- P タグの下にある 1 つのセレクターを表します (

タグの下でのみ使用できます)

ID セレクターとは何ですか? ">私は中国人です

注: 同じページ内に同じ名前の ID セレクターを置くことはできません。

入れ子形式に似ています。

例: p em{ --これは、スペースで区切られた関連付けられたセレクターの形式です

Color:Red;

Font-size: 16px

}

上記の関連付けられたセレクターは、em タグを強調する必要があります効果を発揮するには、P タグ内にネストする必要があります。 (ネスト順序重視:後のタグは前のタグにネストする必要があります)

ページ上: --これが有効になります。

私は中国人です

ローグ絵馬＞

}

このようなカンマで区切られたものを組み合わせセレクターと呼びます

特徴：ネストされている場合にのみ使用できる連想セレクターとは異なり、上記のすべてのタグはこれらのスタイルを使用できます規則に従って正しく

擬似要素セレクター(擬似クラス)とは何ですか？

a:link{}

a:hover{}

a:visited{}

疑似要素セレクターはクラスで使用されます:

a.one:link{}

a.two:hover{ }

a.three:visited{}

動的疑似クラス

: focus は現在入力フォーカスを持つ要素を示します (ie7 フォーム要素はこの疑似クラスをサポートしません)

最初の要素を選択します

#header P：first-child ヘッダーの最初の段落を選択します

最初の文字を選択

P:first-letter 段落の最初の文字を選択します

タグや段落などのブロックレベルの要素にのみ適用できますが、ハイパーリンクなどの要素をインライン化しない

: before と :after

これら 2 つの疑似要素は、生成されたコンテンツを挿入し、そのスタイルを設定するために使用されます。

リテラルの意味: :before は、要素 content の前にコンテンツを挿入するために使用されます

:after 、その逆。

コンテンツと併用する必要があります。フロートを除去するには after を使用するのが良い選択です。

構文: a[href]: before{content: "link"}

注: 挿入されるコンテンツは、要素のコンテンツの前または後にあります。つまり、要素の中に挿入されます。要素の前または直後ではなく