您的位置:首页 > Web前端 > CSS

CSS属性-1

2016-06-24 17:31 337 查看
CSS属性
关于尺寸的

width 设置宽

height 设置高

min-width: 设置最小宽度

max-width: 设置最大宽度

min-height: 设置最小高度

max-height: 设置最大高度

关于文字的

font-family:微软雅黑; 设置文字字体

font-size:16px; 设置文字大小

font-weight:bold; 设置文字加粗

color:设置文字颜色

font-style:italic 设置字体为斜体

oblique 设置文字倾斜

letter-spacing:2px|em 设置字间距

line-height 设置行高

关于文本的
text-indent: 首行缩进

text-align:对其方式 left(左)|right(右)|center(居中)

text-shadow:2px 5px 1px #ccc 文字阴影 第一个表示水平偏移量,第二个参数表示垂直偏移量,第三个参数表示模糊量,第四个参数表示阴影颜色

text-decoration:overline(上划线)|underline(下划线)|line-through(删除线)|none(无)

text-decoration-color:red|#cccccc 设置线的颜色
text-decoration-style:dashed(虚线)|double(双线)|solid(实线)|wavy(波浪线)|dotted(点状线)

text-decoration- position:
关于列表
list-style:none 取消列表样式
list-style-image:url() 修改列表样式为图片
list-style-position:inside(里边)|outside(外边)
list-style-type:
关于边框
border:1px solid #ccc 第一个参数表示边框的大小,第二个参数表示边框的样式,第三个参数表示边框的颜色
第二个参数可取值:solid(实线)|dashed(虚线)|dotted(点状线)|double(双线)|groove(3D凹槽轮廓)|ridge(3D凸槽轮廓)|inset(3D凹边轮廓)|outset(3D凸边轮廓)

border-style:solid|dashed

border-color:#cccccc

border-width:2px

border-bottom:1px solid #ccc 设置下边框
border-top:1px solid #ccc 设置上边框
border-left:1px solid #ccc 设置左边框
border-right:1px solid #ccc 设置右边框
border-radius:2px 2px 3px 5px 设置圆角

border-top-left-radius: 设置左上角

border-top-right-radius 设置右上角

border-bottom-left-radius 设置左下角

border-bottom-right-radius 设置右下角

border-image:url() 设置边框为一张图片

border-image-repeate:
stretch:指定用拉伸方式来填充边框背景图。
repeat:指定用平铺方式来填充边框背景图。当图片碰到边界时,如果超过则被截断。
round:指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
space:指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。
box-shadow:2px 5px 2px 20px inset

第一个参数水平偏移量,第二个参数垂直偏移量,第三个参数模糊设置,第四个参数延伸设置,第五个参数省略时外阴影,存在时内阴影

关于背景

background:color|image 设置背景为颜色或者图片

background-color:red|#0ff 设置背景颜色

background-image:url() 设置背景图片

background-size:20px|20% 50px|30% 设置背景图大小

background-postion: left|right|center|bottom|top背景图片位置

left 20px

插入多张背景图片
background-image:url(*.jpg) 0 0,url(*.jpg) 210px 40px
0 0和210px 40px 表示的是每张背景图的开始位置坐标

关于补白(内边距、外边距)

margin:1px 上下左右外边距为1px

margin:2px 4px 上下外边距为2px,左右外边距为4px

margin:5px 10px 15px 20px 上外边距为5px,右外边距10px,下外边距15px,左外边距20px

方向是上右下左

margin-top:5px

margin-right:10px

margin-bottom:15px

margin-left:20px

内边距
padding:1px 上下左右内边距为1px
padding:2px 4px 上下内边距为2px,左右内边距为4px
padding:5px 10px 15px 20px 上内边距为5px,右内边距10px,下内边距15px,左内边距20px
方向是上右下左
padding-top:5px
padding-right:10px
padding-bottom:15px
padding-left:20px
关于布局的 display:block; 行转块 或者显示
display:none 隐藏不占空间
opacity:0.5 设置透明度
filter:alpha(opacity=50) IE下设置透明度
overflow:hidden 超出部分隐藏
scroll 显示滚动条 auto 当有内容超出容器时显示滚动条
overflow-x:横向超出部分隐藏
overflow-y:纵向超出部分隐藏
定位
position:fixed; 固定定位
position:absolute 绝对定位
position:relative 相对定位
z-index:1-999 调整层关系,数值越大越优先显示
浮动
标准流盒子认为非标准流盒子不占空间,非标准流盒子认为标准流盒子占空间
float:left 左浮动
float:right 右浮动
clear:both; 清除浮动
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  dds