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(内容) - 盒子的内容,显示文本和图像

/*高度计算*/
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

results matching ""

    No results matching ""