我們知道，網(wǎng)頁是由html和css進(jìn)行最基本的架構(gòu)布局，那么，wordpress主題也是一樣，今天小編就來教一教你如何修改自己的主題樣式，達(dá)到自己修改主題的目的，并且我們將放上非常實用的css代碼，讓你可以直接使用。

話不多說，我們現(xiàn)在就來看看如何簡單修改一款主題吧~

首先，你要知道主題的位置，如果你可以在本地測試，那么是最好不過的，主題的位置在根目錄/wp-content/themes/??? 這個文件夾下的文件夾中，找到自己的主題文件

然后，我們推薦下載火狐瀏覽器，安裝firebug插件：

下載完成火狐之后，打開火狐瀏覽器，點(diǎn)擊工具下拉菜單，選擇附加組件，在搜索一欄中輸入firebug，安裝即可，安裝完成之后，重啟瀏覽器，按F12即可出現(xiàn)firebug的界面。

firebug的左邊有一個箭頭的按鈕，可以使用這個按鈕找到你想要修改的元素，在右邊，會出現(xiàn)影響這個元素的css，如下圖：

現(xiàn)在，我們需要給我們選中的元素加一個投影，點(diǎn)擊右邊的css，雙擊里面的效果css，添加新的代碼：

效果實現(xiàn)無誤之后，到我們第一步找到的主題文件夾中，尋找到相應(yīng)的css，css的路徑在上圖右邊的藍(lán)色標(biāo)題中，上圖要修改的這個元素在pages.css中，鼠標(biāo)放在上面，會出現(xiàn)詳細(xì)的路徑，找到文件，再根據(jù)第幾行顯示的位置，添加進(jìn)css，保存即可。

現(xiàn)在你會簡單的修改你的主題樣式了嗎？? 修改完成之后，記得記住你修改了那些文件，在主題更新中，可以詢問下是否修改過css，如果沒有的話，更新主題可以保留自己的css文件，就不會更新掉自己修改的樣式了~

現(xiàn)在你可以嘗試在本地修改一些樣式，如顏色、投影等等，讓你的主題與眾不同哦~?? 下面我們給你準(zhǔn)備了一些好看的css樣式，給你修改參考~

1.花式連字符（&）
這個類應(yīng)該在span元素里使用，并且里面包括&字符。它使用經(jīng)典的serif字體和斜體來增強(qiáng)&符號。

.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}
源碼地址： http://css-tricks.com/snippets/css/fancy-ampersand/

2.段落首字符下沉

通常，這種效果會出現(xiàn)在印刷媒體上，如報紙或書籍。同樣，如果網(wǎng)頁布局合理，它也可以使用在Web頁面上，它僅針對段落使用，但你也可以與單個元素綁定。

p:first-letter{
display: block;
margin: 5px 0 0 5px;
float: left;
color: #ff3366;
font-size: 5.4em;
font-family: Georgia, Times New Roman, serif;
}

3.內(nèi)層CSS3盒陰影
盒陰影（box shadow）屬性幾乎可以運(yùn)用在任何元素上，它們看起來都非常好看。下面這段代碼主要聚焦內(nèi)層陰影的設(shè)計。

#mydiv {
-moz-box-shadow: inset 2px 0 4px #000;
-webkit-box-shadow: inset 2px 0 4px #000;
box-shadow: inset 2px 0 4px #000;
}

4.外層CSS3盒陰影
下面介紹一段外層陰影代碼設(shè)計，注意，代碼里的第三個參數(shù)表示模糊距離（blur distance），而第四個參數(shù)表示鋪開的（spread）距離。關(guān)于這些值的設(shè)計，你可以前往 W3Schools學(xué)習(xí)。

#mydiv {
-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
-moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}

5.三角形列表符號
該符號只能在CSS3里生成，在主流瀏覽器中，這是一項非?？岬募夹g(shù)。而其唯一的潛在問題是缺乏對后退方法的支持。

ul {
margin: 0.75em 0;
padding: 0 1em;
list-style: none;
}
li:before {
content: "";
border-color: transparent #111;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}
源碼地址： http://jsfiddle.net/chriscoyier/yNZTU/

6.居中對齊并設(shè)置固定寬度

#page-wrap {
width: 800px;
margin: 0 auto;
}

源碼地址： http://css-tricks.com/snippets/css/centering-a-website/

7.CSS3列文本

#columns-3 {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 12px;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
-webkit-column-rule: 1px solid #c4c8cc;
}
源碼地址： http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/

8.固定頁腳

在網(wǎng)頁里添加固定的頁腳其實非常簡單，并且也很實用。有些網(wǎng)站的頁腳設(shè)計得很漂亮，可以給網(wǎng)站呈現(xiàn)出一個完美的結(jié)尾。

#footer {
position: fixed;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
background: #444;
}
/* IE 6 */
* html #footer {
position: absolute;
top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
源碼地址： http://www.flashjunior.ch/school/footers/fixed.cfm

9.IE 6下修復(fù)PNG格式的透明度

在網(wǎng)站里使用透明的圖像已成為一種很普遍的做法，其始于.gif圖片格式，但現(xiàn)在也涉及到.png圖片格式。而一些老版本的IE不支持透明度，下面這段代碼會很好地解決這一問題。

.bg {
width:200px;
height:100px;
background: url(/folder/yourimage.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}
/* 1px gif method */
img, .png {
position: relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}
源碼地址： http://css-tricks.com/snippets/css/png-hack-for-ie-6/

10.跨瀏覽器設(shè)置最小高度

有時開發(fā)者需要對HTML元素設(shè)置最小高度，然而，這個效果卻無法兼容IE和老版本的Firefox，下面這段代碼可以修復(fù)這個問題。

#container {
min-height: 550px;
height: auto !important;
height: 550px;
}

現(xiàn)在，你可以去對照著修改你的主題拉~ 希望本文對你有所幫助！