css常用的字体样式和文本样式 您所在的位置:网站首页 一加怎么换字体样式 css常用的字体样式和文本样式

css常用的字体样式和文本样式

2023-07-10 04:16| 来源: 网络整理| 查看: 265

本节介绍的是css常用的字体样式和文本样式 字体样式: 1.控制字体粗细的font-weigh 2.字体风格font-style 3.行高line-height 4.以及字体综合font 文本样式: 5.水平对齐text-align 6.文本修饰text-decoration 7.文本缩进text-indent 8.字体类和文本类继承性 1.font-weight字体粗细

作用:设置文字是否加粗显示,一般是用于重点内容 属性名:font-weight 属性值:单词类型、数字类型 单词类型:normal、bold、bolder、lighter 数字类型:100-900的整百数字

属性值作用normal默认(400)bold加粗(700)bolder更粗lighter细体

代码示范:

p{ font-weight: bold; } a{ font-weight: 700; } 复制代码

2.字体风格font-style

作用:设置文字是否斜体显示 属性名:font-style 属性值:normal、italic、oblique

属性值作用normal默认字体italic设置斜体文字,主要针对英文以字体中的斜体样式显示oblique设置斜体文字,只将文字倾斜显示,与字体无关

代码示范:

.italic{ font-style: italic; } .oblique{ font-style: oblique; } 复制代码 3.行高line-height

作用:设置一行文字实际占用高度,文字字号在行高中是垂直居中的 属性名:line-height 属性值:数字、长度、百分百、关键词(normal)

注意:无单位数字乘以该元素的字体大小。计算值与指定值相同。大多数情况下,这是设置line-height的推荐方法!!! 代码示范:

p{ line-height: 2; } a{ line-height:20px; } 复制代码

4.以及字体综合font

概念:font综合里有五个单一属性,分别为:字体(family)、字号(size)、行高(inline-height)、加粗(weight)、斜体(style)。属性值要2个到多个以上才可以使用,并且要用空格按顺序分开。

写法1:font综合书写时,必须要有字号和字体参与,字号在前,字体再后,顺序颠倒无效

代码示范:

p{ font:14px "楷体"; } 复制代码

写法2:对字号、行高、字体书写时,顺序必须是字号/行高、字体,且字号和行高之间要用/分隔出来 代码示范:

p{ font:14px/2 "宋体"; } 复制代码

写法3:必须按照顺序书写:斜体、粗细、字号/行高、字体书写,斜体和粗细不分先后,但要在字号前面 代码示范:

p{ font:italic bolder 14px/2 "宋体"; } 复制代码 5.水平对齐text-align

作用:给文本类水平方向对齐,也就是x轴,在盒子中,不论文本是单行还是多行都会对应方向对齐。 属性值:left、center、right

属性值作用left向左对齐,默认值center居中对齐,较为常用right向右对齐

代码示范:

.center{ text-align:center; } .left{ text-align:left; } .right{ text-align:right; } 复制代码 6.文本修饰text-decoration

作用:设置文本整体是否有线条的修饰效果 属性值:none、overline、line-through、underline

属性值作用none没有修饰,默认值,一般用于清除a标签默认值overline上划线line-through中划线,用作删除线,与del标签默认值一致underline下划线,a标签默认值

代码示范:

.none{ text-decoration:none; } .overline{ text-decoration:overline; } .line{ text-decoration:line-through; } .underline{ text-decoration:underline; } 复制代码

7.文本缩进text-indent

作用:设置首行方向缩进,左负右正进行区分方向缩进 属性值:px、em、百分比

属性值作用px单位表示首行缩进多少pxem单位首行缩进几个中文字符位置百分比首行缩进父级标签的width百分比

代码示范:

p{ text-indent:2em; } 复制代码

8.字体类和文本类继承性

继承性:继承是一种规则,它允许样式不仅应用于特定的html标签元素,而且应用于其后代元素。父级设置的样式自动生成到子级的样式内叫做继承性,字体类大部分可以被继承,且子级设置样式可以覆盖继承性的样式

代码示范:

article{ /* 父级*/ width: 400px; height: 400px; margin: 40px auto; box-shadow: 0 0 5px 10px pink; color: red; font-weight: bold; font-size: 30px; text-align: center; font-style: italic; line-height: 400px; text-decoration:underline; } section{ color:pink; /*子级*/ } 复制代码

点击示范:



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有