CSS3學習筆記一

時間 2019-11-13

標籤 css3 css 學習筆記欄目 CSS 简体版

原文原文鏈接

選擇器：html

:root選擇器，從字面上咱們就能夠很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。瀏覽器

:not選擇器稱爲否認選擇器，和jQuery中的:not選擇器如出一轍，能夠選擇除某個元素以外的全部元素。字體

:empty選擇器表示的就是空。用來選擇沒有任何內容的元素，這裏沒有內容指的是一點內容都沒有，哪怕是一個空格。url

:target選擇器稱爲目標選擇器，用來匹配文檔(頁面)的url的某個標誌符的目標元素。spa

「:first-child」選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是後代元素。code

「:last-child」選擇器與「:first-child」選擇器做用相似，不一樣的是「:last-child」選擇器選擇的是元素的最後一個子元素。orm

「:nth-child(n)」選擇器用來定位某個父元素的一個或多個特定的子元素。其中「n」是其參數，並且能夠是整數值(1,2,3,4)，也能夠是表達式(2n+一、-n+5)和關鍵詞(odd、even)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值爲0時，選擇器將選擇不到任何匹配的元素。htm

「:nth-last-child(n)」選擇器和前面的「:nth-child(n)」選擇器很是的類似，只是這裏多了一個「last」，所起的做用和「:nth-child(n)」選擇器有所區別，從某父元素的最後一個子元素開始計算，來選擇特定的元素。對象

「:first-of-type」選擇器相似於「:first-child」選擇器，不一樣之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素。圖片

「:nth-of-type(n)」選擇器和「:nth-child(n)」選擇器很是相似，不一樣的是它只計算父元素中指定的某種類型的子元素。當某個元素中的子元素不僅僅是同一種類型的子元素時，使用「:nth-of-type(n)」選擇器來定位於父元素中某種類型的子元素是很是方便和有用的。在「:nth-of-type(n)」選擇器中的「n」和「:nth-child(n)」選擇器中的「n」參數也同樣，能夠是具體的整數，也能夠是表達式，還能夠是關鍵詞。

「:last-of-type」選擇器和「:first-of-type」選擇器功能是同樣的，不一樣的是他選擇是父元素下的某個類型的最後一個子元素。

「:nth-last-of-type(n)」選擇器和「:nth-of-type(n)」選擇器是同樣的，選擇父元素中指定的某種子元素類型，但它的起始方向是從最後一個子元素開始，並且它的使用方法相似於上節中介紹的「:nth-last-child(n)」選擇器同樣。

「:only-child」選擇器選擇的是父元素中只有一個子元素，並且只有惟一的一個子元素。也就是說，匹配的元素的父元素中僅有一個子元素，並且是一個惟一的子元素。

「:only-of-type」選擇器用來選擇一個元素是它的父元素的惟一一個相同類型的子元素。這樣說或許不太好理解，換一種說法。「:only-of-type」是表示一個元素他有不少個子元素，而其中只有一種類型的子元素是惟一的，使用「:only-of-type」選擇器就能夠選中這個元素中的惟一一個類型子元素。

在Web的表單中，有些表單元素有可用（「:enabled」）和不可用（「:disabled」）狀態，好比輸入框，密碼框，複選框等。在默認狀況之下，這些表單元素都處在可用狀態。那麼咱們能夠經過僞選擇器「:enabled」對這些表單元素設置樣式。

在表單元素中，單選按鈕和複選按鈕都具備選中和未選中狀態。（你們都知道，要覆寫這兩個按鈕默認樣式比較困難）。在CSS3中，咱們能夠經過狀態選擇器「:checked」配合其餘標籤實現自定義樣式。而「:checked」表示的是選中狀態。

「::selection」僞元素是用來匹配突出顯示的文本(用鼠標選擇文本時的文本)。瀏覽器默認狀況下，用鼠標選擇網頁文本是以「深藍的背景，白色的字體」顯示的

「:read-only」僞類選擇器用來指定處於只讀狀態元素的樣式。簡單點理解就是，元素中設置了「readonly=’readonly’」

