html5快速入門（二）—— CSS簡介

時間 2019-11-18

標籤 html5 html 快速入門 css 簡介欄目 HTML5 简体版

原文原文鏈接

前言：css

1.HTML5的發展很是迅速，能夠說已是前端開發人員的標配，在電商類型的APP中更是運用普遍，這個系列的文章是本人本身整理，儘可能將開發中不經常使用到的剔除，將常用的拿出來，使須要的朋友可以真正快速入門，若是有哪些不清楚的地方或者錯誤，歡迎聯繫我
2.更新時間沒有規律，通常會在3天左右更新一篇（全系列預計會有12篇）由於須要工做，因此只能在閒暇之餘整理，若是有喜歡的朋友能夠關注我，將會第一時間得到更新信息
3.若是有須要Reactive Native + H5跨平臺開發的朋友，能夠聯繫我，在本系列結束以前會根據需求的程度決定是否繼續
4.全系列文章最後儘量地附上綜合實例，幫助朋友更好地理解
5.此係列會涉及到HTML、CSS、JavaScript等html

另：有不少朋友私聊我說圖片不能正常顯示的問題，測試後發現簡書上能夠在windows和mac端完美顯示，若是看不到圖片麻煩移步簡書連接前端

CSS簡介

CSS(Cascading Style Sheets)：層疊樣式表，它用來控制HTML標籤的樣式，在美化網頁中起到很是重要的做用
CSS的編寫格式是鍵值對的形式
- 格式：屬性名 : 屬性值
```
color:blue;
background-color:green;
font-size:15px;
```

CSS的3種使用形式

行內樣式（內聯樣式）：在標籤的style屬性中書寫（標籤都有style屬性）

css3

<!-- 行內樣式 -->
<!-- 字體大小爲25,顏色綠色,背景色亮灰 -->
<div style="font-size: 25px; color: green; background-color: lightgrey;">div容器</div>
<!-- 字體顏色藍色,邊框寬度爲1且爲黑色 -->
<h2 style="color: blue;border: 1px double black;">Cascading Style Sheets</h2>

效果：
windows

業內樣式：在本網頁的style標籤中書寫（由於body標籤用來描述內容和結構，其它東西都放到head中,因此將業內樣式寫在head標籤內）數組

<head>
    <meta charset="UTF-8">
    <title>CSS頁內樣式</title>
    <!-- 頁內樣式 -->
    <style>
        /* 標籤選擇器 */
        /* div文字顏色爲藍色,字體大小25,邊框爲紅色單邊框 */
        div{
            color: blue;
            font-size: 25px;
            border:2px solid red;
        }
        /* p文字顏色爲橘色,字體17,邊框爲紫色雙邊框寬度爲5 */
        p{
            color: orange;
            font-size: 17px;
            border:5px double blueviolet;
        }
    </style>
    </head>
    <body>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
    </body>

效果：瀏覽器

外部樣式：在單獨的CSS文件中書寫，而後在網頁中用link標籤進行引用
- 先新建一個css文件，在css文件內書寫咱們須要的樣式

佈局

```
  div{
      color: blue;
      font-size: 25px;
      border:2px solid red;
  }

  p{
      color: orange;
      font-size: 17px;
      border:5px double blueviolet;
      }

  ```
  - 而後引入外部樣式
  <br><br>

  ```

      <head>
          <meta charset="UTF-8">
          <title>CSS外部樣式</title>
          <!-- 引入外部樣式 -->
          <link rel="stylesheet" href="css/index.css">
      </head>

      <body>
          <div>div容器div容器div容器div容器div容器</div>
          <div>div容器div容器div容器div容器div容器</div>
          <div>div容器div容器div容器div容器div容器</div>
          <div>div容器div容器div容器div容器div容器</div>
          <div>div容器div容器div容器div容器div容器</div>
          <p>段落段落段落段落段落段落段落段落</p>
          <p>段落段落段落段落段落段落段落段落</p>
          <p>段落段落段落段落段落段落段落段落</p>
          <p>段落段落段落段落段落段落段落段落</p>
          <p>段落段落段落段落段落段落段落段落</p>
      </body>

  ```

