font
/*字体样式*/
h1 {font-family:"Times New Roman";} /*字体类型*/
h1 {font-size:40px;} /*字体大小*/
p.normal {font-weight:normal;} /*字体属性,属性值包括normal, bold等*/
p.normal {font-style:normal;} /*字体样式,包括normal, italic*/
text
/*文本格式*/
body {color:red;} /*文本颜色*/
/*text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸*/
h1 {text-align:center;} /*文本对齐方式,数值值包括center, left, right, justify*/
/*文本装饰,包括下划线,上划线,删除线等*/
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:none;}
/*文本转换*/
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
/*文本缩进属性是用来指定文本的第一行的缩进*/
p {text-indent:50px;}
background
/*background统一设置*/
body {background:#ffffff url('img_tree.png') no-repeat right top;}
/*background单独设置*/
background-attachment /*背景图像是否固定或者随着页面的其余部分滚动*/
background-color /*设置元素的背景颜色*/
background-image /*把图像设置为背景*/
background-position /*设置背景图像的起始位置*/
background-repeat /*设置背景图像是否及如何重复*/ no-repeat 表示图片不平铺(即是不重复)
边框border
/*边框一般用法*/
h1 { border: 5px solid red;} /*分别代表边框宽度,样式,颜色*/
/*边框分开写,分别代表边框宽度,样式,颜色*/
border-width
border-style
border-color
/*边框可以如上汇总一起写,也可以分开写*/
外边距margin
/*外边距是元素和其他元素之间的距离*/
/*外边距一般用法*/
margin:25px; /*全部为25px*/
margin:25px 50px; /*上下,左右*/
margin:25px 50px 75px; /*上,左右,下*/
margin:25px 50px 75px 100px; /*上,右,下,左*/
/*外边距单独设置*/
margin-top
margin-right
margin-bottom
margin-left
填充padding
/*元素边框与元素内容之间的空间*/
/*padding设置方式和margin之间的一样*/
padding:25px; /*一般设置*/
/*padding单独设置*/
padding-top
padding-right
padding-bottom
padding-left
盒子模型
/*上图说明*/
Margin(外边距) - 清除边框外的区域,外边距是透明的
Border(边框) - 围绕在内边距和内容外的边框
Padding(内边距) - 清除内容周围的区域,内边距是透明的
Content(内容) - 盒子的内容,显示文本和图像
/*高度计算*/
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距