常用CSS样式属性( 二 ) _生活百科

text-decoration: underline overline blue dashed 1px;?text-decoration-line设置文本的装饰线，如a元素的下划线 underline：下划线；overline：上划线； line-through：中划线 none：无，可用于去掉a标签的默认下划线?text-decoration-style装饰线线的样式波浪线wavy，实线solid，虚线dashed，双实线double，点线dotted?text-decoration-color装饰线颜色?*-thickness装饰线粗细text-decoration-thickness: 3px;text-shadow文本阴影特效，4个值：水平偏移，垂直偏移，模糊半径，阴影颜色可设置多组值，叠加生效

文章插图
text-transform控制文本的大小写 capitalize： /?k?p?t?la?z/ 大写字母开头。uppercase：全大写字母；lowercase：全小写字母。writing-mode文本内容排列方向，水平、垂直writing-mode: vertical-lr;文字垂直排列letter-spacing增加或减少字符间的空白（字符间距）letter-spacing:-3px;word-spacing单词间距word-spacing: 1cm; text-overflow处理溢出的内容，配合 overflow 和 white-space显示超长文本为省略号...ellipsis 显示为省略号...；clip 裁剪white-space元素中空白的处理nowrap，强制空白符合并、不换行（一行内显示完，除非<br>)overflow-wrap、word-break、word-wrap都是针对长单词的强制换行，如长的url地址。wrap，/r?p/ 换行

<div><p class="textf">textf1111234 针对文本布局、装饰的样</p></div><style>.textf {background-color: #0004; color: #666;font-size: 40px; font-weight: bolder;text-align: center; text-indent: 2em;text-transform: uppercase;letter-spacing: 3px;/* 阴影实现文字浮雕效果 */text-shadow: -1px -1px 1px #000, 1px 1px 1px #FFF;/* 文字装饰线 */text-decoration: solid underline 3px;text-decoration-style: dotted;text-decoration-style: underline line-through;text-underline-offset: 3px;/*文字溢出...*/text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}</style>

文章插图
1.4、表格样式针对表格元素的样式，css中常用伪类选择器（:first-child、:nth-of-type等）来设置行列的样式、隔行换色，详见选择器章节。
属性描述值/示例table-layout设置表格单元格行列算法，创建更可控的表格布局 auto：自动布局，基于内容自动调整宽度 fixed：固定宽度，设置首行width，默认等宽border-collapse设置表格单元格的边框合并方式，一般推荐合并border-collapse: collapse collapse：合并模式，合并相邻单元格边框separate：分割模式（默认值）vertical-align垂直对齐：行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式tbody上默认vertical-align: middle; top、middle、bottom、sub、super 也支持尺寸值px、百分比%border-spacing单元格水平、垂直间距，separate分割模式有效border-spacing: 5px 3px;caption-side设置表格标题caption元素的位置top、bottom

.table{table-layout: fixed;width: 100%;border: 2px black solid;border-spacing: 5px 3px;}/* 单元格内容溢出样式 */.table td{text-overflow:ellipsis;overflow: hidden;white-space: nowrap;border: 0px;}/* 单元格列宽 */.table tr:first-child th:nth-child(1){width: 140px;}.table tr:first-child th:nth-child(2){width: 150px;}.table tr:first-child th:nth-child(3){width: 100%;}.table tr:nth-child(2) td:nth-child(1){height: 50px;vertical-align: top;}