效果：
測試

注意：開發中，通常都使用外部樣式,結構比較清晰

CSS經常使用選擇器

屬性：經過屬性的複雜疊加，才能作出漂亮的網頁

選擇器：經過選擇器找到對應的標籤設置樣式

標籤選擇器：根據標籤名找到對應的標籤

<style>
    /* 標籤選擇器 */
    /* div文字顏色爲藍色,字體大小25,邊框爲紅色單邊框 */
    div{
        color: blue;
        font-size: 25px;
        border:2px solid red;
    }
</style>

使用場景：一次性設置對應標籤的時候字體
類選擇器

/* 類選擇器 */
    .test1{
        color: red;
        font-size: 30px;
        border:5px double green;
    }

使用

<div class="test1">類選擇器</div>
<p class="test1">類選擇器</p>

使用場景：讓須要它的標籤主動去使用它
id選擇器

/* ID選擇器 */
    #main{
        font-size: 50px;
    }

使用：

<div id="main">id選擇器</div>

使用場景：全局只讓一個標籤佔有（獨一無二）
並列選擇器（能夠理解爲或）

/* 並列選擇器(或) */
    #main, .test1{
        border:10px solid orange;
    }

使用場景：只要有其中一個選擇器就可使用選擇器內的樣式
複合選擇器（能夠理解爲且）

/* 複合選擇器(且,前面不能夠是ID選擇器) */
    p.test1{
      color: yellow;
    }

使用場景：同時擁有2個選擇器的標籤即可以使用選擇器內的樣式
後代選擇器

/* 後代選擇器 
    前面爲父標籤，後面爲子標籤
    */
    div a{
        color: darkgray;
    }

使用場景：設置父標籤內的全部子標籤（包括子標籤內的相同標籤的子標籤）的時候
直接後代選擇器

/* 直接後代選擇器 */
    div > p{
        font-size: 90px;
    }

使用場景：設置父標籤的子標籤的時候
僞類

input:focus{ /* 得到焦點 */

}

使用場景：當標籤激活焦點的時候觸發
僞元素：和僞類使用類似

div.test1:first-letter{

}

CSS不經常使用選擇器

相鄰兄弟選擇器：與標籤上下相鄰的同一級標籤

div + p{

}

注意條件：相鄰，且同一級

屬性選擇器：能夠將其當作數組（一維/二維數組）

div[name]{

}

div[name="Tom"]{

}

div[name][age]{

}

通配符：設置全部標籤

*{
    
}

選擇器的優先級與權值的關係

相同級別的選擇器遵循：就近原則 > 疊加原則
不一樣類型的選擇器：選擇器的針對性越強，它的優先級就越高，這裏涉及到權值的問題，先來看下面的表

選擇器類型	權值
通配選擇符	0
標籤選擇器	1
類選擇器	10
屬性選擇器	10
僞類	10
僞元素	1
id選擇器	100
important	1000

原則：選擇器的權值累計越高，優先級越高，若是權值相同，後定義的優先（就近原則）
優先級排序：important > 內聯 > id選擇器 > 類選擇器 > 標籤選擇器|僞類|屬性選擇 > 僞元素 > 通配符 > 繼承

HTML標籤類型

HTML有N多標籤，根據顯示的類型，主要分爲三大類

塊級標籤：獨佔一行，能隨時設置寬度和高度（如：div、p、h1…h六、ul、li）

<style>
    /* div標籤選擇器 */
    div{
        /*背景色*/
        background-color: yellow;
    }
</style>

<body>

    <div>我是div容器</div>
    <div>我是div容器</div>
    <div>我是div容器</div>

</body>

效果：

行內標籤（內聯標籤）：多個行內標籤能同時顯示在一行，寬度高度取決於內容尺寸（如：span、a、label）

<style>
    /* span標籤選擇器 */
    span{
        /*背景色*/
        background-color: red;
    }
</style>

<body>

    <span>我是span容器</span>
    <span>我是span容器</span>
    <span>我是span容器</span>
    <span>我是span容器</span>

</body>

效果：

