美文网首页
文本样式

文本样式

作者: hyt222 | 来源:发表于2017-06-30 13:31 被阅读0次

1.段落

通过文本的属性,我们可以指定很多东西。颜色、字符间距、文本如何对齐、如何对文本做装饰等等。

<p style="color:red;"> 让文字有不同颜色。

<p style="text-indent:2em;"> 第一行缩进。text-indent 后面跟长度单位,em 指的是当前字体大小的倍数,1em 就是这个字有多宽,缩进这个宽度。若输入百分比为整个页面的百分比,与em相同为相对值。可输入绝对单位,如 in (英寸)、cm(厘米)、 mm(毫米)、 px(像素)、 pt(1/72英寸)。可以为负值。

<p style="text-indent=-2em;padding:2em;"> 悬挂缩进(第二行开始比第一行缩进)。如果只用 padding 效果为设定内边距。

<p style="line-height:2em;"> 指定行高。用 2 也是一样的。行高只看数字,为当前字体尺寸倍数。带单位的数据为绝对间距。normal 为正常行间距。

<p style="text-align:left;"> 指定对齐方式。left / right / center / justify (两端对齐)

<p style="word-spacing:30px;"> 单词间空格(英文)。只看空格,中文无空格所以没有用。

<p style="letter-spacing:10px;"> 字符间距。

<p style="text-transform:uppercase;"> 转变字母大小写(英文)。uppercace(大写) / lowercase(小写) / capitalize(首字母大写)

<p style="text-decoration:underline overline line-through;"> 文字装饰(主要指画线),可组合。

<p style="white-space:normal;">空白字符处理。normal(把连续空格和换行当作一个空格) / pre(有多少空格都承认,回车也承认,不自动卷绕) / pre-wrap(自动卷绕,承认空格回车) / nowrap(不卷绕) / pre-line(合并空白,保留换行) 。

<p style="direction:ltr;"> 文字书写方向。ltr rtl 仅最后一行句号放到前面。中英文不会改变文字方向。

2.字体

可以指定文字的很多东西:字体、文字大小、是否加粗、斜体、变形、装饰(阴影,轮廓)

font-family 指定字体有两种方式:指定字体系列,给出字体具体名称。

给出字体名称对于英文字体,不同操作系统、不同浏览器名字基本一样。中文字体名字可能不一样,需要测试。如果浏览器没有这种字体会用默认字体替换。这时可以加入多种备选字体。

font-family:Times,TimesNR,serif; Times为中英文默认字体,中文用宋体。


字体系列有 5 个通用系列:

serif 大多数英文字体,是一种矢量字体,线条有粗细,会等比例放大,会在竖线两端出现小横线。

sans-serif 它的竖线上下两端不出现横线。(如HI

monospace 指的是等宽的字,比如像用于写程序代码,表达终端输出,所有字宽度一样。

cursive 表示类似手写的字体。

fantasy 无法归类的,比如不是文字而是形状、符号的字体。


font-style:normal / italic / oblique

normal 不倾斜的

italic 字体厂家做好的斜体,斜体字

oblique 浏览器计算产生的斜体,倾斜的文字


font-variant:small-caps; 小的大写字母,比正常的大写字母小一号,但所有字母都是大写。

font-weight:bold; 加粗。可以给100-900间的数字。

font-size:2em; 把字体变大或变小。也可用绝对值单位,但不是所有浏览器都支持。

3.效果

text-shadow:3px 5px 5px rgba(0,255,0,0.5);

阴影。4个参数,第一参数 3px 表示阴影在 x 方向距离字延伸多少,5px 表示往下延伸5个像素,5px 表示阴影模糊范围,rgba 为字体颜色。

阴影可以有很多变化方式,最终靠你自己调配这4个值可以做出很多效果。阴影可以有很多块。

<h1 style="text-shadow:0px -1px 0px #000000,0px 1px 3px #606060;color:#606060">

outline-color:red;outline-style:solid;outline-width:thin;

轮廓必须给出颜色和线形。最后的宽度可用数字表示像素。

相关文章

  • CSS-基础

    选择器样式:背景/大小样式:文本/字体 选择器 样式:背景/大小 样式:文本/字体 样式:边框 样式:内边距 样式...

  • Flutter组件

    文本及样式 Text: 显示简单样式文本TextStyle: 指定文本显示的样式TextSpan: 对一个Text...

  • Css样式--文本样式详解

    Css样式--文本样式详解 文本样式包括所谓的文本缩进:text-indent水平对齐:text-align:ce...

  • CSS(四)文本样式设置

    颜色表及HTML代码(部分) 文本样式 文本样式:对齐方式、文本修饰文本转换、文本缩进.... 作用:美化、修饰页...

  • CSS-1

    全局样式 类样式 背景样式 外部样式 文本样式 属性属性值作用color表示颜色的内容设置文本颜色directio...

  • HTML03-day

    文本标签 列表 颜色单位 字体分类 字体样式 行间距 颜色单位 字体其他样式 文本样式

  • 文本样式

    em即“emphasize”。 表示强调, 表示更强烈的强调。 默认样式是斜体, 默认...

  • 文本样式

    字体 通过font-family可以同时指定多个字体例如:p{font-family:Arial , Helvet...

  • 文本样式

    文本标签 em标签用于表示一段内容中的着重点。strong标签用于表示一个内容的重要性。通常em显示为斜体,而st...

  • 文本样式

    1. 文本对齐方式 text-align left(左对齐,默认值)right(右对齐)center(居中对齐)j...

网友评论

      本文标题:文本样式

      本文链接:https://www.haomeiwen.com/subject/gtsbcxtx.html