最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

必看的CSS小知識

來源:懂視網(wǎng) 責(zé)編:小OO 時間:2020-11-27 18:52:36
文檔

必看的CSS小知識

1.CSS的color屬性并非只能用于文本顯示。對于CSS的color屬性,相信所有Web開發(fā)人員都使用過。如果你并不是一個特別有經(jīng)。驗的程序員,我相信你未必知道color屬性除了能用在文本顯示,還可以用作其它地方。它??梢园秧撁嫔系乃械臇|西都變顏色。比如。無法顯示的圖片的alt文字、 list元素的邊框、無序list元素前面的小點、有序list元素前面的數(shù)字和hr元素等。
推薦度:
導(dǎo)讀1.CSS的color屬性并非只能用于文本顯示。對于CSS的color屬性,相信所有Web開發(fā)人員都使用過。如果你并不是一個特別有經(jīng)。驗的程序員,我相信你未必知道color屬性除了能用在文本顯示,還可以用作其它地方。它。可以把頁面上的所有的東西都變顏色。比如。無法顯示的圖片的alt文字、 list元素的邊框、無序list元素前面的小點、有序list元素前面的數(shù)字和hr元素等。
下面小編就為大家?guī)硪黄乜吹腃SS小知識。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

1.CSS的color屬性并非只能用于文本顯示

對于CSS的color屬性,相信所有Web開發(fā)人員都使用過。如果你并不是一個特別有經(jīng)

驗的程序員,我相信你未必知道color屬性除了能用在文本顯示,還可以用作其它地方。它

可以把頁面上的所有的東西都變顏色。比如:

無法顯示的圖片的alt文字、 list元素的邊框、無序list元素前面的小點、有序list元素前面的數(shù)字和hr元素等

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<style type="text/css">

#p1 

{ 

 width: 375px; 

 height: 265px; 

 border: 1px solid blue; 

} 

</style>

 </head>

 <body>

 <p id="p1">

<img src="test.jpg" alt="圖片加載失敗" style="color:blue">

<ol style="color:red;">

<li style="border: 1px solid">一</li>

<li>二</li>

<li>三</li>

</ol>

<hr style="color:red" />

 </p>

 </body>

 </html>

有圖為證:

必看的CSS小知識

2.CSS里的visibility屬性有個collapse屬性值:collapse

對于CSS里的visibility屬性,相信你用過不下幾百次。大多時候,你會把它的值設(shè)置

成visible(這是所有頁面元素的缺省值),或者是hidden。后者相當(dāng)于display: none,但仍

然占用頁面空間。其實visibility可以有第三種值,就是collapse。

必看的CSS小知識

3.CSS的background簡寫方式里新增了新的屬性值

在CSS2.1里,background屬性的簡寫方式包含五種屬性值 – background-color, background-

image,background-repeat, background-attachment, and background-position。從CSS3開始,又增加了3個新的屬性值,加起來一共8個。下面是按順序分別代表的意思:

background: [background-color] [background-image] [background-repeat] [background-attachment]

[background-position] / [ background-size] [background-origin] [background-clip];注意里面的反斜杠,它

更font和border-radius里簡寫方式使用的反斜杠的用法相似。反斜杠可以在支持這種寫法的瀏覽器里在

position后面接著寫background-size。除此之外,你開可以增加另外兩個描述它的屬性值: background-

origin 和 background-clip.它的語法用起來像下面這個樣子:

.example { 

background: aquamarine url(img.png) 

no-repeat

scroll

center center / 50% 

content-box content-box; 

}

4.CSS的clip屬性只在絕對定位的元素上才會生效

在style中加入

img 

 { 

 width: 200px; 

 height: 200px; 

 clip: rect(0px 50px 200px 0px) 

 }

在HTML中

1: <img src="bei.jpg" alt="圖片加載失敗" >

發(fā)現(xiàn)并沒有裁剪

必看的CSS小知識

對img進(jìn)行絕對定位

 img 

 { 

width: 200px; 

height: 200px; 

position: absolute; 

clip: rect(0px 50px 200px 0px) 

 }

clip有效:

必看的CSS小知識

5.元素豎向的百分比設(shè)定是相對于容器的寬度,而不是高度

當(dāng) 按百分比設(shè)定一個元素的寬度時,它是相對于父容器的寬度計算的,但是,對于一些表示豎向距離的屬性,例如padding-top,padding- bottom,margin-top,margin-bottom等,當(dāng)按百分比設(shè)定它們時,依據(jù)的也是父容器的寬度,而不是高度。給圖片增加一個 padding-top:

 1: padding-top: 10%;

根據(jù)效果和估算的距離即可證明是根據(jù)寬度來算的

必看的CSS小知識

6.border-width屬性可以使用預(yù)定義常量值

除了可以使用標(biāo)準(zhǔn)寬度值(例如5px或1em)外,border-width屬性可以接受預(yù)定義的常量值:medium, thin, 和 thick事實上,如果你不給border-width屬性賦值,那它的缺省值是“medium”。

必看的CSS小知識

7、你知道table里的empty-cells屬性嗎?

css里的empty-cells屬性是所有瀏覽器都支持的,甚至包括IE8,它的用法是下面這個樣子:

 1: table { empty-cells: hide;}

估計你從語義上已經(jīng)猜出它的作用了。它是為HTML table服務(wù)的。它會告訴瀏覽器,當(dāng)一個table單元格里沒有東西時,就隱藏它。

必看的CSS小知識

但是,empty-cells僅用于“分離邊框”模式,即:border-collapse:separate;

8、font-style的oblique屬性值

對與css的font-style屬性,我估計大家每次見到的都是使用“normal”或 “italic”兩個屬性值。但事實上,你還可以讓它賦值為“oblique”。

9、word-wrap和overflow-wrap是等效的

word-wrap并不是一個很常用的CSS屬性,但在特定的環(huán)境中確實非常有用的。我們經(jīng)常使用的一個例子是讓頁面中顯示一個長url時換行,而不是撐破頁面。在原本的p中添加一個子p,設(shè)置word-wrap屬性

<p style="width:250px;height:250px;border:1px solid red;word-wrap:break-word"> 

My father was a self-taught mandolin player. 

 He was one of the best string instrument players in our town. 

 He could not read music, but if he heard a tune a few times, 

 he could play it. When he was younger, 

 </p>

效果

必看的CSS小知識

沒有對長單詞進(jìn)行裁剪,而是將長單詞作為整體另起一行顯示。將word-wrap替換為overflow-wrap,效果一樣。

但是,需要注意的是word-break屬性,其會對長單詞進(jìn)行裁剪

<p style="width:250px;height:250px;border:1px solid red;word-break:break-all"> 

My father was a self-taught mandolin player. 

 He was one of the best string instrument players in our town. 

 He could not read music, but if he heard a tune a few times, 

 he could play it. When he was younger, 

 </p>

效果

必看的CSS小知識

附:word-wrap取值:

必看的CSS小知識

word-break取值:

必看的CSS小知識

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

必看的CSS小知識

1.CSS的color屬性并非只能用于文本顯示。對于CSS的color屬性,相信所有Web開發(fā)人員都使用過。如果你并不是一個特別有經(jīng)。驗的程序員,我相信你未必知道color屬性除了能用在文本顯示,還可以用作其它地方。它。可以把頁面上的所有的東西都變顏色。比如。無法顯示的圖片的alt文字、 list元素的邊框、無序list元素前面的小點、有序list元素前面的數(shù)字和hr元素等。
推薦度:
標(biāo)簽: 知識 看的 的小
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top