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

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

关于英文的大小写
设置属性 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)

    发表评论

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

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