您的位置:首页 > div css问集 > 【 返回上一页

div字体大小几种情况下css布局方法

div内文字字体大小几种应用场景css设置字体大小方法经验。以下是div css布局中遇到div字体大小排版的几种情况,逐一讲解与图文案例。

一、全网页div字体大小统一设置

特别是在以前不同品牌不同版本浏览器,其网页html默认字体大小、默认字体字体颜色、图片是否边框都是不统一的,避免这种最基本兼容问题。

1、统一设置div字体CSS代码:

div{font-size:12px}

在网页CSS最开始地方放入设置以上代码即可,实现全网页统一设置初始化div字体大小为12px。

也可以

body,div{ font-size:12px;}

2、实例代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div的字体大小 实例 www.thinkcss</title>
<style>
body,div{ font-size:12px;}
</style>
</head>
<body>
<div>我在div内,字体大小尺寸统一被设置12px</div>
</body>
</html>

3、截图

网页初始化统一div字体大小
网页初始化统一div字体大小

二、某一div内字体大小的设置

以上介绍统一div的字体大小,而实际布局时候,网页很多时候不同地方字体大小排版是不同的,这个时候即使使用了div标签布局又初始化了字体大小也不要紧,只需要再新建idclass设置再设置需要字体大小即可。

body,div{ font-size:12px;}
.ztdx{font-size:20px}

这里如果div使用class=ztdx,这个时候对应这个DIV盒子内文字大小也就会再次被设置为20px。其它div字体内容仍然是默认12px大小。

1、实例代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div的字体大小 实例 www.thinkcss</title>
<style>
body,div{ font-size:12px;}
.ztdx{ font-size:20px}
</style>
</head>
<body>
<div>我在div内,字体大小尺寸统一被设置12px</div>
<div class="ztdx">我字体大小被设置20px</div>
</body>
</html>

2、截图

针对性设置div内字体大小实例截图
针对性设置div内字体大小实例截图

三、div内部分字体大小改变的布局

以上两种情况比较常见,当然有的时候一个div设置字体大小后,但div内其中一部分文字字体大小又不同,这个时候就需要再次使用class或id,通常使用span标签来设置不同字体大小css样式。

1、实例代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div的字体大小 实例 www.thinkcss</title>
<style>
body,div{ font-size:12px;}
.ztdx{ font-size:20px}
.dandu{ font-size:36px}
</style>
</head>
<body>
<div>我在div内,字体大小尺寸统一被设置12px</div>
<div class="ztdx">我字体大小被设置20px</div>
<div class="ztdx">我字体大小被设置20px,
<span class="dandu">我单独大小为36px</span>,测试内容</div>
</body>
</html>

以上div字体大小实例是不断叠加进行,便于大家下来学习时候拷贝代码使用。

2、截图

div字体大小单独设置实例截图
div字体大小单独设置实例截图

从以上三种情况,让大家轻松掌握实践html网页布局重构时,对于div与字体大小各种情况布局。

相关标签: 字体大小 div 字体 大小 字体尺寸
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/wenti/1465.shtml

日期:2017-11-17 12:44:17 来源:www.thinkcss.com 作者:thinkcss原创
上一篇:html怎么改变图片大小?
下一篇:没有了

热门点击