第七十二节,文本样式
文本样式
学习要点:
1.字体总汇
2.字体设置
3.Web字体
本章主要探讨HTML5中CSS文本样式,通过文本样式的设置,更改字体的大小、样式以及文本的方位。
一.字体总汇
本节课,我们重点了解一下CSS文本样式中字体的一些设置方法,样式表如下:
属性名 说明 CSS版本
font-size 设置字体的大小 1
font-variant 设置英文字体是否转换为小型大写 1
font-style 设置字体是否倾斜 1
font-weight 设置字体是否加粗 1
font-family 设置font字体 1
font 设置字体样式复合写法 1 ~ 2
@font-face 设置Web字体 3
二.字体设置
我们可以通过CSS文本样式来修改字体的大小、样式以及形态。
font-size 设置字体大小
值 说明
xx-small 设置字体大小。每个值从小到大的固定值
x-small
small
medium
large
x-large
xx-large 设置字体相对于父元素字体的大小
smaller
larger
数字+px 使用CSS像素长度设置字体大小
数字+% 使用相对于父元素字体的百分比大小
设置字体大小。每个值从小到大的固定值
/*从小到大的固定值*/ .a{font-size: xx-small; } .b{font-size: x-small; } .c{font-size: small; } .d{font-size: medium; } .e{font-size: large; } .f{font-size: x-large; }<p class="a">这是一段文本</p> <p class="b">这是一段文本</p> <p class="c">这是一段文本</p> <p class="d">这是一段文本</p> <p class="e">这是一段文本</p> <p class="f">这是一段文本</p>
设置字体相对于父元素字体的大小
/*设置字体相对于父元素字体的大小*/ .a{font-size:xx-large; } .b{font-size:smaller; } .c{font-size:larger; }<p class="a">这是一段文本</p> <p class="b">这是一段文本</p> <p class="c">这是一段文本</p>
使用CSS像素长度设置字体大小
/*使用CSS像素长度设置字体大小*/ p {font-size: 50px; }<p>这是一段文本</p> <p>这是一段文本</p> <p>这是一段文本</p>
使用相对于父元素字体的百分比大小【推荐】
/*使用相对于父元素字体的百分比大小*/ p {font-size:200%; }<p>这是一段文本</p> <p>这是一段文本</p> <p>这是一段文本</p>
font-variant 设置英文字体是否转换为小型大写字母显示
值 说明
normal 表示如果以小型大写状态,让它恢复小写状态。
small-caps 让小写字母以小型大写字母显示。
p {font-variant: small-caps; }<p>这是一段文本html</p>
font-style设置字体是否倾斜。
值 说明
normal 表示让倾斜状态恢复到正常状态。
italic 表示使用斜体。
oblique 表示让文字倾斜。区别在没有斜体时使用。
.a {font-style: italic; } .b{font-style: oblique; }<p class="a">这是一段文本html</p> <p class="b">这是一段文本</p>
font-weight 设置字体是否加粗。
值 说明
normal 表示让加粗的字体恢复正常。
bold 粗体
bolder 更粗的字体
lighter 轻细的字体
100 ~ 900之间的数字 600及之后是加粗,之前不加粗
在目前计算机和浏览器显示中,只有bold加粗,其他更粗更细,目前体现不出来。
.a {font-weight: bold; } .b{font-weight: bolder; } .c{font-weight: lighter; } .d{font-weight: 700; }<p class="a">这是一段文本html</p> <p class="b">这是一段文本</p> <p class="c">这是一段文本</p> <p class="d">这是一段文本</p>
font-family使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体,可以做几个后备字体。
p {font-family:楷体,微软雅黑,宋体; }<p>这是一段文本</p>
font字体设置简写组合方式。格式如下:[是否倾斜|是否加粗|是否转小型大写]字体大小 字体名称;
p {font:50px 楷体 ; }<p>这是一段文本</p>
三.Web字体,也就是服务器端字体
虽说可以通过备用字体来解决用户端字体缺失问题,但终究用户体验不好,且不一定备用字体所有用户都安装了。所以,现在CSS提供了Web字体,也就是服务器端字体。
我们可以将字体下载放到html工程目录来使用
@font-face服务器提供字体
@font-face {font-family: abc; /*给字体一个名称*/src: url('BrushScriptStd.otf'); /*连接字体文件路径*/ } p{font-family: abc;font-size: 50px; }<p>这是一段html文本</p>
文本内容设置总汇
CSS文本样式中文本内容的一些设置方法,样式表如下:
属性名 说明 CSS版本
text-decoration 装饰文本出现各种划线。 1
text-transform 将英文文本转换大小写。 1
text-shadow 给文本添加阴影 3
text-align 设置文本对齐方式 1,3
white-space 排版中的空白处理方式 1
letter-spacing 设置字母之间的间距 1
word-spacing 设置单词之间的间距 1
line-height 设置行高 1
word-wrap 控制段词 3
text-indent 设置文本首行的缩进 1
文本内容设置
text-decoration设置文本出现下划线。属性值如下表
值 说明
none 让本身有划线装饰的文本取消掉
underline 让文本的底部出现一条下划线
overline 让文本的头部出现一条上划线
line-through 让文本的中部出现一条删除划线
blink 让文本进行闪烁,基本不支持了
.a{text-decoration: underline; } .b{text-decoration: overline; } .c{text-decoration: line-through; } .d{text-decoration: blink; }<p class="a">这是一段文本</p> <p class="b">这是一段文本</p> <p class="c">这是一段文本</p> <p class="d">这是一段文本</p>
text-transform 设置英文文本转换为大小写。
值 说明
none 将已被转换大小写的值恢复到默认状态
capitalize 将英文单词首字母大写
uppercase 将英文转换为大写字母
lowercase 将英文转换为小写字母
.a{text-transform: capitalize; } .b{text-transform: uppercase; } .c{text-transform: lowercase; }<p class="a">gyfygegff</p> <p class="b">kfklwfgiogvik</p> <p class="c">GFHPOIGHWEAP8YG</p>
text-shadow 解释:给文本添加阴影。其中四个值,第一个值:水平偏移;第二个值:垂直偏移;第三个值:阴影模糊度(可选);第四个值:阴影颜色(可选)。
.a{text-shadow :5px 5px 3px #ff272d; }<p class="a">gyfygegff</p>
text-align指定文本的对齐方式
值 说明
left 靠左对齐,默认
right 靠右对齐
center 居中对齐
justify 内容两端对齐,就是文本内容多的时候,保证两端都是对齐的
start 让文本处于开始的边界
end 让文本处于结束的边界
start和end属于CSS3新增的功能,但目前IE和Opera尚未支持。
.a{text-align: left; } .b{text-align: right; } .c{text-align: center; } .d{text-align: justify; }<p class="a">这是一段文本</p> <p class="b">这是一段文本</p> <p class="c">这是一段文本</p> <p class="d">简介:当梁宇方决意不出席铂尔曼酒店十五周年庆酒会的时候,他的父亲,也是酒店董事长的梁泽,以及总经理梁宇青,正殷殷期盼着能够在这个酒会上正式将他介绍出来。无心接班的宇方竟然藏身在马场和分别六年的爱马Sky驰骋草原。宇青的突然现身马场令他无所遁行,就这样被压回了酒店准备亮相。但宇方仍不甘示弱,仍伺机逃跑… 小歌星杜允儿来到酒店接周年庆的暖场演唱,向天微义不容辞同行来帮忙,两人仓皇找着</p>
white-space 处理空白排版方式。
值 说明
normal 默认值,空白符被压缩,文本自动换行,也就是无论多少个空格会被压缩显示一个空格,文本遇到挤压时自动换行
nowrap 空白符被压缩,文本不换行,也就是无论多少个空格会被压缩显示一个空格,文本遇到挤压时不自动换行
pre 空白符被保留,遇到换行符则换行,也就是有多少空格就显示多少空格,只有回车换行时才换行
pre-line 空白符被压缩,文本会在排满或遇换行符换行,无论多少个空格会被压缩显示一个空格,文本会在排满或遇回车换行
pre-wrap 空白符被保留,文本会在排满或遇换行符换行,也就是有多少空格就显示多少空格,文本会在排满或遇回车换行
.a{white-space: normal; } .b{white-space: pre; } .c{white-space: pre-line; } .d{white-space: pre-wrap; }<p class="a">这 是一段文本</p> <p class="b">这 是一段文本</p> <p class="c">这 是一段文本</p> <p class="d">这 是一段文本</p>
letter-spacing设置文本之间的间距
值 说明
normal 设置默认间距
长度值 比如:“数字”+“px”
p{letter-spacing: 50px; }<p>这是一段文本</p> <p>这是一段文本</p> <p>这是一段文本</p> <p>这是一段文本</p>
word-spacing设置英文单子之间的间距
值 说明
normal 设置默认间距
长度值 比如:“数字”+“px”
p{word-spacing: 50px; }<p>dislike vt.consider unpleasant; not like </p>
line-height设置段落行高
值 说明
normal 设置默认间距
长度值 比如:“数字”+“px”
数值 比如:1,2,3
% 比如:200%
p{line-height: 1px; }<p>这是一段文本</p> <p>这是一段文本</p> <p>这是一段文本</p>
word-wrap让过长的英文单词断开
值 说明
normal 单词不断开
break-word 断开单词
text-indent设置文本首行的缩进
值 说明
normal 设置默认间距
长度值 比如:“数字”+“px”
p{text-indent: 50px; }<p>简介:当梁宇方决意不出席铂尔曼酒店十五周年庆酒会的时候,他的父亲,也是酒店董事长的梁泽,以及总经理梁宇青,正殷殷期盼着能够在这个酒会上正式将他介绍出来。无心接班的宇方竟然藏身在马场和分别六年的爱马Sky驰骋草原。宇青的突然现身马场令他无所遁行,就这样被压回了酒店准备亮相。但宇方仍不甘示弱,仍伺机逃跑… 小歌星杜允儿来到酒店接周年庆的暖场演唱,向天微义不容辞同行来帮忙,两人仓皇找着宴</p>
第七十二节,文本样式相关推荐
- 字体族、图标字体简介、图标字体的其他使用方式、IconFont、行高、字体的简写属性、文本的水平和垂直对齐、其他的文本样式——06fontbackground
目录 一.字体族 二.图标字体简介(font awesome的使用) 三.图标字体的其他使用方式 四.iconfont 五.行高 六.字体的简写属性 七.文本的水平和垂直对齐 八.其他的文本样式 九. ...
- css-day01笔记-CSS初识、基础选择器、文字和文本样式
typora-copy-images-to: media 第01阶段.web基础:css-day01笔记-CSS初识.基础选择器.文字和文本样式 一.CSS层叠样式表 学习目标 理解 css的目的作用 ...
- CSS之【字体/文本样式】
为什么要美化网页? 有效的传递页面信息 美化网页,页面漂亮,才能吸引用户 凸显页面的主题 提高用户的体验 span标签: 重点要突出的字,使用span套起来. 字体样式: front-family: ...
- word文本样式代码样式_使用文本样式表达创建真相来源
word文本样式代码样式 As of After Effects 17.0, you can use expressions to edit text styles in After Effects. ...
- 修改表格字体颜色_word排版应用:如何创建文本样式和表格样式
样式,大家应该不陌生,在Word中是一个非常强大的功能,运用得好,可以节省很多时间和精力.但如果你不会用,关键时刻可以把你急哭了! 在前面的"Word样式,简单又实用!"和&quo ...
- CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局...
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style>#user {width: 200px;}& ...
- Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息 网易云[玩转大前端]配套课程 EDU配套 教程 Flutter开发的点滴积累系列文章 AnimatedDef ...
- flutter应用开发中文本样式 TextStyle 篇
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息 精通点的可以查看这里 精述 Flutter 从入门实践到开发一个APP之UI基础篇 视频 flutter从入 ...
- antv图例出现分页_图例-自定义文本样式
源码复制成功复制失败全屏 复制 运行 F2 图表组件库 - AntV var data = [{ assetType: '债券资产', percent: 73.76, const: 'const' } ...
最新文章
- Ambari Metrics Monitor/Sink 架构
- History of Microsoft Windows CE
- boost::core模块实现分配器分配提示
- Java多线程精讲(非高并发-授课专用)附synchronized
- Java命令行界面(第14部分):google-options
- python偏函数和高阶函数_【Python入门】8.高阶函数之 匿名函数和偏函数
- 在工作之余,你是怎么提升自己的?
- C ~ char int 等数据转换问题
- 如何取消提交我在Git中的最后一次提交[重复]
- 2008年下半年软考在即 51CTO将实时提供试题和参考答案
- AlloyTeam|腾讯全端 AlloyTeam 团队 - HTML5开源图像处理框架AlloyImage
- UED团队建设系列之前端开发工程师:职业技能与素质
- H3C WAP712C 路由器设置
- Leetcode—— 5369. 统计作战单位数
- python 验证码识别
- 山重水复疑无路,柳暗花明又一村。---找工作感想
- asp.net政府企业网站前台+后台源码
- 【计算机图形学】OpenGL递归实现光线追踪
- 1024程序员节是怎么来的?为什么设置程序员节?
- Delphi7 将Excel导入数据库
热门文章
- JavaEE 要懂的小事:一、图解Http协议
- MFC框架程序----实现十
- pythonwin 崩溃的解决办法【转贴】
- Google Chrome 调试JS利器
- jdbc hibernate ibatis 操作Blob 和Clob类型字段(不断更新)
- POJ1364基本的查分约束问题
- 【错误记录】VMware 虚拟机报错 ( VMWare 中的 Ubuntu 虚拟机网络设置 | 第一次网络设置 )
- 【Android 逆向】函数拦截实例 ( ③ 刷新 CPU 高速缓存 | ④ 处理拦截函数 | ⑤ 返回特定结果 )
- 【IOC 控制反转】Android 布局依赖注入 ( 布局依赖注入步骤 | 布局依赖注入代码示例 )
- 【运筹学】运输规划 ( 运输规划基变量个数分析 )