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

2010-04-19 0 条评论 3,018 次阅读 被赞了 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>
    点赞 (0)
    知识共享许可协议
    本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。