2.8css字体属性
text-align:center;水平居中
vertical-align:center;垂直居中
使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐。只针对于行内元素或者行内块元素有效。
baseline 默认,元素放置在父元素的基线上。
top 把元素的顶端与行中最高元素的顶端对齐。
middle 把此元素放置在父元素的中部
bottom 把元素的顶端与行中最低元素的顶端对齐
溢出文字省略号显示
单行文本溢出文字省略号显示必须满足三个条件
1.先强制一行内显示文本
white-space: nowrap;(默认 normal自动换行)
2.超出的部分隐藏
overflow: hidden;
3.文字用省略号替代超出部分
text-overflow: ellipsis;
多行文本溢出文字省略号显示
兼容性问题比较严重,适用于webkit浏览器或移动端
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; 弹性伸缩盒子模型显示 -webkit-line-clamp: 2; 限制在一个块元素显示的文本的行数,第几行写第几行的数值 -webkit-box-orient: vertical; 设置或检索伸缩盒对象的子元素的排列方式
字体 | font-family: ‘字体名称’;多个字体用“,”隔开 |
---|---|
字体大小颜色 | font-size:xxxpx;color:字体大小;颜色 16 |
字体粗细 | fond-weight:xxx; 0 - 400(正常)-1000 (100整数倍数) normal默认值,推荐数字400 |
字体方向 | direction:rtl或ltr; |
单词间的距离 | word-spacing:xxxpx; |
文本阴影 | text-shadow:{ xxxpx水平,xxxpx垂直,xxxpx模糊的距离,颜色} |
文本间距 | letter-spacing:xxxpx; |
字体每行的间距(行高) | line-height:xxxpx |
居中 | <center> </center> |
文字居中 | 标签{text-decoration:center} |
取消超链接下划线 | a{text-decoration:none;} |
字体下划线 | 标签 {text-decoration:underline;} |
文字样式 | font-style: ; normal默认值,italic斜体样式<i>**标签 字体倾斜** |
文本靠左水平对齐 | style="text-align:left;" text-align: center;水平居中对齐 |
文本颜色 | color颜色表示1.直接用英文。2.16进制#ffffff。3.rgb代码:rgb(255,255,0,0.3)最后一个透明度 |
文本缩进 | text-indent: 20px;只缩进首行 首行缩进2字符:2em,rem参照整个页面 |
2.9css书写顺序
布局属性>自身属性>文本属性>其他属性(css3)