（html入门）HTML 样式

àì夳堔傛蜴生んèń 2022-09-02 12:46 206阅读 0赞

# HTML 样式 #

style 属性用于改变 HTML 元素的样式。  
eg：

<html>
    <body style="background-color:PowderBlue;">
    
    <h1>Look! Styles and colors</h1>
    
    <p style="font-family:verdana;color:red">
    This text is in Verdana and red</p>
    
    <p style="font-family:times;color:green">
    This text is in Times and green</p>
    
    <p style="font-size:30px">This text is 30 pixels high</p>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyMjkwNDM2_size_16_color_FFFFFF_t_70]  
style 属性的作用：  
**提供了一种改变所有 HTML 元素的样式的通用方法。**

## HTML 样式实例 - 背景颜色 ##

background-color 属性为元素定义了背景颜色

<html>
    
    <body style="background-color:yellow">
    <h2 style="background-color:red">This is a heading</h2>
    <p style="background-color:green">This is a paragraph.</p>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyMjkwNDM2_size_16_color_FFFFFF_t_70 1]

## HTML 样式实例 - 字体、颜色和尺寸 ##

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸

<html>
    
    <body>
    <h1 style="font-family:verdana">A heading</h1>
    <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
    </body>
    
    </html>

![在这里插入图片描述][6c5bf569934e4f0fb977690aba678bbb.png]

## HTML 样式实例 - 文本对齐 ##

text-align 属性规定了元素中文本的水平对齐方式

<html>
    
    <body>
    <h1 style="text-align:center">This is a heading</h1>
    <p>The heading above is aligned to the center of this page.</p>
    </body>
    
    </html>

![在这里插入图片描述][a8668af207594e93bf1bc9936ebe7500.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyMjkwNDM2_size_16_color_FFFFFF_t_70]: /images/20220829/ca2bc6c3cfa74056aa1360bc362eac09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyMjkwNDM2_size_16_color_FFFFFF_t_70 1]: /images/20220829/d927b7026a644429815d0c103139c0bf.png
[6c5bf569934e4f0fb977690aba678bbb.png]: /images/20220829/e2f774f5701f41328a94d0d18ac75202.png
[a8668af207594e93bf1bc9936ebe7500.png]: /images/20220829/395bbe0e2e374852a3629b77503c01f7.png