在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属性——（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。