CSS属性的数量使您很容易忘记每天都不使用的属性。 这里列出了5种有用的但很少使用的CSS属性,这些属性在所有现代浏览器中都可以使用…
1.使用text-transform
大写
此属性更改HTML元素的文本内容大写的方式。 当您的设计部门在最后一刻更改大写字母时,此功能非常有用,并且比重新编码HTML更容易。 主要值是:
- 大写:使每个单词的第一个字符大写
- 小写:将所有字符更改为小写
- 大写:将所有字符更改为大写
- 无:无大写更改
尽管将font-variant
设置为“ small-caps”,但IE可以将“ none”设置为“ none”,但大多数浏览器的运行情况都不错。
2.文本letter-spacing
和word-spacing
将页面文本保留为HTML可以使维护更加容易,并且对SEO更好。 简单的文字效果可以在不使用图形的情况下使用letter-spacing
来实现,以减少或增加固定间距(px,em,ex,%等)的字符间距,例如
h2 { letter-spacing: 0.1em; }
宽间隔的H2标题(0.1em)
紧凑的H2标题(-0.1em)
word-spacing
相似,除了它会影响单词之间的间距而不是字符之间的间距。
3.使用text-indent
text-indent
定义文本块中第一行的左缩进(如果将direction
设置为“ rtl”,则为右缩进),例如
p { text-indent: 10px; }
该属性通常看起来是多余的,因为可以使用padding
获得类似的效果。 但是, text-indent
不会影响元素的宽度,因此在诸如IE兼容菜单等可单击整个块的情况下很有用。
ul#menu li a
{
display: block;
width: 100%; /* IE hasLayout applied */
text-indent: 10px;
}
4.用table-layout
固定表格宽度
表格数据仍然需要表格,但是当浏览器的table-layout
默认设置为“自动”时,很难设置样式的列宽。 如果单元格的文本需要更多空间,则自动算法可能会覆盖您指定的表格宽度。
将table-layout
设置为“固定”会强制浏览器遵守您指定的表格宽度。 有关算法的完整详细信息,请参见SitePoint CSS参考表格式页面 。
5. white-space
替代用途
white-space
决定浏览器如何在HTML中呈现空格。 跨浏览器支持不完整,但是以下属性始终有效:
- 正常:空格折叠为单个字符,并且在需要时出现换行符
- nowrap:空格折叠成一个字符,但换行符被抑制
- 上一个:空白不会折叠并且行仅在HTML中的新行处被断开
呈现代码段时, white-space
是必不可少的,但是在其他情况下, white-space
很有用。 例如,我们有一个表table-layout
设置为“固定”的表:
![行高不同的桌子 Fixed-width table with differing row heights](https://i-blog.csdnimg.cn/blog_migrate/ba8c4ec42b545d4e34e3e1503030076b.png)
具有不同行高的固定宽度表格
但是,我们希望所有行高都保持一致,并希望裁剪长文本(也许是因为我们正在实现JS工具提示以充分显示技能)。 在tr
或td
元素上设置CSS height
无效,但是我们可以改用white-space
,例如
td
{
white-space: nowrap; /* suppress line breaks */
overflow: hidden; /* crop the text */
}
![高度一致的行 Table rows with consistent heights and cropped text](https://i-blog.csdnimg.cn/blog_migrate/3d977ba53be285859c269370db291f1d.png)
高度一致且裁剪文字的表格行
也可以看看:
我是否错过了您最喜欢的很少使用的CSS?
From: https://www.sitepoint.com/5-rarely-used-css-properties/