本篇內(nèi)容主要講解“有哪些CSS/CSS3常用樣式”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“有哪些CSS/CSS3常用樣式”吧!
10年積累的網(wǎng)站制作、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程，更有綏陽免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
1.強(qiáng)制文本單行顯示：white-space:nowrap;
2.設(shè)置溢出文本顯示為省略標(biāo)記：text-overflow:ellipsis;
(注：text-overflow:clip | ellipsis | ellipsis-word;（css3新增加的）
其中clip表示直接裁切溢出的文本；
值ellipsis表示文本溢出時(shí)，顯示省略標(biāo)記(...)，省略標(biāo)記代替最后一個(gè)字符；
值ellipsis-word表示文本溢出時(shí)，也是顯示省略標(biāo)記(...),不同的是，省略標(biāo)記代替的是最后一個(gè)詞)
3.例如一段代碼：
當(dāng)點(diǎn)擊a標(biāo)簽里面的圖片的時(shí)候，有虛線框，IE中圖片還有邊框，如何解決？
解決辦法：
a{outline:none;}//主要是針對火狐等瀏覽器，但I(xiàn)E不行
img{border:0;}
a:active{noOutline:expression(this.onFocus=this.blur());}//解決IE6，IE7中的虛線框。
對于a標(biāo)簽來說，一般簡單的解決辦法是：
在a標(biāo)簽里加入js控制，當(dāng)a標(biāo)簽被聚焦時(shí)，強(qiáng)制取消焦點(diǎn)，這時(shí)候a標(biāo)簽自然不會有虛線框。
測試
但是當(dāng)連接太多的時(shí)候，一個(gè)一個(gè)的加這段代碼不實(shí)用
4.html中兩張圖橫向回車導(dǎo)致間隙,怎么才能去除成為無間隙？
例如：div 寬300px ; img 寬100px; border:0px;
代碼如下:
這種情況就無法在橫向顯示三張圖，因?yàn)榛剀噷?dǎo)致兩圖間有間隙。
解決辦法就是讓圖片浮動(dòng)。
5.css ie6、ie7中overflow:hidden無效解決辦法
產(chǎn)生原因：
當(dāng)父元素的直接子元素或者下級子元素的樣式擁有position:relative 屬性時(shí)，父元素的overflow:hidden 屬性就會失效。
解決辦法：
我們在IE 6、7 內(nèi)發(fā)現(xiàn)子元素會超出父元素設(shè)定的高度，即使父元素設(shè)置了overflow:hidden。
解決這個(gè)bug很簡單，在父元素中使用 *position:relative; 即可解決該bug
6.表格語法
代碼如下:
7.CSS text-transform
text-transform 屬性控制文本的大小寫。
可能的值
值 描述
none 默認(rèn)。定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本。
capitalize 文本中的每個(gè)單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母，僅有小寫字母。
inherit 規(guī)定應(yīng)該從父元素繼承 text-transform 屬性的值。
8. letter-spacing
letter-spacing 屬性增加或減少字符間的空白（字符間距）。
例如： letter-spacing: 2px;
9.textarea去掉右側(cè)滾動(dòng)條，去掉右下角拖拽
代碼：
10.css中透明度兼容代碼：filter: alpha(opacity=80);opacity:0.8;
11.根據(jù)input的type來控制css樣式
a. 用css中的type選擇器
input[type="text"] { background-color:#FFC; }
b.用css的expression判斷表達(dá)式
input{ background-color:expression(this.type=="text"?'#FFC':''); }
c.用javascript腳本實(shí)現(xiàn)(覺得沒必要，省略...)
12：text-stroke
[ text-stroke-width ]：設(shè)置或檢索對象中的文字的描邊厚度 [ text-stroke-color ]：設(shè)置或檢索對象中的文字的描邊顏色
13：text-stroke
text-stroke(文本描邊)和text-fill-color(文本填充色)注意點(diǎn)：
目前這兩個(gè)屬性只有webkit內(nèi)核的Safari和Chrome支持，例如： -webkit-text-stroke: 3.3px #2A75BF;
text-fill-color：顏色值，和color屬性差不多都是文字的樣式；
同時(shí)使用text-fill-color和color屬性，text-fill-color將覆蓋color屬性的顏色值；
text-fill-color可以使用透明值，即：text-fill-color：transparent
14：text-shadow
text-shadow:0px 0px 0px #333333;
屬性值依次：水平方向位移（支持負(fù)值）、垂直方向位移（支持負(fù)值）、模糊半徑、陰影顏色
text-shadow對同一個(gè)text，可設(shè)置多個(gè)陰影，與box-shadow類似，使用逗號","分割，前一個(gè)設(shè)置效果在后一個(gè)設(shè)置效果之上。
15.設(shè)置字體
代碼如下:
16. css強(qiáng)制性換行
代碼如下:
{
word-break:break-all; /支持IE，chrome，F(xiàn)F不支持/
word-wrap:break-word;/支持IE，chrome，F(xiàn)F/
}
17.CSS :first-child 選擇器,:last-child選擇器,:nth-child(IE7,8無效，不識別)
:nth-child(2)選取第幾個(gè)標(biāo)簽，“2可以是你想要的數(shù)字”
:nth-child(2n)選取偶數(shù)標(biāo)簽，2n也可以是even
:nth-child(2n-1)選取奇數(shù)標(biāo)簽，2n-1可以是odd
:nth-child(3n+1)自定義選取標(biāo)簽，3n+1表示“隔二取一”
18. css3實(shí)現(xiàn)背景顏色漸變
代碼如下:
background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);
第一個(gè)參數(shù)：設(shè)置漸變的起始位置
第二個(gè)參數(shù)：設(shè)置起始位置的顏色
第三個(gè)參數(shù)：設(shè)置終止位置的顏色
IE 瀏覽器
IE瀏覽器實(shí)現(xiàn)漸變只能使用IE自己的濾鏡去實(shí)現(xiàn)
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);
第一個(gè)參數(shù)：漸變起始位置的顏色
第二個(gè)參數(shù)：漸變終止位置的顏色
第三個(gè)參數(shù)：漸變的類型
0 代表豎向漸變 1 代表橫向漸變
19 IE8不識別rgba寫法
20 css3的RGB顏色和HSL顏色
其中RGB顏色的原理是通過定義不同的紅綠藍(lán)色值來組成一個(gè)顏色。color:rgb(254,2,8);
其中HSL是通過色相、飽和度、亮度模式來申明顏色的。color:hsl(359,99%,40%);
如果需要設(shè)置透明背景 則可以用到他們：
background-color:hsla(0,0%,100%,0.8);
background-color:rgba(255,255,255,0.8);
不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不會。
20.初始化em，u的斜體
em,u{font-style: normal;}
到此，相信大家對“有哪些CSS/CSS3常用樣式”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
重慶分公司
重慶分公司
