前端開發技術之css樣式學習筆記分享

阿新 • • 發佈：2021-09-16

概述

前端培訓開發中將前端結構化，html 是文件結構、css 是設定樣式（美化頁面）、js是邏輯結構

重點是 "選擇器" 和 "盒子模型"

發展史

CSS1.0CSS2.0：DIV（塊）+CSS，HTML與CSS結構分離的思想，網頁變得簡單，SEOCSS2.1：浮動，定位CSS3.0：圓角、陰影、(動畫…瀏覽器相容性~)

快速入門

1. 位置

行內關聯：就是在標籤內部設定樣式，在標籤內寫style <div id ="env" style ="color:red;"></div>
內部關聯和 html 在一個檔案中，即寫入head 裡面<html>
<head>
<style> 樣式內容 </style>
</head>
<body></body>
</html>

外部關聯就是將css 專門寫成一個單獨的檔案<link rel="stylesheet" href="css/style.css" />

2. 匯入方式

主要是外部關聯的方式，如何匯入

使用 link 關鍵字，在href 加入地址
使用improt <style>@import url("css/style.css");</style>

3. 優先順序

就近原則，誰離的近誰的樣式就生效 ---行內樣式離的最近

基本選擇器

1. 標籤選擇器 --標籤名

<style>
 body{
      //具體的樣式
    }
 div{
  //具體的樣式
}
</style>

2. 類選擇器 -- ".類名"

<style>
 .classname{
      //具體的樣式
    }
</style>

3. Id 選擇器 --“#id名”

<style>
 #env{
      //具體的樣式
    }
</style>

4. 優先順序關係

id 選擇器>類選擇器>標籤選擇器

高階選擇器

1. 層次選擇器

可以依據 html 文件數的層次來進行樣式的選擇設定

後代選擇器

<style>
  div p{
      //div 標籤下的 p 標籤樣式
    }
</style>

子代選擇器

<style>
  div>p{
      //div 標籤下的第一個 p 標籤樣式
    }
</style>

相鄰/兄弟選擇器--/相鄰兄弟選擇器：只選擇一個，相鄰（向下）/

<style>
  .classname+p{
      //classsname 後一個標籤---非子標籤
    }
</style>

通用選擇器

<style>
  .classname-p{
      //classsname 後所有的標籤
    }
</style>

2. 偽類結構選擇器

概述：什麼是偽類，就是有邏輯的，並沒有直接指明是那裡變化，就是依據邏輯位置來判斷
使用：標籤、類、id 後使用：

<style>
       ul li:first-child{/*ul的第一個子元素*/
           background: aqua;
      }
       ul li:last-child{/*ul的最後一個子元素*/
           background: blue;
      }
       /*選中p1：定位到父元素，選擇當前的第一個元素
          選擇當前p元素 的父級元素，選中父級元素的第一個，
⚠️⚠️⚠️注意：並且是當前元素才生效！*/
       p:nth-child(1){
           background: orange;
      }
       p:nth-of-type(2){/*選中父元素下的，第2個p元素*/
           background: red;
      }
       a:hover{
           color: green;
      }
   </style>

3. 屬性選擇器 --常用

屬性名=屬性值（正則）

= 表示絕對等於
*=表示包含
^=表示以...開頭
$=表示以...結尾
存在id屬性的元素a[]{}

<style>
     a[id]{
            background: yellow;
        }
a[id=first]{/*id=first的元素*/
    background: green;
}
a[class*="links"]{/*class 中有links的元素*/
    background: bisque;
}
a[href^=http]{/*選中href中以http開頭的元素*/
    background: aquamarine;
}
a[href$=pdf]{/*選中href中以http開頭的元素*/
    background: aquamarine;
}
</style>

文字美化

font-family：字型

font-size：字型大小

font-weight：字型粗細

顏色–>color   rgb   rgba

文字對齊方式–>text-align：center

首行縮排–>text-indent：2em

行高–>line-height：300px；

下劃線–>text-decoration
> text-decoration:underline/*下劃線*/
> text-decoration:line-through/*中劃線*/
> text-decoration:overline/*上劃線*/
> text-decoration:none/*超連結去下劃線*/

圖片和文字 中心線在一行 img,span{vetical-align:middle}

背景：background

漸變背景網址：https://www.grabient.com

盒子模型

margin --外邊距離：就是容器（元素）邊框離父容器的邊距位置可以巧妙的使用外邊框，使容器居中
padding -- 內邊距：邊框向內一圈的距離
border --邊框：就是容器的框框，引數 border：粗細樣式顏色border:1px solid red;邊框 style 引數：none定義無邊框。hidden與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。dotted定義點狀邊框。在大多數瀏覽器中呈現為實線。dashed定義虛線。在大多數瀏覽器中呈現為實線。solid定義實線。double定義雙線。雙線的寬度等於 border-width 的值。groove定義 3D 凹槽邊框。其效果取決於 border-color 的值。ridge定義 3D 壟狀邊框。其效果取決於 border-color 的值。inset定義 3D inset 邊框。其效果取決於 border-color 的值。outset定義 3D outset 邊框。其效果取決於 border-color 的值。inherit規定應該從父元素繼承邊框樣式。
盒子的大小計算：margin+border+padding+內容，不然會有對不齊--或者windows 窗口出現滑塊

浮動

1. 標準文件流

文件流指的是元素排版佈局過程中，元素會預設自動從左往右，從上往下的流式排列方式。並最終窗體自上而下分成一行行，並在每行中從左至右的順序排放元素。

標準文件流的兩種等級：

塊級元素 <div>\ <h>\ <li>

行級元素 <p>\ <span>

2. dipaly

引數block：塊元素inline行內元素inline-block是塊元素，但是可以內聯，在一行none消失
使用示例：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div塊元素</div>
<span>span行內元素</span>
</body>
</html>