HTML5(8)——样式

96
lxmic
2018.10.07 18:02 字数 339

假期最后一天,我继续学习我的HTML5内容。上次我们提到了段落,今天要学习样式(styles)。

HTML样式

像图中的红色字体,蓝色字体和字体大小变化,这些都是可以通过样式属性来控制的。


样式调整字体

样式属性

HTML元素的样式设置,可以通过style属性来控制。style属性语法如下:

<tagname style="property:value;">

其中,property 和value都是属于CSS范畴,这个我们在以后的章节中会学习,这里先不做解释。

HTML背景颜色

background-color属性(property)定义了网页元素的背景颜色。

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
定义整个页面的背景颜色

HTML字体颜色

需要使用colorproperty来定义文本的颜色。下面是将标题设置为蓝色,段落字体为红色。

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
文本颜色改变

字体选择

HTML通过font-family属性来选择字体种类。

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

改变了字体类型。


不同的字体

HTML文本大小

font-size属性是用来定义网页元素文本的大小。语法如下:

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

是用百分数来表示,就是原来大小的几倍。


不同大小文本

HTML文本的对齐方式

在HTML中,我们需要属性font-align来定义水平文本的对齐方式。下面是全部居中的代码:

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

标题和段落都居中显示。


居中显示
HTML5 Tutorial
Web note ad 1