ife2018 零基礎學院 day 4

shinezejian 發布于2019-04-23 13:44 / 1235人閱讀

摘要：類型選擇器又名元素選擇器類型選擇器又名元素選擇器在標準中，元素選擇器又稱為類型選擇器。個位在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加分。

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

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

背景

MDN 背景
W3School 背景

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

屬性	描述
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 列表

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

可以在

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

鏈接

W3School 鏈接
MDN 鏈接

鏈接存在時處于不同的狀態，每一個狀態都可以用對應的偽類來應用樣式:

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

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

a:hover - 鼠標指針位于鏈接的上方

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

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

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

MDN 選擇器
W3C 選擇器

簡單選擇器（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）

如果多個相互競爭的選擇器具有相同的重要性和專用性，那么第三個因素將幫助決定哪一個規則獲勝——后面的規則將戰勝先前的規則。

云服務器 GPU云服務器零基礎零基礎爬蟲前端零基礎零基礎前端

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2276.html

ife 零基礎學院 day 2

摘要：的一些規則新特性應該基于以及。將支持某些特性。作用聲明幫助瀏覽器正確地顯示網頁。標簽位于文檔的頭部，不包含任何內容。標簽的屬性定義了與文檔相關聯的名稱值對。每個列表項始于標簽。第二天：給自己做一個在線簡歷吧最后的驗證，提出了幾個問題，嘗試解答一下 HTML是什么，HTML5是什么 HTML的定義摘抄自w3school的HTML 簡介 HTML 是用來描述網頁的一種語言。 HTML 指...

qpal 2019-04-23 13:46 評論0 收藏0
百度IFE2018任務--17-18天

摘要：本文章用于記錄百度前端技術學院的任務難點。十進制轉二進制。第二步將這個數字轉換成字符串，分割成數組，每一項都是數字的某一位上的數，再用判斷這個數組是否包含為的元素即可，是則打印。代碼判斷一個數組是否包含一個指定的值，如果存在返回，否則返回本文章用于記錄百度前端技術學院的任務難點。十進制轉二進制。核心思路：在while循環中，將十進制數字除以2，同時將除以2的余數一次次記錄下來，而每...

binta 2019-08-26 10:14 評論0 收藏0
百度前端技術學院2017學習總結

摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。一、前言百度的前端技術學院IFE，2016年就聽說了，當時自己也報名，還組成隊伍了，不過自己一個任務也沒完成就結束了，遺憾... 關注了IFE，知道2017年2月有新的一期培訓，于是一直在等著報名，然后開始做里面發布的任務（...

pkwenda 2019-08-29 12:35 評論0 收藏0
百度前端技術學院2017學習總結

摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。一、前言百度的前端技術學院IFE，2016年就聽說了，當時自己也報名，還組成隊伍了，不過自己一個任務也沒完成就結束了，遺憾... 關注了IFE，知道2017年2月有新的一期培訓，于是一直在等著報名，然后開始做里面發布的任務（...

ky0ncheng 2019-08-20 16:28 評論0 收藏0
百度前端技術學院2017學習總結

摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。一、前言百度的前端技術學院IFE，2016年就聽說了，當時自己也報名，還組成隊伍了，不過自己一個任務也沒完成就結束了，遺憾... 關注了IFE，知道2017年2月有新的一期培訓，于是一直在等著報名，然后開始做里面發布的任務（...

Jingbin_ 2019-08-01 16:49 評論0 收藏0