CSS 基礎學習筆記（2021.10.22~24）

阿新 • • 發佈：2021-10-24

CSS

一、CSS的簡單介紹

推薦網站：菜鳥教程

重點：選擇器

二、什麼是CSS和發展史

CSS: 層疊級聯樣式表

作用：美化網頁

發展史：

css1.0

css2.0 DIV+CSS，html和css分離的思想，網頁變得簡單，方便SEO(網站優化)

css2.1 浮動，定位

css3.0 圓角，陰影，動畫。。。

三、CSS的快速入門及優勢

css優勢：

內容和表現分離
網頁結構表現統一，可以實現複用
樣式十分豐富
建議使用獨立於html的css檔案
利於SEO，容易被搜尋引擎收錄

四、四種css匯入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一個css</title>
    <!--    規範<style>裡寫css程式碼

        語法： 選擇器{
                宣告1:   ;
                宣告2:   ;
                宣告3:   ;
                }

        優先順序，就近原則
        -->


    <!--    第一種，連結式外部樣式-->
    <link rel="stylesheet" href="css/style.css">

    <!--    第四種，匯入式外部樣式(不怎麼用了css2.1)-->
    <style>
        @import url("css/style.css")
    </style>

    <!--    第二種，內部樣式-->
    <style>
        h1{
            color:yellow;
        }
    </style>

</head>
<body>
<!--    第三種，行內樣式-->
<h1 style="color:blue">我是標題</h1>
</body>
</html>

五、三種基本選擇器-重要

選擇頁面上某一個元素或者某一類元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇器</title>
    <style>
        /* 標籤選擇器 */
        h1{
            color: red;
        }
        p{
            color: blue;
        }
        /* 類選擇器：選擇一類元素
         語法：.class{}
         */
        .one{
            color:green;
        }
        .two{
            color:yellow;
        }
        /* id選擇器：選擇一個指定id的元素，id式唯一的
         語法：#id{}
         */
         #hh1{
            font-size:50px;
         }

    </style>
</head>
<body>
    <h1>一級標題</h1>
    <p>段落</p>

    <p class="one" id="one">one類 idone</p>
    <p class="one" id="two">one類 idtwo</p>
    <p class="two" id="three">two類 idthree</p>
    <h1 class="one" id="hh1">one類 idhh1</h1>
    <h1 class="two" id="hh2">two類 idhh2</h1>
    <h1 class="two" id="hh3">two類 idhh3</h1>

</body>
</html>

優先順序：id > class > 標籤

六、層次選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>層次選擇器</title>
    <style>

        /*後代選擇器:某個元素所有的符合條件的子代，比如body p 意思就是body中所有的p，不管第幾代*/
        body p{
            color: aqua;
        }
        /*子選擇器:某個元素自身次一級的子代，比如body>p 意思就是body中次一級的p，只有一代*/
        body>p{
            background: red;
        }
        /*相鄰一位兄弟選擇器:某個元素同父元素的下一個指定元素，比如.test + p 意思就是test同父元素的下一個p*/
        .test + p{
            background: blue;
        }
        /*通用兄弟選擇器:某個元素同父元素的自身後的所有元素，比如.test ~ p 意思就是test同級中之後所有的p*/
        .test ~ p{
            background: brown;
        }
    </style>
</head>
<body>
<p class="test">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
</ul>


</body>
</html>

七、結構偽類選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>結構偽類選擇器</title>
    <style>
        /* ul的第一個子元素 */
        ul li:first-child{
            background: red;
        }
        /* ul的最後一個子元素 */
        ul li:last-child{
            background: aqua;
        }
        /* p的父元素body的子代的第二個p，也就是同代的順位第二，中間不能有別的元素，比如p7是鎖定不到的*/
        p:nth-child(2){
            background: blue;
        }
        /* p的父元素body的子代的第4個p，也就是同代的順位第四，中間可以有別的元素，比如p7是可以鎖定的*/
        p:nth-of-type(4){
            background: blue;
        }
        /* 觸碰到li */
        li:hover{
            color: chartreuse;
        }

    </style>
