成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ife2018 零基礎(chǔ)學(xué)院 day 4

shinezejian / 1240人閱讀

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

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

背景，邊框，列表，鏈接相關(guān)屬性

背景

MDN 背景
W3School 背景

元素的背景是指，在元素內(nèi)容、內(nèi)邊距和邊界下層的區(qū)域。

屬性 描述
background-color 為背景設(shè)置一個純色。
background-image 把圖像設(shè)置為背景。線性漸變是通過linear-gradient()函數(shù)傳入的，它是一個background-image屬性的值。
background-position 指定背景應(yīng)該出現(xiàn)在元素背景中的位置。
background-repeat 指定背景是否應(yīng)該被重復(fù)(平鋪)。
background-attachment 當(dāng)內(nèi)容滾動時，指定元素背景的行為
background 在一行中指定以上五個屬性的縮寫。 簡寫屬性，作用是將背景屬性設(shè)置在一個聲明中。
background-size 允許動態(tài)調(diào)整背景圖像的大小。

邊框

W3School 邊框
MDN 邊框

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

列表

W3SChool 列表
MDN 列表

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

可以在

    或
      元素上設(shè)置的三個屬性：

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

      鏈接

      W3School 鏈接
      MDN 鏈接

      鏈接存在時處于不同的狀態(tài)，每一個狀態(tài)都可以用對應(yīng)的 偽類 來應(yīng)用樣式:

      • a:link - 普通的、未被訪問的鏈接
      • a:visited - 用戶已訪問的鏈接
      • a:hover - 鼠標指針位于鏈接的上方
      • a:active - 鏈接被點擊的時刻
      • a:focus - 鏈接被選中。一個鏈接當(dāng)它被選中的時候 (比如通過鍵盤的 Tab 移動到這個鏈接的時候，或者使用編程的方法來選中這個鏈接 HTMLElement.focus()) 它可以使用 :focus 偽類來應(yīng)用樣式。

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

      MDN 選擇器
      W3C 選擇器

      簡單選擇器（Simple selectors）

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

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

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

      針對某個HTML元素設(shè)置樣式

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

      類選擇器

      類選擇器由一個點“.”以及類后面的類名組成。類名是在HTML class文檔元素屬性中沒有空格的任何值。由你自己選擇一個名字。同樣值得一提的是，文檔中的多個元素可以具有相同的類名，而單個元素可以有多個類名(以空格分開多個類名的形式書寫)。

      .類型名A{}，對類型名為A的元素設(shè)置樣式，一個HTML文檔中可以匹配多個元素

      ID選擇器

      ID選擇器由哈希/磅符號 (#)組成，后面是給定元素的ID名稱。 任何元素都可以使用id屬性設(shè)置唯一的ID名稱。 由你自己選擇的ID是什么。 這是選擇單個元素的最有效的方式。

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

      屬性選擇器（Attribute selectors）

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

      CSS 2 引入了屬性選擇器。

      • [attr]：該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。
      • [attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。
      • [attr~=val]：該選擇器僅選擇 attr 屬性的值（以空格間隔出多個值）中有包含 val 值的所有元素，比如位于被空格分隔的多個類（class）中的一個類。

      把包含標題（title）的所有元素變?yōu)榧t色，可以寫作：

      *[title] {color:red;}

      偽類（Pseudo-classes）

      偽類和偽元素
      概念：

      匹配處于確定狀態(tài)的一個或多個元素，比如被鼠標指針懸停的元素，或當(dāng)前被選中或未選中的復(fù)選框，或元素是DOM樹中一父節(jié)點的第一個子節(jié)點。

      使用方法：

      一個 CSS 偽類（pseudo-class） 是一個以冒號(:)作為前綴的關(guān)鍵字，當(dāng)你希望樣式在特定狀態(tài)下才被呈現(xiàn)到指定的元素時，你可以往元素的選擇器后面加上對應(yīng)的偽類（pseudo-class）。

      偽元素（Pseudo-elements）

      概念：

      匹配處于相關(guān)的確定位置的一個或多個元素，例如每個段落的第一個字，或者某個元素之前生成的內(nèi)容。

      使用方法：

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

      組合器（Combinators）

      這里不僅僅是選擇器本身，還有以有效的方式組合兩個或更多的選擇器用于非常特定的選擇的方法。例如，你可以只選擇divs的直系子節(jié)點的段落，或者直接跟在headings后面的段落。

      Combinators Select
      A B 匹配任意元素，滿足條件：B是A的后代結(jié)點（B是A的子節(jié)點，或者A的子節(jié)點的子節(jié)點）
      A > B 匹配任意元素，滿足條件：B是A的直接子節(jié)點
      A + B 匹配任意元素，滿足條件：B是A的下一個兄弟節(jié)點（AB有相同的父結(jié)點，并且B緊跟在A的后面）
      A ~ B 匹配任意元素，滿足條件：B是A之后的兄弟節(jié)點中的任意一個（AB有相同的父節(jié)點，B在A之后，但不一定是緊挨著A）

      多用選擇器（Multiple selectors）

      這些也不是多帶帶的選擇器；這個思路是將以逗號分隔開的多個選擇器放在一個CSS規(guī)則下面， 以將一組聲明應(yīng)用于由這些選擇器選擇的所有元素。

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

      CSS 選擇器的優(yōu)先級

      選擇器的優(yōu)先級

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

      重要性（Importance）

      在CSS中，有一個特別的語法可以讓一條規(guī)則總是優(yōu)先于其他規(guī)則：!important。

      相互沖突的聲明將按以下順序適用，后一種將覆蓋先前的聲明：

      1. 在用戶代理樣式表的聲明 (例如：瀏覽器在沒有其他聲明的默認樣式).
      2. 用戶樣式表中的普通聲明（由用戶設(shè)置的自定義樣式）。
      3. 作者樣式表中的普通聲明（這是我們設(shè)置的樣式，Web開發(fā)人員）。
      4. 作者樣式表中的重要聲明

      5. 用戶樣式表中的重要聲明

        專用性（Specificity）

        一個選擇器具有的專用性的量是用四種不同的值（或組件）來衡量的，它們可以被認為是千位，百位，十位和個位——在四個列中的四個簡單數(shù)字：
      6. 千位：如果聲明是在style 屬性中該列加1分（這樣的聲明沒有選擇器，所以它們的專用性總是1000。）否則為0。
      7. 百位：在整個選擇器中每包含一個ID選擇器就在該列中加1分。
      8. 十位：在整個選擇器中每包含一個類選擇器、屬性選擇器、或者偽類就在該列中加1分。

      9. 個位：在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加1分。

        源代碼次序（Source order）

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2276.html

相關(guān)文章

  • ife 零基礎(chǔ)學(xué)院 day 2

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

    qpal 評論0 收藏0

  • 百度IFE2018任務(wù)--17-18天

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

    binta 評論0 收藏0

  • 百度前端技術(shù)學(xué)院2017學(xué)習(xí)總結(jié)

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

    pkwenda 評論0 收藏0

  • 百度前端技術(shù)學(xué)院2017學(xué)習(xí)總結(jié)

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

    ky0ncheng 評論0 收藏0

  • 百度前端技術(shù)學(xué)院2017學(xué)習(xí)總結(jié)

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

    Jingbin_ 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<