前端知識之css樣式

時間 2019-12-04

標籤前端知識 css 樣式欄目 CSS 简体版

原文原文鏈接

前端之CSS樣式css

css介紹
- css是爲html標籤設置樣式的
- css由選擇器和聲明組成
  - 聲明包括屬性和屬性值
  - 聲明之間用分號；隔開
- css註釋
  - /註釋類容/
css的幾種引入方式
- 行內樣式不推薦使用
  - 直接在html標籤中style屬性中設置樣式，不推薦使用，不方便後續更改
  - ```
  <p style="color: red">Hello world.</p>
```
- 內部樣式
  - 嵌入式是將css樣式集中寫在網頁標籤標籤對中
  - ```
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          p {color: #0000cc}
      </style>
  </head>
```
- 外部樣式推薦使用
  - 就是將css樣式單獨寫在一個文件中，而後經過頁面引入便可，推薦使用
  - 引入方法
  - ```
  head>
      <meta charset="UTF-8">
      <title>Title</title>
      <link rel="stylesheet" href="路徑">
  </head>
```
css選擇器
- 基本選擇器
  - id選擇器 #d1 {color: red} id爲d1的顏色爲red
  - 標籤選擇器 div {color: red} 標籤是div的顏色爲red
  - 類選擇器 .c1 {color: red} class爲c1的顏色爲red
  - 通用選擇器 * {color：red} 全部標籤顏色都爲red，不推薦使用
- 組合選擇器
  - 後代選擇器 div p {color: red}div標籤內的p標籤顏色爲red
  - 兒子選擇器 div>p {color: red}div標籤的子級p標籤顏色爲red
  - 毗鄰選擇器 div+p div標籤同級標籤的下面p標籤
  - 弟弟選擇器 div~p div標籤同級標籤下的全部p標籤
- 屬性選擇器
  - 根據標籤中屬性樣式 div[title]
    - div.p1 div且class爲p1的標籤
  - 根據標籤中屬性的具體值給定樣式 div[title="hello"]
- 分組和嵌套
  - 爲多個標籤給定相同的樣式 div,p {color: red} 標籤與標籤之間用逗號隔開
  - 基本選擇器之間能夠任意嵌套組合使用
- 不經常使用的選擇器
  - ```
  /*找到全部title屬性以hello開頭的元素*/
  [title^="hello"] {
    color: red;
  }
  
  /*找到全部title屬性以hello結尾的元素*/
  [title$="hello"] {
    color: yellow;
  }
  
  /*找到全部title屬性中包含（字符串包含）hello的元素*/
  [title*="hello"] {
    color: red;
  }
  
  /*找到全部title屬性(有多個值或值以空格分割)中有一個值爲hello的元素：*/
  [title~="hello"] {
    color: green;
  }
```
- 僞類選擇器
  - link 未訪問的連接，
    - ```
    a:link {
      color: #FF0000
    }
```
- visited 已訪問的連接
  - ```
  a:visited {
    color: #00FF00
  }
```
  - hover 鼠標移動到連接上才改變樣式
    - ```
    a:hover {
      color: #FF00FF
    }
```
- active 選的連接改變樣式
  - ```
  a:active {
    color: #0000FF
  }
```
  - input 輸入框獲取焦點時樣式
    - ```
    input:focus {
      outline: none;
      background-color: #eee;
    }
```
- 僞元素選擇器
  - first-letter 經常使用的給首字母設置特殊樣式
    - ```
    p:first-letter {
      font-size: 48px;
      color: red;
    }
```
- before 在內容前插入內容，該內容不可被選定
  - ```
  p:before {content: "*"; color:red}
```
  - after 在內容尾插入內容，
    - ```
    p:after {content: "#"; color:red}
```
- 注意:before 和after多用於清除浮動
- 選擇器優先級
  - 當選擇器相同時，誰最後加載聽誰的；
  - 選擇器不一樣時，
    - 特殊狀況下使用 !important 意思是不論優先級，必加載不推薦使用
      - p {color: yellow!important;}
css相關屬性
- width 屬性能夠爲元素設置寬度（塊級標籤才能設置寬度，而內聯標籤是由內容決定的）
- height 屬性設置高度
- 設置字體的屬性
  - font-family 能夠把多個字體名稱做爲一個回退系統
    - ```
    body {
      font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
    }
    /*當系統不支持第一個，就會顯示第二個字體，依次，都沒有則顯示系統默認字體*/
```
- font-size 字體大小
- font-weight 字的粗細
- 文本屬性
  - color 顏色
    - 直接輸入顏色名
    - 十六進制 #fffff紅藍綠
    - rgb格式 rgb（255，255，255）
  - text-align 對齊方式屬性值
    - left 左邊對齊默認
    - center 居中
    - jusify 倆端對齊
    - right 右邊對齊
  - text-decoration 屬性用來給文字添加特殊效果
    - none 默認。定義標準的文本
    - overline 定義文本上一條線
    - line-through 定義穿過文本的一條線
    - linherit 繼承父元素的text-decoration屬性
    - 經常使用：去掉a超連接中的默認的下劃線
      - a {text-decoration: none;}
  - 文本首行縮進
    - text-indent
