CSS文本控制 web

admin 2月前 47


文本基础设置

字体设置


  font-family可定义多个字体,系统会以从左至右的顺序进行查找,如左侧字体不存在,就往右侧找。

  为什么要这么做呢?如果你只用了一种字体,而恰好人家电脑上没装,那么对不起了,他的显示肯定是有问题的。

 

字体设置

 

自定义字体


  可以进行自定义字体,使用方式也非常简单。当自定义字体不存在时将通过src进行下载。注意导入字体后一定要使用format来说明字体的格式。

 

字体格式
.otfopentype
.woffwoff
.ttftruetype
.eotEmbedded-opentype

 

  不建议使用中文字体,因为文件太大且大部分是商业字体。

 

自定义字体

 

字体粗细


  定义字体粗细为font-weight,它可以指定数字,也可以指定字母,数字可指定范围为100-900。

 

font-weight值设定 
lighter(细) 
normal(正常)400与normal相同
bold(粗体)700与bold相同
bolder(特粗) 

 

image-20200712000848134

 

字体粗细

 

字号大小


  设置字号大小用font-size,可以设置的方式较多。有英文单词,px,%,em,rem等等常用方式。

 

单词


  我们可以使用单词来控制字号的大小,如下:

 

font-size单词设置字号大小 
xx-small最小
x-small较小
small
medium中等
large
x-large较大
xx-large最大

 

image-20200712000722909

字号设置-单词

 

px


  px是固定的像素单位,如果你的网页要在移动端使用,那么尽量的少使用它,它不会自动的进行变化。

 

image-20200712002713228

字号设置-px

 

百分数


  百分数是子元素相对于父元素设置的该属性大小,如父元素的font-size是20px,子元素设置为 200%即为父元素的两倍大小。

 

image-20200712001534508

 

 

字号设置-百分号

 

em


  em与百分号类似,子元素的font-size:1em相当于父元素设置的font-size的100%,而0.5em则相当于父元素设置的font-size的50%。注意,对于0.多少来说,可以直接简写。

image-20200712001958699

字号设置-em

 

 

rem


  rem作为em的升级版,是目前使用较多的一种方式。它不会根据父元素的该属性值进行变化,而是根据HTML的值,比如chorme是默认字体大小如果为16px,那么使用1rem就相当于16px。

  注意:有的是16px,有的是12px。

image-20200712010050585

 

 

字号设置-rem

 

文本颜色


  文本颜色使用color属性来进行设定,可用单词,rbg,rgba,#16进制色。

 

单词


  直接使用单词,可以设定文本颜色。如color:red;

image-20200712011759521

 

文本颜色-单词

 

rgb


  rgb是三原色,红绿蓝。格式为color:rbg(0-255,0-255,0-255),当然也可以使用单词在里面。

 

image-20200712012020480

 

文本颜色-rgb

 

rgba


  rgba相较于rgb来说,括号中多了第4位数值,数值范围为0-1,可用于指定透明度。

 

image-20200712012236045

 

文本颜色-rgba

 

#16进制数


  格式为#xxxxxx,其中x为16进制数。如果所有x都相同,可简写为#xxx。

 

image-20200712012618726

文本颜色-#16进制

 

文本行高


  我们看一下图,当一段文本放在一个块级标签或内联块级标签中,那么默认它是以标签左上角为起始的。

image-20200712012919758

 

 

文本行高默认

 

  如果我们想让他垂直居中,则使用line-height:标签高度即可。

 

image-20200712013103622

 

 

文本行高设置

 

文本倾斜


  使用font-style即可,可以设定的值为italic倾斜,normal无倾斜。

 

image-20200712013756803

文本倾斜

 

 

文本组合定义


一个一个写是不是太麻烦了?我们可以使用font进行组合定义。但是使用组合定义必须注意以下几点:

 

必须有字体规则

必须有字符大小规则

颜色不能进入组合定义

 

image-20200712014703797

 

文本组合定义

 

文本样式

