簡單實用的css教程

我看到有些壇友覺得css好像很難，其實很簡單的，只要你懂英文一看就知道了，不懂的話也很簡單，用google翻譯就可以了，下面我寫一下簡單的教程，大家看過之後會對css有一個簡單的認識，如果您能理解我的意思的話，修改網頁的顏色搭配甚至位置的改變都是可以的。下面這段代碼是我選用的wp自帶的2011就是twenty eleven這個主題來給大家講解一下。

這段代碼大概是從網頁的代碼的43行

到63行。可以打開網頁之後查看源文件獲得。    <div id="page" class="hfeed">
	<header id="branding"  role="banner">
	<hgroup>
	<h1 id="site-title"><span><a  href="http://localhost/wordpress/" title="美容" rel="home">美容</a></span></h1>
	<h2 id="site-description">又一個 WordPress 站點</h2>
	</hgroup>
	<a href="http://localhost/wordpress/">
	<img src="http://localhost/wordpress/wp-content/themes/twentyeleven/images/headers/wheel.jpg" width="1000" height="288"  alt="" />
	</a>
	<form method="get"  id="searchform" action="http://localhost/wordpress/">
	<label for="s"  class="assistive-text">搜索</label>
	<input type="text" class="field"  name="s" id="s" placeholder="搜索" />
	<input type="submit"  class="submit" name="submit" id="searchsubmit"  value="搜索" />
	</form>
	<nav id="access"  role="navigation">
	<h3 class="assistive-text">主菜單</h3>
	<div class="skip-link"><a  class="assistive-text" href="#content" title="跳至主內容區域">跳至主內容區域</a></div>
	<div class="skip-link"><a  class="assistive-text" href="#secondary" title="跳至副內容區域">跳至副內容區域</a></div>

其中<div id="page"class="hfeed">這個的css樣式是在主題下style.css中的75行

#page {

    margin:2em auto;

    max-width:1000px;

}

<headerid="branding" role="banner">

<hgroup>這個的css樣式是在主題下style.css中的79行

#branding hgroup {

         margin:0 7.6%;

}

這兩個css都被定義為id，通過對比#page，#branding大家有沒有發現以id為屬性的樣式，它的css寫法前面都是以井號來標記的#？無論id前面你是寫的div還是header還是其他任何的名稱，只要是id屬性那麼它的css標記都是以#開始，

在#branding hgroup {

         margin:0 7.6%;

}

這個css中#branding hgroup 它的意思是為branding下的hgroup定義css樣式，因為hgroup沒有被定義屬性，例如class。所以這裡hgroup前面就是空白，那如果hgroup被定義屬性為class的要怎麼寫呢？

比如

<nav id="access"  role="navigation">

<h3 class="assistive-text">主菜單</h3>

<div class="skip-link"><a  class="assistive-text" href="#content" title="跳至主內容區域">跳至主內容區域</a></div>

這段代碼，他的css是在style.css中的501行

#access a.assistive-text:active,

#access a.assistive-text:focus {

         background:#eee;

         border-bottom:1px solid #ddd;

         color:#1982d1;

         clip:auto !important;

         font-size:12px;

         position:absolute;

         text-decoration:underline;

         top:0;

         left:7.6%;

}

這個上面我們可以看到有#access a.assistive-text:active, #access a.assistive-text:focus 這麼多.這些的意思我簡單說一下。不懂沒關係，它是說#access下面的a.assistive-text下面的active,和#access下a.assistive-text下的focus這兩個公用相同的css樣式，所以寫到一起。可以使代碼簡潔。

好了，回到我們上面的問題。下面這些就希望大家理解了。被定義屬性為class的要怎麼寫呢？首先在<nav id="access" role="navigation">從這句話我們可以看出想給這個access寫樣式的話我們要先寫#access，然後被定義為class的a標籤，也即<aclass="assistive-text" href="#content" title="跳至主內容區域">跳至主內容區域</a> 這段的寫法我們要寫為 a.assistive-text這兩個a中間的點就是css中class的標記。第一個a 的意思是a標籤也就是a herf的意思，因為我們沒有對其定義屬性所以第一個a前面沒有點，點後面以a為開頭的assistive-text就是對<a class="assistive-text"的樣式進行定義。現在大家應該明白class屬性在css中對應的寫法是.了吧。

好了這樣的話整個寫下來就是#accessa.assistive-text.這句代碼反應兩個問題

1，  在html裡的<nav id="access" role="navigation">中有一個被命名為access的id。也就是說html裡的名稱和你css中的名稱是一一對應的。根據它的屬性是id還是class在這個名稱前面加井號或者點。