行內-塊級標籤（內聯-塊級標籤）：多個行內-塊級標籤可顯示在同一行，能隨時設置寬度和高度（如：input、button）

[Uploading Snip20160614_7_103697.png . . .]

```
<style>
     /* input標籤選擇器 */
    input{
        /*背景色*/
        background-color: yellow;
    }
</style>

<body>

    <input type="text">
    <input type="date">
    <input type="text">
    <input type="date">

</body>

```
效果：

修改標籤的顯示類型 —— display/visibility

在開發中，咱們常常須要將各類類型的標籤拼湊在一塊兒，而若是按照上面標籤的類型來看，顯然塊級標籤後就沒辦法再添加其餘標籤，這樣也就大大下降了靈活性。這個時候咱們就須要來看看`display屬性，它們能夠用來修改標籤的顯示類型，提升標籤之間拼湊時的靈活性

display屬性有4個值

none：隱藏標籤（同時隱藏內容和佔位，也能夠說同時隱藏結構）
block：讓標籤變爲塊級標籤
inline：讓標籤變爲行內標籤
inline-block：讓標籤變爲行內-塊級標籤（內聯-塊級標籤）

div{
        /*設置背景色*/
        background-color: red;
    }

    /* 隱藏 */
    .noneDiv{
        display: none;
        /*設置背景色*/
        background-color: yellow;
    }

    /* 塊級 */
    .blockInput{
        display: block;
        /*設置背景色*/
        background-color:orange;
    }

    /* 行內 */
    .inlineDiv{
        display: inline;
        /*設置背景色*/
        background-color: green;
    }

    /* 行內-塊級 */
    .inline-blockDiv{
        display: inline-block;
        /*設置背景色*/
        background-color: gray;
    }

</style>

<body>

    <div>默認的div</div>
    <div class="noneDiv">隱藏div標籤</div>
    <div class="inlineDiv">變成行內標籤的div</div>
    <div class="inline-blockDiv">變成行內-塊級標籤的div</div><br><br>

    <!--默認的input-->
    <input type="text">
    <input type="text">
    <!--變成塊級標籤的input-->
    <input class="blockInput" type="text">
    <input class="blockInput" type="text">

</body>

效果：

visibility屬性有4個值
- visible：顯示標籤（默認）
- hidden：隱藏標籤（只隱藏內容，可是依舊佔位）
- collapse：這個屬性主要用在表格中，它能夠刪除一行或一列，但不會影響表格的佈局，並且被行或列佔據的空間會留給其餘內容，若是用在其餘標籤，則呈現hidden的效果
- inherit：規定應該從父標籤繼承visibility屬性的值
```
<style>
    div{
        /*高*/
        height:100px;
        /*背景色*/
        background-color: yellow;
    }

    /* 隱藏 */
    .hiddenDiv{
        visibility: hidden;
    }
    </style>

    <body>
        <div>div</div>
        <div class="hiddenDiv">隱藏的div</div>
        <div>div</div>
    </body>
```
效果：

CSS屬性分類

CSS有不少屬性，若是根據繼承性劃分，主要分爲兩大類
- 可繼承屬性：父標籤的屬性值會傳遞給子標籤（通常是文字控制屬性）
  - 全部標籤可繼承（visibility、 cursor）
  - 繼承（letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction）
  - 塊級標籤可繼承（text-indent、text-align）
  - 列表標籤可繼承（list-style、list-style-type、list-style-position、list-style-image）
```
<style>
    /* 文字控制類 */
    body{
        color:red;
        font-size:25px;
    }
</style>
```
- 不可繼承屬性：父標籤的屬性值不會傳遞給子標籤（通常是區塊控制屬性）
```
<style>
    /* 區塊控制類 */
    div{
        color:red;
        font-size:25px;
    }
