DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> css技巧: 10個非常不錯的CSS技巧
css技巧: 10個非常不錯的CSS技巧
編輯:CSS詳解     
在這裡,巧妙的運用CSS的技巧,可以讓你不用修改Html就能得到很好的博客或者模板外觀。我收集了一些非常有用的CSS技巧讓我們設計博客時更炫更酷。
設計模版和博客主題時,我經常“不斷推敲和嘗試CSS(Hit and Trial CSS ),我只看哪種配色方案和哪種CSS屬性的結合能使頁面的元素更完美。對了。之所以說是“不斷推敲和嘗試CSS”是因為在得到了滿意的效果之前我會去嘗試想盡一切方法。使用這些不同的CSS屬性中,我用的最多的是列出來的這些。
從我開始寫博客,我就接觸了CSS,我愛設計也愛CSS。博客讓我學了PHP,CSS甚至Html。這裡我收集了10個很不錯的CSS技巧,你可以用在你的博客或個人網站上。它可以幫你很好地整理你的博客元素並讓他們看起來蠻酷的。下面開始我們的內容,希望你會喜歡它。
1、簡單的方法調整博客圖片大小 1 .content img { 2 height:auto; 3 width:500px; 4 }
這是最簡單高效的重新調整你博客圖片尺寸的方法。它把內容裡面的所有圖片的寬度設為500像素,高度根據寬度自適應。我現在就是用這個方法重新定義了這個博客內容裡面的圖片大小。
2、IE Html Hack 1 div#content {width: 580px} 2 * Html body div#content {width: 600px}
在div前面加上*號,這樣你能為IE定制特殊樣式。
3、CSS陰影 1 .shadow { 2 -moz-box-shadow: 3px 3px 5px
6px #ccc; 3 -webkit-box-shadow: 3px 3px 5px
6px #ccc; 4 box-shadow: 3px 3px 5px
6px #ccc; 5 }
你能為塊級元素或任何被div包裹的類或標簽應用上面的樣式。你需要設置水平和豎直偏移量、模糊半徑和陰影填充色。你可以在這篇文章貼出的那張圖片上看看這個例子。
4、CSS首字放大 1 p:first-letter { 2 display: block; 3 float: left; 4 margin: 5px 5px 0 0; 5 color: red; 6 font-size: 1.4em; 7 background: #ddd; 8 font-family: Helvetica; 9 }
定義你的首字放大很容易,用CSS的first-letter屬性就可以自動選定的博客的首字母,這樣你可以定制CSS來設計首字母的樣式了,像更大字號、斜體等等。
5、用CSS翻轉圖像
1 #content img { 2 -moz-transform: scaleX(-1); 3 -o-transform: scaleX(-1); 4 -webkit-transform: scaleX(-1); 5 transform: scaleX(-1); 6 filter: FlipH; 7 -ms-filter: "FlipH"; 8 }
用上面的CSS屬性你可以翻轉任何圖片
6、移除被點鏈接的點框
1 a {outline: none}
或者
1 a {outline: 0}
你一定注意到了,當你在一些博客裡點擊鏈接時,你會看到在這個鏈接上有點狀的邊框。你可以通過上面一小段的CSS移掉這些邊框。
7、在CSS中使用特殊字體
你可以使用CSS來加載特殊字體,你要做的就是把這個TTF格式的字體上傳到服務器上,然後使用字體規則在CSS上導入它。
8、元素透明 1 .element { 2 filter:alpha(opacity=50); 3 -moz-opacity:0.5; 4 -kHtml-opacity: 0.5; 5 opacity: 0.5; 6 }
使用透明屬性,你可以讓任何浏覽器上的元素透明,這些屬性可以在所有主流器上工作,甚至IE(PS:IE6略過?...)
9、使用CSS顯示鏈接之後的URL 1 a:after{content:" ("
attr(href) ") ";}
這會在鏈接錨點後顯示URL。你也可以用字體或其他樣式定義它。
10、為手持設備定制特殊樣式 1 <link type="text/CSS" rel="stylesheet"
href="handheldstyle.CSS" media="handheld">
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved