字体的其他样式

1.设置一个文字大小

font-size: 40px;

2.设置一个字体

font-family: fantasy;

3.设置文字斜体

可选值：

normal 默认值文字正常显示

italic 文字斜体常用的

oblique 文字斜体

font-style: oblique;

4.设置一个小型大写字母

font: bold italic 30px fantasy;

5.font简写必须有设置字体大小（必须倒数第二位）、设置字体（必须在倒数第一位）

font: bold italic 30px fantasy;

行间距

1、行高（line height）文字占有的实际高度

可选值

1、可以直接设置大小例如50px,100px

2、可以写数值，是字体的倍数

3、可以写百分比

2、单行文本在父元素中垂直居中，把行高和高度设置一样的，

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

3、font中也可以指定行高

font: 38px/2 monospace;

 p {font: 38px/2 monospace;}.box {width: 200px;height: 200px;background-color: pink;line-height: 200px;}

文本样式（1）

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

可选值：

none 默认值正常显示

uppercase 字母大写

lowercase 字母小写

capitalize 首字母大写

2: text-decoration [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰

可选值：

none 没有任何修饰线

underline; 加下划线

overline 加上划线

line-through 删除线

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

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

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

可选值：

left 默认值左对齐

right 右对齐

center 居中对齐

justify 两端对齐

6: text-indent 设置首行缩进

一般用em为单位

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

可选值：

normal 默认值文本正常显示

nowrap 不换行

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

可选值：

none 默认值文本正常显示

ellipsis 省略号

9: text-shadow: h-shadow v-shadow blur color;

参数

1、阴影的水平位移距离必填

2、阴影的垂直位移距离必填

3、阴影的模糊半径选填默认是0px

4、阴影的颜色选填默认跟字体颜色一样

10:vertical-align 设置元素垂直对齐的方式

.p1 {text-transform: capitalize;/* text-decoration: line-through; *//* letter-spacing: 20px; *//* word-spacing: 20px; */}.p2 {/* text-align:justify; *//* text-indent:2em; */background-color: pink;/* 文本省略号的固定的写法 *//* 设置固定的宽度 */width: 500px;/* 设置不换行 */white-space: nowrap;/* 裁剪多余 */overflow: hidden;/* 设置多余的内容用省略号代替 */text-overflow: ellipsis;}a {text-decoration: none;}h1 {color: red;text-shadow: 15px 15px ;}

文本样式（2）

vertical-align:; 设置文本垂直对齐方式

1、设置图文对齐

可选值：

baseline 默认值基线对齐

bottom 下对齐

top 上对齐

middle 居中对齐

只能设置图文，表格的垂直对齐

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

解决方案一：vertical-align:; 属性值不是baseline

解决方案二：给其父元素设置字体大小为0

解决方案三：将图片转成块元素

 img {width: 300px;/* 讲元素转成块元素 *//* display: none; */}/* display: ; 实现元素间相互转换可选值：none  隐藏元素block  讲元素转成块元素 inline-block   讲元素转成行内块元素*/div {width: 300px;/* font-size: 0; */}</style>

html字体样式（2)相关推荐

Android Toolbar 标题居中及字体样式自定义
首先找到 toolbar 所在xml布局文件,将toolbar控件放置在一个相对布局(RelativeLayout)中,然后设置 toolbar 的 title 为空(在 title 属性栏中随便打几 ...
BPM实例分享：如何设置表单字体样式
系统版本:V10.0 一些业务场景中,时尔需要改变表单字体那如何设置表单字体样式? 本文将会针对全局表单和单个表单进行阐述! 1.全局表单: 修改WFRES\CSS\MvcSheet.css , ...
CuteEditor 编辑器的字体样式无法控制的问题解决
之前,一直没有注意到这个问题,编辑器里的字体样式通常很大, 今天重新去看了官方的事例. 发现每个编辑实例都可以加载不同的css样式表,而且其样式不继承页面的css. 于是我就单独建立个Editor. ...
【转帖】详解CSS网页布局中默认字体样式
转自:http://www.52css.com/article.asp?id=1174 浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认样 ...
css 字体样式设置
css字体样式(Font Style),属性时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style)是网 ...
网页设计中的默认字体样式详解
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...
Android --- RecycleView 中默认选择第一个 item，点击第 2 个 item 时改变其字体样式，其余的 item 的字体样式恢复默认
问题描述: RecycleView 中默认选择第一个 item,点击第 2 个 item 时改变其字体样式,其余的 item 的字体样式恢复默认代码如下: 主要的参数是 mPosition publ ...
Android中对同一个TextView设置不同字体样式
这个只是做一个笔记,详情见代码: 代码中的注释也有说明. TextView textView = (TextView) findViewById(R.id.textView1);SpannableSt ...
【温故知新】CSS学习笔记（字体样式属性）附加篇
CSS字体样式属性目录 CSS字体样式属性一.font属性二.color属性三.line-height 行间距(行高) 四.text-align 水平对齐方式五.text-indent 首行 ...
【温故知新】CSS学习笔记（字体样式属性）
CSS字体样式属性一.font-size:字号大小该属性可以使用相对长度单位(推荐),也可以使用绝对长度单位,推荐使用像素单位px. 相对长度单位说明 em ...

html字体样式（2)

字体的其他样式

行间距

文本样式（1）

文本样式（2）

html字体样式（2)相关推荐

最新文章

热门文章