標籤:圖片 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美化網頁元素