重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
html的字体样式主要通过css的font-size以及font-family来定义的,标签详解如下:
目前创新互联建站已为上1000+的企业提供了网站建设、域名、雅安服务器托管、网站托管、服务器托管、企业网站设计、敦煌网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
font-size
指定字体大小,常用单位有em和px
font-family
指定使用的字体
常用的中文字体有微软雅黑和宋体,英文字体有Arial
可以同时指定多个字体,使用英文的逗号分隔,浏览器会按顺序查找,找不到就找下一个,全部没找到就使用系统默认的
字体用中文表示 则需要用双引号或者单引号分隔,英文字体一般不需要用引号,但是如果 有特殊字符的(如空格,反斜杠,#,$等)也需要使用引号
font-weight
字体粗细(bold相等于设置该属性的值为700,normal相等于设置该属性值为400–不用单位,建议使用数字因为解析会更快)
fon-style
normal(一般用于让斜体不倾斜,em标签有加重强调的语义 但是字体会倾斜,可以为em 标签设置 font-style 属性值为 normal 取消其倾斜的效果)
字体样式可以连写
即 所有的字体样式 使用一个语句,但是有一定的语法规则和顺序
选择器 { font : font-style font-weight font-size/line-height font-family; }
字体样式连写时需要注意:一定要按顺序写,可以有省略不写的样式但是一定要按顺序,而且font-size和font-family是不可以省略的,否则会不起作用
文本外观样式
color:字体颜色
预定义的颜色如green,red等
十六进制,顺序是红绿蓝,十六进制是最常用的颜色表示方式
#ff0000 表示红色,等同于#f00(缩写,必须是两两相同的才可以进行缩写);#00f表示蓝色;#0f0表示绿色;#fff表示白色(所有的颜色都满格),#000000即#000表示黑色(所有的颜色都没有)
RGB代码:rgb(255,255,255)表示白色
文本修饰:text-decoration:none、underlined(比较常用,用于添加下划线和取消下划线)
line-hight:行间距,一般情况下,行间距只需要比字体大小大7或8个像素就可以了
text-align:文本内容的水平对齐方式
text-indent:段落首行缩进,单位使用em,1em就是一个字,所以该样式值为2em 表示 段落首行缩进两个字符
color属性:设置文本文字颜色。用法如下:
color:颜色值;
color属性可以设置的合法颜色值包括:16进制颜色值(例:#ffffff),rgb颜色值【例:rgb(0,0,0)】,rgba颜色值【例:rgb(0,0,0,0.5),0.5表示透明度】,hsl颜色值【例:hsl(120,65%,75%)】,hsla颜色值【hsl(120,65%,75%,0.3),0.3表示透明度】。
2、css文本文字行高(行间距)的属性
line-height属性:设置行间的距离(行高)。用法如下:
line-height:值;
具体cssline-height属性是如何设置文本文字的行间距,大家可以参考之前的文章【css如何设置行间距?css文本文字的行间距设置】,希望对大家有所帮助。
3、css设置文本文字的水平对齐方式的属性
text-align属性:设置元素中的文本文字的水平对齐方式。用法如下:
text-align:left||right||center||justify;
left:设置文本文字左对齐。默认值:由浏览器决定。
right:设置文本文字右对齐。
center:设置文本文字居中对齐。
justify:实现两端对齐文本效果。
4、css文本缩进属性
text-indent属性:设置文本缩进。
具体csstext-indent属性是怎样设置文本缩进的,大家可以参考【css如何实现首行缩进效果?text-indent属性实现首行缩进】。
5、设置文本文字装饰效果
text-decoration属性:定义添加到文本的修饰。
说明:
这个属性允许对文本设置某种效果,如加下划线。如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。
用法:
text-indent:none||[underline(下划线)||overline(上划线)||line-through(中划线)]||blink;
none:默认值,定义标准的文本。
underline:定义文本下的一条线。
overline:定义文本上的一条线。
line-through:定义穿过文本下的一条线。
blink:定义闪烁的文本。
6、文本字符的大小写转换属性
text-transform属性:控制文本字符的大小写。
用法:
text-transform:uppercase(全大写)||lowercase(全小写)||capitalize(首字母大写)||none;
7、文本文字间距的属性
word-spacing属性:设置文字或单词之间的间距,单词之间的间距=word-spacing+空格大小。
letter-spacing属性:设置字母间的间隔。
8、文本文字阴影的属性
text-shadow属性:向文本文字设置阴影
所有CSS字体属性
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。
学习导航
1、css中的长度与颜色
2、css中的文字属性
3、css中的文本属性
1、文字样式属性
font-family 字体属性
作用:元素内文字以什么字体来显示
语法:font-family:[字体1],[字体2],[......];
说明:含空格字体名和中文,用英文引号(")括起;多个字体用英文逗号隔开;引号嵌套,外使用双引号,内使用单引号。
font-size 文字大小
作用:元素内文字大小
语法:font-size:绝对单单位,相相对单位
color 文字颜色
语法:颜色名|十六进制|RGB
font-weight 文字粗细
语法:font-weight:normal 正常 | bold 加粗 | bolder 加粗 | lighter 细体 | 100-900
说明:默认值:normal 400等同于normal,而700等同于bold
font-style 文字样式
作用:为元素内文字设置样式
语法:font-style:normal 正常显示 | italic 文字倾斜 | oblique 文字倾斜(基本不用)
font-variant 字体变形
作用:设置元素中文本为小型大写字母
语法:font-variant:normal 正常显示| small-caps 将英文大小写字母调成为同宽
font 属性简写
语法:font:font-style font-variant font-weight font-size/line-height font-family;
说明:值之间空格隔开,注意书写顺序。
2、CSS文本样式
text-align
作用:设置元素内文本的水平对齐方式
语法:tex-align:left 左对齐 | right 右对齐 | center 居中对齐 | justify 两端对齐
注意:该属性对块级元素设置有效
line-height
作用:设置元素中文本行高
语法:line-height:长度值 | 百分比
说明:一行文字的高度,行高指文本行的基线间的距离
文字基线
注意:基线并不是汉字文字的下沿,看图理解自行理解
行高和行距
行高:基线到基线的距离
行距:底线到顶线的距离
注意:看图自行理解
行框和行内框
注意:看图自行理解
vertical-align
作用:设置元素内容的垂直方式
语法:vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | 长度 | 百分比
注意:看图自行理解
text-indent 首行缩进
3、文本样式属性
text-transform: capitzlize 首字母大写 | uppercase 字母大写 | lowercase 字母小写 | none 正常
text-decoration: underline 下划线 | overline 上划线 | line-through 删除线 | none 正常
综合实操案例
如果您觉得有用,记得在下方点赞、关注、留言,我会定期奉 上更多的惊喜哦,您的打赏支持才是我继续努力的动力,么么哒。
每日分享在学习过程中总结的学习经验,学习笔记,笔试题,HTML,CSS,JavaScript,jQuery教程,Vue教程,PHP教程,TinkPHP教程等,望大家能以学习为目的,每天阅读一篇文章,了解身边的技术。陪有梦想的人一起成长!
1、打开开发工具,新建一个HTML文件。
2、使用font-family属性设置,字体代码:.demo1{font-family: "microsoft yahei";}。
3、使用font-size属性设置字体的大小代码:.demo1{font-size: 20px;}。
4、使用font-style 属性设置字体风格:normal - 文本正常显示italic - 文本斜体显示oblique - 文本倾斜显示。
5、使用font-weight属性设置字体的粗细代码:.demo2{font-weight: 600;}。
6、使用color设置字体颜色代码:.demo1{color: #FF0000;}。就完成了。