</style>
```
總結：通常若是是大小、形狀之類的通常都不可繼承的

盒子模型

先來看看盒子裏面的結構 —— 盒子由內容、內邊距、邊框、外邊距構成
標準的盒子模型標準是這樣的
若是全部瀏覽器都遵循這樣的規則，那麼就不會產生適配等問題，可是恰恰有個頑皮的熊老人（這個攪屎棍→ →）搞了本身的模型標準
也就是說網頁上的每個標籤都是盒子，每一個盒子都有4個屬性
- content（內容）：盒子裏面裝的東西（網頁中一般是指文字和圖片）
  - height：設置元素高度
  - max-height:設置元素最大高度
  - max-width：設置元素的最大寬度
  - width：設置元素寬度
  - min-height：設置元素最小高度
  - min-width：設置元素最小寬度
- padding（填充，內邊距）
  - padding：在一個聲明中設置全部內邊距屬性
  - padding-top:設置元素的上內邊距
  - padding-right：設置元素的右內邊距
  - padding-bottom：設置元素的下內邊距
  - padding-lfet：設置元素的左內邊距
```
<style>
    div{
        /*這邊直接使用複合屬性padding:屬性順序爲上\右\下\左(順時針)若是隻設置2個值,那麼第一個值指上下,第二個值指左右*/

        padding: 25px 20px;
        /*背景顏色*/
        background-color: blue;
    }      
</style>

<body>
    <div>div標籤div標籤</div>  
</body>
```
效果：
- margin（外邊距）：讓盒子與盒子之間保留必定空隙
  - margin：在一個聲明中設置全部外邊距屬性
  - margin-top:設置元素的上外邊距
  - margin-right：設置元素的外邊邊距
  - margin-bottom：設置元素的下外邊距
  - margin-lfet：設置元素的左外邊距
```
<style>
    div{
        /*外邊距和內邊距類似*/
        margin: 30px 40px;

        /*背景顏色*/
        background-color: darkmagenta;
    }

</style>

<body>
    <div>div標籤div標籤</div>
</body>
```
效果：
- border（邊框）：盒子自己
  - border是個複合屬性，屬性的順序是（border-width，border-style，border-color）
```
<style>
    div{
        /*邊框設置 寬21px 雙框 紅色*/
        border: 20px double red;
    }
</style>

