本文主要介绍CSS的字体属性和文本属性,最后再介绍CSS在HTML中的引入方式。
CSS字体属性
CSS Fonts(字体)属性能用于定义字体系列属性,包括但不限于字体大小、粗细、字体样式等。
字体系列
在CSS中使用font-family属性定义文本的字体系列(如微软雅黑、宋体之类的):
如果Arial字体(Arial 是一种常见的无衬线字体,广泛应用于各种操作系统和浏览器中。)可用,那么段落标签中的字体系列就是font-family;如果不可用,那么将从左往右依次尝试这些字体。
注意事项:
- font-family中可以指定多种字体,会从左往右依次尝试,直到某种字体可用为止;但是各种字体之间必须使用英文逗号进行分隔!
- 一般情况下,假如有空格隔开的多个单词组成的字体,该字体需要加引号:如"Microsoft Yahei",由两个单词组成,所以说要加引号。
- 为了保证页面在各种浏览器中的兼容性,尽量使用系统自带的字体,非特殊情况不使用花里胡哨的字体。
- 一些常见的字体:body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }。
字体大小
字体的大小对于页面的展示十分的重要,在CSS中通过font-size属性定义字体大小,最常用的设置字体大小的单位是px(像素):
通过页面中的展示可以明显看到字体大小被设置为了100px,说明通过font-size成功修改了字体的大小。对于字体大小有几点需要注意的:
- 像素是定义字体大小最常用的单位。
- 谷歌浏览器默认的字体大小为16px,但是不同浏览器默认的字体大小可能不一致,所以说要尽量设置一个明确的字体大小值,不要使用默认字体大小。
- 可以通过HTML中的body标签指定整个页面的文字大小(整体布局)。
字体粗细和文字样式
字体粗细
CSS中可以通过font-weight属性指定字体的粗细,normal是font-weight的默认属性值,代表不加粗;bold属性值是加粗。还可以通过不带任何单位的数字定义字体的粗细,数字可以是100-400的任何值,400就等同于normal,700等同于bold,在实际开发中更喜欢使用数字表示粗细。
文字样式
CSS中可以通过font-style属性设置文本风格,normal是font-style的默认属性值,代表无文本风格;通过设置italic属性值可以将字体变为斜体(这和em标签的作用类似),实际开发中其实很少给文字添加斜体,反而更多的将斜体标签改为不倾斜的字体:
这样设置以后,em标签中的文字就不是斜体了,而是标准的字体样式:
字体复合属性
CSS中可以使用font属性来指定字体的复合属性(包括文本风格、字体粗细、字体大小、字体系列等,多个属性都可以在font属性中指定)。但是font属性使用起来必须要十分规范:
1. 使用font属性时,必须按照font-style -> font-weight -> font-size/line-height -> font-family的顺序指定属性值,不能更改顺序,并且各个属性之间通过空格进行分隔
2.不需要设置的属性可以省略,此时会取这些属性的默认值;但是font中必须保留font-size和font-family这两个属性,否则font属性不起作用。
成功通过font属性设置了字体的复合属性。假如font中少了font-family:
那么font属性就不会生效。
CSS文本属性
CSS Text(文本)属性可以定义文本的属性,比如文本的颜色、文本对齐、文本装饰、缩进和行间距等,是页面显示的非常重要的属性。
文本颜色
通过color属性可以定义文本的颜色,定义颜色可以使用三种不同的方式,比如:直接使用预定义的颜色值,如red、green、black等(color: red),这些预定义的颜色使用方便,但是颜色过于单一; 还可以使用颜色对应的RGB代码(color: rgb(255,0,0)或color: rgb(100%,75%,30%)); 还可以使用颜色的十六进制表示法表示(color: #FF0000,#FF6600),rgb和十六进制表示颜色,色彩丰富,色域广阔,开发中最常用的是十六进制表示法。
文本对齐
在CSS中使用text-align属性设置元素内文本内容对齐的方式,left表示文本内容左对齐(这是默认值);right表示文本内容右对齐;center表示文本内容居中对齐(这是布局中常用的)。
通过text-align属性设置了段落中的文本居中显示:
文本装饰
通过text-decoration属性可以给文本内容添加装饰,比如文本的下划线、删除线、上划线等。none是默认的属性值,表示没有装饰线;uderline是下划线;overline是上划线(几乎不会使用);line-through是删除线(这个属性值也是不常用的)。text-decoration中最重要、常用的用法是:因为超链接中的文本自带下划线,可以通过设置<a>标签中的text-decoration属性(设置为none)删除其下划线。
可以通过text-decoration属性删除超链接文本中自带的下划线:因为文本装饰被设置为了none。
文本缩进
在日常生活中,文章中的每一段都是需要首行缩进的,一般缩进量为两个字符。在CSS中可以使用text-indent属性来指定文本的第一行缩进,这个属性一般是用来实现段落的首行缩进。 通过设置text-indent属性,元素的第一行可以缩进指定的长度(这个长度甚至可以是负值);长度的单位可以是像素,但是使用得更多的单位是em,em是一个相对单位,1个em就是当前元素所设置的font-size的大小(假如font-size设置为100px,那么一个em的大小就是100px),若当前元素没有设置大小,那么em就是其父元素的1个文字的大小。
通过text-indent设置段落的首行缩进:
发现成功在每一段的首行缩进了两个字符,这符合人们的日常生活习惯。
行间距
可以通过line-height属性用于设置行间的距离,这也就是平时说的行高,可以控制文字行与行之间的距离,单位一般使用像素。
明显发现行与行之间的距离变宽了很多,得益于对行高的设置。
CSS引入方式
按照CSS样式表书写的位置(或者说引入的方式),CSS样式表可以分为三类:
行内样式表(行内式)
行内样式表是在HTML元素标签内部的style属性中设定CSS样式,使用十分简单,但是也十分的局限,只适用于修改简单的样式:
html">\<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱\</div>
这样在一行中就可以简单的为div标签设置CSS样式了,十分的简洁,但是十分的局限与不方便:行内样式表书写十分繁琐,并且没有实现结构和样式分离的思想(HTML专注于结构),而且行内样式表只对当前标签有效,不推荐大量使用; 但是要对一个元素添加简单样式时,可以少量使用。
内部样式表(嵌入式)
内部样式表,顾名思义,就是将CSS样式表写在HTML文件的内部,其实现方式就是将所有的CSS抽取出来,放在HTML中的style标签中:
虽然style标签理论上可以放置HTML文档中的任何一个地方,但是一般会放在(开发规范)文档的<head>标签中。通过行内样式表,可以方便的控制当前整个页面中的元素样式设置,虽然看上去代码结构清晰,但是并没有实现结构和样式分离的思想(HTML专注于结构,CSS专注于样式)。
外部样式表(链接式)
大部分的实际开发都是使用外部样式表(最推荐使用): CSS样式单独写到.CSS文件中,之后把.CSS文件引入到HTML页面中使用。引入分两步:
- 新建一个后缀为.html" title=css>css的CSS样式文件,在这个CSS文件中编写CSS的代码。
- 在HTML页面中通过<link>标签引入这个CSS文件,实现外部样式表。
link标签的rel属性是定义当前文档(HTML)和被链接文档(CSS)之间的关系,想要外部引入CSS文件,此处需要指定为"stylesheet",表示被链接的文档是一个CSS样式表文件。
href属性是定义所连接的外部文档的URL,建议使用相对路径。
使用外部样式表设定CSS,通常也被称为外链式或链接式引入,这种方式是开发中常用的方式。