html文本框（html文本框默认文字）

在网页中文字作为信息的主要载体，非常重要，之前学习过HTML中关于文本、段落等格式的知识，这些只是简单排版，如果想制作更好看的文本样式，就的使用css 字体和文本样式了。

css字体

css 字体属性主要包括字体系列、字体大小、字体风格等其它样式。

1、设置字体系列 —— font-family

这个属性用来设置网页使用哪种类型的字体显示文本，语法如下：

font-family: “字体1″，”字体2″，”字体3″…

font-family 属性可以定义多个字体，浏览器会从前到后优先选择使用字体，当浏览器不支持第一个字体，则会尝试使用第二个字体，以此类推。如果浏览器不支持所有字体，则使用默认字体。

如下示例：

绝对大小不会随着页面大小改变而改变，如果要想使文字大小自适应不同的屏幕或设备就需要使用相对大小。

相对大小：

相对大小使用 em、%、rem等来设置大小，它们都是相对于某个参考基准的字体大小，来计算当前字体的大小，只是参考基准不同而已。

如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（1em = 16px,100%=16px）。

em和%都是相对于父级元素的字体大小，其子级元素会在其父级元素的计算结果上继续计算大小，如下示例：

2、字符间隔 —— letter-spacing

设置字符水平间距，如下示例：

6、水平对齐 —— text-align

有三种水平方向的对齐方式，居左，居中、居右，如下示例：

还有很多其它属性，在此不每个都介绍了，可参考如下：

12、文本溢出 —— text-overflow

text-overflow 属性指定当文本溢出时包含它的元素应该如何显示。可以设置文本被剪切、显示省略号 (…) 或显示自定义字符串（不是所有浏览器都支持）。

text-overflow 需要配合以下两个属性使用：

overflow: hidden;

如下示例：

Nk1trfjdh254rbKtN73Pxf958oPnABJGQ7oF1gEULMqB9QrWnKe5JUmpIuQ03Io8KTglCY1D0U1iKSIs9CWe5IK7FaiQ7d7lKMPmBkqypiNEPEUlToAJ0gjCpmaYum56QWBi78-K1raCDFntBiyJbcI4dSNf9HxOaNStBL9KKfNzG-kQQxMiiLrVuYHwgvn2bNnfL4aTZ4-8YMMZTwfZtCOPcDws_xq4owxAr21vpP2tBwpGgQXubwTHHuDrInZukHh-38hG6t1T-c_wXD7b71N1PkBKEXbkEXxcuFV51W-27T_SfpF4f-NJYuk76arl2LY3z1E8WbyYvPlaf46SSzsolRqGjaxps8yTh9r5n6EpVd1CH9N6EvfnqGTXXb52hl-Z4YL1O1q_2B4_AgAA__8Ji1c5″ >总结

本篇讲述了文字和文本的大部分样式设置，掌握这些css用法非常重要，网页大部分都是文本，要想制作一个漂亮的页面，这些是必须要学会的，且要学会融会贯通。

本篇主要讲了以下内容：

字体系列、大小、样式、粗细等样式的设置。字体font简写属性的使用。文本颜色、字符间隔、单词间隔、行高等设置。文本修饰、大小写转换、文本缩进、空白处理等。文本水平对齐、垂直对齐。文本阴影及文本溢出。

以上都是最基本的，要多加练习，才能够理解学会使用。感谢关注，祝学习愉快！

上篇：前端入门——css 盒子模型

html文本框（html文本框默认文字）

相关推荐