<body>
<div>div標籤div標籤</div>
</body>
```
效果：

CSS3新特性

RGBA透明度：RGB(紅色R+綠色G+藍色B),RGBA則在其基礎上增長了Alpha通道，用來設置透明值

<style>
        div{
            /*設置寬高*/
            width: 200px;
            height: 50px;
        }

        .test1{
            background-color: rgba(123,0,0,1.0);
        }
        .test2{
            background-color: rgba(123,0,0,0.8);
        }
        .test3{
            background-color: rgba(123,0,0,0.0);
        }
        .test4{
            background-color: rgba(123,0,0,0.6);
        }
        .test5{
            background-color: rgba(123,0,0,0.4);
        }
        .test6{
            background-color: rgba(123,0,0,0.2);
        }
    </style>
    
    <body>
        <div class="test1">div1.0</div>
        <div class="test2">div0.8</div>
        <div class="test3">div0.0</div>
        <div class="test4">div0.6</div>
        <div class="test5">div0.4</div>
        <div class="test6">div0.2</div>
    </body>

效果：

補充：既然有透明度，那麼就有不透明度（最簡單的蒙版效果）

<style>
        div {
            /*設置寬高*/
            width: 200px;
            height: 50px;
            /*設置背景色*/
            background-color: red;
            /*設置不透明度*/
            opacity:0.35;
        }
    </style>
    
    <body>
        <div>div1.0</div>
    </body>

效果：

塊陰影和圓角陰影：box-shadow text-shadow

<style>
        div {
            /*設置寬高*/
            width: 200px;
            height: 50px;
            /*設置背景色*/
            background-color: red;
            
            /*設置外邊距*/
            margin: 20px;

            /*設置塊陰影
             參數一:水平偏移
             參數二:垂直偏移
             參數三:模糊距離
             參數四:陰影顏色
            */
            box-shadow: 10px 10px 10px blue;
        }
    </style>
    
    <body>
        <div>div</div>
        <div>div</div>
        <div>div</div>
        <div>div</div>
        <div>div</div>
    </body>

效果：

圓角：border-radius

<style>
        div {
            /*設置寬高*/
            width: 200px;
            height: 50px;
            /*設置背景色*/
            background-color: red;
            /*設置外邊距*/
            margin: 20px;
        }
        .test1{
            /*底部左邊*/
            border-bottom-left-radius: 30px;
        }
        .test2{
            /*頂部右邊*/
            border-top-right-radius: 30px;
        }
        .test3{
            /*底部右邊*/
            border-bottom-right-radius: 30px;
        }
        .test4{
            /*頂部左邊*/
            border-top-left-radius: 30px;
        }
        .test5{
            /*四個角*/
            border-radius: 10px;
        }
    </style>

    <body>
        <div class="test1">div</div>
        <div class="test2">div</div>
        <div class="test3">div</div>
        <div class="test4">div</div>
        <div class="test5">div</div>
    </body>

效果：

邊框圖片：border-image(不經常使用，用到再說)
形變：transform: none | [ ]（後面結合實例，便於理解）

CSS佈局

默認狀況下，全部網頁標籤都在標準流佈局中（從上往下，從左往右，相互依賴）
脫離標準流（就是固定在一個地方），脫離標準流主要的兩種方式有兩種

注意：標籤只要一浮動，它的類型就會被強制轉爲行內塊級標籤

float屬性：讓標籤浮動在父標籤的左邊和右邊（顯然不夠靈活）
- left：浮動在父標籤的最左邊
- right：浮動在父標籤的最右邊

<style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
    }

    .test1{
        background-color: red;

        float: left;
    }
    .test2{
        background-color: blue;

        float: right;
    }
</style>

<body>
    <div id="main">
    <div class="test1">左</div>
    <div class="test2">右</div>
    </div>
</body>

效果：

position屬性：結合left、right、top、bottom屬性就不同了（顯然這個比較厲害）
注意：他的位置是相對於瀏覽器窗口來決定的

<style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
    }

    .test1{
        background-color: red;

        position: absolute;
        top: 20px;
        left: 20px;
    }
    .test2{
        background-color: blue;

        position: absolute;
        bottom: 20px;
        right: 20px;
    }
</style>

<body>
    <div id="main">
        <div class="test1">左</div>
        <div class="test2">右</div>
    </div>
</body>

效果：

居中

水平居中

若是是行內、行內塊級標籤，設置text-align: center;

<style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
        /*設置內容水平居中(可繼承)*/
        text-align: center;
    }

    span{
        background-color: blue;
    }
</style>

<body>
    <div id="main">
        <span>行內標籤</span>
    </div>
</body>

效果：

若是是塊級標籤，則需設置 margin: 0 auto;

<style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
        /*設置內容水平居中(可繼承)*/
        text-align: center;
    }

    .test1{

        width: 200px;
        background-color: blue;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        /*或者*/
        /*margin: 0 auto;*/
    }
</style>

<body>
    <div id="main">
        <div class="test1">塊級標籤</div>
    </div>
</body>

效果：

垂直居中

若是是行內、行內塊級標籤，設置line-height:總高度;

<style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
        /*設置內容水平居中(可繼承)*/
        text-align: center;
    }

    .test1{
        width: 350px;
        height: 30px;
        background-color: blue;

        /*設置垂直居中,讓它等於父標籤的高度*/
        line-height: 200px;
    }
</style>

<body>
    <div id="main">
        <span class="test1">行內標籤</span>
    </div>
</body>

效果：

若是是塊級標籤，須要經過定位來作（通常不會將塊級標籤作垂直居中操做）

<style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
        /*設置內容水平居中(可繼承)*/
        text-align: center;
        /*告訴父標籤使用絕對定位*/
        position: relative;
    }

    .test1{
        width: 200px;
        height: 30px;
        background-color: blue;

        /*重寫,設置內容居中*/
        line-height: 30px;
        margin: 0 auto;
        /*設置相對路徑*/
        position: absolute;
        top:50%;
        left:50%;
        /*平移使其與父標籤居中顯示*/
        transform: translate(-50%, -50%);
    }
</style>

<body>
    <div id="main">
        <span class="test1">行內標籤</span>
    </div>
</body>

效果：

昨晚的文章不完整，這個纔是第二篇的完整版，對形成的不便感到抱歉，綜合實例單獨作一篇吧！