HTML样式

jerkzhang

Apr 15, 2020

专否HTML教程中的HTML样式章节展示了关于HTML样式设置的一个例子：

<h1 style="color:#46acb6;font-size:30px;">专否</h1>
<a href="http://zhuanfou.com" style="color:red;">zhuanfou.com</a>
<p style="font-size:14px;color:#46acb6;">
地镇高岗，一派西山千古秀，
门朝大海，三河合水万年河。
</p>

运行一下

设置HTML元素的style属性可以改变该元素的样式。

<标签名 style="特性1:取值1;特性2:取值2;...特性n:取值n;"> 元素内容 </标签>

特性指的是该元素的CSS特性，取值指的是该元素的CSS特性的值；之后举一些HTML样式的不同类型。

HTML背景色

使用background-color特性设置元素的背景色。（ 使用background设置背景色也可以，推荐使用background特性，因为background不仅能设置背景色，还可以设置背景图片，功能上比background-color强大，应用面更广，且更简短。 ）

<div style="background-color:LightGray;">
地镇高岗，一派西山千古秀；
</div>

<div style="background:LightBlue;">
门朝大海，三河合水万年河。
</div>

运行一下

HTML文本颜色

使用color特性设置该元素内的文本颜色。

<p style="color:Red;">
地镇高岗，一派西山千古秀，
门朝大海，三河合水万年河。
</p>

运行一下

HTML 字体

使用font-family特性来设置该元素内文本是什么字体。（ font-family特性的取值未必一个，优先级从左往右。 ）

<h1 style="font-family:verdana;">zhuanfou</h1>

<!-- p元素，优先采用courier字体，当courier字体不存在时，才会采用verdana字体 -->
<p style="font-family:courier,verdana;">http://zhuanfou.com</p>

运行一下

HTML 字体大小

使用font-size特性来设置该元素内字体的大小，取值可以是百分比，也可以是px（像素）。但是，并不推荐以百分比来定义字体大小，而强烈推荐使用px来定义字体大小。

<h1 style="font-size:200%;">专否</h1>
<p style="font-size:14px;">zhuanfou.com</p>

运行一下

HTML 文本对齐方式

使用text-align特性来定义文本的水平对齐方式，居中、左对齐、右对齐等。

<p style="text-align:center;">武林至尊，宝刀屠龙</p>
<h3 style="text-align:right;">号令天下，莫敢不从</h3>
<div style="text-align:left;">倚天不出，谁与争锋</div>

运行一下