常用的樣式屬性，背景及陰影
字體及文本屬性
邊距和填充
邊框屬性
串列屬性
背景屬性
背景的漸變
陰影屬性
字體及文本屬性
字體屬性 font：設定字體是所有樣式
font-family：設定字體型別
font-size：設定字體大小
font-weight：設定字體粗細
color：設定字體顏色
font：設定字體是所有樣式
font-family：設定字體型別
font-size：設定字體大小
font-weight：設定字體粗細
color：設定字體顏色
font-family 和 font-size都是font的子屬性，一般常用字體屬性的縮寫形式，如： font:bold 12px 宋體 ;注意三個屬性的順序依次為字體粗細，大小，樣式
文本屬性 line-height：設定行高
常用屬性值：3px,8px，設定 line-height 與 heigh值一直時，樣式為垂直中
text-align：設定對齊方式，
常用屬性值：left,right，center
letter-spacing：設定字符間距
常用屬性值：3px,8px
text-decoration：設定文本修飾
常用屬性值：none，underline，line-through
line-height：設定行高
常用屬性值：3px,8px，設定 line-height 與 heigh值一直時，樣式為垂直中
text-align：設定對齊方式，
常用屬性值：left,right，center
letter-spacing：設定字符間距
常用屬性值：3px,8px
text-decoration：設定文本修飾
常用屬性值：none，underline，line-through
邊距和填充
邊距：頁面中元素與元素直接的距離 margin：
設定一個值：上、下、左、右邊距
設定兩個值：上下，左右邊距
設定三個值：上，左右，下邊距
設定四個值，上，右，下，左順序分別對應邊距
margin-bottom：下邊距
margin-left：左邊距
margin-right：右邊距
margin-top：上邊距
margin: 0 auto；局中
margin：
設定一個值：上、下、左、右邊距
設定兩個值：上下，左右邊距
設定三個值：上，左右，下邊距
設定四個值，上，右，下，左順序分別對應邊距
margin-bottom：下邊距
margin-left：左邊距
margin-right：右邊距
margin-top：上邊距
margin: 0 auto；局中
填充：元素內容與邊框之間的距離 padding：
設定一個值：上、下、左、右邊距
設定兩個值：上下，左右邊距
設定三個值：上，左右，下邊距
設定四個值，上，右，下，左順序分別對應邊距
padding-bottom：下邊距
padding-left：左邊距
padding-right：右邊距
padding-top：上邊距
padding: 0 auto；局中
padding：
設定一個值：上、下、左、右邊距
設定兩個值：上下，左右邊距
設定三個值：上，左右，下邊距
設定四個值，上，右，下，左順序分別對應邊距
padding-bottom：下邊距
padding-left：左邊距
padding-right：右邊距
padding-top：上邊距
padding: 0 auto；局中
邊框屬性
border屬性 border-style：邊框樣式
常用屬性值：none，soild，dashed
border-width：邊框寬度
常用屬性值：1px ，5px
border-color：邊框顏色
常用屬性值：red，black
border：符合屬性，用于設定邊框寬度，樣式，顏色
常用屬性值：border:1px solid red ;
也可單獨設定某個方向的值：
border-bottom：下邊框
border-left：左邊框
border-right：右邊框
border-top：上邊框
border-style：邊框樣式
常用屬性值：none，soild，dashed
border-width：邊框寬度
常用屬性值：1px ，5px
border-color：邊框顏色
常用屬性值：red，black
border：符合屬性，用于設定邊框寬度，樣式，顏色
常用屬性值：border:1px solid red ;
也可單獨設定某個方向的值：
border-bottom：下邊框
border-left：左邊框
border-right：右邊框
border-top：上邊框
border-radius屬性：圓角邊框（ 半徑像素越大，圓角越明顯） border-radius：
設定一個引數：四個角
設定兩個引數：引數1：左上和右下角 ，引數2：右上和左下角
設定三個引數：引數1：左上角 ，引數2：左下和右上角，引數3：右下角
設定四個引數：順序依次為：左上，右上，右下，左下
border-radius：
設定一個引數：四個角
設定兩個引數：引數1：左上和右下角 ，引數2：右上和左下角
設定三個引數：引數1：左上角 ，引數2：左下和右上角，引數3：右下角
設定四個引數：順序依次為：左上，右上，右下，左下
串列屬性
list-style-image：圖片作為串列項的符號，其值為物件對應的url
list-style-type：設定串列項的符號
常用屬性值：none（無），disc（實心圓），circle（空心圓） ，square（實心方塊）
list-style-position：符號在串列項的位置
常用屬性：inside（內），outside（外）
list-style：符合屬性，順序為：符號，位置，圖片符號
list-style:circle inside url() ;
list-style-image：圖片作為串列項的符號，其值為物件對應的url
list-style-type：設定串列項的符號
常用屬性值：none（無），disc（實心圓），circle（空心圓） ，square（實心方塊）
list-style-position：符號在串列項的位置
常用屬性：inside（內），outside（外）
list-style：符合屬性，順序為：符號，位置，圖片符號
list-style:circle inside url() ;
背景屬性
background：符合屬性
background-image：背景圖片
常用屬性值：background-image:url(圖片名稱) ;
background-repeat：背景圖片重復方式
常用屬性值：repeat：水平和垂直反向平鋪
no-repeat：不平鋪
repeat-x：只在水平方向上平鋪
repeat-y：只在水垂直方向上平鋪
background-position：背景圖片位置
常用屬性值：關鍵字：水平方向：left，center，right
垂直方向：top，center，bottom
百分比：水平方向：0%(左) 50%(中) 100%(右)
垂直方向：0%(上) 50%(中) 100%(下)
像素值： 水平方向：正數向右偏移，負數向左偏移
垂直方向：正數向下偏移，負數向上偏移
background-size：背景圖片大小
background-color：背景圖片顏色
background：符合屬性
background-image：背景圖片
常用屬性值：background-image:url(圖片名稱) ;
background-repeat：背景圖片重復方式
常用屬性值：repeat：水平和垂直反向平鋪
no-repeat：不平鋪
repeat-x：只在水平方向上平鋪
repeat-y：只在水垂直方向上平鋪
background-position：背景圖片位置
常用屬性值：關鍵字：水平方向：left，center，right
垂直方向：top，center，bottom
百分比：水平方向：0%(左) 50%(中) 100%(右)
垂直方向：0%(上) 50%(中) 100%(下)
像素值： 水平方向：正數向右偏移，負數向左偏移
垂直方向：正數向下偏移，負數向上偏移
background-size：背景圖片大小
background-color：背景圖片顏色
背景的漸變
線向漸變 background: linear-gradient(起點位置或方向，起始顏色，（過渡顏色），終止顏色);
向右，顏色紅色過渡到白色在過渡到黑色：
background: linear-gradient(to right,red,white,black);
background: linear-gradient(起點位置或方向，起始顏色，（過渡顏色），終止顏色);
向右，顏色紅色過渡到白色在過渡到黑色：
background: linear-gradient(to right,red,white,black);
徑向漸變 background: radial-gradient(形狀，起點位置，起始顏色，（過渡顏色），終止顏色);
圓形漸變，以中心點為圓心默認大小，顏色紅色過渡到白色在過渡到黑色：
background: radial-gradient(circle at center ,red,white,black)
background: radial-gradient(形狀，起點位置，起始顏色，（過渡顏色），終止顏色);
圓形漸變，以中心點為圓心默認大小，顏色紅色過渡到白色在過渡到黑色：
background: radial-gradient(circle at center ,red,white,black)
陰影屬性
文字陰影 text-shadow: h-shadow v-shadow blur color;
h-shadow：必須存在：陰影的水平距離
v-shadow：必須存在：陰影的垂直距離
blur：可有可無：陰影的模糊半徑
color：可有可無：陰影的顏色
text-shadow: h-shadow v-shadow blur color;
h-shadow：必須存在：陰影的水平距離
v-shadow：必須存在：陰影的垂直距離
blur：可有可無：陰影的模糊半徑
color：可有可無：陰影的顏色
盒子陰影 text-shadow: h-shadow v-shadow blur spread color;
h-shadow：必須存在：陰影的水平距離
v-shadow：必須存在：陰影的垂直距離
blur：可有可無：陰影的模糊半徑
spread：可有可無：陰影的大小
color：可有可無：陰影的顏色
text-shadow: h-shadow v-shadow blur spread color;
h-shadow：必須存在：陰影的水平距離
v-shadow：必須存在：陰影的垂直距離
blur：可有可無：陰影的模糊半徑
spread：可有可無：陰影的大小
color：可有可無：陰影的顏色
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/247694.html
標籤：其他