</head>
<body>
<p class="test">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>p4</li>
    <li>p5</li>
    <li>p6</li>
</ul>
<p>p7</p>
</body>
</html>

八、屬性選擇器-重要

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器</title>
    <style>
    /* 屬性選擇器
      比如:
      []中的符號:
      =：絕對等於
      *=：包含
      ^=：以開頭
      $=：以結尾
      a[id=first]{
      }
      的意思是：鎖定了：a標籤中，id=first的元素
       */
    a{
      float: left;
      width: 50px;
      height: 50px;
      background: blue;
      margin-right: 15px;
      border-radius: 15px;
      color: black;
      text-align: center;
      line-height: 50px;
      text-decoration: none;
    }

    a[href^="1"]{
      color: brown;
    }

    a[id="first"]{
      background: red;
    }

    a[class*="link item"]:hover{
      background: cornflowerblue;
    }

    a[href$="pdf"]:hover{
      border-radius: 25px;
    }
    </style>

</head>

<body>
<a href="http://www.baidu.com" id="first">1</a>
<a href="1.jpg" class="link item">2</a>
<a href="2.jpg" class="link item active">3</a>
<a href="3.pdf" class="link item">4</a>
<a href="1.pdf" class="link">5</a>
<a href="2.pdf" class="link">6</a>
<a href="3.pdf" class="link">7</a>
<a href="123" class="link item ">8</a>
<a href="1" class="link item">9</a>
<a href="1" class="link item">0</a>
</body>
</html>

九、CSS的作用及字型樣式

CSS的作用主要是用於美化網頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS作用及字型樣式</title>

    <style>
    #title1{
        font-size: 50px;
    }
    .test1{
        font:oblique bold 20px/50px Arial;     /*風格（斜體等等） 粗細，大小/行高 樣式 */
        font-family: "Source Code Pro", 楷體;    /*字型格式*/
        font-size: 30px;     /*字型大小*/
        font-weight: lighter;/*字型粗細*/
        color: brown;        /*字型顏色*/
    }
    </style>
</head>
<body>
歡迎學習<span id="title1">Java</span>
<p class="test1">測試字型test font</p>
</body>
</html>

十、文字樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字樣式</title>
    <style>
      /*
      1. 顏色 RGB：紅綠藍，RGBA：紅綠藍透明度 A(0~1)
      2. 對齊方式
      3. 首行縮排
      4. 行高
      5. 裝飾
      6. 水平對齊
      */
      .test2{
        color: rgba(163,55,17,0.5); /*文字顏色*/
        text-align: center;         /*文字對齊方式*/
        text-indent: 10em;          /*首行縮排 單位em（字元） 例子的意思是首行縮排十個字*/
        line-height: 50px;          /*行高*/
        text-decoration: line-through;  /*文字裝飾，中劃線*/
      }

      /*水平對齊需要兩個選擇，一個是test2類，一個是img標籤*/
      .test2,img{
        vertical-align: middle;
      }

    </style>
</head>
<body>
<p class="test2">
  測試文字內容testfont <br>
  測試文字內容testfont

  <img src="../resources/image/a.png" height="300" width="300"/>
</p>

</body>
</html>

十一、文字陰影和超連結偽類

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字陰影和超連結偽類</title>
    <style>
      a{
        text-decoration: none;
        color: brown;

      }
      /*超連結偽類*/
      .bookname:hover{/*滑鼠懸浮在元素上時的樣式*/
        font-size: 50px;
        color: rgb(6, 239, 227);
      }
      .bookname:visited{/*滑鼠點選過超文字元素上後的樣式*/
        color: darkorange;
      }
      /*文字陰影效果*/
      .bookprice{
        color: orange;
        /*文字陰影引數：水平偏移 垂直偏移 模糊距離 陰影顏色*/
        text-shadow:  10px 10px 3px darkorange;
      }

    </style>
</head>

<body>
<img src="../resources/image/a.png" height="150" width="150"/>
<p><a href="#" class="bookname">這本書的名字</a></p>
<p><a href="#" class="bookprice">這本書的價格</a></p>

</body>
</html>

十二、列表樣式

list-style:
none：去掉圓點
circle：空心圓
decimal：數字
square：正方形