大小转换


  如果想让一段文本的字体与大小写看起来不太一样,可使用font-variant进行操作。

 

描述
normal默认值。浏览器会显示一个标准的字体。
small-caps浏览器会显示小型大写字母的字体。
inherit规定应该从父元素继承 font-variant 属性的值。

 

image-20200712134436569

 

文本样式-大小转换

 

字母大小写


  如果想对一段文本的字母做大小写转换,可使用text-transform。

 

描述
capitalize首字母大写
uppercase全部大写
lowercase全部小写

 

image-20200712135041186

 

字母大小写

 

文本线条


  我们可以用text-decoration来清除<a>标签自带的下划线,当然它还有其他的很多值。

 

描述
none默认。定义标准的文本。
underline定义文本下的一条线。
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink定义闪烁的文本。
inherit规定应该从父元素继承 text-decoration 属性的值。

 

image-20200712140021483

 

文本线条

 

文本阴影


  如果想让一段文本具有阴影的效果,可使用text-shadow来进行设置,它的参数顺序如下:

  颜色,水平偏移,垂直偏移,模糊度

 

image-20200712140538702

 

文本阴影

 

空白处理


  如果文本中有许多空白,那么是显示不出我们想要的效果的,除非你在<pre>标签中。我们可以使用white-space来控制文本中的空白显示。它的值如下:

 

描述
pre保留文本中的所有空白,类似使用 pre 标签
nowrap禁止文本换行
pre-wrap保留空白,保留换行符
pre-line空白合并,保留换行符

 

image-20200712141220406

 

 

空白处理

 

文本溢出


  如果一个容器里的文本太长,那么它不会自动换行而是溢出。我们可以使用overflow-wrap: break-word;让它自动换行。

  如果你不想让它换行,而是在结尾显示...,我们需要用到2个组合的属性,overflow: hidden;代表溢出部分隐藏,text-overflow: ellipsis;代表后面加上...。

 

image-20200712141933471

文本溢出-未设置

 

  设置了overflow-wrap: break-word;

image-20200712142043237

 

  设置了overflow: hidden; text-overflow: ellipsis;

image-20200712142202461

段落控制

文本缩进


  文本缩进使用text-indent,跟上单位。可以是px,em,或者rem。

 

image-20200712142450591

 

文本缩进

 

水平对齐


  我们可以使用text-align来进行文本的对齐方式。

 

描述
left左对齐
right右对齐
center居中对齐

 

image-20200712143246998

 

水平对齐

 

垂直对齐


  垂直对齐一副图像请使用vertical-align。

 

描述
baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom把元素的顶端与行中最低的元素的顶端对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit规定应该从父元素继承 vertical-align 属性的值。

 

image-20200712145222588

 

垂直对齐

 

单词间距


  请使用word-spacing来控制单词与单词之间的间距。

 

image-20200712145525319

 

 

单词间距

 

字符间距


  请使用letter-spacing来控制字符与字符之间的间距。

image-20200712145902612

 

字符间距

 

排版模式


  如果想对文本进行排版,可使用writing-mode。

 

模式说明
horizontal-tb水平方向自上而下的书写方式
vertical-rl垂直方向自右而左的书写方式
vertical-lr垂直方向内内容从上到下,水平方向从左到右

 

image-20200712152545651

 

排版模式



少客联盟- 版权声明 1、本主题所有言论和图片纯属会员个人意见,与少客联盟立场无关。
2、本站所有主题由该帖子作者发表,该帖子作者admin少客联盟享有帖子相关版权。
3、少客联盟管理员和版主有权不事先通知发贴者而删除本文。
4、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者admin少客联盟的同意。
5、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任。
6、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。
7、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意。
8、官方反馈邮箱:chinasuc@chinasuc.cn


上一篇:前端常用60余种工具方法
下一篇:编程语言历史
Whatever is worth doing is worth doing well. juvenile hacker league
最新回复 (0)
    • 少客联盟
      2
        登录 注册 QQ登录(停用)
返回