2017-02-16 HTML5學習筆記

weixin_34247155發表於2017-02-16
HTML筆記

序選擇器

CSS3 中新增的選擇器最具代表性的就是序選擇器

  • 同級別序選擇器

  • :first-child
    選中同級別中的第一個標籤

  • :last-child
    選中同級別中的最後一個標籤

  • :nth-child(n)
    選中同級別中的第 n 個標籤

  • :nth-last-child(n)
    選中同級別中的倒數第 n 個標籤

  • :only-child
    選中父元素中唯一的標籤
    注意點：不區分類別

  • 同類別的序選擇器

  • :first-of-type
    選中同級別中同型別的第一個標籤

  • :last-of-type
    選中同級別中同型別的最後一個標籤

  • :nth-of-type(n)
    選中同級別中同型別的第 n 個標籤

  • :nth-last-of-type(n)
    選中同級別中同型別的倒數第 n 個標籤

  • :only-of-type
    選中父元素中唯一型別的某個標籤

  p:first-child{
            color: red;
        }

 p:first-of-type{
            color: blue;
        }

 p:last-child{
            color: red;
        }

p:last-of-type{
            color: blue;
        }

        p:nth-child(3){
            color: red;
        }

 p:nth-of-type(3){
            color: blue;
        }

  p:nth-last-child(2){
            color: red;
        }

 p:nth-last-of-type(2){
            color: red;
        }

 p:only-child{
            color: purple;
        }

 p:only-of-type {
            color: red;
        }

  .para:only-of-type {
            color: red;
        }

<body>
<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
</div>
<p class="para">我是段落1</p>
<div>
    <p class="para">我是段落2</p>
    <p class="para">我是段落2</p>
    <h1>我是標題</h1>
</div>
</body>
  • :nth-child(odd)
    選中同級別中的所有奇數
  • :nth-child(evem)
    選中同級別中的所有偶數
  • :nth-child(xn+y)
    x 和 y 是使用者自定義的，n是一個計數器，從0開始

屬性選擇器

  • 什麼是屬性選擇器
  • 格式：[attribute]
  • 作用：根據指定的屬性名稱找到對應的標籤，然後設定屬性
  • 格式：[attribute=value]
  • 作用：找到有指定屬性，並且屬性的取值等於 value 的標籤，然後設定屬性
  • 最常見的應用場景就是使用者區分 Input 屬性
<head>
<style>
        input[type=password]{}
</style>
</head>
<body>
        <input type="text" name="" id="">
        <input type="password" name="" id="">
</body>

  • 屬性的取值是以什麼開頭的

  • [attribute|=value] CSS2

  • [attribute^=value] CSS3
    兩者之間的區別：CSS2 中的只能找到 value 開頭，並且 value 是被 - 和其他內容隔開的。CSS3 中的只要是以 value 開頭的都可以找到

  • 屬性的取值是以什麼結尾的

  • [attribute$=value] CSS3

  • 屬性的取值是否包含某個特定的值的

  • [attribute~=value] CSS2

  • [attribute*=value] CSS3
    兩者之間的區別：CSS2 中的只能找到獨立的單詞，也就是包含 value， 並且 value 是被空格隔開的。 CSS3 中的只要包含 value 就可以找到

         img[alt^=abc]{
            color: red;
        }

        img[alt|=abc]{
            color: red;
        }

        img[alt$=abc]{
            color: blue;
        }

        img[alt*=abc]{
            color: red;
        }
        img[alt~=abc]{
            color: red;
        }

萬用字元選擇器

  • 什麼是萬用字元選擇器
  • 作用：給當前介面上所有的標籤設定屬性
  • 格式：*{屬性:值；}
  • 注意點：由於萬用字元選擇器是設定介面上所有的標籤的屬性，所以在設定之前會遍歷所有的標籤，如果當前介面上的標籤比較多，那麼效能就會比較差。所以在企業開發中一般不會使用萬用字元選擇器
*{
            color: red;
        }

CSS 三大特性之繼承性

  • 什麼是繼承性

  • 作用：給父元素設定一些屬性，子元素也可以使用，這個我們就稱之為繼承性

  • 注意點

  • 並不是所有的屬性都可以繼承，只有以 color/font-/text-/line- 開頭的屬性才可以繼承

  • 在 CSS 的繼承中不僅僅是兒子可以繼承，只要是後代都可以繼承

  • 繼承性中的特殊性
    1.a 標籤的文字顏色和下劃線是不能繼承的
    2.h 標籤的文字大小是不能繼承的

  • 應用場景
    一般用於設定網頁上的一些共性資訊，例如網頁的文字顏色，字型，文字大小等內容

<head>
<style>
body{}
</style>
</head>
<body>
        <div>
    <p>我是段落</p>
</div>
<div>
    <ul>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>

<div>
    <a href="#">我是超連結</a>
</div>
</body>

CSS 三大特性之層疊性

  • 什麼是層疊性
  • 作用：層疊性就是 CSS 處理衝突的一種能力

注意點：
層疊形只有在多個選擇器選中同一個標籤，然後又設定了相同的屬性，才會發生層疊性

CSS 全程 Cascading StyleSheet

<head>
<style>
        p{
            color: red;
        }
        .para{
            color: blue;
        }
    </style>
</head>
<body>
          <p id="identity" class="para">我是段落</p>
</body>

