css概述

層疊樣式表（cascading style sheet）

層疊是指==將多個樣式施加在一個元素（標簽）上==

作用：

• 美化頁面
• 將html代碼與樣式代碼分離

好處：

• 功能強大
• 分離代碼，降低耦合性，提高重用性，提高維護性，提高開發效率

使用方法

1、在HTML標簽的style屬性書寫，這個屬性的值，是由一些小的鍵值對構成

<div style="color:red; font-size:100px;">12345</div>

• 缺點：
  • 有可能出現代碼冗余
  • 標簽屬性多，耦合高，不便于維護

2、在頁面head標簽中添加style標簽

<style>
    div {
        color:yellow;
        font-size:500px;
    }
</style>

3、在head標簽中添加link標簽引入css檔案

<link rel="stylesheet" href="https://www.cnblogs.com/am0304/archive/2022/07/17/css檔案地址" />

使用時機：

• 方式一：由于樣式設定是寫在標簽內的，它只能給這個一個標簽施加樣式，當我們只需要給一個標簽施加樣式的時候，就可以選擇使用第一種方式
• 方式二：由于樣式是寫在style 標簽，在style標簽里面寫的是選擇器，所以它可以給多個標簽施加相同的樣式當我們需要給一個頁面中的多個標簽施加相同的樣式的時候，我們就可以選擇使用第二種
• 方式三：由于該方式，是引入了外來的css檔案，說明引入css檔案，就可以使用該樣式了，當我們需要給多個頁面中的多個標簽施加相同的樣式的時候，我們就可以選擇使用第三種
• ==推薦使用第二種和第三種==

盒子模型

對頁面進行布局（div + css）

padding：設定內補丁

• padding：不同引數代表位置
  • 一個引數：上下左右
  • 兩個引數：上下 左右
  • 三個引數：上 左右 下
  • 四個引數：上 右 下 左

默認情況，如果我們設定內補丁，會影響到整個盒子的大小，那我們需要設定一個屬性box-sizing: border-box

margin：設定外補丁

• margin：不同引數代表位置
  • 一個引數：上下左右
  • 兩個引數：上下 左右
  • 三個引數：上 左右 下
  • 四個引數：上 右 下 左

float浮動

會打破默認的流式布局，一般建議，如果一個元素進行了浮動，其余的和該元素同級別的也進行浮動，

• left：從左浮動
• right：從右浮動

position定位

• 靜態定位（static）：默認值，沒有定位，元素不會受到top，bottom，left，right影響
• 固定定位（fixed）：元素相對于瀏覽器視窗是固定位置
• 相對定位（relative）：相對定位元素的定位是相對其原來位置的偏移量
• 絕對定位（absolute）：絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的相對于父元素也需要使用絕對定位
• z-index：顯示優先級，數值越大，越靠上
• opacity：透明度，0完全透明，1完全不透明

屬性

尺寸

支持百分比或者像素

• width：寬度
• height：高度
• display：可見性

文本（字體）

• color：字體顏色
• font-size：字體大小
• font-family：字體樣式
• font-weight：字體粗細
• font-style：傾斜（italic）
• text-align：水平對齊方式
• line-height：行高，文字垂直位置的處理
• text-shadow：x軸偏移量 y軸的偏移量 羽化效果 陰影顏色：文本陰影
• text-decoration：文本下劃線

背景

• background-color：背景顏色
• background-image：url（背景圖片）
• background-repeat：是否平鋪圖片（no-repeat、repeat-x、repeat-y）
• background-position：背景圖片位置（水平偏移量 垂直偏移量）
• backgroud-image：linear-gradient（to 方向，開始顏色，結束顏色）：漸變背景色
• box-shadow：x軸偏移量 y軸的偏移量 羽化效果 陰影顏色：盒子陰影
• background-size：背景圖片大小

邊框

