CSS美化網頁元素

標籤：set   ack   填充   映像   百分比   die   圓形   中間   單擊   

<span>標籤 </span>
屬性名稱 含義 舉例
font-family 設定字型類型 font-family:"隸書"
font-size 設定字型大小 font-size：12px;
font-style 設定字型的風格 font-style:italic;
font-weight 設定字型粗細 font-weight：bold;
font 在一個聲明設定所有字型屬性 font：italicbold36px"宋體 "

font-style屬性
normal 正常
italic 傾斜（用的多）
oblique 斜體

font-weight屬性
值 說明
normal 預設值定義標準字型
bold 粗體字型
bolder 更粗字型
lighter 更細字型
100....900 定義由粗到細的字型400等同於normal,700等同於bold

font屬性
字型屬性的順序：字型風格---字型粗細--字型大小---字型類型
p span{
font:obiqer bold 12px"楷體"
}

文字屬性
屬性 含義 舉例
color 設定文本顏色 color#ooc;
text-align 設定元素水平對齊 text-align:right;
text-indent 設定首行文本縮排 text-indent:20px;
line-height 設定文本行高 line-height:25px;
text-ddecoration 蛇者文本裝飾 text-decoration:underline;

值 說明
left 把文本排列到左邊。預設值：由瀏覽器決定
right 把文本排類到右邊
center 把文本排類到中間
justify 實現左右對齊文字效果

首行縮排
text-indent：em或px
行高
line-height：px

文本裝飾
text-decortion屬性
值
none 預設值，定義標準文本
underline 設定文本底線
overline 設定文本上劃線
line-through 設定文本刪除線

垂直對齊
vertical屬性：middle、top、bottom 。
文本陰影
text-shadow：color x-offset y-offset blur-radius

字型屬性
字型屬性的順序：字型風格----字型粗細----字型大小---字型類型

偽類名稱 含義 執行個體
a：link 未單擊訪問時超連結樣式 a:link{color：#9ef5f9;}
a:visited 單擊訪問後超連結樣式 a：visited{color：#333；}
a:hover（記住） 滑鼠懸浮上的超連結樣式 a:hover{color:#ff7300;}
a:active 按一下滑鼠未釋放的超連結樣式 a:active{color:#999;}

偽類樣式
標籤名：偽類名{聲明；}
設定偽類的順序 ：a:link>a:visited>a:hover>a:active

list-style-type

none 無標記符號

disc 實心圓

circle 空心圓 list-style-type：none；

square 實心正方形

decimal 數字

 

list-style-image

list-sytle-position

list-style（記住）

背景顏色
background-color
transparent 透明色
背景映像
background-image:url(圖片路徑)
背景重複方式
background-repeat屬性
repeat：沿水平和垂直兩個方向平鋪
no-repeat：不平鋪，即只顯示一次
repeat-x:只沿水平方向平鋪
repeat-y:只沿垂直方向平鋪

背景定位
background-position屬性
值 含義
xpos 單位：px，Xpos表示水平位置，Ypos表示垂直位置
X% Y% 使用百分比表示背景位置
X Y方向關鍵字 水平方向關鍵字：left center right
垂直方向關鍵詞：top center bottom

背景尺寸 background-size
屬性值 描述
auto 預設值，使用背景圖片保持原樣
percentage 當使用百分值時，不是相對於背景的尺寸大小來計算的而相對元素寬度來計算的
cover 整個背景圖片放大填充了整個元素
contain 讓背景圖片保持本身的寬高比例，將背景圖片縮放到寬度或者高度正好適合所定義背景的地區

線性漸層
顏色沿著一條直線過渡；從左至右、從右至左、從上到下
文法
liner-gradient{position(漸層方向）color1,color2,...)

經向漸層
圓形或橢圓形漸層，顏色不再沿著一條直線變化，從而從一個起點朝所有方向混合

 

希望對你有所協助！！！

CSS美化網頁元素