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字体文字大小样式属性-字体大小样式篇

时间: 07-04

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

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-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置italic和oblique它们的效果往往是一样的 - 一般我们只会使用italic font-weight可以用来设置文本的加粗效果 可选值: normal,默认值,文字正常显示 bold,文字加粗显示 该样式也可以指定100-900之间的9个值, 但是由于用户的计算机往往

CSS样式属性分类

A 文字 1 font-family:字体名称 注意: 当指定多种字体时,用“,”分隔每种字体的名称 当字体名称包含两个以上分开的单词是,用“”把该字体名称括起来. 当样式规则外已经有“”时,用‘’代替“”. 2 font-size:字号参数. 3 font-style:斜体字的名称. normal正常状态.italic斜体字.oblique 斜体和正常状态之间. 4 font-weight:字体粗细. 取值是:number(100-900) 或者参数 lighter(细体) 和bold(粗体)

快速记住CSS样式属性单词及输入HTML+CSS的方法

快速记住CSS样式属性单词及输入HTML+CSS的方法,DIVCSS5介绍一种快速输入HTML代码.快速输入CSS样式英文单词与样式值输入方法.降低英文单词代码输入错误概率,提升输入代码速度.DW软件输入CSS和HTML的终极用法(非面板输入法). DIVCSS5教大家一种快速记住CSS样式属性单词及用法的方法,告别死记硬背才是硬道理. CSS样式布局中使用的CSS样式英文单词,不需要死记硬背,会使用认识,知道长什么样即可.在DIV CSS布局开发中对于是否会拼写CSS属性单词关系不大,会使用.

css样式表----------样式属性(背景与前景、边界和边框、列表与方块、格式与布局)

一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url(路径); /*设置背景图片(默认为平铺.)*/ background-repeat:no-repeat/repeat-x/repeat-y;no-repeat /*不平铺 repeat-x 橫向平铺 repeat-y 纵向平铺 */ background-position:center; /*背景图片居中

如何为要被打印的内容设置CSS样式属性

如何为要被打印的内容设置CSS样式属性:有时候我们要打印的内容也是需要美观度的,并不希望太原汁原味了,所以要对其进行一下样式设置,本章节就简单介绍一下,如何利用CSS设置要被打印内容的样式,方式有多种,下面一一做一下简单介绍.一.使用link引入外部样式表: <link rel="stylesheet" href="css/style.css" media="screen" /> 以上代码的CSS样式用于屏幕显示效果,对于打印无效.关

CSS中常用的五种编辑属性

CSS 字体属性 属性  描述 font 简写属性.作用是把所有针对字体的属性设置在一个声明中. font-family 设置字体系列. font-size 设置字体的尺寸. font-style 设置字体风格. font-variant 以小型大写字体或者正常字体显示文本. font-weight 设置字体的粗细. CSS 文本属性 属性 描述 color 设置文本颜色 direction 设置文本方向. line-height 设置行高. letter-spacing 设置字符间距. tex

R语言ggplot2绘图设置X轴刻度,字体大小及绘图区大小

> colnames(data1)[seq(2,ncol(data1), 15)]  [1] "AAAA" "AAGG" "ATGC" "ACGT" "AGGA" "TACG" "TTCC" "TCCT" "TGCA" "CATG" [11] "CTTC" "CCTT&qu

NPOI.dll 用法。单元格,样式,字体,颜色,行高,宽度。读写excel

1.25 NPOI.dll using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Data.SqlClient; using NPOI.HSSF.UserMod

HTML 样式属性

1 @charset "utf-8"; 2 /* CSS Document */ 3 <style> 4 p{ 5 /*背景与前景*/ 6 background-color:#000;/*背景色,样式表优先级高*/ 7 background-image:none;/*设置背景图片(默认)*/ 8 background-attachment:fixed;/*背景是固定的,不随字体滚动*/ 9 background-repeat:no-repeat;/*不平铺,regeat 平