【font-size】【font-weight】【font-weight】【text-align】【overflow:hidden】CSS文字属性文字样式字体样式常用&不常用集合

小航哥sir

已于 2022-03-25 16:57:45 修改

阅读量455

点赞数 1

分类专栏： css 文章标签： css css3 html

于 2021-10-31 10:22:59 首次发布

本文链接：https://blog.csdn.net/hangshao_123/article/details/121060002

版权

11 篇文章

订阅专栏

1. 常用属性

属性	作用	属性值
font-faimily	字体	·一般先写英文，再写中文
font-size	文字大小	·16px ·1.25em，表示1.25*父元素字体大小（很少用）
font-weight	文字粗细	·700,400 ·bold,normal,
color	文字颜色	·white;英文 ·#000;十六进制 ·rgb(255,255,255); 加透明度： ·rbga(255,255,255,.5)
line-height	文字的行高	·一般和盒子的高度一致，能够垂直居中 ·a标签有时设置：line-height=1,文字多大，行高就多大
font-style	文字的样式	normal表示正常 italic表示倾斜
text-align(常用)	文字对齐方式	center (常结合line-height=容器大小) left right
text-indent	文字的缩进	2em，缩进两个字体大小的距离
text-decoration	文字的样式	none 常给a标签设置 line-through 删除线 underline 下划线 overline 上划线

属性	作用	属性值
overflow	内容溢出时显示	hidden 文本溢出隐藏 scroll 容器始终会有滚动条， auto 文本太多了，才会有滚动条
white-space	控制元素一行显示/ 如何处理元素中的空白？	·pre 保持原样，连续的空白符会被保留，遇到<br>标签才会换行 ·nowrap 所有内容都并到一行。和normal一样，连续的空白符会被合并，文本内的换行符无效 ·normal 连续的空白符会被合并，换行符会被当作空格处理
text-decoration	文本溢出是否有省略号？	clip 仅仅修建文本 ellipsis 用……省略多出来的文本

 div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

常常作为三件套来使用

属性	作用	属性值
font-varient	能够设置小号的大写字母(虽然设置成大写字母，但是字体仍旧很小)	·small-caps ·normal
word-wrap	长单词内部能否换行	·normal ·break-word(能够换行)
letter-spacing	字间距（适合中英文）	10px
word-spacing	字母与字母之间的间距(只能是英文）	10px
text-transform	字体大小写的设置	none 默认 capitalize 首字母大写 uppercase 全部字母大写 lowercase 全部字母小写
text-shadow	字体的阴影	四个参数分别是：水平阴影距离垂直阴影距离模糊的半径阴影的颜色

a {
    text-shadow: 10px 10px 10px red;
}

    p {
      font: italic bold 18px/1 '楷体';
      /* font: font-style font-weight font-size/line-height font-family */
    }

结尾：

学习id： 201903090124-6

现在是大三学生，学习到了前后端交互的git阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。