CSS学习进阶：文字属性与表格中的一些标记

2010-04-19 0 条评论 4,269 次阅读 被赞了 0 次

当系统地学习的时候，以前那些遇到问题再去解决问题学习的杂乱的东西，开始变得条理清晰起来

关于英文的大小写
设置属性 text-transform，可以设置的值：capitalize/uppercase/lowercase
分别表示：单词首写字母大写/全部大写/全部小写
示例：

<span style="display:block;text-transform:capitalize">capitalize.THIS IS A DEMO.</span>
<span style="display:block;text-transform:uppercase">uppercase.THIS IS A DEMO.</span>
<span style="display:block;text-transform:lowercase">lowercase.THIS IS A DEMO.</span>

汉字文字设置段首缩进
p{text-indent:2 em;}

文字装饰效果
text-decoration属性规定添加到文本的修饰
可以设置的值：
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。

关于设置行内元素为块元素
善于利用 display:block及display:inline-block 进行布局
示例：
display:inline
将元素显示为行内元素。特点：
和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。
, ,

,

,

,

,

    和

  • 是块元素的例子
    display:inline-block
    将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。IE中实现该效果的两种方法：
    1、先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 声明中才有效果，这是 IE 的一个经典 bug ，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失）。代码如下（…为省略的其他属性内容）：

    div {display:inline-block;…}
    div {display:inline;}

    2、直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（如：zoom:1 等）。代码如下：

    div {display:inline; zoom:1;…}

    参考示例：

    <style> 
div,span{
	background-color:green;
	margin:5px;
	border:1px solid #333;
	padding:5px;
	height:52px;
	color:#fff;
}
.b{
	display:block;
}
.i{
	display:inline;
}
div.ib{
	display:inline-block;
}
div.ib{
	display:inline;
}
a.ib{
	display:inline-block;
}
a.ib{
	display:block;
}
span.v {
	padding:0;
	margin:0;
	border:0;
	vertical-align:middle;
	height:100 %
}
</style>
<div>
    div display:block
</div>
<div class="i">
    div display: inline
</div>
<div class="ib">
    div display: inline-block
</div>
<span>
    span display: inline
</span>
<span class="b">
    span display: block
</span>
<span>
    <a class="ib">
        a display: block
    </a>
</span>
<br />
<div>
    <span class="v">
    </span>
    vertical-align: middle
</div>

    浮动的盒子：
    两浮动的盒子之间，不会出现“塌陷”现象

    容器的水平居中：
    margin:0 auto;

    表格中的一些标记

    :
    定义一个表格标题。

    标签必须紧跟在

    标签之后，每个表格仅能规定一个 caption。通常，caption 会位于表格之上居中的位置

    :
    table header的缩写，用来定义表头。用 th 代替 td，此时该单元格的内容会以粗体显示

    、

    及

    :
    定义表格的表头，thead 元素应该与 tbody 和 tfoot 元素结合起来使用。tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
    示例：

    <table border="1">
<caption>例子</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

    相关文章:

    Default ThumbnailCSS学习进阶：关于盒子模型 Default ThumbnailCSS学习进阶：关于浏览器兼容设计的几点基础知识 Default ThumbnailCSS学习进阶：一些CSS设计的实用小技巧参考 Default Thumbnail关注css背景音乐代码 Default Thumbnail循序渐进学习CSS Default Thumbnail30个基于CSS设计的优秀导航和按钮设计教程 Default Thumbnailcss的滤镜应用 Default Thumbnail为什么火狐谷歌chrome等浏览器不支持一些css滤镜 Default Thumbnailcss中margin和padding的使用 Default ThumbnailCSS代码在线压缩优化工具示例 Default ThumbnailCSS 3.0 参考手册 (中文版)下载 Default Thumbnail20个漂亮的“标准的”css配色方案参考
    点赞 (0)
    知识共享许可协议
    本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

    发表回复

    您的邮箱地址不会被公开。 必填项已用 * 标注

    Captcha Code