「:read-write」選擇器恰好與「:read-only」選擇器相反，主要用來指定當元素處於非只讀狀態時的樣式。

::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個常和"content"配合使用，使用的場景最多的就是清除浮動。

圓角效果 :

border-radius 20px； border-radius 20px 20px 20px 20px；

支持一個值或多個值。當爲1個值時，則表示四個角的圓角，若爲四個值，則分別是左上角，右上角，右下角，左下角。順時針

陰影效果：

box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];

參數：

注意：inset 能夠寫在參數的第一個或最後一個，其它位置是無效的。若是添加多個陰影，只需用逗號隔開便可。

邊框應用背景圖片

顏色之RGBA

color：rgba(R,G,B,A)

RGB是一種色彩標準，是由紅(R)、綠(G)、藍(B)的變化以及相互疊加來獲得各式各樣的顏色。RGBA是在RGB的基礎上增長了控制alpha透明度的參數。以上R、G、B三個參數，正整數值的取值範圍爲：0 - 255。百分數值的取值範圍爲：0.0% - 100.0%。超出範圍的數值將被截至其最接近的取值極限。並不是全部瀏覽器都支持使用百分數值。A爲透明度參數，取值在0~1之間，不可爲負值。

漸變色彩

參數：

第一個參數:指定漸變方向，能夠用「角度」的關鍵詞或「英文」來表示

第一個參數省略時，默認爲「180deg」，等同於「to bottom」。

第二個和第三個參數，表示顏色的起始點和結束點，能夠有多個顏色值。

例如：
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

text-overflow 與word-wrap

text-overflow用來設置是否使用一個省略標記（...）標示對象內文本的溢出。

語法：

可是text-overflow只是用來講明文字溢出時用什麼方式顯示，要實現溢出時產生省略號的效果，還須定義強制文本在一行內顯示（white-space:nowrap）及溢出內容爲隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果，代碼以下：

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap;

同時，word-wrap也能夠用來設置文本行爲，當前行超過指定容器的邊界時是否斷開轉行。

語法：

normal爲瀏覽器默認值，break-word設置在長單詞或 URL地址內部進行換行，此屬性不經常使用，用瀏覽器默認值便可。

文本陰影

text-shadow: X-Offset Y-Offset blur color;

X-Offset：表示陰影的水平偏移距離，其值爲正值時陰影向右偏移，反之向左偏移；

Y-Offset：是指陰影的垂直偏移距離，若是其值是正值時，陰影向下偏移，反之向上偏移；

Blur：是指陰影的模糊程度，其值不能是負值，若是值越大，陰影越模糊，反之陰影越清晰，若是不須要陰影模糊能夠將Blur值設置爲0；

Color：是指陰影的顏色，其可使用rgba色。

background-origin

設置元素背景圖片的原始起始位置。

語法：

background-origin ： border-box | padding-box | content-box;

參數分別表示背景圖片是從邊框，仍是內邊距（默認值），或者是內容區域開始顯示。

須要注意的是，若是背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。

background-clip

用來將背景圖片作適當的裁剪以適應實際須要。

語法：

background-clip ： border-box | padding-box | content-box | no-clip

參數分別表示從邊框、或內填充，或者內容區域向外裁剪背景。no-clip表示不裁切，和參數border-box顯示一樣的效果。backgroud-clip默認值爲border-box。

background-size

設置背景圖片的大小，以長度值或百分比顯示，還能夠經過cover和contain來對圖片進行伸縮。

語法：

background-size: auto | <長度值> | <百分比> | cover | contain

取值說明：

一、auto：默認值，不改變背景圖片的原始高度和寬度；

二、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設置爲前面兩個值，當設置一個值時，將其做爲圖片寬度值來等比縮放；

三、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置爲所在元素寬高乘之前面百分比得出的數值，當設置一個值時同上；

四、cover：顧名思義爲覆蓋，即將背景圖片等比縮放以填滿整個容器；

五、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣爲止。

相關標籤/搜索

每日一句

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