html引入css
<style>
<!-- 此處寫css代碼 -->
</style>
<link type = "text/css" rel = "stylesheet" href = "../xx/xx.css"/>
樣式屬性:
line-height:行間距
font-style: 斜體等風(fēng)格
font-weight: 字體粗細(xì)
font-variant:段落設(shè)置為小型大寫字母字
font-size: 字體大小 (small or % or px em)
font-family: 字體
font-height:
// 以上的合寫方式
font:font-style font-variant font-weight font-size/line-height font-family
font-style font-variant font-weight :可選
font-size 必選
line-height 可選(如果有用/連接在font-size后面)
font-family 必選
left: 控制元素位置
top: 控制元素位置
right: 控制元素位置
bottom: 控制元素位置
padding-top:
padding-right:
padding-bottom:
padding-left:
padding: 內(nèi)邊距 上面的合寫
padding:20px 10px 20px 30px //上右下左
padding:20px // 上右下左
padding:20px 10px //上下20左右10
margin-top:
margin-right:
margin-bottom:
margin-left:
margin: 外邊距 上面的合寫
margin:20px 10px 20px 30px //上右下左
margin:20px // 上右下左
margin:20px 10px //上下20左右10
color:文本元素顏色
text-align:對(duì)齊方式
text-decoration:文本添加裝飾 上下刪除劃線等~(underline, line-through, overline, none)
list-style:控制list的樣式
letter-spacing:字間距
boder:加邊框
border-collapse: collapse; // table 表格邊框樣式
p
{
border:5px solid red;
}
boder-bottom:下劃線
background-color:背景色 (rgb (80%,40%,0) or #cc6600)
background-image:背景圖 (url(xxxx.gif))
background-repeat: 背景圖鋪蓋方式(no-repeat 不重復(fù)绪商,repeat-x x軸重復(fù) 捺弦,repeat-y y軸重復(fù),inherit 照父元素)
background:( 背景色 背景圖 和鋪蓋方式 合并 屬性 ( #cc6600 url(xxxx.gif) repeat-x))
background-position: 位置(top left)
position: 布局類型(static(流) 默認(rèn),absolute 絕對(duì)布局,fixed固定布局)
display: 結(jié)構(gòu) (table table-cell table-row等)
// 列表
list-style-type:列表li前的標(biāo)記;(disc默認(rèn)實(shí)心圓點(diǎn) circle空心圓點(diǎn) square square屬性提供一個(gè)方法添加蒋譬,none 沒(méi)有)
list-style-image:url(image/xx.png)
li {
<!-- list-style-type: none;-->
list-style-image:url(image/xx.png);
}
開(kāi)發(fā)商特定的css
過(guò)渡和變換屬性
html5 api和web應(yīng)用
請(qǐng)看 《Head First HTML5 Programming》