2，  想要給一個id下面的class屬性的內容寫樣式的話，id要在css中寫在class的前面。這麼做的好處是避免class屬性對上面的繼承導致你直接寫class的樣式失敗。如果寫一個id還不能取消繼承的話，可以在這個id前面再加一個id。

學會了怎麼寫開頭，我們學下怎麼寫內容。{

         background:#eee;

         border-bottom:1px solid #ddd;

         color:#1982d1;

         clip:auto !important;

         font-size:12px;

         position:absolute;

         text-decoration:underline;

         top:0;

         left:7.6%;

}

這裡我們可以看到，內容是寫在中括號裡的，每個屬性以分號;隔開。下面講解下上面這個css的意思background:#eee;背景顏色是#eee。

& M6 p3 a5 G8 B2 k9 _  m2 D

border-bottom: 1px solid #ddd; 1個像素的實線並且實線是#ddd顏色的底部邊框。

/ J- [& q3 @( L" w

color:#1982d1; 這塊的內容顏色是#1982d1。

' K$ X5 x; p3 S5 h

font-size: 12px;字體大小12像素。

4 x: Z* ]3 o' r1 R( X

position: absolute;位置是以整個頁面為基準。

text-decoration: underline;文字裝飾有下劃線。

; \2 L/ x; J( \3 v0 I

top: 0;頂部0像素。

% t- U7 Z2 c- e# f) E6 q9 L

left:7.6%;這個部分在整個頁面左邊的7.6%的位置。clip: auto !important;這個是居中裁剪!important這個是瀏覽器兼容的作用。

解釋過上面的意思之後，說下大家用的時候要注意的問題。比如#eee這個顏色，大家應該注意到了，顏色開頭是有井號的。1px，12px，這些凡是有數字的像素是一定要加px的。只有在0像素如top: 0;的時候可以不加px。Position有absolute的絕對定位和relative相對定位兩種。left: 7.6%從這裡我們可以看出除了用固定像素之外還可以用百分比來固定你的位置，寬度，高度。

相信如果大家能看懂這些，經過一些實踐的話，3-5天你就學會css了。如果遇到不懂的屬性的話。大家可以把這些詞拿去google下，明白他的中文意思，我想大家就知道怎麼寫樣式了吧。其實常用的屬性也就只有不到30個單詞，只要記住這30個左右的單詞，相信應付日常的工作是沒問題的，畢竟我們不是開發網站的。

最後一句也是最重要的。大家在改css的時候一定要用英文輸入法，不要用搜狗這類的輸入法，只有英文輸入法才會有作用。希望大家一定要多動手，多去看別人的css，學習下別人的。這樣你就會進步很快了。

本屌並沒有學過css。這些都是本屌偶然看到別人操作一次後回去自己實踐學會的。都是讓大家看完之後直接去操作的實用教程。因為非專業出身，所以有不對的地方請大神予以指出，以免誤導群眾。多謝。最後希望大家能夠學會css。也希望大家能給多加t幣，多謝。最後無恥一下，如果大家覺得好，t幣給的多的話，我再寫一個補充教程。嘿嘿

5 i* ~' }8 V, m! x3 k# ^3 w( e' Y

好東西就要收藏下來........
2 b, E: r4 y& _$ z7 @

非常感謝樓主的分享!謝謝

感謝樓主的分享，學習了！

cfdylz 發表於 2013-12-2 22:08
: _/ i) X9 T  t, k& X% Q4 K非常感謝樓主的分享!謝謝

; j3 W8 k) K5 {  m+ n喜歡就加分吧，謝了      
3 |, c! U0 k) K- u' n

hua120 發表於 2013-12-2 22:20
; V* n1 |) e/ A* F5 g7 ]1 C; t感謝樓主的分享，學習了！

您的分是我的動力，如果大家分加的多的話，我找個站給大家寫一個實戰教程
5 w/ w1 k; |( L0 }7 h  S! X! F
) I/ P0 q* [/ W  T1 e

謝了露珠這個很簡單試用

查看88,6個回復，6個幣，略顯淒慘
4 z( r! g4 V5 Q! m- {' B, V

' f; H% R9 W3 a8 [自己寫教程，無論如何都要大力支持，
如果樓主真的再寫實戰教程，還有分加，謝謝分享
3 b6 ~' T' j  X  Y! e但不要拿其他人的教程充數哦，呵呵
+ M7 W- q6 M4 z

will86 發表於 2013-12-2 22:29
  ~. L6 c% k3 D9 x  J) w您的分是我的動力，如果大家分加的多的話，我找個站給大家寫一個實戰教程
- @% S0 s8 X# E$ {6 K& q) A  B7 M
5 B" U0 j3 w# W( y ...

2 B8 t- C4 ]3 j) q% a. I 樓主來個實戰教程吧。 我把今天的分都加給你  

( \) H: R  n+ b$ u