CSS3属性——（一）
在CSS中追加了三個屬性選擇器：[att*=val]、[att^=val]、[att$=val]
[att*=val]屬性選擇器
如果元素用att表示的屬性的值中包含用val指定的字符，那么該元素使用這個樣式。
[att^=val]屬性選擇器
如果用att表示的屬性值的開頭字符為用val指定的字符的話，那么該元素使用這個值
[att$=val]屬性選擇器
如果元素用att表示的屬性的屬性值的結尾字符為用val指定的字符，那么該元素使用這個樣式。
?偽類選擇器以及偽元素：
1.類選擇器
在CSS中可以使用類選擇器把相同的元素定義成不同的樣式。
p.left{text-align:left}
p.rigth{text-align:right}
2.偽類選擇器
類選擇器和偽類選擇器的區別在于，類選擇器我們可以隨意起名，而偽類選擇器是CSS中已經定義好的選擇器，不可以隨意起名。
最常見的偽類選擇器
a:link{color:#ff6600}/*未被訪問的鏈接*/
a:visited{color:#ff6600}/*已被訪問的鏈接*/
a:hover{color:#ff6600}/*鼠標指針移動到鏈接上*/
a:active{color:#ff6600}/*正被點擊的鏈接*/
3.偽元素選擇器
偽元素選擇器，針對于CSS中已經定義好的偽元素使用的選擇器。
使用方法：
選擇器：偽元素{屬性：值}
與類配合使用
選擇器.類名：偽元素{屬性：值}
4.在CSS中，主要有四個偽元素選擇器
1）first-line偽元素選擇器：用于向某個元素中的第一行文字使用樣式
2）first-letter偽元素選擇器：用于向某個元素中的文字的首字母（歐美文字）或第一個字（中文或者是日文等漢字）使用樣式。
3）before偽元素選擇器：用于在某個元素之前插入一些內容
4）after偽元素選擇器：用于在某個元素后插入內容
5.結構性偽類選擇器root、not、empty和target
1）root選擇器：將樣式綁定到頁面的根元素中
2）not選擇器：想對某個結構元素使用樣式，但是想排除這個結構元素下面的子結構元素，讓它不使用這個樣式時，我們就可以使用not選擇器
3）empty選擇器：指定當元素中內容為空白時使用的樣式
4）target選擇器：對頁面中某個target元素指定樣式，該樣式只在用戶點擊了頁面中的超鏈接，并且跳轉到target元素后起作用。
6.選擇器first-child、last-child、nth-child和nth-last-child
1）first-child選擇器：單獨指定第一個子元素的樣式
2）last-child選擇器：單獨指定最后一個子元素的樣式
3）nth-child選擇器：
nth-child（n）選擇器匹配正數下來第N個子元素
nth-child（odd）選擇器匹配正數下來第奇數個子元素
nth-child（even）選擇器匹配正數下來第偶數個子元素
4）nth-last-child選擇器：
nth-child（n）選擇器匹配倒數數下來第N個子元素
nth-child（odd）選擇器匹配倒數數下來第奇數個子元素
nth-child（even）選擇器匹配倒數數下來第偶數個子元素
7.選擇器net-of-type和nth-of-type
在CSS中用來避免子元素有不同類型，用的時候只針對同類型的子元素進行計算
8.循環使用樣式
nth-child（An+B）A表示每次循環中包括幾種樣式，B表示指定的樣式在循環中所處的位置
9.only-child選擇器
只對含有唯一一個子元素的部分起作用，當有大于一個子元素的部分不能起作用
使用選擇器在頁面中插入內容：
1.使用選擇器插入內容
在CSS2中使用before選擇器在元素前面插入內容，使用after在元素后面插入內容，在選擇器content屬性中定義要插入的內容，還可以給他定義樣式，進行美化顏色背景字體樣式等。
適用方法：
<style type="text/css">
h2:before{
content:"Title（希望插入的內容）";
}
</style>
2.插入圖片文件
使用before或者after除了可以在元素前后插入文字之外還可以插入圖片。在插入圖片是需要使用URL指定的圖片路徑。
使用方法：
<style type="text/css">
h2:before{
content:url(1.gif);
}
</style>
3.插入項目編號
1）在多個標題前加上連續編號：在content屬性中使用counter屬性來對多個項目追加連續的編號。
使用方法：
元素：before{
content:counter（計數器）；
}
適用計數器來計算編號，計數器可以任意命名。
除了使用計數器，還需要在元素的樣式中追加對元素的（counter-increment）屬性的指定為content屬性值中所指定的計數器名稱。
元素{
counter-increment：content屬性值中所指定的計數器名稱
}
2）在項目編號中追加文字
h1:before{
content:"第"counter(content屬性值中所指定的計數器名稱)"章"
}
變成另一種效果！“第一章、第二章...”
3）指定編號的樣式
比如給他在編號后面帶一個“.”文字，并且設置編號的顏色為綠色，字體大小42像素。
h1:before{
content:counter（content屬性值中指定的計數器名稱）‘.’;
color:green;
font-size:42px;
}
變成另一種效果！“1./2./...”
4）指定編號的種類
before和after不僅可以追加數字編號，號可以追加字母編號或者羅馬數字編號。
content:counter（計數器名，編號種類）
可以使用list-style-type屬性的值來指定編號的種類。比如指定大寫字母編號時，使用“upper-alpha”屬性，指定大寫羅馬字母時使用“upper-roman”屬性。
h1:before{
content:counter（計數器名，編號種類）'.';
color:green;
font-size:42px;
}
5）編號嵌套、重置編號
?我們可以在大編號中嵌套中編號，在中編號中又嵌入小編號！
1）大編號中嵌入中編號
2）counter-reset屬性重置編號
6）中編號中嵌入大編號
h2:before{
content:counter（大編號的計數器）'-'counter（中編號的計數器）
}
7）在字符串兩邊嵌套文字符號
可以使用content屬性的open-quote屬性值與close-quote屬性值在字符串兩邊添加諸如單引號、雙引號之類的文字字符。
open-quote開始符號
close-quote結尾字符
quote字符類型（使用雙引號（""）的時候需要使用轉義字符“\”）
使用方法：
<style>
h1:before{
content:open-quote;
}
h1:after{
content:open-quote;
}
h1{
quote:"(" ")";
}
</style>
文字陰影與自動換行
1.text-shadow屬性的使用方法
在CSS3我們可以使用text-shadow屬性給頁面上的文字添加陰影效果。
1）text-shadow的使用方法：
text-shadow：length length length color
第一個length表示的是陰影離開文字的橫方向距離；
第二個length表示的是陰影離開文字的縱方向距離；
第三個length表示的是陰影模糊半徑；
color表示的是陰影的顏色。
2）位移距離：text- shadow所使用的參數中，前兩個參數是陰影離開文字的橫方向和縱方向的位移距離，使用的時候必須指定這兩個參數
3）陰影的模糊半徑：text-shadow屬性的第三個參數就是陰影模糊半徑，代表陰影向外模糊時的模糊范圍。
4）陰影的顏色：color可以放在三個參數之前，也可以之后。沒有指定顏色時，會使用文字color的顏色值
5）指定多個陰影：我們可以使用text-shadow屬性來給文字指定多個陰影，并且針對每個陰影使用不同的顏色。指定多個陰影的時候使用逗號將多個陰影進行分割。
2.word-break瀏覽器自動換行
指定自動換行的處理方法，在CSS3中可以使用word-break屬性來設置自動換行的處理方法。
normal：使用瀏覽器默認的規則
keep-all：智能在半角空格或者連字符處理換行
break-all：允許在單詞內換行
用法示例：
<style>
div {
word-break:keep-all
?}
</style>
3.長單詞與URL地址自動換行
在CSS3中，使用word-wrap屬性來實現長單詞和URL的自動換行
使用方法：
div {
word-wrap：break-word；
?}
word-wrap屬性的屬性值有兩個
第一個：normal??? 瀏覽器保持默認處理方式，只在半角空格或者是連字符的地方換行
第二個：break-word? 瀏覽器可以在長單詞或URL地址內部進行換行。
服務器端字體和@font-face屬性
1.在頁面上顯示服務器端的字體
在CSS3中可以使用@font-face屬性來利用服務器端字體
@font-face屬性的使用方法：
@font-face{
font-family:webFont;
src:url('font/字體名稱.otf')format("opentype");
}
font-family屬性值中使用webfont來聲明字體文件的格式，可以省略文件格式的聲明，單獨使用src屬性值。可以使用的字體文件格式：otf/ttf/eot
2.定義斜體或粗體字體
在定義字體的時候，可以把字體定義成斜體或者粗體，在使用服務器端字體的時候，需要根據斜體還是粗體，使用不同的文字。
3.顯示客戶端本地的字體
@font- face除了可以顯示服務器端的字體還可以顯示本地字體。
首先將font-family設置為本地的字體名，然后將src屬性設置為local(‘字體’)
用法示例：
@font-face{
font-family:Arial;
src:local('Arial');
}
4.屬性值的指定
1）font-family：設置文本的字體名稱
2）font-style：設置文本樣式
取值：normal不使用斜體/italic使用斜體/oblique使用傾斜體inherit從父元素繼承
3）font-variant:設置文本是否大小寫
取值：normal使用瀏覽器默認值/small-caps使用小型大寫字母/inherit從父元素繼承
4）font-weight：設置文本的粗細
取值：normal/bold/bolder/lighter
100-900從細字體到粗字體，值必須是100的倍數，其中400等于normal，700等同于bold
5）font-stretch：設置文本是否橫向拉伸變形。
取值：normal：正常文字寬度
wider：把伸展比例設置為更進一步的收縮值
narrower：把收縮比例設置為更進一步的收縮值
ultra-condensed：比正常文字寬度窄4個基數
extra-condensed：比正常文字寬度窄3個基數
condensed：比正常文字寬度窄2個基數
semi-condensed：比正常文字寬度窄1個基數
semi-expanded：比正常文字寬度寬1個基數
6）font-size：設置文本字體大小
7）src：設置自定義字體的相對路徑或者絕對路徑，注意：此屬性只能在@font-face規則里使用
?
轉載于:https://www.cnblogs.com/YamLilac-1101/p/10461570.html
總結
以上是生活随笔為你收集整理的CSS3属性——（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 光纤铜缆测试安装的基础知识你都了解了吗？
- 下一篇： 《图解CSS3：核心技术与案例实战》