文本、背景、边框、光标、列表、表格、精灵图
2018-01-23 本文已影响0人
竹忧
文本属性
- letter-spacing 字母间隔 值为长度,可以是负值
- word-spacing 词的间距(通过空格识别)
- text-decoration 文字修饰 underline(下划线) | overline(上划线) | line-through(删除线) |none(默认)
- text-align 横向排列 left | right | center
- vertical-align 垂直对其方式:
- middle: 将支持valign特性的对象的内容与对象中部对齐
- bottom: 将支持valign特性的对象的文本与对象底端对齐
- baseline: 将支持valign特性的对象的内容与基线对齐
- top: 将支持valign特性的对象的内容与对象顶端对齐
- text-indent: 文本缩进 2em(2个字) 50px
- line-height: 设置行间距离 不允许使用负值
背景属性
- background-color: 设置背景色,或设置为transparent(透明)
- background-image: 背景图片 url 或者 none
- background-repeat: 背景重复 repeat | repeat-x | repeat-y | no-repeat
- background-attachment: 背景附件 scroll | fixed
- background-position: 背景位置 left | center | right (横向) | top | center | bottom (纵向) 或者使用百分比或者数值
- background: background:<背景颜色>|<背景图像>|<背景重复>|<背景附件>|<背景位置>
background:red url('./123.png') no-repeat 100px 10px;
边框属性
- border-style: 值:dotted 点线 | dashed 虚线 | solid 实线 | double 双实线
- border-width: 边框宽度
- border-color: 边框颜色
- border:边框宽度 边框样式 边框颜色
鼠标光标属性
- cursor:pointer(小手) | none(隐藏) | move(十字架) | wait(加载中) | help(问号) | not-allowsd(禁止)
列表属性
- list-style-type:disc(实心圆) | circle(圆圈) | square(方块) | demial(数字) | lower-roman(小罗马数字) | upper-roman(大罗马数字) | lower-alpha(小写字母) | upper-alpha(大写字母)
- list-style-position: inside(标识在li里面) | outside(标识在li外面)
- list-style-image: 引入图片作为列表项的修饰 url(./123.gif)
表格属性
- table-layout: 表格布局方式 auto(默认) | fixed(平均分配不受数字影响)
- border-collapse: 表格的行和单元格的边是合并还是独立 separate(默认独立) | collapse(合并)
*border-spacing: 当表格边框独立时,行和单元格的边框在横向和纵向上的间距 - caption-side: caption 在table上面还是下面 top(默认上方) | bottom(下方)
- empty-cells: 没有内容的单元格隐藏还是显示 show(默认显示) | hidden(隐藏)
精灵图
background:url('../../dist/images/loginlist.png') no-repeat 0px -75px;