首页 > 作文

前端之CSS字体和文本类属性

更新时间:2023-04-03 14:22:12 阅读: 评论:0

一、字体类属性:

1.字体类型:

font-family:字体1,字体2,字体3;

常用写法: font-family:”微软雅黑”,arial;

注:a) 多个字体之间用逗号分隔;

b)中文字体要放在双引号中,英文字体由多个单词组成时也要加双引号;

c) 浏览器优先识别字体1,如果找不到字体1,识别字体2,如果都找不到,显示浏览器默认字体。

2.字体大小:

font-size:数值+单位;

注:a)浏览器默认字体大小为16px;

祝福老师的诗 b) font-size:medium;等价于 font-size:16px;

c)字体大小一般设置偶数不设置奇数;

3.字体加粗:

font-weight:normal(常规字体)|bold(加粗)|bolder(加粗)|100-500(常规字体)|600-900(加粗字体);

4.字体倾斜:

font-style:normal(常规字体)|italic(倾斜)|oblique(倾斜);

5.文本是否大写:

font-variant:normal(常规字体)|small-caps(小型的大写字母字体);

注:此属性主要应用于英文

6.字体颜色:

color:颜色值;

颜色值的几种设置方式:

a)十六进制写法 #000 黑色 #fff 白色 #f00 红色

b)rgb写法 rgb(0,0,0) 黑色 rgb(255,255,255) 白色

c)rgba写法 a代表透明度,取值范围0-1 rgba(0,0,0,0.6)

d)颜色单词 red(红色) black(黑色) white(白色) green(绿色) yellow(黄色) gray(灰色) pink(粉色) blue(蓝色)

7.font简写方式:

font:italic bolder 12px “微软雅黑”,arial;

注:使用简写方式时,font-size和font-family不可与其他属性互换位置,也不能分开写

font:12px/1.5 “古筝有几根弦微软雅黑”,arial; (字体大小为12px,行高是字体大小的1.5倍)

注:将font-size和line-height结合在一起时,用/来表示,/前表示字体大小,/后表示字体行高,当行高不加单位时,表示行高为

字体大小的多少倍

注:只有在同时指定font-size和font-family时才能使用/这种写法

二、文本类属性:

1.水平对齐方式:

text-align:left(默认值,左对齐)| center(居中对齐)|right(右对齐)|justify(两端对齐,只对英文起作用);

注: text-align只对文本,图片,内联元素起作用,给文本,图片,内联元素所在父元素加

2.垂直对齐方式:

vertical-align:top|middle|bottom;

  top:居顶部对齐

  middle:居中对齐

  bottom:居底部对齐

注:该属性只对行内块元素有效,给本元素添加此属性;

一般在设置图片和文字居中对齐的时候会用到,input控件垂直居中对齐时会用到;

3.行高:

line-height:数值+单位;

注:当单行文本的行高等于容器高时,可以实现单行文本在容器中垂直居中;

line-height只写数值不加单位时,表示倍行高,行高为字体大小的多少倍;

eg: line-height:3; 字体大小的三倍

注:line-height不允许设置负值

4.文本修饰:

text-decoration:none(默认值)|underline(下划线)|overline(上划线)|line-through(删除线);

常用: a{text-decoration:none;}

5.首行缩进:

text-indent:数值+单位;

注:向前缩进为负值,会达到一种隐藏的效果,向后缩进为正值

只对第一行有效!

6.字符间距(汉字与汉字,字母与字母的间距):

letter-spacing:normal(默认间隔)|数值+单位;

注:值越大,间距越大,值越小,间距越小,允许设置负值

7.词间距(主要针对英文):

word-spacing:normal(默认值)|数值+单位;

注:允许设置负值

8.文本是否大小写:

text-transform:none(默认值)|capitalize(首字母大写)|upperca(全部大写)|lowerca(全部小写);

9.长单词换行:

word-wrap:normal(默认值)|break-word;

注:在长单词或 url 地址内部进行换行时设置为break-word

10.强制在一行显示:

wh新店开业邀请函ite-space:normal(默认值)|nowrap(不换行);

注:常在省略号设置中用到

杜杜聿明将军简介

11.文本流控制:

layout-flow:horizontal(从左到右)|vertical-ideo车品会graphic(从上到下);

本文发布于:2023-04-03 14:22:10,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/4fe6c6e741a3c3fc2cf435f670f89f84.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:前端之CSS字体和文本类属性.doc

本文 PDF 下载地址:前端之CSS字体和文本类属性.pdf

标签:字体   字体大小   文本   数值
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图