码迷,mamicode.com
首页 > Web开发 > 详细

自己整理的一些简单的css样式

时间:2017-10-15 22:29:16      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:可见   背景颜色   文档   tab   点线   ima   隐藏   补丁   no-repeat   

字体:
字体颜色: color:red;
字体大小: font-size:50px;
字体加粗: font-weight:bold;
字体倾斜: font-style:italic;
字体:font-family:楷体;


文本:
文本加下划线:text-decoration:underline(下划线)/overline(上划线)/line-through(删除线)/none(无)
文本水平对齐:text-align:left/center/right/justfy(两端对齐)


背景:
背景颜色: background-color:yellow;
背景图片: background-image:url("图片路径");
背景平铺: background-repeat:repeat/no-repeat/repeat-x/repeat-y;
背景偏移: background-position:x偏移量 y偏移量
x方向:向左向右 左负右正
y方向: 向上向下 上负下正
复合属性:background:pink url() no-repeat 100px 200px
边框:
边框颜色: border-color:blue;
边框粗细: border-width:1px;
边框线型: border-style:solid(实线)/dashed(虚线)/dotted(点线)

复合属性: border:1px blue solid;
去掉边框: border:0px;
内边距: padding
内容与盒子之间的填充距离,内填充,内补丁
padding-left:左内填充
padding-right:
padding-top:
padding-bottom:
padding属性有一个特点:撑大元素 慎用
外边距: margin
盒子与盒子之间的填充距离,外填充,外补丁
margin-left:
margin-right:
margin-top:
margin-bottom:
盒子模型的三个属性:边框、内填充、外填充
一个盒子的实际宽度: width+左右内填充+左右边框
一个盒子的实际高度: height+上下内填充+上下边框


浮动:float
作用:改变块级元素自动换行的特点,使它不换行
块级:自动换行的标记 p li h1 div table option


行级:
float:left/right/none;
清除浮动:clear
不允许出现浮动
clear:left/right/both(两者、都)


列表:
列表类型: list-style-type:disc/square/circle/none
list-style-image:url("图片路径");


复合属性: list-style:none;
list-style:url("图片路径");


补充:
1. 可见与隐藏
display:block/none 不占位
visibility:visible/hidden 占位
2. 定位
position:absolute; 将对象从文档流中拖出来
top:与文档顶部之间的距离
left:与文档左边之间的距离

自己整理的一些简单的css样式

标签:可见   背景颜色   文档   tab   点线   ima   隐藏   补丁   no-repeat   

原文地址:http://www.cnblogs.com/wo7721/p/7674417.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!