前端進階系列(四):css3新特性

時間 2020-01-11

標籤前端進階系列 css3 css 特性欄目 CSS 简体版

原文原文鏈接

什麼是CSS?

層疊樣式表（CSS）是一種向Web文檔添加樣式（例如，字體，顏色，間距）的簡單機制。css

什麼是CSS3?

CSS3是CSS語言的最新發展，旨在擴展CSS2.1。它帶來了許多新功能和附加功能，如圓角，陰影，漸變，過渡或動畫，以及多列，靈活的框或網格佈局等新佈局。html

如今讓咱們看看有哪些新東西？

CSS3選擇器

選擇器是CSS的核心。最初，CSS容許按類型，類和/或ID匹配元素。CSS2.1添加了僞元素，僞類和組合子。使用CSS3，咱們可使用各類選擇器來定位頁面上的幾乎任何元素。jsp

CSS2引入了幾個屬性選擇器。這些容許基於其屬性匹配元素。 CSS3擴展了那些屬性選擇器。在CSS3中添加了三個屬性選擇器;它們容許子串選擇。函數

匹配屬性attr以值val開頭的任何元素E.換句話說，val匹配屬性值的開頭。

E[attr^=val]
eg.          a[href^='http://sales.']{color: teal;}

匹配屬性attr以val結尾的任何元素E.換句話說，val匹配屬性值的結尾。

E[attr$=val]
eg.          a[href$='.jsp']{color: purple;}

匹配屬性attr在屬性中的任何位置匹配val的任何元素E.它相似於E [attr~ = val]，在這裏val能夠是單詞也能夠是單詞的一部分。

E[attr*=val]  
eg.         img[src*='artwork']{
                    border-color: #C3B087 #FFF #FFF #C3B087;
                               }

僞類元素

您可能已經熟悉了一些用戶交互僞類，即：link，：visited，：hover，：active和：focus。佈局

在CSS3中添加了一些僞類選擇器。一個是：根選擇器，它容許設計者指向文檔的根元素。在HTML中，它將是<html>。由於：root是通用的，它容許設計者選擇XML文檔的根元素，而沒必要知道它的名稱。要在文檔中須要時容許滾動條，此規則將起做用。學習

:root{overflow:auto;}

做爲：first-child選擇器的補充，添加了：last-child。有了它，能夠選擇父元素命名的最後一個元素。測試

div.article > p:last-child{font-style: italic;}

添加了一個新的用戶交互僞類選擇器：target目標選擇器。爲了在用戶點擊同一頁面連接時將用戶的注意力吸引到一段文本，像下面第一行這樣的規則能夠很好地工做;連接看起來像第二行，突出顯示的跨度就像第三行。字體

span.notice:target{font-size: 2em; font-style: bold;}
<a href='#section2'>Section 2</a>
<p id='section2'>...</p>

已建立用於選擇未經過測試的指定元素的功能表示法。否認僞類選擇器：不能與幾乎任何已實現的其餘選擇器耦合。例如，要在沒有指定邊框的圖像周圍放置邊框，請使用這樣的規則。動畫

img:not([border]){border: 1;}

CSS3顏色

CSS3帶來了對一些描述顏色的新方法的支持。在CSS3以前，咱們幾乎老是使用十六進制格式（#FFF或#FFFFFF for white）聲明顏色。也可使用rgb（）表示法聲明顏色，提供整數（0-255）或百分比。url

顏色關鍵字列表已在CSS3顏色模塊中進行了擴展，包括147種額外的關鍵字顏色（一般獲得很好的支持），CSS3還爲咱們提供了許多其餘選項：HSL，HSLA和RGBA。這些新顏色類型最顯着的變化是可以聲明半透明顏色。

RGBA

RGBA的工做方式與RGB相似，只是它添加了第四個值：alpha，不透明度級別或alpha透明度級別。前三個值仍然表明紅色，綠色和藍色。對於alpha值，1表示徹底不透明，0表示徹底透明，0.5表示50％不透明。您可使用介於0和1之間的任意數字。

