ife2018 零基礎學院 day 4

時間 2019-11-24

標籤 ife2018 ife 零基礎學院 day 简体版

原文原文鏈接

第四天，背景邊框列表連接和更復雜的選擇器

背景，邊框，列表，連接相關屬性

背景

元素的背景是指，在元素內容、內邊距和邊界下層的區域。html

屬性	描述
background-color	爲背景設置一個純色。
background-image	把圖像設置爲背景。線性漸變是經過linear-gradient()函數傳入的，它是一個background-image屬性的值。
background-position	指定背景應該出如今元素背景中的位置。
background-repeat	指定背景是否應該被重複(平鋪)。
background-attachment	當內容滾動時，指定元素背景的行爲
background	在一行中指定以上五個屬性的縮寫。簡寫屬性，做用是將背景屬性設置在一個聲明中。
background-size	容許動態調整背景圖像的大小。

邊框

W3School 邊框
 MDN 邊框編程

元素外邊距內就是元素的的邊框 (border)。元素的邊框就是圍繞元素內容和內邊據的一條或多條線。
每一個邊框有 3 個方面：寬度（border-width）、樣式（border-style），以及顏色（border-color）。瀏覽器

列表

W3SChool 列表
 MDN 列表函數

列表有三種：無序列表、有序列表、描述列表ssr

能夠在 <ul> 或 <ol> 元素上設置的三個屬性：代理

list-style-type ：設置用於列表的項目符號的類型，例如無序列表的方形或圓形項目符號，或有序列表的數字，字母或羅馬數字。
list-style-position ：設置在每一個項目開始以前，項目符號是出如今列表項內，仍是出如今其外。
list-style-image ：容許您爲項目符號使用自定義圖片，而不是簡單的方形或圓形。

連接

W3School 連接
 MDN 連接指針

連接存在時處於不一樣的狀態，每個狀態均可以用對應的僞類來應用樣式:code

a:link - 普通的、未被訪問的連接

a:visited - 用戶已訪問的連接

a:hover - 鼠標指針位於連接的上方

a:active - 連接被點擊的時刻

a:focus - 連接被選中。一個連接當它被選中的時候 (好比經過鍵盤的 Tab 移動到這個連接的時候，或者使用編程的方法來選中這個連接 HTMLElement.focus()) 它可使用 :focus 僞類來應用樣式。

CSS 各類選擇器的概念，使用方法及使用場景

MDN 選擇器
 W3C 選擇器htm

簡單選擇器（Simple selectors）

經過元素類型、class 或 id 匹配一個或多個元素。

類型選擇器（又名元素選擇器）

在 W3C 標準中，元素選擇器又稱爲類型選擇器（type selector）。
此選擇器只是一個選擇器名和指定的HTML元素名的不區分大小寫的匹配。這是選擇全部指定類型的最簡單方式。

針對某個HTML元素設置樣式

html {color:black;} 
h1 {color:blue;}

類選擇器

類選擇器由一個點「.」以及類後面的類名組成。類名是在HTML class文檔元素屬性中沒有空格的任何值。由你本身選擇一個名字。一樣值得一提的是，文檔中的多個元素能夠具備相同的類名，而單個元素能夠有多個類名(以空格分開多個類名的形式書寫)。

.類型名A{}，對類型名爲A的元素設置樣式，一個HTML文檔中能夠匹配多個元素

ID選擇器

