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

一、设置字体大小CSS单词与语法 - TOP基本语法结构:

.divcss5{font-size:12px;}
设置了文字大小为12px像素
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:最大
也可取具体长度单位值

二、font-size使用方法 - TOPfont-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%大小

三、使用效果与截图 - TOP对应CSS+div代码:

体感音乐
体感音波

01. < !DOCTYPE html > 02.< html > 03.<head> 04.<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 05.<title>font-size字体大小测试-DIVCSS5实验</title> 06.<style type="text/css"> 07.body{ font-size:12px; line-height:24px;} 08..exp1{font-size:12px;} 09..exp2{font-size:xx-small;} 10..exp3{font-size:small;} 11..exp4{font-size:x-large;} 12..exp5{font-size:larger;} 13..exp6{font-size:smaller;} 14..exp7{font-size:50%;} 15..exp8{font-size:150%;} 16.</style> 17.<!-- www.divcss5.com --> 18.</head> 19.<body> 20.<div class="exp1">我被font-size值为12px大小</div> 21.<div class="exp2">我被font-size值为xx-small大小</div> 22.<div class="exp3">我被font-size值为small大小</div> 23.<div class="exp4">我被font-size值为x-large大小</div> 24.<div class="exp5">我被font-size值为larger大小</div> 25.<div class="exp6">我被font-size值为smaller大小</div> 26.<div class="exp7">我被font-size值为50%大小</div> 27.<div class="exp8">我被font-size值为150%大小</div> 28.</body> 29.</html>
Font-size样式设置与IE浏览对比效果图:

FONT-SIZE样式属性演示图

四、font size=5什么意思 - TOP有时我们看见或遇到如:
<font size="5">内容</font>
这个方法也是直接使用font标签加size设置对象字体大小。这里5代表设置对象字体大小为5号字。
大家可以使用此方法测试测试比如设置size="2"、size="3"、size="8"等等不同值观察观察区别并掌握。

五、CSS font-size常见运用 - TOP5-1、直接标签内使用font-size设置对象内容字体大小
<div style="font-size:14px">我被设置字体大小为14px</div>

5-2、使用标签与CSS样式分离设置对象内容字体大小理疗床垫(推荐)
CSS代码:.divcss5{ font-size:16px;}

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

六、font-size案例 - TOP1、文字大小案例CSS代码:

01.#divcss5{ font-size:14px;} 02..divcss5{ font-size:18px;} 2、字体大小案例HTML代码:

01.<div id="divcss5">我大小为14px</div> 02.<div class="divcss5">我大小为18px</div> 3、font-size案例截图

font-size文字字体大小案例截图

七、对CSS font-size总结 - TOP我们使用CSS font-size设置对象字体大小样式,一般设置文字字体大小以具体长度单位值来确定对象内容文字大小。总之记住如CSS代码font-size:14px,即设置对象字体大小为14px(像素)。

对于对对象文本字体大小的样式控制设置我们可以使用font-size+具体数字+单位,即可实现对象内文字大小控制。一般字体大小为正,除了使用数字加单位设置对象文字文字大小实现,也可以以百分比进行文字大小设置如(100%)实现文本字体大小,大家下来可以试试。

扩展:如过遇到谷歌浏览器Chrome设置具体字体大小小于了12px会出现设置无效,此时可以看看解决谷歌浏览器设置文字字体小于12px方法

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

时间: 2024-10-16 14:11:04

CSS font-size字体文字大小样式属性-字体大小样式篇的相关文章

CSS如何设置列表样式属性,看这篇文章就够用了

原文:CSS如何设置列表样式属性,看这篇文章就够用了 列表样式属性# 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列表,列表的基础知识就简单说明下,本章内容主要说明的是如何给列表设置样式,若有不懂列表是什么的园友笔者建议去W3school官网进行学习. 列表样式常用的属性有4种如:list-style-type.list-style-position.lis

CSS中如何使用背景样式属性,看这篇文章就够用了

原文:CSS中如何使用背景样式属性,看这篇文章就够用了 css背景样式属性介绍# 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背景颜色. background-image url(背景图片路径) 设置背景图像. background-repeat repeat.repeat-x.repeat-y.no-repeat 设置背景图片是否平铺和平铺方向. backgroun

CSS(2)---css字体、文本样式属性

css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size).字体粗细(font-weight).字体风格(font-style).字体颜色(color). 1.字体设置(font-family) 网页中常用的字体有 宋体.微软雅黑.黑体 等,例如将网页中 所有p标签的字体设置为微软雅黑,可以使用如下CSS样式代码: p { font-family:"微软雅

CSS控制列表样式属性list-style有哪些?怎么用?

CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云南小天使的回答很好的帮助了众多遇到同样问题的网友原文地址http://www.w3cschool.cn/css3/question-10231611.html 以下为回答原文: 一.什么是CSS列表? CSS列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业

css属性字体(font)样式使用详解

现在主要设置的字体样式种类有以下五种 1.font-style:指定文本字体样式 itailc:指定为斜体 oblique:对于没有设计过斜体样式的文字强行用代码使其倾斜 2.font-variant:指定文本是否为小型的大写字母(只对字母有效) small-cap:小型的大写字母 3.font-weight:指定文本字体的粗细 bold:粗体400 4.font-size:指定文本字体尺寸 xx-small/x-small/small/medium/large/x-large/xx-large

网页CSS样式属性:font字体常识

同时声明中文字体的字体名称(英文)和显示名称(中文): font-family:SimSun,"宋体"; font-family:"Microsoft YaHei","微软雅黑"; font-family:STXihei,"华文细黑","Microsoft YaHei","微软雅黑"; 永远不要忘记声明英文字体,并且英文字体应该在中文字体之前 Font-family: Georgia,

CSS的字体样式属性

css文本样式值:font-size:#px: 文字大小font-family:字体样式,如:微软雅黑font-style:文字状态如 斜体等font-weight:文字粗细text-align:文本对齐font-variant :字体之间的转变,以小型大写字体或者正常字体显示文本.line-height:行高 上下距离会有变化,也可以用于行与行之间的空间(%)text-decoration:文本装饰 underline下划线 none去除下划线text-decoration: overline

CSS:字体样式(字体系列、大小、加粗、风格、变形等)

CSS 字体属性定义文本的(如斜体)和变形(如小型大写字母) 代码整理自w3school:http://www.w3school.com.cn <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equiv=&q

CSS样式中字体和大小

1.css中引入外部字体文件: @font-face 被列为了 CSS3 的一项新特性,其实它并不是什么新鲜技术,它最早出现在 CSS2 的规范定义中,但是在 CSS2.1 中又被删除,现在被正式列入 CSS3.目前主流的浏览器(IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+)都能够支持这个属性,所以不用担心会有浏览器兼容性问题. @font-face 允许您在网页中使用电脑中没有安装的字体,完全摆脱安全字体的限制.只需将字体包安装在服务器上