html css文本大写,CSS 文本样式

0 前言

本文介绍CSS中为文本添加样式，包括字体、粗体/斜体、字体大小、行高、颜色、背景等等。

参考书为人民邮电出版社的《HTML5与CSS3基础教程》。

1 字体

1.1 字型

模板：选择器 {

font-family： name；

}

其中“name”为字型的名称，一般会写若干个，当第一个不能用的时候顺延至第二个，以此类推。

例：h1{

font-family: arial, helvetica, sans-serif;

}

在OS X系统中，Genava和Gill Sans很常见。

OS X和Windows上默认都有的字体： Arial、Comic Sans MS、Courier New、 Georgia、 Impact、Trebuchet MS、Times New Roman和Verdana。

1.2 粗体

模板：选择器 {

font-weight: bold;

}

或者输入100~900之间的100的整数。400表示正常，700表示粗体。

除bold外，还有bolder(更粗)、lighter(更细)

1.3 字体大小

模板：选择器 {

font-size: 数值px/em;

}

px即像素值，em表示相对父元素的倍数

例：body{

font-size: 100%；/* 16px */

}

h1{

font-size: 1.75em; /* 28/16px*/

}

h2{

font-size: 20px;

}

其中，h1的字体大小是父元素(body)的1.75倍(即1.75em)，也就是16*1.75=28px，h2的字体大小是20像素。

1.4 行高

段落的行间距。

模板：选择器 {

font-size: 1.0625em;

line-height: 数值;

}

数值为纯数字，没有单位，行高=数字*字体大小(font-size)。

1. 5 字体简记

把字体、粗体、字体大小、行高等放在一起。

模板：选择器{

font: [字型] [粗细] [小型大写字母] 字体大小 行高;

}

其中，中括号里面的是可选项。

字型：normal、italic或oblique

粗细：normal、bold、bolder、lighter或100的倍数

小型大写字母：normal、small-caps

1.6 间距

字间距：word-spacing，单词之间的距离

字偶距：letter-spacing，字母之间的距离选择器{

word-spacing: 2em;

letter-spacing: 7px;

}

1.7 缩进p {

text-indent: 2em;

}

1.8 大小写

模板：选择器{

text-transform: uppercase;

}

值有四种：

captitalize：每个单词的首字母大写

uppercase：所有字母大写

lowercase：所有字母小写

none：保持原来样子

1.8 小型大写字母

字母大写，体积和小写字母相同。选择器{

font-variant: small-caps;

}

值有两种：

small-caps：小型大写字母

none：取消小型大写字母

1.9 划线

下划线、上划线和删除线选择器{

text-decoration: underline;

}

值有四种：

underline：下划线

overline：上划线

line-through：删除线

none：取消划线

1.10 空白属性

让浏览器显示HTML中的空格。选择器{

white-space: pre;

}

值有三种：

nowrap：所有空格不断行

pre：让浏览器显示原文本中所有的空格和回车

normal：按正常方式处理空格

2 颜色

模板：选择器{

color: 数值;

}

颜色的数值有三种形式：

(1)颜色名称。例如：blue

(2)rgb形式。例如：rgb(89, 0, 127)

(3)十六进制形式。例如：#59007f

第三种较为常见。

举例：h2{

color: blue;

color: rgb(89, 0, 127);

color: #59007f;

}

3 背景

模板：选择器{

background-color: 数值1;

background-image: url(image.png);

background-repeat: repeat;

background-attachment: fixed;

}

颜色的形式同上面的color。

url是图像的路径及名称。

background-repeat表示是否重复，有四个值：repeat、repeat-x、repeat-y和no-repeat。

background-attachment表示图像是否随页面滚动，有两个值：fixed(图像会附着在浏览器窗口上)、scroll(图像会移动)。

可整合到一起，如下：选择器{

background: [所有属性];

}

所有可能的属性用空格隔开，顺序无所谓。来源：https://www.icode9.com/content-4-432001.html