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样式属性】
![常用CSS样式属性](http://img.zhejianglong.com/231019/1049321I5-3.png)
文章插图
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;}
![常用CSS样式属性](http://img.zhejianglong.com/231019/10493254P-4.png)
文章插图
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;}
![常用CSS样式属性](http://img.zhejianglong.com/231019/1049321617-5.png)
文章插图
其他样式属性描述值/备注overflow溢出方式,元素内容超出盒子大小的处理方式 , 是
overflow-x
和overflow-y
的 简写属性 visible:可见(默认值) , 内容会超出本身区域 hidden:内容被裁剪隐藏 scroll:滑动条;auto:自动,超出则滑动条cursor光标类型,默认auto 。链接常用的是pointer
(一只手)text
(输入)、help
(问号)、move
opacity透明度(0-1),对元素整体生效,初始值1opacity: 0.5;
appearance元素的默认样式(可设为none,消除默认外观)配合outline
清除浏览器默认的元素样式outline外框,不占据空间,绘制于元素内容周围 , 同border
多用outline:none;
清除默认边框,如
推荐阅读
- 现代 CSS 指南 -- at-rule 规则扫盲
- CSS基础知识筑基
- CSS 动画一站式指南
- SpringBoot 常用注解的原理和使用
- 弹性分布式数据集 RDD及常用算子
- 为什么CSS中的calc函数可能会不生效?
- pytorch、paddlepaddle等环境搭建 深度学习环境搭建常用网址、conda/pip命令行整理
- day03-CSS
- ES集群检查常用命令
- CSS 渐变锯齿消失术