使用CSS技巧有哪些

這篇文章給大家分享的是有關(guān)使用CSS技巧有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)主營金堂縣網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件開發(fā)公司,金堂縣h5重慶小程序開發(fā)搭建,金堂縣網(wǎng)站營銷推廣歡迎金堂縣等地區(qū)企業(yè)咨詢

1、簡單的方法調(diào)整博客圖片大小

代碼如下:

content img {
height:auto;
width:500px;
}

這是最簡單高效的重新調(diào)整你博客圖片尺寸的方法。它把內(nèi)容里面的所有圖片的寬度設(shè)為500像素，高度根據(jù)寬度自適應(yīng)。我現(xiàn)在就是用這個(gè)方法重新定義了這個(gè)博客內(nèi)容里面的圖片大小。
2、IE HTML Hack

代碼如下:

div#content {width: 580px}
* html body div#content {width: 600px}

在div前面加上*號，這樣你能為IE定制特殊樣式。
3、CSS陰影

代碼如下:

shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}

你能為塊級元素或任何被div包裹的類或標(biāo)簽應(yīng)用上面的樣式。你需要設(shè)置水平和豎直偏移量、模糊半徑和陰影填充色。你可以在這篇文章貼出的那張圖片上看看這個(gè)例子。
4、CSS首字放大

代碼如下:

p:first-letter {
display: block;
float: left;
margin: 5px 5px 0 0;
color: red;
font-size: 1.4em;
background: #ddd;
font-family: Helvetica;
}

定義你的首字放大很容易，用CSS的first-letter屬性就可以自動選定的博客的首字母，這樣你可以定制CSS來設(shè)計(jì)首字母的樣式了，像更大字號、斜體等等。
5、用CSS翻轉(zhuǎn)圖像

代碼如下:

#content img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

用上面的CSS屬性你可以翻轉(zhuǎn)任何圖片
6、移除被點(diǎn)鏈接的點(diǎn)框

代碼如下:

a {outline: none}
或者
a {outline: 0}

你一定注意到了，當(dāng)你在一些博客里點(diǎn)擊鏈接時(shí)，你會看到在這個(gè)鏈接上有點(diǎn)狀的邊框。你可以通過上面一小段的CSS移掉這些邊框。
7、在CSS中使用特殊字體
你可以使用CSS來加載特殊字體，你要做的就是把這個(gè)TTF格式的字體上傳到服務(wù)器上，然后使用字體規(guī)則在CSS上導(dǎo)入它。
8、元素透明

代碼如下:

element {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

使用透明屬性，你可以讓任何瀏覽器上的元素透明,這些屬性可以在所有主流器上工作，甚至IE（PS：IE6略過？...）
9、使用CSS顯示鏈接之后的URL

代碼如下:

a:after{content:" (" attr(href) ") ";}

這會在鏈接錨點(diǎn)后顯示URL。你也可以用字體或其他樣式定義它。
10、為手持設(shè)備定制特殊樣式

代碼如下:

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld">

如果你的博客不能響應(yīng)或者你想在用手機(jī)瀏覽時(shí)有特殊的樣式，你可以為你博客的手機(jī)版定制CSS。

感謝各位的閱讀！關(guān)于“使用CSS技巧有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

本文題目：使用CSS技巧有哪些
標(biāo)題鏈接：http://www.muchs.cn/article18/ghocgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、做網(wǎng)站、軟件開發(fā)、自適應(yīng)網(wǎng)站、微信小程序、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)