css学习4

1.使用table的注意事项

①设置table的border-spacing:0将默认的边框去除

②直接设置tr的border-radius是失效的，应该设置其中包含的td th的border-radius

③/*三个参数：x的偏移 y的偏移 模糊*/

      box-shadow: red 0px 1px 1px;

④能够直接设置tr的背景色

⑤合并列

<tr>

    <td colspan="3">简单的结构伪类</td>

</tr>

⑥可以设置颜色的渐变

第一参数是表示的渐变的角度

background-image: linear-gradient(30deg,red, #ebf3fc, yellow);

⑦基本结构

<table>

    <thead>

    <tr>

      <th>xxxx</th>

    </tr>

    </thead>

    <tbody>

    <tr>

      <td colspan="3">简单的结构伪类</td>

    </tr>

    <tr>

      <td>xxx</td>

    </tr>

    </tbody>

</table>

⑧可以固定列宽，可以使用table-layout属性，有默认值automatic  ,fixed.

如果使用automatic,那么列的宽度是不固定的，那怕在td中设置宽度比如<td width="5%">1000000000000000000000000000</td>，也不会起作用，还是会根据内容大长度进行伸缩。但是如果设置为fixed就会进行限定。

 

2.标签

<q>引用标签，能自动加上双引号

<i> 斜体

<b>粗体

<small>小字

<sub>上标

<sup>下标

文本注释

<ruby>

    我 <rt>wo</rt> 爱 <rt>ai</rt> 美 <rt>mei</rt>

</ruby>

 

dl dt dd的使用

dl表示的就是大的列表，dt可以作为里面小的列表的标题，然后用dd表示里面小的列表项

<dl>

  <dt>Coffee</dt>

  <dd>Black hot drink</dd>

  <dd>Black hot drink</dd>

  <dt>Milk</dt>

  <dd>White cold drink</dd>

</dl>

 

3.浏览器默认的字体的大小为16像素。因此1em就是16像素。不要在最外层直接设置字体大小为em这样的单位。

这样会导致再次在标签中设置字体的时候就会以原有的设置的字体大小基础上设置字体大小。因此使用em单位最好不要进行嵌套使用。

使用font-weight进行设置字体的粗细。包含100-900等9个层级

使用font-style设置字体倾斜，有italic oblique都能设置倾斜

使用text-decoration设置字体的划线的位置 underline overline line-through

使用text-transform设置英文字大小写 capitalize首字母大写 uppercase大写 lowercase小写
设置文本对齐 text-align: left right center justify(两端对齐)

设置文本垂直对齐 vertical-align:auto baseline sub super top text-top middle bottom text-bottom length(使用%表示距离基线的百分比或其他具体数值)

letter-spacing  字距

word-spacing 词距

line-height具有继承性，如果在最外层设置line-height:16em,那么就如果里面标签设置大字体超过行高就会发生重合，因此最好在层设置行高为1.6，表示的是倍数。

text-indent:设置缩进

text-shadow:设置阴影

设置多余字溢出后出现省略号，需要下面三个互相配合

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;