css3美化網頁元素

標籤：圖片   otto   水平對齊   字型   一個   關鍵詞   nta   路徑   從右至左   

<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,...)
 
經向漸層
圓形或橢圓形漸層，顏色不再沿著一條直線變化，從而從一個起點朝所有方向混合

 

css3美化網頁元素