十三、背景影象應用及漸變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景影象應用及漸變</title>
    <style>
        div{
          /*背景顏色 背景圖片url x軸偏移 y軸偏移*/
          background: rebeccapurple url("../resources/image/a.png") 60px 60px;/*背景影象*/
          width: 500px;
          height: 500px;
          border: black solid 3px ;
        }
        .div1{
          background-repeat: repeat-x;/*背景影象x軸平鋪*/
        }
        .div2{
          background-repeat: repeat-y;/*背景影象y軸平鋪*/
        }
        .div3{
          background-repeat: no-repeat;/*不平鋪*/
        }
        .div4{
          background-color: #4158D0;
          background-image: linear-gradient(341deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
        }
        .div5{
          background-color: #FFFFFF;
          background-image: linear-gradient(154deg, #FFFFFF 0%, #6284FF 32%, #FF0000 100%);
        }

        /*漸變 www.grabient.com*/

        body{
          background-color: #FFFFFF;
          background-image: linear-gradient(154deg, #FFFFFF 0%, #6284FF 32%, #FF0000 100%);
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>

</body>
</html>

十四、盒子模型及邊框使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型及邊框使用</title>
    <style>
        /*
        margin:外邊距
          四個數: 上 下 左 右
          三個數： 上 左右 下
          兩個數: 上下 左右
          一個數：上下左右
        padding：內邊距
        border：邊框（上面邊距的內外是相對於邊框的，邊框是分界點）
          粗細
          樣式
          顏色

          開頭常見操作(初始化)
          ul,li,a,body{
          margin: 0;
          padding: 0;
          text-decoration: none;
        }
        */
        ul,li,a,body{
          margin: 0;
          padding: 0;
          text-decoration: none;
        }
        #login{
          background: cornflowerblue;
          width: 300px;
          border: #6284FF solid 1px;
          margin: 5px;
          padding: 3px;
        }
        div:nth-of-type(2) input{
          border: #cb1e00 solid 3px;
        }

    </style>
</head>
<body>
<form action="#">
<div id="login">
    <div><h2>會員登入</h2></div>
    <div><p>使用者名稱：<input type="text"></p></div>
    <div><p>密碼：<input type="text"></p></div>
</div>

</form>
</body>
</html>

十五、div居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div居中</title>
    <style>
        ul,li,a,body{
          margin: 0;
          padding: 0;
          text-decoration: none;
        }


        #id1{
          /*居中*/
          margin: 0 auto;
          width: 500px;
          height: 500px;
          background-color: #85FFBD;
          background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);

        }
    </style>
</head>
<body>
<div id="id1" ></div>

</body>
</html>

十六、圓角邊框及陰影和經驗分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圓角邊框</title>
  <style>
    ul,li,a,body{
      margin: 0;
      padding: 0;
      text-decoration: none;
    }


    #id1{
      /*從左上開始順時針的順序 即：左上 右上 右下 左下*/
      border-radius: 200px 150px 75px 25px;
      width: 400px;
      height: 400px;
      background-color: #85FFBD;
      background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
      margin: 0 auto;

    }
  </style>
</head>
<body>
<div id="id1" ></div>
</body>
</html>

十七、display和浮動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動</title>
  <style>
    .contain{
      border: solid #cb1e00 2px;
    }
    .box1{
      padding: 5px;
      border: solid #C850C0 1px;
      margin: 5px;
      display: inline-block;
    }
    .d1{
      float: left;
    }
    .d2{
      float: right;
    }
    .d3,.d4{
      float: right;
    }
  </style>
</head>
<body>
<!--行內元素可以在塊級元素內，而塊級元素不能再行內元素裡
  display：
  block：塊元素
  inline：行內（內聯）元素
  inline-block：兩者都有
-->
<div class="contain">
  <div class="d1 box1"><img src="../resources/image/a.png" height="102" width="198"/></div>
  <div class="d2 box1"><img src="../resources/image/a.png" height="52" width="58"/></div>
  <div class="d3 box1"><img src="../resources/image/a.png" height="12" width="18"/></div>
  <div class="d4 box1">文字</div>

