CSS字体与文本样式详解

html-css014

CSS字体与文本样式详解,第1张

学习导航

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教程等,望大家能以学习为目的,每天阅读一篇文章,了解身边的技术。陪有梦想的人一起成长!

css样式表中字型加粗的属性是什么?

字型加粗

font-weight 属性设定文字的粗细。

使用 bold 关键字可以将文字设定为粗体。

关键字 100 ~ 900 为字型指定了 9 级加粗度。如果一个字型内建了这些加粗级别,那么这些数字就直接对映到预定义的级别,100 对应最细的字型变形,900 对应最粗的字型变形。数字 400 等价于 normal,而 700 等价于 bold。

如果将元素的加粗设定为 bolder,浏览器会设定比所继承值更粗的一个字型加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。

CSS字型加粗的方法:

font-weight 属性设定文字的粗细。使用 bold 关键字可以将文字设定为粗体。

例如:

:

<p>字型加粗</p>

css:

p{

font-weight:blod

}

css中font样式常用的使用方法:

font-style:规定字型样式

font-weight:规定字型粗细

font-family:规定字体系列

两种方法给字型加粗,一种就是直接用<b>标签,例如 : <b>粗</b>

或者用css新增样式  <div class="page_speeder_909503540">加粗 </div>

可以用的值有下面这些。400 等同于 normal,而 700 等同于 bold。

normal   预设值

bold   定义粗体字元

bolder   定义更粗的字元

lighter   定义更细的字元

100

200

300

400

500

600

700

800

900

java awt 中加粗前字型的属性是什么

是jdk中已有的方法 一般如果是自己定义的函式名的话 不要使用jdk中已有的 会混淆

DW中字型加粗的程式码是?

实现方法1:

<font class="page_speeder_1274502367">加粗</font>

实现方法2:

<b>加粗</b>

实现方法3:

<strong>加粗</strong>

vf中给LABEL中字型加粗的控制元件是什么

在label的属性中有一项是是否设定为粗体的属性,就是fontbold属性

CSS样式表所有的属性药备注

找一个css手册来看会比较全面,例如:CSS2.0.chm 另外要多去写。

在CSS样式表中为什么filter属性不能用?

filter类似的滤镜火狐是不支援的,

只有IE支援他。

想实现类似的功能,需要使用其他手段~~

字型加粗的HTM CSS程式码

<span class="page_speeder_710819444">加粗演示</span>