關於軟體測試第二天---標籤和CSS

菜鳥*號發表於2020-12-12
CSS

標籤

4.strong標籤

5.em標籤 雙標籤

6.img標籤(image)單標籤 圖片標籤

  • 6.1 屬性1：src：填寫當前展示的圖片的位置(路徑)；路徑可以是本地路徑，也可以是網路路徑。
  • 6.2 屬性2：alt：當前圖片無法顯示的時候對使用者做出文字性解釋

7.a標籤 雙標籤 超連結標籤

  • 屬性1：href：表示要跳轉的位置，該位置可以是本地的，也可以是網路的。
  • 屬性2：target_blank：開啟一個空白的頁面進行跳轉。
  • 空連線方式一：href = “###”
  • 空連線方式二：href = “Javascript:void(0)”
  • 回到頂部：href = “#”

8.hr標籤 單標籤 橫線

**9.列表標籤 雙標籤 **

  • 無序標籤 ul un-order-list
  • 有序標籤 ol order-list
  • 列表項 li list

圖片的路徑

本地路徑

  • 相對路徑：從當前位置開始，一直到資源所在位置結束，所形成的路徑
    1. .代表當前位置(可以省略不寫)
    2. …代表往外走一層
    3. /代表往裡走一層

  • 絕對路徑：從電腦的根目錄開始，一直到資源所在的位置結束，所形成的路徑。

網路路徑

  • 圖片所在的位置的網址；由http或者https開頭的路徑。

HTML標籤的自身特性：行元素和塊元素

行元素

  • 不獨佔一行，可以在一行顯示
  • 不支援設定寬高，其大小由內容撐出
  • 不支援上下的margin和padding值
  • strong em img a span

塊元素

  • 獨佔一行
  • 支援設定寬高，如果不設定，預設寬度與其父級寬度一樣，高度由內容撐起。
  • 支援上下的margin和padding值
  • p h1~h6 br hr ul ol li div

巢狀規則

1.塊元素可以巢狀部分塊元素，和所有行元素

2.行元素只能巢狀行元素，不能巢狀塊元素。

3.p標籤不能巢狀塊元素。

4.h1~h6標籤裡不能巢狀塊元素。

CSS

什麼是CSS?

  • Cascading Style Sheets(層疊樣式表)
  • 作用：如何顯示html元素。
  • 如何寫CSS？
    1. 行間CSS
    2. 內聯CSS
    3. 外聯CSS

常用的CSS樣式

  • 寬 width
  • 高 height
  • 背景色 background-color(美式)
  • 文字顏色 color
  • 字型大小 font-size
  • 行高 line-height
  • 文字對齊方式 test-align
  • 字型粗細 font-weight
  • 圓角 border-radius
  • 邊框 border
  • 透明度 opacity
  • font-weight 字型粗細：bold bolder normal
  • 字型：font-family

border有三個值

  • 值1：邊框粗細 1px 2px 2.5px
  • 值2：邊框樣式 solid(實線) dashed(虛線) dotted(虛線)
  • 值3：邊框顏色 1.單詞 red darkred 2.十六進位制 3.rgb() 4.rgba(值1，值2，值3，值4)

如何寫CSS

1.行間CSS樣式

  • 語法格式：標籤內書寫屬性style=“樣式名1:樣式值1；樣式名2:樣式值2；…”
  • 注意事項：CSS樣式可以被覆蓋。

2.內聯CSS

  • 標籤選擇器(元素選擇器)：
    1. 語法：標籤名+(樣式)
    2. 作用：能找到當前文件裡所有的與標籤名相同的標籤。

  • id選擇器

    1. 語法：#id名{}
    2. 作用：找到當前文件裡設定了id屬性且id值為id名的元素，該元素只能找到唯一一個元素，因為id值唯一

  • class選擇器

    1. 語法：class名{}
    2. 作用：該選擇器能找到所有的設定了class屬性且值為class名的標籤；一個class名可以被多個元素使用。一個元素可以設定多個class名，中間用空格隔開。

  • 群組選擇器

    1. 語法：選擇器1，選擇器2，選擇器n{樣式}
    2. 作用：能找到當前文件裡所有內容的各個選擇器選擇到的元素。

  • 子選擇器:語法：選擇器1>選擇器2>…{ }

  • 後代選擇器：語法：選擇器1 選擇器2{ }

外聯CSS

  • 引入外部CSS檔案的方法：

    1. link標籤引入：不在style標籤裡面，直接寫link標籤；
    2. @import方式引入：在style標籤裡面使用@import；

  • 步驟：

    1. 先建一個CSS檔案，把公共樣式放入CSS檔案中；
    2. 在需要加樣式的html檔案中，通過link或者@import方法引入CSS檔案

  • 何時用內聯？何時用外聯？

    1. 對於單頁面來講，內聯比較方便；
    2. 對於多頁面來講，外聯比較方便(有公共樣式)

  • link標籤引入和import方式引入有什麼區別???

    1. link方式引入是html語法，@import方式引入是CSS語法
    2. link方式是在html文件載入的時候就開始載入CSS檔案；@import方式需要等到html文件載入完畢之後，才開始載入CSS檔案。
    3. link方式引入的CSS樣式，後期可以通過JS進行修改；@import引入的CSS後期無法通過JS修改。
    4. link方式可以引入任何型別的檔案，@import方式只能引入CSS檔案
    5. 我們一般使用link方式引入CSS檔案；

  • 命名規則：適合於所有需要起名字的地方

    1. 只能由數字，字母，_下劃線，-橫槓組成；
    2. 數字不能開頭，一般由字母開頭，一般不用中文
    3. 駝峰命名方式(有多個單片語成時，第二個單詞首字母大寫)
    4. 見名知意

  • 選擇器的優先順序：預設樣式<萬用字元選擇器<標籤選擇器<class選擇器(後代選擇器)<id選擇器<行間CSS樣式<! important值

相關文章