行间距和文本样式的设置

行间距

文本样式

行间距

1.行高（line-height） ——> 文字占有的实际高度

line-height: 200%;line-height: 20px;line-height: 2;  这就是通常说的两倍行距

行高=上间距+字体的大小+下间距

其中，字体是垂直居中显示，上间距=下间距

line-height 设置行高

可选值：

a.直接放一个大小，例如：40px

b.还可以放倍数，是当前字体大小的倍数

c.可以放百分比

2、单行文本在父元素中垂直居中

只要设置父元素的行高和高度一致即可

3、font中也可以指定行高

font:字体大小/行高字体类型;

  font: italic bold 30px/50px serif;

文本样式

1: text-transform 可以用来设置文本的大小写

可选值：

none 默认值，文本正常显示

lowercase 文本以小写字母显示

uppercase 文本以大写字母显示

capitalize 首字母大写

text-transform:capitalize;

2、text-decoration 设置文本的修饰

可选值：

none 默认值，文本正常显示

overline 上划线

underline 下划线

line-through 删除线

text-decoration:line-through;

3: letter-spacing可以指定字符间距

    letter-spacing: 20px;

4: word-spacing可以设置单词之间的距离

word-spacing:20px ;

5: text-align用于设置文本的对齐方式

 text-align:center;

可选值：

left 默认值文本靠左显示

right 文本靠右显示

center 文本居中显示

justify 两端对齐

知识点：

行内元素

不会独占一行，宽高是被内容撑开,是不可以设置宽高的

块元素

宽度是祖先元素的100%，高度是被内容撑开

行内块元素

不会独占一行，可以设置宽高，有三像素的问题（最后面有解释）

6.display属性实现元素之间的相互转化

 display: inline-block;

可选值：

none 隐藏元素

block 将元素专成块元素

inline 将元素转成行内元素

inline-block 将元素转成行内块元素

注意：元素之间的相互转换，可以用，但尽量还是标签的本来分类为主

7.text-indent 设置首行缩进

可选值: 常用长度单位： px，em ，rem

text-indent:2em ; 这就是我们通常说的首行缩进2个字符

8: white-space: ; 设置网页如何处理空白

9: text-overflow 文本溢出包含元素时发生的事情

P：设置单行文本的省略号固定写法为

 /* 设置一个固定的宽度 */width: 200px;/* 设置换不换行 */white-space:nowrap;/* 裁剪多余 */overflow: hidden;/* 设置溢出内容以省略号的形式出现 */text-overflow: ellipsis;

10: text-shadow:; 设置文本的阴影

4个参数：

(1)、阴影的水平位移距离正值向右偏移，负值向左偏移必选

（2）、阴影的垂直位移距离正值向下偏移，负值向上偏移必选

（3）、阴影的模糊半径可选默认0px

（4）、阴影的颜色一般用rgba颜色可选，默认是字体的颜色

    text-shadow:10px 10px 10px rgba(255, 0, 0, .4);

补充：box-shadow

4个参数：

(1)、阴影的水平位移距离正值向右偏移，负值向左偏移必选

（2）、阴影的垂直位移距离正值向下偏移，负值向上偏移必选

（3）、阴影的模糊半径可选默认0px

（4）、阴影的颜色一般用rgba颜色可选默认是黑色

和text-shadow 唯一的区别就是阴影的默认颜色不一样

11:vertical-align

作用：1、设置图文对齐方式

2、解决图片三像素的问题

vertical-align: baseline;

可选值：

baseline 基线对齐以英文x最底下为对齐标准

bottom 底部对齐

top 顶部对齐

middle 居中对齐

知识点补充：

经典面试题：什么是图片三像素的问题，如何解决这个问题

图片三像素问题：主要是指在页面上图片和文本，或其他行内标签与其他元素在页面上水平方向的对齐存在三个像素间隙的问题，因为图片本身是行内块元素行内块元素的特点导致了图片和文字之间有一个三像素的间隙

解决方法：1、vertical-align 设置非baseline默认值即可

2、可以设置其父元素的font-size为0,注意如果父元素里有文字，需要重新设置字体大小

3、可以将图片转成块元素

4、将元素脱离文档流，例如可以设置浮动，设置弹性盒子，设置绝对定位

行间距和文本样式的设置相关推荐

微信小程序开发基础字体样式和文本样式的设置
微信小程序页面主要有4个页面,分别是: js页面.json页面,wxml页面.wxss页面他们的功能分别是: js:页面逻辑文件 json:页面配置文件 wxml:页面描述文件 wxss:页面样式表 ...
字体族、图标字体简介、图标字体的其他使用方式、IconFont、行高、字体的简写属性、文本的水平和垂直对齐、其他的文本样式——06fontbackground
目录一.字体族二.图标字体简介(font awesome的使用) 三.图标字体的其他使用方式四.iconfont 五.行高六.字体的简写属性七.文本的水平和垂直对齐八.其他的文本样式九. ...
第七十二节，文本样式
文本样式学习要点: 1.字体总汇 2.字体设置 3.Web字体本章主要探讨HTML5中CSS文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇本节课,我们重点了解一 ...
CSS入门五：文本样式；字体颜色：英文字母，十六进制，RGB；文本颜色，字间距，行间距，对齐方式；下划线、上划线…，文本阴影，字母大小写，首行缩进
CSS入门部分已经了解了:CSS简介.样式表分类,内部样式表简单使用:选择器和类选择器简单使用:背景色.背景图:以及外部样式表的简单使用: 本篇博客主要介绍,如何对文本设置,包括字体颜色:字间距,行间 ...
05使用CSS设置字体和文本样式
使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace|ser ...
怎样用html设置文档格式,Dreamweaver使用CSS样式表设置网页文本格式
Dreamweaver使用CSS样式表设置网页文本格式互联网发布时间:2008-10-17 19:35:50 作者:佚名我要评论本文章介绍如何在 Dreamweaver 中使用层叠 ...
可跨页字符串：使用Spans设置文本样式
文本样式是增强Android应用程序UI的重要方面之一.在Android中,我们可以更改文本的大小,颜色,重量,样式等,并使文本更具吸引力和吸引力. 但是想想一种情况,当你希望为TextView的不同 ...
CSS中常用的10个文本样式属性——让文本设置再无难点
一个页面中,文本样式,是必不可少的,当然css也给我们准备了很多很多很多的文本样式,以下列举了10个常用的文本样式属性及常用的属性值,掌握了,也基本满足使用了 1: text-transform 可以 ...
odoo14 文本字段动态设置字体样式颜色 decoration
简介:我们在实际开发中有时候需要突出显示字段文本,让使用者可以更直观的查看数据,就需要对字段文本进行字体及颜色的设置.odoo自带了一套简单的设置颜色的方式,可以设置列表中某个字段的颜色字体. (一) ...

行间距和文本样式的设置

行间距

文本样式

行间距和文本样式的设置相关推荐

最新文章

热门文章