• border-left、right、top、bottom：寬度 顏色 樣式
• border-color：顏色
• border-width：粗細
• border-style：樣式
• border-radius：邊框圓角
• border-collapse：邊框間距合并
• border-spacing：屬性指定相鄰單元格邊框之間的距離
• outline：點擊輪廓
• box-sizing：border-box：設定相鄰邊框覆寫

選擇器

可以幫助我們快速定位到某一個或者某幾個標簽的，就稱為選擇器

格式：

選擇器 {
    小鍵值對；
    ... ...
 }

元素選擇器

標簽名{
    樣式屬性
    key:value;
}

ID選擇器

#ID{
    樣式屬性
    key:value;
}

類選擇器

.類名{
    樣式屬性
    key:value;
}

優先級：id選擇器 > 類選擇器 > 元素選擇器

組合選擇器

選擇器,選擇器,選擇器{
    樣式屬性
    key:value;
}

后代選擇器

父標簽 后代標簽 {
  樣式屬性
  key:value;
}

子元素選擇器

父標簽>子標簽 {
  樣式屬性
  key:value;
}

兄弟選擇器

/*同等級的，標簽1后方的*/
標簽1~標簽2{
   樣式屬性
   key:value; 
}

相鄰選擇器

/*同等級的，標簽1后方的第一個標簽*/
標簽1+標簽2{
  樣式屬性
  key:value;
}

偽類選擇器

標簽:link{
    標簽未被訪問前的樣式屬性
    key:value;
}
標簽:hover{
    滑鼠懸停的標簽樣式屬性
    key:value;
}
標簽:visited{
    標簽已被訪問后的樣式屬性
    key:value;
}
標簽:active{
    滑鼠點擊標簽未釋放的樣式屬性
    key:value;
}
標簽:last-child{
    最后一個該標簽的子標簽樣式屬性
    key:value;
}
標簽:first-child{
    第一個該標簽的子標簽樣式屬性
    key:value;
}
標簽:nth-child(n){
    該標簽的父標簽的第n個該類子標簽的樣式屬性
    key:value;
}

屬性選擇器

標簽[key='value']{
    樣式屬性
    key:value; 
}
標簽[key*='a']{
    屬性key的值包含a的標簽的樣式屬性
    key:value; 
}
標簽[key^='a']{
    屬性key的值以a開頭的標簽的樣式屬性
    key:value; 
}
標簽[key$='a']{
    屬性key的值以a結尾的標簽的樣式屬性
    key:value; 
}
標簽[key~='hello']{
    屬性key的值包含單詞hello的標簽的樣式屬性
    key:value; 
}

2D\3D轉換

2D

/*從其當前位置移動元素*/
transform: translate(橫向, 縱向);
/*旋轉一定的角度*/
transform:rotate(角度deg);
/*增大或減小元素大小*/
transform:scale(寬度增大倍數,高度增大倍數);

3D

/*元素繞其 X 軸旋轉給定角度*/
transform: rotateX(角度deg);
/*元素繞其 Y 軸旋轉給定角度*/
transform: rotateY(角度deg);
/*元素繞其 Z 軸旋轉給定角度*/
transform: rotateZ(角度deg);

影片

@keyframes 影片名
{
    from{開始樣式}
    to{結束樣式}
}
div{
    animation:影片名 時間;
}

影片屬性

• animation-name：規定 @keyframes 影片的名稱，
• animation-play-state：規定影片是運行還是暫停，
• animation-duration：定義需要多長時間才能完成影片
• animation-delay：規定影片開始的延遲時間
• animation-iteration-count：影片應運行的次數,infinite無限
• animation-direction：屬性指定是向前播放、向后播放還是交替播放影片
  • normal - 影片正常播放（向前），默認值
  • reverse - 影片以反方向播放（向后）
  • alternate - 影片先向前播放，然后向后
  • alternate-reverse - 影片先向后播放，然后向前
• animation-timing-function：規定影片的速度曲線

標籤：其他

上一篇：web 前端 基礎HTML知識點

下一篇：java XML標記語言