1、樣式 1.1 行內樣式 <h1 style="color:red;">行內樣式</h1> 1.2 內部樣式 CSS代碼寫在 <head> 的 <style> 標簽中 <style> h1{color: green; } </style> 1.3 外部樣式 <link rel="styleshee ...
1、樣式
1.1 行內樣式
<h1 style="color:red;">行內樣式</h1>
1.2 內部樣式
CSS代碼寫在 <head> 的 <style> 標簽中
<style>
h1{color: green; }
</style>
1.3 外部樣式
<link rel="stylesheet" href="css/style01.css" type="text/css"/>
<!--
外部樣式，引入使用link標簽，寫在head標簽中,是單標簽，但是rel屬性和href屬性是必須的，且rel="stylesheet"是固定的引入外部樣式才可以生效,href屬性指定外部文件的資源路徑，type="text/css"可以省略;
-->
1.4 CSS優先順序
- 就近原則;
2、選擇器
2.1 基本選擇器
2.1.1 標簽選擇器
<!--
選擇器，基本作用是用於定位網頁中的元素，進行樣式美化，選取的是一組元素，不是一定是單個；
標簽選擇器，語法：標簽名{聲明1：聲明2...}
-->/
h2{
color: #FF0000;
}
2.1.2 類選擇器
<!--類選擇器，語法：標簽的class屬性值{聲明1：聲明2...} -->
.author{
color: #00FF00;
}
2.1.3 id選擇器
<!-- id選擇器 語法：標簽的id屬性值{聲明1：聲明2...} -->
#conent{
color: #0000FF;
}
2.1.4 選擇器的優先順序
ID選擇器 > 類選擇器 > 標簽選擇器
2.2 高級選擇器
2.2.1 層次選擇器
| 選擇器 | 類型 |
|---|---|
| E F | 後代選擇器 |
| E>F | 子選擇器 |
| E~F | 通用兄弟選擇器 |
| E+F | 相鄰兄弟選擇器 |
2.2.2 結構偽類選擇器
| 結構偽類選擇器 | 功能描述 |
|---|---|
| E:first-child | 父元素的第一個子元素 |
| E:last-child | 父元素的最後一個子元素 |
| E F:nth-child(n) | 父元素的第nth的子元素(括弧裡面的n可以是1，2，3 even,odd) |
| E:first-of-tyope | 父元素指定類型的第一個子元素 |
| E:last-of-type | 父元素指定類型的最後一個子元素 |
| E F:nth-of-type(n) | 父元素指定類型的第nth的子元素 |
2.2.3 屬性選擇器
| 屬性選擇器 | 功能描述 |
|---|---|
| E[attr] | 選擇具有屬性attr的元素 |
| E[attr=val] | 選擇具有屬性attr的元素，且屬性值為val的元素 |
| E[attr^=val] | 選擇具有屬性attr的元素，且屬性值以val開頭的元素 |
| E[attr$=val] | 選擇具有屬性attr的元素，且屬性值以val結尾的元素 |
| E[attr*val] | 選擇具有屬性attr的元素，且屬性值中包含val的元素 |
3、美化網頁元素
3.1 dispaly 行內元素與塊元素的切換
| 屬性 | 說明 |
|---|---|
| display:block | 將元素顯示為塊元素，前後有換行符 |
| display:inline | 將元素顯示為內聯(行內)元素，前後沒有換行符 |
| display:inlineblock | 將元素顯示為行內塊元素 |
| display:none | 將元素隱藏 |
3.2 字體樣式
| 屬性 | 說明 |
|---|---|
| font-family | 設置字體類型(字體) |
| font-size | 設置字體大小 |
| font-style | 設置字體風格 |
| font-weight | 設置字體粗細 |
| font | 設置字體的所有屬性（字體風格→字體粗細→字體大小→字體類型） |
字體的粗細
| 值 | 說明 |
|---|---|
| normal | 預設值，定義標準的字體 |
| bold | 粗體字體 |
| bolder | 更粗體字體 |
| lighter | 更細體字體 |
| 100,200,300,400,500,600,700,800,900 | 定義由細到粗的字體400等於normal,700等於bold |
3.3 文本樣式
| 屬性 | 說明 |
|---|---|
| color | 文本顏色 |
| text-align | 元素水平對其方式 |
| text-indent | 首行文本的縮進 |
| line-heighr | 文本的行高 |
| text-decoration | 文本的裝飾 |
3.3.1 color
- RGB
- RGBA
3.3.2 text-align
元素水平對其方式
| 值 | 說明 |
|---|---|
| left | 把文本排列到左邊 |
| right | 把文本排列到右邊 |
| center | 把文本排列到中間 |
| justify | 實現兩端對齊文本效果 |
3.3.3 text-indent
- 首行縮進：text-indent：em或px；
3.3.4 line-heighr
- 行高：line-height：px；
3.3.5 text-decoration
| 值 | 說明 |
|---|---|
| none | 去除預設樣式 |
| underline | 下劃線 |
| overline | 上劃線 |
| line-through | 刪除線 |
3.3.6 vertical-align 垂直對其方式
常用圖片與文字垂直對其；
| 值 | 說明 |
|---|---|
| middle | 垂直居中 |
| top | 頂部 |
| bottom | 底部 |
<!-- 圖片與文字居中 -->
img,span{
vertical-align: middle;
}
3.4 文本陰影
<!-- text-shadow:顏色 x軸 y軸 陰影半徑 -->
text-shadow:color x-offset v-offset blur-radlus
3.5 超鏈接偽類
| 偽類名稱 | 說明 |
|---|---|
| a:link | 未點擊訪問時超鏈接樣式 |
| a:visited | 單擊訪問後超鏈接樣式 |
| a:hover | 滑鼠懸浮其上的超鏈接樣式 |
| a:avtive | 滑鼠單機未釋放的超鏈接樣式 |
- 設置偽類的順序：alink->a:visited->a:hover->a:active;
3.6 列表樣式
- list-style-type
- list-style-image
- list-style-position
- list-style
| 值 | 說明 |
|---|---|
| none | 清除預設樣式 |
| disc | 實心圓 |
| circle | 空心圓 |
| square | 實行正方形 |
| decimal | 數字 |
- list-style:none;常用於去除無序列表的小黑點
3.7 背景樣式
2.7.1 常見背景樣式
- 背景圖片，background-image
- 背景顏色，background-color
2.7.2 設置背景圖像
2.7.2.1 background-Image屬性
- background-image:url(圖片路徑);
2.7.3.2 background-repeat屬性
| 值 | 說明 |
|---|---|
| repeat | 沿水平和垂直兩個方向平鋪 |
| no-repeat | 不平鋪，即只顯示一次 |
| repeat-x | 只沿水平方向平鋪 |
| repeat-y | 只沿垂直方向平鋪 |
2.7.3.3 background-position屬性
| 值 | 說明 |
|---|---|
| Xpos Ypos | 單位px |
| X% Y% | 使用百分比 |
| X,Y方向關鍵詞 | left,center,right,top,center,bootom |
2.7.3.4 簡寫
- background: 背景顏色 背景圖像 背景定位 背景不重覆顯示；
2.7.4.4 background-size
| 值 | 說明 |
|---|---|
| auto | 保持原樣 |
| percentage | 百分比 |
| cover | 放大填充整個元素 |
| contain | 保持比例，縮小到正好可以放 |
3.8 CSS漸變樣式
- background-image:linear-gradient(position,color1 color2...) posotion:漸變方向(可以時任意角度，向上的0deg)
4、盒子模型
4.1 盒子模型元素
| 元素 | 說明 |
|---|---|
| margin | 外邊距 |
| border | 邊框 |
| padding | 內邊距 |
| height | 高 |
| width | 寬 |
4.2 邊框
4.2.1 border-color
邊框顏色；
| 屬性 | 說明 |
|---|---|
| border-top-color | 上邊框 |
| border-right-color | 右邊框 |
| border-bottom-color | 下邊框 |
| border-left-color | 左邊框 |
| border-color | 上 右 下 左 |
4.2.2 border-width
邊框粗細；
- border-width-上 右 下 左
4.2.3 border-style
邊框樣式；
- border-style-上 右 下 左
| 值 | 說明 |
|---|---|
| none | 清除預設樣式 |
| dotted | 點線 |
| dashed | 破折線 |
| double | 雙實線 |
4.2.4 簡寫
- border:粗細 樣式 顏色；
4.3 內外邊框
4.3.1 margin 外邊距
- margin-top
- margin-right
- margin-bottom
- margin-left
4.3.2 外邊距妙用
-
外邊距妙用，網頁居中對齊：margin:0px auto;
-
網頁居中對齊條件：1.塊元素 2.固定寬度
4.3.3 padding 內邊距
- padding-left
- padding-right
- padding-top
- padding-bottom
4.4 圓角邊框
- border-radius: 左上 右上 右下 左下
4.5 盒子陰影
-
box-shadow:shadowtype x-offset y-offset blur-radus color;
shadowtypetype:陰影類型(預設外陰影，inset內陰影)；
5、浮動
5.1 display屬性
| 值 | 說明 |
|---|---|
| block | 塊級元素的預設值，元素會被顯示為塊級元素，該元素前後會帶有換行符 |
| inline | 內聯元素的預設值。元素會被顯示為內聯元素，該元素前後沒有換行符 |
| inline-block | 行內塊元素，元素既有內聯元素的特性，又有塊元素的特性 |
| none | 元素隱藏 |
5.2 浮動
- float屬性
| 值 | 說明 |
|---|---|
| left | 元素向左浮動 |
| right | 元素向右浮動 |
| none | 不浮動 |
5.3 清除浮動
- clear屬性
| 值 | 說明 |
|---|---|
| left | 在左側不允許浮動元素 |
| right | 在右側不允許浮動元素 |
| both | 在左右兩側不允許浮動元素 |
| none | 允許 |
5.4 解決父級邊框塌陷的方法
5.4.1 添加空div,並清除兩邊浮動
5.4.2 設置父元素的高度(靈活性差)
5.4.3 添加overflow屬性(溢出處理)
| 屬性值 | 說明 |
|---|---|
| visible | 預設值，內容不會被修剪，會呈現在盒子之外 |
| hidden | 內容會被修剪，並且其餘內容是不可見的 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其他剩餘內容 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其他剩餘內容 |
5.4.4 父級添加偽類after
<div id="father" class="clear">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="圖書" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮動的盒子……</div>
</div>
.clear:after{
content: ''; <!--在clear類後面添加內容為空-->
display: block; <!--把添加的內容轉化為塊元素-->
clear: both; <!--清除這個元素兩邊的浮動-->
}
6、定位 posotion屬性
6.1 relative 相對定位
-
相對自身原來位置進行偏移，偏移設置：top、left、right、bottom;
-
相對定位的規律
1.設置相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置 ；
2.設置相對定位的盒子仍在標準文檔流中，它對父級盒子和相鄰的盒子都沒有任何影響 ；
3.設置相對定位的盒子原來的位置會被保留下來；
4.浮動後，相對定位，相對於盒子浮動後的位置，進行定位，盒子原始位置不會保留；
6.2 absolute 絕對定位
-
absolute屬性值：偏移設置： left、right、top、bottom；
-
絕對定位的規律
1.使用了絕對定位的元素以它最近的一個“已經定位”的“祖先元素” 為基準進行偏移 ；
2.如果沒有已經定位的祖先元素，會以瀏覽器視窗為基準進行定位 ；
3.絕對定位的元素從標準文檔流中脫離，這意味著它們對其他元素的定位不會造成影響 ；
4.元素位置發生偏移後，它原來的位置不會被保留下來；
5.一般定位都是相對定位和絕對定位配合使用，父級元素先相對定位，子元素再絕對定位；
-
使用場景：下拉菜單、焦點圖輪播、彈出數字氣泡、特別花邊等場景；
6.3 fixed 固定定位
-
偏移設置： left、right、top、bottom；
-
類似絕對定位，不過區別在於定位的基準不是祖先元素，而是瀏覽器視窗；
-
使用場景：在視窗左右兩邊的固定廣告、返回頂部圖標、吸頂導航欄等；
6.4 z-index屬性
-
調整元素定位時重疊層的上下位置 ；
1.z-index屬性值：整數，預設值為0 ；
2.設置了positon屬性時，z-index屬性可以設置各元素之間的重疊高低關係 ；
3.z-index值大的層位於其值小的層上方；
7、動畫
7.1 變形 transform
| 函數 | 說明 |
|---|---|
| translate() | 平移函數，基於X、Y坐標重新定位元素的位置 |
| scale() | 縮放函數，可以使任意元素對象尺寸發生變化 |
| rotate() | 旋轉函數，取值是一個度數值 |
| skew() | 傾斜函數，取值是一個度數值 |
translate（） 平移 px
| transform:translate（x,y） | 同時向x,y軸偏移 |
|---|---|
| transform:translateX（x） | 只向x軸偏移 |
| transform:translateY（y） | 只向y軸偏移 |
scale() 縮放 直接寫倍數
| transform:scale(縮放倍數) | 同時向x,y軸縮放，中心放大 |
|---|---|
| transform:scaleX(縮放倍數) | 只向x軸縮放，水平拉伸 |
| transform:scaleY(縮放倍數) | 只向y軸縮放，垂直拉伸 |
rotate() 旋轉 deg
| transform:rotate(旋轉角度deg) | 相對原來的位置順時針旋轉 |
|---|---|
| transform:rotateX(旋轉角度deg) | 相橫坐標順時針旋轉 |
| transform:rotateY(旋轉角度deg) | 相對原來的位置順時針旋轉 |
skew() 傾斜 deg
| transform:skew(傾斜調度deg) | |
|---|---|
| transform:skew(傾斜調度deg) | 只設置x軸的傾斜 |
| transform:skew(傾斜調度deg) | 只設置y軸的傾斜 |
7.2 過度 transition
transition:[transition-property transition-duration transition-timing-function transition-delay]
| transition-property | 過度或動態模擬css屬性 |
|---|---|
| transition-duration | 完成過度所需要時間 |
| transition-timing-function | 指定過度函數 |
| transition-delay | 過度開始出現的延遲時間 |
7.2.1 過渡屬性（ transition-property ）
-
定義轉換動畫的CSS屬性名稱
1.IDENT：指定的CSS屬性（width、height、background-color屬性等） ；
2.all：指定所有元素支持transition-property屬性的樣式，一般為了方便都會使用al；
7.2.2 過渡所需的時間（ transition-duration ）
定義轉換動畫的時間長度，即從設置舊屬性到換新屬性所花費的時間，單位為秒（s）；
7.2.3 過渡動畫函數（ transition-timing-function ）
指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，通過給過渡添加一個函數來指定動畫 的快慢方式；
- ease：速度由快到慢（預設值） ；
- linear：速度恆速（勻速運動） ；
- ease-in：速度越來越快（漸顯效果） ；
- ease-out：速度越來越慢（漸隱效果）；
- ease-in-out：速度先加速再減速（漸顯漸隱效果）；
7.2.4 過渡延遲時間（ transition-delay ）
指定一個動畫開始執行的時間，當改變元素屬性值後多長時間去執行過渡效果 ；
- 正值：元素過渡效果不會立即觸發，當過了設置的時間值後才會被觸發 ；
- 負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷 ；
- 0：預設值，元素過渡效果立即執行；
7.3 過度的觸發機制
1.偽類觸發
- ：hover 滑鼠懸停和划過時的顯示效果
- ：active 控制按鈕被點擊時的顯示效果
- ：focus 獲得聚焦對象的元素
- ：checked 選中
2.媒體查詢：通過@media屬性判斷設備的尺寸，方向等 JavaScript觸發：
3.用JavaScript腳本觸發
特殊用法
<!--
在進行偽類觸發後還可以對指定標簽操作；點擊li的時候還可以改變span的背景色；
<li><span>1</span> 雅詩蘭黛即時修護眼部精華霜15ml</li>
-->
ul li:hover>span {
background-color: aqua;
border-color: aqua;
}
7.3 動畫
8、項目經常使用的幾個屬性
項目新用屬性
| width: auto； | 寬度自適應,可以決絕視窗縮放展示錯亂(用在頭部導航欄等) |
|---|---|
| border: 0px none; | 剔除邊框(常用去掉input的邊框) |
| outline: none; | 去除選中文本框的樣式(常用去掉，點擊輸入框時的邊框變藍) |
| cursor: pointer; | 游標移入變成手(常用作按鈕的屬性) |