CSS 三大特性之優先順序

  • 什麼是優先順序

  • 作用：當多個選擇器選中同一個標籤，並且給同一個標籤設定相同的屬性時，如何層疊就由優先順序來確定

  • 優先順序判斷的三種方式

  • 間接選中就是指繼承，如果是間接選中，那麼就是誰離目標標籤比較近就聽誰的

  • 相同選擇器（直接選中），如果都是直接選中，並且都是同型別的選擇器，那麼就是誰寫在後面聽誰的

  • 不同選擇器（直接選中），如果都是直接選中，並且不是相同型別的選擇器，那麼就會按照選擇器的優先順序來層疊
    id>類>標籤>萬用字元>繼承>瀏覽器預設

！important

  • 什麼是 ！important
  • 作用：用於提升某個直接選中標籤的選擇器中的某個屬性的優先順序的，可以將被指定的屬性的優先順序提升為最高

注意點：

  • ！important 只能用於直接選中，不能用於間接選中
  • 萬用字元選擇器選中的標籤也是直接選中的
  • ！important 只能提升被指定的屬性的優先順序，其他的屬性的優先順序不會被提升
  • ！important 必須寫在屬性值的分號前面
  • ！important 前面的感嘆號不能省略

優先順序之權重問題

  • 什麼是優先順序的權重

  • 作用：當多個選擇器混合在一起使用時，我們可以通過計算權重來判斷誰的優先順序最高

  • 權重的計算規則

  • 首先先計算選擇器中有多少個 id， id 多的選擇器優先順序最高

  • 如果 id 的個數一樣，那麼再看類名的個數，類名個數多的優先順序最高

  • 如果類名的個數一樣，那麼再看標籤名稱的個數，標籤名稱個數多的優先順序最高

  • 如果id 個數一樣，類名個數也一樣，標籤名稱個數也一樣，那麼就不會繼續往下計算了，此時誰寫在最後面聽誰的

注意點：
只有選擇器時直接選中標籤的才需要計算權重，否則一定會聽直接選中的選擇器的

div 和 span 標籤

  • 什麼是 div
    作用：一般用於配合 css 完成網頁的基本佈局

  • 什麼是 span
    作用：一般用於配合 css 修改網頁中的一些區域性資訊

  • div 和 span 有什麼區別

  • div 會單獨的佔領一行，而 span 不會單獨佔領一行

  • div 是一個容器級的標籤，而 span 是一個文字級的標籤

  • 容器級的標籤和文字級的標籤的區別

  • 容器級的標籤中可以巢狀其它所有的標籤，文字級的標籤中只能巢狀文字/圖片/超連結

容器級標籤：
div h ul ol dl li dt dd ...
文字級的標籤 ：
span p buis strong em ins del ...

注意點：
哪些標籤是文字級的哪些標籤是容器級的，我們不用刻意去記憶，在企業開發中一般情況下要巢狀都是巢狀在 div 中， 或者 按照組標籤來巢狀

<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="aside"></div>
    <div class="article"></div>
</div>
<div class="footer"></div>

<p>努力到<span>無能為力</span>, 拼搏到<span>感動自己</span></p>

CSS 元素的顯示模式

在 html 中 html 將所有的標籤分為兩類，分表是容器級和文字級
在 CSS 中 CSS 也將所有的標籤分為兩類，分別是塊級元素和行內元素

  • 什麼是塊級元素什麼是行內元素
    塊級元素會獨佔一行
    行內元素不會獨佔一行
    容器級標籤
    div h ul ol dl lo dt dd ...
    文字級標籤
    span p buis strong em ins del ...

塊級元素
p div h ul ol dl li dt dd
行內元素
span buis strong em ins del

塊級元素和行內元素的區別

  • 塊級元素獨佔一行如果沒有設定寬度那麼預設和父元素一樣寬，如果設定了寬高，那麼按照設定的來顯示

  • 行內元素不會獨佔一行，如果沒有設定寬度，那麼預設和內容一樣寬，行內元素是不可以設定寬度和高度的

  • 行內塊元素，為了能夠讓元素既能夠不獨佔一行，又可以設定寬度和高度，那麼就出現了行內塊元素

 <style>
        div{
            background: red;
            width: 200px;
            height: 200px;
        }
        span{
            background: blue;
            width: 200px;
            height: 200px;
        }
        img{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
        <div>我是div</div>
        <p>我是段落</p>
        <h1>我是標題</h1>
        <hr>
        <span>我是span</span>
        <b>我是加粗</b>
        <strong>我是強調</strong>
        <hr>
        ![](images/picture.jpg)
        ![](images/picture.jpg)
</body>

CSS 元素顯示模式轉換

  • 如何轉換 CSS 元素的顯示模式
    設定元素的 display 屬性
  • display 取值
  • block 塊級
  • inline 行內
  • inline-block 行內塊級
  • 快捷鍵
    di display:inline;
    db display:block;
    dib display:inline-block;
<style>
        div{
            display: inline;
            background: red;
            width: 200px;
            height: 200px;
        }
        span{
            display: block;
            background: green;
            width: 200px;
            height: 200px;
        }
        .cc{
            background: blue;
            width: 200px;
            height: 200px;
            display: inline-block;
        }
</style>
</head>
<body>
        <div>我是div</div>
        <div>我是div</div>
        <span>我是span</span>
        <span>我是span</span>
        <p class="cc">我是段落</p>
        <b class="cc">我是加粗</b>
</body>

相關文章