欢迎来到酱油妹!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

酱油妹

CSS font-size字体文字大小样式属性

企业模板

CSS font-size

字体文字大小样式属性-

字体大小

样式篇:

.pcss5{font-size:12px;}


设置了文字大小为12px像素
Font-size+字体大小数值+单位

本节酱油妹为大伙介绍通过CSS样式设置文字字体大小常识,涉及CSS样式单词

font-size

目录 设置字体大小CSS单词与语法 font-size用法 font-size成效截图 font size=5的意思是 CSS font-size容易见到运用 font-size案例 对CSS font-size概要

1、设置字体大小CSS单词与语法 - TOP

基本语法结构:

CSS font-size字体文字大小样式属性

单词:font-size
语法:font-size : absolute-size | relative-size | length
取值:xx-small | x-small | small | medium | large | x-large | xx-large
xx-small:最小
x-small:较小
small:小
medium:正常(默认值),依据字体进行调整
large:大
x-large:较大
xx-large:最大
也可取具体长度单位值

2、font-size用法 - TOP

font-size:12px; 设置对象具体字体大小为12px
font-size:xx-small; 设置文字大小为最小
font-size:small; 设置文字字体大小为小
font-size:x-large;设置对象字体大小为较大
font-size:larger;设置对象字体大小为大
font-size:smaller;相对于父容器中字体尺寸进行相对减小
font-size:50%;相对于父容器中字体尺寸进行相应调整为50%大小
font-size:150%;相对于父容器中字体尺寸进行相应调整为150%大小

3、用成效与截图 - TOP

对应CSS+p代码:

 < !DOCTYPEhtml > < html ><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>font-size字体大小测试-酱油妹实验</title><styletype="text/css">body{font-size:12px;line-height:24px;}.exp1{font-size:12px;}.exp2{font-size:xx-small;}.exp3{font-size:small;}.exp4{font-size:x-large;}.exp5{font-size:larger;}.exp6{font-size:smaller;}.exp7{font-size:50%;}.exp8{font-size:150%;}</style><!--www.pcss5.com--></head><body><pclass="exp1">我被font-size值为12px大小</p><pclass="exp2">我被font-size值为xx-small大小</p><pclass="exp3">我被font-size值为small大小</p><pclass="exp4">我被font-size值为x-large大小</p><pclass="exp5">我被font-size值为larger大小</p><pclass="exp6">我被font-size值为smaller大小</p><pclass="exp7">我被font-size值为50%大小</p><pclass="exp8">我被font-size值为150%大小</p></body></html>

Font-size样式设置与IE浏览对比成效图:

5-2、用标签与CSS样式离别设置对象内容字体大小(推荐)


CSS代码:.pcss5{ font-size:16px;}

FONT-SIZE样式属性演示图

4、font size=5的意思是 - TOP

有时大家看见或遇见如:
<font size="5">内容</font>
这个办法也是直接用font标签加size设置对象字体大小。这里5代表设置对象字体大小为5号字。
大伙可以用此办法测试测试譬如设置size="2"、size="3"、size="8"等等不同值察看察看不同并学会。

5、CSS font-size容易见到运用 - TOP

5-1、直接标签内用font-size设置对象内容字体大小


<p style="font-size:14px">我被设置字体大小为14px</p>

CSS font-size字体文字大小样式属性
font-size文字字体大小案例截图

对应HTML DIV代码:<p class="pcss5">我被CSS font-size样式设置字体大小为16px</p>
大家常常以此办法来设置对象字体大小。也就是所说的表现与CSS样式离别。

6、font-size案例 - TOP

1、文字大小案例CSS代码:

#pcss5{font-size:14px;}.pcss5{font-size:18px;}

2、字体大小案例HTML代码:

<pid="pcss5">我大小为14px</p><pclass="pcss5">我大小为18px</p>

3、font-size案例截图

7、对CSS font-size概要 - TOP

对于对对象文本字体大小的样式控制设置大家可以用font-size+具体数字+单位,即可达成对象内文字大小控制。通常字体大小为正,除去用数字加单位设置对象文字文字大小达成,也可以以百分比进行文字大小设置如(100%)达成文本字体大小,大伙下来可以试一试。

大家用CSS font-size设置对象字体大小样式,通常设置文字字体大小以具体长度单位值来确定对象内容文字大小。总之记住如CSS代码font-size:14px,即设置对象字体大小为14px(像素)。

扩展有关阅读:
p字体大小

扩展:如过遇见Google浏览器Chrome设置具体字体大小小于了12px会出现设置无效,此时可以看看解决Google浏览器设置文字字体小于12px办法:http://www.pcss5.com/wenji/w321.shtml


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.jiangyoumei.com 关注: 时间:2021-05-16 22:00
版权声明:凡注明来源为www.jiangyoumei.com的均为本站原创,转载请注明来源。
本文网址:http://www.jiangyoumei.com/CSS/CSSjichu/20210516/12670.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