CSS使用基礎入門

jopen 12年前發布 | 85K 次閱讀 CSS 前端技術

CSS特點：實現一個網頁內容與樣式的分離。這是CSS非常有優勢的一個特點，省去了我們很多的麻煩。我們來做一個簡單的例子來看一下這個效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
    創建人：陳宗毅
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS測試</title>
</head>
<body>
    <font color=“#0000ff”>欄目一</font>
    <font color=“#0000ff”>欄目二</font>
    <font color=“#0000ff”>欄目三</font>
</body>
</html>

沒有CSS之前，我們是這樣要是把這個顏色改為別的顏色，那么只能一個個顏色值的改，這個工作量很恐怖的。

之后我們使用CSS來進行優化，我們先來使用CSS選擇器：

類選擇器：這就是我們在HTML中查找類所設置的一個值。

我們使用span標簽+類標志，我們把body里邊的內容改成這樣：

<body>
    <span class="menu">欄目一</span>
    <span class="menu">欄目二</span>
    <span class="menu">欄目三</span>
</body>

然后我們來創建我們的樣式文件：

.menu{  /* 欄目樣式*/
    color:#f00; /*  文字顏色 */
}

就這么一句話我們就搞定了之前的顏色設置，想改顏色只要打開這個樣式文件，然后進行更改就行了。避免了很多的麻煩，然后我們再進行樣式文件與這個內容的關聯，很簡單，我們只要拉進來就ok了，拉到這個地方：

<head>
    <title>CSS測試文件</title>
    <link href="css/StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>

這就產生了一個關聯。樣式里邊就一個屬性，一個冒號，一個屬性值構成的。當我們不知道有什么屬性值的時候，我們按一下空格，VS就會羅列出所有的屬性值，這樣我們就能選擇我們需要的屬性值了。

ID選擇器：

id一般來說都是唯一的，我們來看一下操作：

<body>
   <span id="special"  class="menu">欄目一</span>
    <span class="menu">欄目二</span>
    <span class="menu">欄目三</span>
</body>

然后我們在樣式文件中，我們這樣：

#special
{
     font-weight :bold ; /* 粗體 */
        }

我們得到了兩種效果的混合了。看看效果：

然而，當id選擇器和類選擇器的樣式起沖突的時候，就這涉及到了一個優先級的問題了，在這里我就直接把優先級說一下，ID選擇器>類選擇器。

HTML標簽選擇器：

設置的是一個更大范圍的，只要是這個標簽里邊的，就會應用這個樣式，那么我們這段代碼里邊，有一個body，我們在樣式中的body里邊寫入一個顏色值：

body 
{
    color :#f0f;
}

那么我們的HTMLPage里邊的body中的：

<body>
   <span id="special"  class="menu">欄目一</span>
    <span class="menu">欄目二</span>
    <span class="menu">欄目三</span>
    123456
</body>

那么這個123456就會變色。效果：

我們也很容易的看的出來，欄目一欄目二欄目三沒有變色，這是為什么呢？很明顯，這涉及到了一個優先級的問題了，ID優先級>類選擇器>HTML標簽選擇器。

再說一個內容，就是一個父子關系的，我們在HTMLPage里邊這樣寫:

<body>
   <span id="special"  class="menu">欄目一</span>
    <span class="menu">欄目二</span>
    <span class="menu">欄目三</span>
    <span class="title">這是<span>一</span>條新聞標題</span>
    123456
</body>

然后我們在樣式文件中這樣：

.title span
{
      color:#000;
      font-size :12px;  / 字體大小  /

}</pre> <p></p>

記得title與span之間的空格，然后這個效果就是：


我們就能看的出來，這個“一”是明顯的變了。

還有一個內容，并列的寫法：我們在樣式中這樣寫：


.menu, .title
{
    background-color :#ee00ff; 
    }
 

menu和title之間我們用逗號隔開，就能達到目的，我們看看效果：


我們接下來講最后一個內容，就是class這個類是可以設置為多個的，那么我們看一下是什么個情況，我們在HTMLPage里邊寫：


<body>
   <span id="special"  class="menu">欄目一</span>
    <span class="menu niu">欄目二</span>
    <span class="menu">欄目三</span>
    <span class="title">這是<span>一</span>條新聞標題</span>
    123456
</body>
 

然后我們在樣式里邊這么寫：


.niu 
{
     text-decoration :underline;
     color :#eeeedd;
    }
.menu{  / 欄目樣式/
    color:#f00; /  文字顏色 /
}</pre> 

我們就能看到欄目二


已經與niu一樣，加了下劃線了，這就出現了一個問題，這個時候的顏色應該是menu的還是niu的呢？我們一看就知道是menu的，這與CSS的樣式排列前后順序有關。與后面的對應起來。
轉自：http://blog.csdn.net/yi_zz/article/details/7686301