鲁达 背景样式
1.背景属性缩写
Background: 背景色 背景图片 背景平铺方式 背景定位
例：body {
background-color:# EDEDED;
background-image:url(image);
background-repeat:no-repeat;
background-position:50% 30px;
}
缩写后：
body { background:#EDEDED url(image) no-repeat 50% 30px;}
尺寸样式
1.宽度
width : auto | length
例：
p { width:300px;} div { width:50%;}
2.高度
height : auto | length
例：
img { height:200px;}
div { height:100px;}
边框样式
1.边框线
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
例：div { width:300px; height:100px; border-style:solid; ｝
border-top-style 设置上边框线
border-bottom-style 设置下边框线
border-left-style 设置左边框线
border-right-style 设置右边框线
2.边框宽度
border-width : medium | thin | thick | length
例：
div { width:300px; height:100px; border-style:solid; border-width:1px; ｝
border-top-width 设置上边框宽度
border-bottom-width 设置下边框宽度
border-left-width 设置左边框宽度
border-right-width 设置右边框宽度
3.边框颜色
border-color : color
例：div {
width:300px;
height:100px;
border-style:solid;
border-width:1px;
border-color:#FF0000;
}
border-top-color 设置上边框颜色
border-bottom-color 设置下边框颜色
border-left-color 设置左边框颜色
border-right-color 设置右边框颜色
4.边框样式缩写
border : border-width || border-style || border-color
例：div {
width:300px;
height:100px;
border-style:solid;
border-width:1px;
border-color:#FF0000;
}
缩写后：div {
width:300px;
height:100px;
border:1px solid #FF0000;
}
外边距
margin : auto | length
例：div { width:300px; height:100px; margin:10px;}
div { width:300px; height:100px; margin:0 auto;}
margin-top 设置上边的外边距
margin-bottom 设置下边的外边距
margin-left设置左边的外边距
margin-right设置右边的外边距
缩写型式：
margin: 上边距 右边距 下边距 左边距
margin: 上下边距左右边距
margin: 上边距 左右边距 下边距
内边距
padding : length
例：
div { width:300px; height:100px; padding:10px;}
padding-top 设置上边的内边距
padding-bottom 设置下边的内边距
padding-left设置左边的内边距
padding-right设置右边的内边距
缩写型式：
padding: 上边距 右边距 下边距 左边距
padding : 上下边距左右边距
padding : 上边距 左右边距 下边距
列表样式
1.项目符号
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha |
katakana | katakana-iroha | lower-latin | upper-latin
例：
ul { list-style-type:disc;}/*实心圆*/
ul { list-style-type:circle;}/*空心圆*/
ul { list-style-type:square;}/*实心方块*/
ul { list-style-type:none;}/*不显示项目符号*/
ol { list-style-type:decimal;}/*阿拉伯数字*/
ol { list-style-type:lower-roman;}/*小写罗马数字*/
ol { list-style-type:upper-alpha;}/*大写英文字母*/
2.自定义项目符号
list-style-image : none | url ( url )
例：
ul {list-style-image:url(image)}
链接样式
1.链接没有被访问时的样式
a:link
例： a:link { color:#ff0000; }
2.链接被访问后的样式
a:visited
例： a:link { color:#0000ff; text-decoration:none; }
3.鼠标悬停在链接上的样式
a:hover
例： a:link { background-color:#ccc; }
4.鼠标点击链接时的样式
a:active
例：a:active { background-color:#ff0000;}