ID選擇器由哈希/磅符號 (#)組成，後面是給定元素的ID名稱。任何元素均可以使用id屬性設置惟一的ID名稱。由你本身選擇的ID是什麼。這是選擇單個元素的最有效的方式。

#ID名A{}，對ID名爲A的元素設置樣式，一個HTML文檔中只能匹配一個元素

屬性選擇器（Attribute selectors）

經過屬性 / 屬性值匹配一個或多個元素。

CSS 2 引入了屬性選擇器。

[attr]：該選擇器選擇包含 attr 屬性的全部元素，不論 attr 的值爲什麼。

[attr=val]：該選擇器僅選擇 attr 屬性被賦值爲 val 的全部元素。

[attr~=val]：該選擇器僅選擇 attr 屬性的值（以空格間隔出多個值）中有包含 val 值的全部元素，好比位於被空格分隔的多個類（class）中的一個類。

把包含標題（title）的全部元素變爲紅色，能夠寫做：

*[title] {color:red;}

僞類（Pseudo-classes）

僞類和僞元素
概念：

匹配處於肯定狀態的一個或多個元素，好比被鼠標指針懸停的元素，或當前被選中或未選中的複選框，或元素是DOM樹中一父節點的第一個子節點。

使用方法：

一個 CSS 僞類（pseudo-class）是一個以冒號(:)做爲前綴的關鍵字，當你但願樣式在特定狀態下才被呈現到指定的元素時，你能夠往元素的選擇器後面加上對應的僞類（pseudo-class）。

僞元素（Pseudo-elements）

概念：

匹配處於相關的肯定位置的一個或多個元素，例如每一個段落的第一個字，或者某個元素以前生成的內容。

使用方法：

僞元素（Pseudo-element）跟僞類很像，但它們又有不一樣的地方。它們都是關鍵字 —— 但此次僞元素前綴是兩個冒號 (::) —— 一樣是添加到選擇器後面達到指定某個元素的某個部分。

組合器（Combinators）

這裏不只僅是選擇器自己，還有以有效的方式組合兩個或更多的選擇器用於很是特定的選擇的方法。例如，你能夠只選擇divs的直系子節點的段落，或者直接跟在headings後面的段落。

Combinators	Select
A B	匹配任意元素，知足條件：B是A的後代結點（B是A的子節點，或者A的子節點的子節點）
A > B	匹配任意元素，知足條件：B是A的直接子節點
A + B	匹配任意元素，知足條件：B是A的下一個兄弟節點（AB有相同的父結點，而且B緊跟在A的後面）
A ~ B	匹配任意元素，知足條件：B是A以後的兄弟節點中的任意一個（AB有相同的父節點，B在A以後，但不必定是緊挨着A）

多用選擇器（Multiple selectors）

這些也不是單獨的選擇器；這個思路是將以逗號分隔開的多個選擇器放在一個CSS規則下面，以將一組聲明應用於由這些選擇器選擇的全部元素。

Combinators	Select
A,B	匹配知足A（和/或）B的任意元素

CSS 選擇器的優先級

選擇器的優先級

CSS 是 Cascading Style Sheets 的縮寫，這暗示層疊（cascade）的概念是很重要的。在最基本的層面上，它代表CSS規則的順序很重要，但它比那更復雜。什麼選擇器在層疊中勝出取決於三個因素（這些都是按重量級順序排列的——前面的的一種會否決後一種）：

重要性（Importance）

在CSS中，有一個特別的語法可讓一條規則老是優先於其餘規則：!important。

相互衝突的聲明將按如下順序適用，後一種將覆蓋先前的聲明：

在用戶代理樣式表的聲明 (例如：瀏覽器在沒有其餘聲明的默認樣式).
用戶樣式表中的普通聲明（由用戶設置的自定義樣式）。
做者樣式表中的普通聲明（這是咱們設置的樣式，Web開發人員）。
做者樣式表中的重要聲明
用戶樣式表中的重要聲明

專用性（Specificity）
一個選擇器具備的專用性的量是用四種不一樣的值（或組件）來衡量的，它們能夠被認爲是千位，百位，十位和個位——在四個列中的四個簡單數字：
千位：若是聲明是在style 屬性中該列加1分（這樣的聲明沒有選擇器，因此它們的專用性老是1000。）不然爲0。
百位：在整個選擇器中每包含一個ID選擇器就在該列中加1分。
十位：在整個選擇器中每包含一個類選擇器、屬性選擇器、或者僞類就在該列中加1分。
個位：在整個選擇器中每包含一個元素選擇器或僞元素就在該列中加1分。

源代碼次序（Source order）

若是多個相互競爭的選擇器具備相同的重要性和專用性，那麼第三個因素將幫助決定哪個規則獲勝——後面的規則將打敗先前的規則。