background: rgba(0,0,0,.5) //在這裏0.5的0能夠省略

HSL和HSLA

HSL表明色調，飽和度和亮度。與RGB不一樣，您須要經過一致地更改全部三個顏色值來操縱顏色的飽和度或亮度，使用HSL，您能夠調整飽和度或亮度，同時保持相同的基色調。 HSL的語法包括色調的整數值，以及飽和度和亮度的百分比值。

hsl（）聲明接受三個值：

0到359度的色調。一些例子是：0 =紅色，60 =黃色，120 =綠色，180 =青色，240 =藍色，300 =品紅色。
飽和度爲百分比，100％爲常態。 100％的飽和度將是完整的色調，飽和度0將給你一個灰色陰影。
基本上致使色調值被忽略。
飽和度爲百分比，100％爲常態。 100％的飽和度將是完整的色調，飽和度0將給你一個灰色陰影》
基本上致使色調值被忽略。
輕度的百分比，50％是常態。亮度爲100％爲白色，50％爲實際色調，0％爲黑色。

hsla()中的a也與rgba()中的函數相同

Opacity

除了使用HSLA和RGBA顏色指定透明度（以及很快，八位十六進制值）以外，CSS3還爲咱們提供了不透明度屬性。 opacity設置聲明它的元素的不透明度，相似於alpha。

咱們來看一個例子:

div.halfopaque {
    background-color: rgb(0, 0, 0);
    opacity: 0.5;
    color: #000000;
}
div.halfalpha {
    background-color: rgba(0, 0, 0, 0.5);
    color: #000000;
}

儘管alpha和不透明度符號的使用看似類似，可是當你看它時，它們的功能有一個關鍵的區別。

雖然不透明度爲元素及其全部子元素設置不透明度值，但半透明RGBA或HSLA顏色對元素的其餘CSS屬性或後代沒有影響。

圓角：邊界半徑

border-radius屬性容許您建立圓角而無需圖像或其餘標記。要在咱們的框中添加圓角，咱們只需添加便可

border-radius: 25px;

border-radius屬性其實是一種速記。對於咱們的「a」元素，角落大小相同且對稱。若是咱們想要不一樣大小的角落，咱們能夠聲明最多四個惟一值

border-radius: 5px 10px 15px 20px;

陰影

CSS3提供了使用box-shadow屬性向元素添加陰影的功能。此屬性容許您指定元素上一個或多個內部和/或外部陰影的顏色，高度，寬度，模糊和偏移。

box-shadow: 2px 5px 0 0 rgba(72,72,72,1);

文字陰影

text-shadow爲文本節點中的單個字符添加陰影。在CSS 3以前，能夠經過使用圖像或複製文本元素而後定位它來完成。

text-shadow: topOffset leftOffset blurRadius color;

線性漸變

W3C添加了使用CSS3生成線性漸變的語法。

Syntax: background: linear-gradient(direction, color-stop1, color-stop2, ...);
e.g.   #grad {
  background: linear-gradient(to right, red , yellow);
}

你甚至能夠用度數指定方向，例如在上面的例子中，60deg而不是右邊。

徑向漸變

徑向漸變是圓形或橢圓形漸變。顏色不是沿着直線前進，而是從全部方向的起點混合出來。

Syntax : background: radial-gradient(shape size at position, start-color, ..., last-color);
e.g.     #grad {
  background: radial-gradient(red, yellow, green);
}//Default       
         #grad {
  background: radial-gradient(circle, red, yellow, green);
}//Circle

背景

在CSS3中，不須要爲每一個背景圖像包含一個元素;它使咱們可以向任何元素添加多個背景圖像，甚至僞元素。

background-image:
url(firstImage.jpg),
url(secondImage.gif),
url(thirdImage.png);

這些是新實現的CSS3功能，還有其餘未實現的功能，咱們將在實施後討論它們。

望你們有所收穫，下面是個人公衆號，按期更新學習資料：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。