CSS入门系列:第二部分 属性(四)
来源:互联网 发布:售楼软件哪个好 编辑:程序博客网 时间:2024/06/15 08:46
——摘自《CSS入门经典(第3版)》 Lan Pouncey、Richard York著
【样式化列表】
·list-style-type属性改变每个列表项之前的项目符号的样式。
属性
值
list-style-type
disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-latin|upper-latin|armenian|georgian|none
无序列表的初始值:disc
有序列表的初始值:decimal
·样式化无序列表
有4种可能的符号类型:disc、circle、square和none,默认值是disc。
·样式化有序列表
在所有浏览器上都支持的关键字:decimal、lower-roman、upper-roman和none。
·list-style-image属性,接受一副图像的URL
属性
值
List-style-image
<uri> | none
初始值:none
·list-style-position属性
控制列表项符号的位置是出现在列表项元素的内部还是外部。
·list-style简写属性
属性
值
List-style
<list-style-type> | <list-style-position> | <list-style-image>
List-style属性指定1~3个值。
【定位】
·position属性用于为元素指定不同的定位类型。
属性
值
Position
static | relative | absolute | fixed
z-index采用默认值auto的定位元素依次向上堆叠。默认升序。
【样式化表】
·HTML表支持许多可选元素:
<caption>元素用来提供表标题或者表名称。
<colgroup>元素用来闭合表中所有的<col>元素。<colgroup>元素不会显示。
<col>元素用来控制与每个表列有关的属性,例如列宽,<col>元素不会显示,也不包含内容。
<thead>元素闭合与列表头有关的信息。如果打印的表跨越多页,那么<thead>中的信息会在每页的顶部重复出现。
<tbody>元素包含了主要的表数据。
<tfoot>脚注内容
<table><caption>Ingredients</caption><colgroup><col class=”ngredient”><col class=”quantity”></colgroup><thead><tr><th>Ingredient</th><th>Quantity of Ingredent</th></tr></thead><tfoot><tr><tr><Ingredient/tr><tr>Quantity of Ingredient</tr></tr></tfoot><tbody>.......</tbody></table>
·caption-side属性控制表标题的位置 是出现在表的上方还是下方。
属性
值
caption-side
top|bottom
初始值:top
注:IE6和IE7支持<caption>元素,不支持caption-side属性。
·表列
<colgroup>和<col>元素控制列的宽度、背景颜色或者文本颜色。
·控制表的布局
属性
值
table-layout
auto| fixed
初始值:auto
在默认情况下,表会扩展或收缩以容纳其中包含的数据。
有些时候需要强制表以及单元格具有固定的宽度,如下代码 效果,因为文本内容太宽,表的宽度仍会大于100px:
......<title></title><style type=”text/css”>table..control {width:100px;}table.th.td..control {width:20px}...</style>
在这种情况下可以使用 table-layout fixed强制使用一个宽度,那么效果文本会超出表格边界,而在IE浏览器中 溢出的文本会被裁剪,不同浏览器显示不一致。
· border-collapse属性控制表单元格的间距
属性
值
border-collapse
collapse| separate
初始值:sepaarate
值设置为collapse删除单元格之间的间距
·border-spacing属性控制边框间距
属性
值
border-spacing
<length><length>?
初始值:0
注:IE6、IE7不支持border-spacing属性,如果必须支持这两个浏览器,常用的一种解决方法是从表格单元格中完全移除边框,然后把每个单元格的内容放到一个<div>元素中,对这些<div>元素应用所需的边框和内边距。
border-spacing属性的语法:
border-spacing:<horizongtal spacing length> <vertical spacing length>
如果提供了可选的第二个值,分别指定垂直水平方向的间距。
【创建完整的布局】
·例子
body {font:82%/1.4 Verdana, Arial, Helvetica, sans-serif; %}h2.h3 {font-family:Georgia,Times,Times New Romas, serif;}
//在body元素上设置字体大小为82%,行高为1.4,这使得正文的大小为13px,增加了每一行的间距,以适应多数人的阅读习惯,通过使用百分比指定字体大小不会违反IE中字体大小调整功能。
使用@font-face规则向网站访问者提供他们没有安装的字体。
@font-face { font-family:Raleway; src:url(raleway_thin.eot); src:local(releway_thin),url(raleway_thin.ttf) format(opentype);}
//这创建了一个可以在CSS中使用的新的font-face引用,这条规则包含两个部分:
font-family属性,提供了一个用于在以后引用字体的标签
src属性,第一条src声明应用于IE,其值就是字体文件的URL;第二条src应用于其他所有浏览器,它们支持Open Type字体格式,这条声明必须放在前一条的后面,以便它能够重写支持浏览器的第一条src声明。第二条src还包含了local,表示应该首先在用户已安装的字体中查找该字体。
注:自定义字体麻烦少用
·例子
![](http://img.my.csdn.net/uploads/201304/07/1365318278_2235.png)
.......navigation a {display:block;margin-left:0.5em;padding:0.5em;border:1px solid #ccc;color:#233;text-decoration:none;}.navigation a:focus,.navigation a:hover {background:#233;color:#FFF;}......<ul class=”navigation”><li><a href=”#”>Home</a></li><li><a href=”#”>Recipes</a></li><li><a href=”#”>Suggestions</a></li></ul>
·渐变背景
background-image:-moz-linear-gadient(top,#233,#FFF);background-image:-webkit-gradient(linear,left top,left bottom,from(#233));-ms-filter:”progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#223333),EndColorStr=##FFFFFF”;background-image:linear-gradient(top,#233,#FFF);//第一条和第二条声明应用于Mozilla Firefox和Webkit浏览器(Apple Safari和Google Chrome)属性值带有-moz-和-webkit-前缀,供应商前缀允许浏览器实现尚未最终完成的CSS3规范。
最后一条声明没有供应商前缀,因为这是当前CSS3建议中推荐的格式。
第三条声明采用了一种不同的格式,可以使用Microsoft提供的筛选器来实现渐变,IE8和IE9都支持这种筛选器。
IE不能正确支持简写十六进制形式。
例子:
html{height:100%;background-color;#233;background-image:-moz-linear-gradient(top,#233,#FFF);background-image:-webkit-gradient(linear,left top,left bottom,from to(#FFF));-ms-filter:”progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#223333,EndColorStr=#FFFFFF)”;background-image:linear-gradient(top,#233,#FFF);}
//除了应用渐变,还添加了一条height声明,设置的高度使得渐变应用于页面的整个高度,而不是在内容结束的地方停止。
而background-color对于不支持渐变背景的浏览器很重要。
- CSS入门系列:第二部分 属性(四)
- CSS入门系列:第二部分 属性(一)
- CSS入门系列:第二部分 属性(二)
- CSS入门系列:第二部分 属性(三)
- CSS入门系列(四)CSS样式的结合应用
- CSS入门系列:第一部分 基础知识
- 重温CSS系列(四)
- 神经网络入门 第二部分
- <div+css页面布局课堂笔记>5---与盒子相关的CSS属性第二部分
- CSS部分常用属性
- css部分属性
- CSS部分属性解析
- css属性第二版
- git快速入门(四)解析部分
- css入门部分设置
- css第二部分核心原理
- css text文本属性(四)
- CSS入门系列:第三部分 高级CSS和可选择的媒体
- 机械键盘黑轴,青轴,茶轴,白轴的区别
- 谈谈你对面向对象编程的认识
- Android控件之SlidingDrawer(滑动式抽屉)
- 跨域文件crossdomain.xml在weblogic上的部署和http://10.165.26.151:7001/xx.xml可以访问一个文件
- extern “C”
- CSS入门系列:第二部分 属性(四)
- 关于JS中的获取元素的方法
- c++ 利用流写入文件
- JAVA -GUI 概述
- Xshell用ssh连接ubuntu掉线解决方法
- C++操作Sqlite数据库
- Android官方文档学习
- linux sed 批量替换字符串
- java语句调用getprop和setprop命令来获得prop中的数据