HTML5权威指南笔记:24-其他css属性和特性
2017-10-29 12:48
711 查看
1 设置元素的颜色和透明度
属性 | 说明 | 值 |
---|---|---|
color | 设置元素的前景色 | <颜色> |
opacity | 设置颜色的透明度 | <数值> |
color: rgba(255, 255, 255, 0.7); color: red;
例子:使用opacity属性
opacity: 0.4;
2 设置表格样式
属性 | 说明 | 值 |
---|---|---|
border-collapse | 设置相邻单元格的边框处理样式 | collapse separate |
border-spacing | 设置相邻单元格边框的间距 | 1~2个长度值 |
caption-side | 设置表格标题的位置 | top bottom |
empty-cells | 设置空单元格是否显示边框 | hide show |
table-layout | 指定表格的布局样式 | auto fixed |
2.1 合井表格边框
/*collapse值告诉浏览器不要为相邻元素绘制两个边框*/ border-collapse: collapse;
2.2 配置独立边框
/*先使用border-collapse设置为separate*/ border-collapse: separate; /*然后使用border-spacing为边框设置间距*/ border-spacing: 10px;
2.3 处理空单元格
/* 设置为show会显示空单元格边框。 设置为hide会隐藏空单元格边框。 */ empty-cells: hide;
2.4 设置标题的位置
/* 设置为top标题在上部 设置为bottom标题在下部 */ caption-side: bottom;
2.5 指定表格布局
/* 设置为auto为自动改变表格大小 设置为fixed为使用width指定表格大小 */ table-layout: fixed; width: 100%;
3 设置列表样式
属性 | 说明 | 值 |
---|---|---|
list-style-type | 指定列表中使用的标记的类型 | 参见3.1 |
list-style-image | 指定图像作为列表标记 | <图像> |
list-style-position | 指定标记相对于列表项目盒子的位置 | inside outside |
list-style | 设置所有列表特征的简写属性 | 见下面 |
list-style: <list-style-type> <list-style-position> <list-style-image>
3.1 设置列表标记类型
list-style -type属性的值:值 | 说明 |
---|---|
none | 没有标记 |
box check circle diamond disc dash square | 使用指定形状的标记,注意并不是所有的浏览器都支持每一种形状 |
decimal | 使用十进制数字作为标记 |
binary | 使用二进制数作为标记 |
lower-alpha | 使用小写字母字符作为标记 |
upper-alpha | 使用大写字母字符作为标记 |
ol { 9275 list-style-type: lower-alpha; }
3.2 使用图像作为列表标记
ul { list-style-image: url('图片路径'); }
3.3 设置列表标记的位置
list - style-position属性指定标记相对于li元素内容框的位置。inside值:定义标记位于内容框内部。
outside值:定义标记位于内容框外部。
例子:
li.inside { list-style-position: inside; }
4 设置光标样式
cursor属性的值:auto、crosshair 、default、help 、move 、pointer 、progress 、text 、wait 、n-resize 、s-resize 、e-resize、w-resize 、ne-resize 、nw-resize 、se-resize 、sw-resize。例子:
#banana { cursor: progress; }
相关文章推荐
- HTML5权威指南笔记:16-理解CSS(内容简介)
- HTML5权威指南笔记:9-组织内容
- css 权威指南笔记(一)
- css 权威指南笔记(二)元素
- css 权威指南笔记(四)选择器
- HTML5权威指南笔记:23-过渡、动画和变换
- 【CSS】其他CSS属性和特性
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
- HTML5权威指南笔记:8-标记文字
- HTML5权威指南笔记:35-使用canvas元素(1)
- <学习html>第八天笔记-HTML5文档类型和字符集、HTML5新标签与特性(常用新标签、新增input type属性值、常用新属性、多媒体标签)
- 【笔记】 《js权威指南》- 第8章 函数 - 8.7 函数属性、方法和构造函数
- css 权威指南笔记(三)结合css和XHTML
- ES权威指南[官方文档学习笔记]-24 Add failover
- HTML5权威指南笔记:36-使用canvas元素(2)
- css 权威指南笔记( 五)结构和层叠之三种样式来源
- HTML5权威指南笔记:34-使用多媒体
- 【HTML5学习笔记】24:CSS背景
- HTML5权威指南笔记:12-表单
- HTML5权威指南笔记:13-定制input元素