</div>



</body>
</html>

十八、overflow及父級邊框塌陷問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Overflow以及父級邊框塌陷問題</title>
    <style>
        .contain{
            border: solid #cb1e00 2px;
        }
        .box1{
            padding: 5px;
            border: solid #C850C0 1px;
            margin: 5px;
            display: inline-block;
        }
        .d1{
            float: left;
        }
        .d2{
            float: right;
        }
        .d3,.d4{
            float: right;
        }
        .contain:after{
            content:'';
            display:block;
            clear:both;
        }
    </style>
</head>
<body>
<!--父級元素塌陷解決辦法：
1. 增加父級元素高度
2. 在父級元素最後的地方中加入空的div，設定樣式：clean:both
3. 在父級元素後使用after偽類，設定樣式clean：both
-->
<div class="contain">
    <div class="d1 box1"><img src="../resources/image/a.png" height="102" width="198"/></div>
    <div class="d2 box1"><img src="../resources/image/a.png" height="52" width="58"/></div>
    <div class="d3 box1"><img src="../resources/image/a.png" height="12" width="18"/></div>
    <div class="d4 box1">文字</div>
</div>


<!--overflow:
hidden:隱藏
scroll:滾動條
after偽類:在元素後執行css
    content：內容
    display：block
    clear：both
-->
<div style="height: 150px;width: 150px;overflow: scroll">
    <img src="../resources/image/a.png" height="202" width="308"/>
</div>


</body>
</html>

十九、相對定位的使用及練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相對定位使用</title>
  <style>
    /*相對定位：仍然在標準文件流中，原來的位置會被保留
    position：relative
    top,bottom,left,right:
      在相對定位情況下，和元素的型別距離：
      比如top:-20px就會是：在自身位置的基礎上，和螢幕上方的距離減少20px
    */
    body{
      padding: 20px;
    }
    div{
      padding: 5px;
      margin: 5px;
    }
    #father{
      border: black 1px solid;
    }
    #f1{
      background: rebeccapurple;
      position: relative;
      top: -15px;
    }
    #f2{
      background: #cb1e00;
      position: relative;
      right: -15px;
    }
    #f3{
      background: #FFFB7D;
      position: relative;
      bottom: -15px;
    }
  </style>
</head>
<body>
<div id="father">
  <div id="f1">第一個盒子</div>
  <div id="f2">第二個盒子</div>
  <div id="f3">第三個盒子</div>
</div>

</body>
</html>

二十、絕對定位和固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>絕對定位和固定定位</title>
  <style>
    /*絕對定位：繼續xxx定位，上下左右
    1. 沒有父級元素定位的前提下，相對於瀏覽器定位
    2. 假設父級元素存在定位我們通常相對於父級元素進行偏移
    3. 在父級元素範圍內移動
    4. 絕對定位後，元素就不在標準文件流中


    固定定位：fixed：直接相對於瀏覽器的
    */
    #juedui{
        width: 300px;
        height: 300px;
        background: #FFFB7D;
        position: absolute;
        bottom: 0px;
        right: 0px;
    }
    #guding{
        width: 100px;
        height: 100px;
        background: #cb1e00;
        position: fixed;
        bottom: 0px;
        right: 0px;
    }
    #father{
        height: 2000px;
    }
  </style>
</head>
<body>
<div id="father">
    <div id="juedui">絕對定位</div>
    <div id="guding">固定定位</div>
</div>
</body>
</html>

二十一、z-index及透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Z-index</title>
  <style>
    /*zindex屬性相當於圖層屬性，zindex高，哪張圖在最上面，反之就在下面*/
    /*opacity:背景透明度*/
    #t1,#t2{
      width: 300px;
      height: 300px;
    }
    #t1{
      background: #FFFB7D;
      position: relative;
      z-index: 0;
    }
    #t2{
      background: #cb1e00;
      position: relative;
      top: -300px;
      opacity: 0.5;
      z-index: 1;
    }
  </style>
</head>
<body>
<div id="father">
  <div id="t1">圖1</div>
  <div id="t2">圖2</div>
</div>
</body>
</html>