- 背景屬性 background
  - 背景顏色 background-color
  - 背景圖片 background-image: url()
  - 背景重複 background-repeat
    - no-repeat 不重複
    - repeat-x x軸重複
    - repeat-y y軸重複
    - repeat 默認重複
  - background-position 背景位置
    - ```
    background-position: right bottom;
    background-position: 200px 200px;
```
- 背景屬性能夠簡寫：
  - ```
  background:#ffffff url('1.png') no-repeat right top;
```
  - 背景固定 backgound-attachment
    - fixed 固定
- 邊框 border 顏色，寬度，虛實，
  - border-style 風格
    - solid 實線
    - dashed 虛線
    - double 雙實線
    - none 無邊框
    - dotted 點狀虛線
  - 一般寬度，風格，顏色，簡寫在一塊兒
    - ```
    .c2 {border: 2px solid red;}
```
- border-radius 實現畫圓,能夠調節其度數，
  - ```
  border-radius: 50%;
```
- display 屬性用來控制html元素的顯示效果的
  - none 元素存在，可是不在瀏覽器顯示，且不佔空間
    - display中的none和visibility中的hidden區別
      - none，隱藏且不佔空間
      - hidden ，隱藏可是佔位置，
  - inline 行內元素，運用將塊級元素的塊特色取消
  - block 將內聯元素變爲塊級元素
  - inline-block 使元素同時具備行內元素和塊級元素的特色
- css盒子模型
  - 有圖
  - margin（外邊距）用於控制元素與元素之間的距離，最基本的就是控制元素和空間之間的間隔，從視覺角度達到相互隔開的目的
    - ```
    margin: 0 auto;
    /*順序爲順時針設置，上右下左，auto爲系統自動調節，*/
    padding：5px 10px 15px 20px
```
  - 提供一個，用於四邊；html
  - 提供兩個，第一個用於上－下，第二個用於左－右；前端
  - 若是提供三個，第一個用於上，第二個用於左－右，第三個用於下；瀏覽器
  - 提供四個參數值，將按上－右－下－左的順序做用於四邊；
- border(邊框) 圍繞在內邊距和內容外的邊距
- padding（內填充）用於控制文本內容和邊框之間的距離
- Content（內容）盒子的內容，顯示文本和圖像
- 浮動float
  - 特色：浮動元素會生成一個塊級塊，自己不屬於何種元素
    - 浮動的框能夠向左向右移動，直到碰到邊緣或碰到包含框或另外一個浮動框的邊框
    - 因爲浮動框處於z軸上，它在頁面上的空間能夠被其餘元素所佔
  - 取值：
    - left，right，none是默認值，不浮動
  - 解決浮動的反作用使用clear
    - 讓其頁面位置不能被其餘元素佔用
    - 取值
      - left 左邊不能浮動
      - right 右邊不能浮動
      - both 倆邊都不能浮動
    - 解決實例
      - 不推薦使用
        
        能夠用在浮動元素，以後的元素類添加屬性clear：both使其不佔用浮動元素的頁面空間
        
        也能夠在後續元素前增長一個標籤，標籤中放clear：both，使其不佔用浮動元素的頁面空間
      - 推薦使用
        
        在祖先類（不能是body）元素中
        
        .clearfix:after { content: ''; display: block; clear:both }
- overflow 溢出屬性
  - hidden 內容會被修剪，且其他內容不可見
  - scroll 內容被修剪，可是瀏覽器會滾動以便顯示其他內容
  - atuo 內容被修剪，瀏覽器自行處理
- 定位 position
  - 對屬性位置進行移動
  - relative 相對定位，相對於原來的位置進行移動
  - abslute 絕對定位，根據本身祖先的元素進行定位
  - fixed 固定，對象脫離頁面，固定死位置，不會隨着滾動而變化
- z-index 設置z軸方向的層疊順序
  - z-index：999
- opacity 透明度
  - background-color: rgba(0,0,0,0.3) 設置背景顏色的透明度
  - opacity: 0.3 設置全部的透明度
  - 對於元素的取值爲0~1之間，0爲徹底透明，1爲徹底不透明