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

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 上划线

2. 以下三个属性常结合使用

属性作用属性值
overflow内容溢出时显示

hidden 文本溢出隐藏

scroll 容器始终会有滚动条,

auto 文本太多了,才会有滚动条

white-space控制元素一行显示/ 如何处理元素中的空白?

·pre 保持原样,连续的空白符会被保留,遇到<br>标签才会换行

·nowrap 所有内容都并到一行。和normal一样,连续的空白符会被合并,文本内的换行符无效

·normal 连续的空白符会被合并,换行符会被当作空格处理

text-decoration文本溢出是否有省略号?

clip  仅仅修建文本

ellipsis 用……省略多出来的文本

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

常常作为三件套来使用

3. 其它不常用属性

属性作用属性值
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;
}

4. 字体连写

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

结尾:

学习id: 201903090124-6

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值