2.3 HTML样式

使用HTML格式化标签可以为文本定义简单的格式，但复杂的格式设置如字体大小、背景颜色、文本对齐方式等通过HTML样式来设置。可以为所有的html标签定义style属性，通过style属性改变HTML元素的样式，下面通过例2-10来理解通过style属性定义样式。

例2-10 2-10.html

<! DOCTYPE html> <html> <head> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"/> <meta charset="gb2312"/> <title>法拉利全新车型曝光搭载V12发动机_汽车_腾讯网</title> <meta name="keywords" content="法拉利全新车型曝光搭载V12发动机"/> <meta name="Description" content="法拉利全新车型曝光搭载V12发动机"/> </head> <body style="background-color:yellow; font-size:20px; text-indent:40px; "> 日前，海外媒体曝光了法拉利将推出一台 搭载V12 发动机的全新车型。据悉，这将是法拉 利发布J50纪念版车型后，再一次推出全新车型。 </body> </html>

例2-10在浏览器中的显示效果如图2-5所示。

图2-5 例2-10在浏览器中的显示效果

可以看到定义style属性后，HTML元素的样式发生了变化。例2-10中定义样式的语句为<body style="background-color:yellow; font-size:20px; text-indent:40px; ">。要定义元素的样式，先为元素添加style属性，在style后的双引号内是css属性的赋值，赋值的格式为：

CSS属性名：值；

每条赋值语句后的“; ”可以省略。上面的例子对三个CSS属性进行了赋值，分别是将background-color属性（定义元素的背景色）赋值为黄色；将font-size（定义元素字体大小）赋值为20 px；将text-indent（定义元素首行缩进）赋值为40 px。常用的与文本相关的CSS属性还有color（定义文本颜色）和text-align（定义文本对齐方式）。下面的代码分别将两个段落的颜色设置为绿色和蓝色，文本对齐方式为居中对齐和左对齐（text-align定义的是元素内容的对齐方式，如p里文本的居中或左对齐、右对齐，不改变元素如p在网页上的位置）：

上汽大众斯柯达速派 源于大众，高于大众”这句话恰恰就说出了斯柯达品牌的产品定位，源于大众说的是斯柯达车型均出自大众平台．

读者可以自己输入代码并在浏览器中查看显示效果，同时可以尝试分别设置两个段落的背景色和首行缩进。

注意：HTML标签的属性与CSS属性是完全不同的，不同HTML标签具有不同的属性，HTML标签属性的设置采用“=”; CSS属性用于独立设置样式，与HTML标签无关，CSS属性设置采用符号“:”。