css样式表----------样式属性(背景与前景、边界和边框、列表与方块、格式与布局)
2015-01-25 21:04
746 查看
一、背景与前景
(1)、背景
background-attachment:scroll;/*背景随字体滚动*/
(2)、字体
font-family:"新宋体";/*字体。常用微软雅黑,宋体*/
font-size:12px;/*字体大小,常用像素12px.14px(网站常用12.14),18px,还可以用“em”,"2.5em"即:默认字体的2.5倍,还可以用百分数*/
font-weight:bold;/*bold是加粗。normal是正常*/
font-style:italic;/*倾斜,normal是不倾斜*/
color:#03c:/*颜色*/
text-decoration:underline;/*下划线,overline是上划线,line-through是删除线,none是去掉下划线*/
text-align:center;/*水平 居中对齐。left是左对齐。right是右对齐*/
vertical-align:middle;/*垂直 居中对齐,top是顶部对齐,bottom是底部对齐。一般设置行高后使用,div垂直居中 要把行高拉开能表现出来*/
text-indent:28px;/*首行缩进量*/
line-height:24px/*行高,一般为1.5到2倍字体大小*/
二、边界和边框
*注:四个边框的顺序按顺时针方向:上,右,下,左。
border(表格边框)、样式等margin(表外间距)、padding(内容与单元格间距)
(1)、边框
(2)、边距
三、列表与方块
四、格式与布局
小技巧:
(1)、超链接变色:
(2)、DIV居中
(1)、背景
line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先。)*/ background-image:url(路径); /*设置背景图片(默认为平铺。)*/ background-repeat:no-repeat/repeat-x/repeat-y;no-repeat /*不平铺 repeat-x 橫向平铺 repeat-y 纵向平铺 */ background-position:center; /*背景图片居中 right top背景图片放到右上角*/设置背景图位置时,repeat必须为“no-repeat”*/ background-position:left 100px top 100px;/*离左边100px,离上边100px(可以为负值)*/ background-attachment:fixed;/*背景是固定的,不随字体滚动*/
background-attachment:scroll;/*背景随字体滚动*/
(2)、字体
font-family:"新宋体";/*字体。常用微软雅黑,宋体*/
font-size:12px;/*字体大小,常用像素12px.14px(网站常用12.14),18px,还可以用“em”,"2.5em"即:默认字体的2.5倍,还可以用百分数*/
font-weight:bold;/*bold是加粗。normal是正常*/
font-style:italic;/*倾斜,normal是不倾斜*/
color:#03c:/*颜色*/
text-decoration:underline;/*下划线,overline是上划线,line-through是删除线,none是去掉下划线*/
text-align:center;/*水平 居中对齐。left是左对齐。right是右对齐*/
vertical-align:middle;/*垂直 居中对齐,top是顶部对齐,bottom是底部对齐。一般设置行高后使用,div垂直居中 要把行高拉开能表现出来*/
text-indent:28px;/*首行缩进量*/
line-height:24px/*行高,一般为1.5到2倍字体大小*/
二、边界和边框
*注:四个边框的顺序按顺时针方向:上,右,下,左。
border(表格边框)、样式等margin(表外间距)、padding(内容与单元格间距)
(1)、边框
/*边框设置*/ border:5px solid blue;(四边框、5像素宽、实线、蓝色)相当于下面三行红的。 border-width:5px; border-style:solid; border-color:blue; border-top:5px solid blue; border-bottom:5px solid blue; border-left:5px solid blue; border-right:5px solid blue;
(2)、边距
/*四边外边框之间的距离*/ margin:10px; margin-top:10px; margin:20px 0px 20px 0px; /*内容与边框之间的距离*/ padding:10px; padding-top:10px; padding:20px 0 20px 0px;
三、列表与方块
width、height、(top、bottom、left、right) 只有在绝对坐标情况下才有用 list-style:none; /*取消序号*/ list-style:circle; /*序号变为圆圈,样式相当于无序*/ list-style-image:url(); /*图片做序*/ list-style-position:outside;/*序号在内容外*/ list-style-position:inside; /*序号跟内容在一起*/
四、格式与布局
position:fixed; /*锁定位置*/ position:absolute; /*绝对 1、外层没有position:absolute(或relative),那么div相对于浏览器定位 2、如果有,那么div相对于外层边框定位。*/ position:relative; /*相对默认位置的移动*/ float:left; /*左浮动*/ float:right; /*右浮动*/ <div style="clear:both"></div> /*截断流*/ overflow:hidden; /*超出范围时隐藏; soroll,auto超出范围时出滚动条*/ display:none; /*none,不显示;inline-block,显示为块,不自动换行,宽高可设; block,显示为块,自动换行;inline,效果同span标签,不自动换行,宽高不可设*/ visibility:hidden; /*可视性。hidden,隐藏但是占空间;visible,显示。*/
小技巧:
(1)、超链接变色:
a:hover { color:red; }
(2)、DIV居中
如何让一个DIV居中对齐? 第一步:设置外层的DIV的text-align:center; 第二步:设置里层的DIV的margin:auto 以上两个DIV都不要设置float.
相关文章推荐
- Css样式表【边界边框】【列表方块】
- HTML5基础(一)——元素、属性、格式化、样式、链接、表格、列表、块、布局
- css 样式设计(一)( 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 )
- CSS3——新增背景属性和边框样式
- xml布局之shape绘制控件圆角,背景,边框等属性
- CSS+HTML实例集合一,改变字体(样式,大小),overflow布局属性(如显示隐藏文字等),列表的展开闭合
- 必须懂的通用css布局样式属性
- 【CSS布局.3】列表样式定义法
- 列表样式类型属性(list-style-type)
- 控制TFS工作项布局、格式的属性(微软没有提供相应文档)
- 实现栏目页在同级栏目列表中,点击一栏目,该栏目样式变化(背景/颜色/字体...),其他栏目样式不变。
- CSS语法手册(三)文本填充,边框,边界和位置属性(一)
- HTML表格标记教程(13):内部边框样式属性RULES
- 格式正规的XML:语法 属性 实体 处理指令 样式单 CDATA节
- 如何去掉grouped样式UITableView中cell的边框和背景
- 如何去掉grouped样式UITableView中cell的边框和背景
- 精通CSS.DIV网页样式与布局(四) ——页面背景
- 【CSS布局.3】列表样式定义法
- POI中设置Excel单元格格式样式(居中,字体,边框等)
- HTML表格标记教程(12):边框样式属性FRAME