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

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>【常用CSS样式属性】

文章插图
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;}

文章插图
1.5、列表样式列表类型的元素包括<ol>、<ul>、<dl> ，下面是列表特有的属性。
css属性描述值/示例list-style列表样式，下面三个属性的简写list-style:none;?list-style-type设置ul、ol的列表符号。常用none清除序号实心圆disc、空心圆circle、数字decimal、字母lower-alpha、方块square、汉字数字cjk-decimal?list-style-position序号符号出现的位置inside、outside?list-style-image用图片作为符号url();

#ldiv2 ul>li{list-style:none outside url();/* 用背景图实现符号效果 */background: url(../res/sk\ \(17\).png) no-repeat;background-size: 1.3em;background-position: 0 0;padding-left: 1.5em;line-height: 1.8em;}#ldiv2 ol li{list-style-type: lower-alpha;line-height: 1.5em;}

文章插图
其他样式属性描述值/备注overflow溢出方式，元素内容超出盒子大小的处理方式，是overflow-x 和overflow-y的简写属性 visible：可见（默认值），内容会超出本身区域 hidden：内容被裁剪隐藏 scroll：滑动条；auto：自动，超出则滑动条cursor光标类型，默认auto 。链接常用的是pointer（一只手）text（输入）、help（问号）、moveopacity透明度（0-1），对元素整体生效，初始值1opacity: 0.5;appearance元素的默认样式（可设为none，消除默认外观）配合outline清除浏览器默认的元素样式outline外框，不占据空间，绘制于元素内容周围，同border多用outline:none;清除默认边框，如