css的簡單學習

css樣式若是比較大的話，就寫入到一個文件中，而後連接引用過來

<link href="1.css" type="text/css" rel="stylesheet">

還有一種導入樣式

<style type="text/css">

<!--

@import url(1.css);

-->

</style>

這個和鏈接式原理相似。

css的選擇器

一、標記選擇器

h2 {

color:#FF33CC;

text-dexoration:underline;

font-family:黑體;

font-size:28px;

}

直接對html的內置標記生效

二、類別選擇器

.classname1 {

color:green;

font-size:20px;

}

使用例子<p class="classname1">類別選擇器</p>

三、

id選擇器

#id1 {

color:green;

font-size:20px;

}

使用的時候

<p id="id1">Id1選擇器使用</p>

選擇器能夠設置一個集體聲明

h1,h2,h3 {

color:purple;

font-size:14px;

}

h2.special, .special, #one {

text-decoration:underline;

}

h2.special用於

<h2 class="special">用於</h2>

.special用於

<p class="special">選擇器集體聲明</p>

#one

<p id="one">選擇器集體聲明</p>

選擇器的嵌套

p b {

  color: green;

  text-decoration: underline;

  font-size:12px;

}

適用於

<p>選擇器嵌套<b>使用css標記</b>的方法</p>

對於<b>xxx</b>無效

子選擇器

ul.myList > li > a {

color:blue;

}

適用於

<ul class="myList">

  <li><a href="http://picasa.google.com">issac's Pi</a></li><!--css只適用這一行-->

     <ul>

        <li><a href="#">CSS1</a></li><!--孫樣式，不適合-->

        <li><a href="#">CSS2</a></li>

     </ul>

  </li>

</ul>