网页美化

美化网页元素

1. 为什么要美化网页

1.有效地传递页面信息

2.美化网页吸引用户

3.凸显页面主题

4.提高用户体验

span标签：使用span标签括起重点要突出的文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span</title>

    <style>
        #title1{
            font-size : 50px;
        }

    </style>

</head>
<body>

欢迎学习 <span id="title1">Java</span>

</body>
</html>

2. 字体样式

字体样式代码练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*p4字体样式为 : 斜体、粗体、20px大小、字体为Arial Black
        font-family:字体
        font-size:字号
        font-weight:字体粗细,可以直接通过数字大小设置粗细
        color:字体颜色
        px是字号，em是缩进
        font : 粗细（weight） 字号(size)/行高 字体样式(family)
        */
        body{
            font-family : "Arial Black", 楷体;
        }
        h1{
            font-size : 50px;
        }
        .p1{
            font-weight : 1000;
        }
        .p4{
            font : oblique bold 20px "Arial Black"
        }

    </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
    《三国演义》（全名为《三国志通俗演义》，又称《三国志演义》）是元末明初小说家罗贯中根据陈寿《三国志》和裴松之注解以及民间三国故事传说经过艺术加工创作而成的长篇章回体历史演义小说，与《西游记》《水浒传》《红楼梦》并称为中国古典四大名著。该作品成书后有嘉靖壬午本等多个版本传于世，到了明末清初，毛宗岗对《三国演义》整顿回目、修正文辞、改换诗文，该版本也成为诸多版本中水平最高、流传最广的版本。
</p>
<p>
    《三国演义》可大致分为黄巾起义、董卓之乱、群雄逐鹿、三国鼎立、三国归晋五大部分，描写了从东汉末年到西晋初年之间近百年的历史风云，以描写战争为主，诉说了东汉末年的群雄割据混战和魏、蜀、吴三国之间的政治和军事斗争，最终司马炎一统三国，建立晋朝的故事。反映了三国时代各类社会斗争与矛盾的转化，并概括了这一时代的历史巨变，塑造了一群叱咤风云的三国英雄人物。

</p>
<p>
    《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说，明清时期甚至有“第一才子书”之称。

</p>
<p class="p4">
    To see a world in a grain of sand,

    And a heaven in a wild flower,

    Hold infinity in the palm of your hand,

    And eternity in an hour.

</p>

</body>
</html>

生成页面效果

知识点总结

/*
		p4字体效果为 : 斜体(oblique)、粗体(bold)、20px大小、字体样式为Arial Black
        font-family:字体
        font-size:字号
        font-weight:字体粗细,可以直接通过数字大小设置粗细
        color:字体颜色
        px是字号，em是缩进
        font : 粗细（weight） 字号(size)/行高 字体样式(family)
*/

3. 文本样式

1、颜色

颜色：
RGB:0~F
RGBA:A是透明度，范围为0~1

2、文本对齐方式

text-align : 排版，center为居中

3、首行缩进

text-indent : 段落首行缩进,em为缩进多少字母，px为缩进多少像素

4、行高

background : wheat;
height : 100px; 背景颜色块
line-height : 100px;  行高  单行文字上下居中：行高=height
行高和背景颜色块高一样就可以保证该部分文字在背景颜色块中上下居中

5、装饰

text-decoration : overline;上划线
text-decoration : line-through;中划线
text-decoration : underline;下划线
text-decoration : none;去除装饰

6、文本图片水平对齐

vertical-align : middle文本和图片水平对齐

代码练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式学习</title>
<!--文本样式练习

    颜色：
    RGB:0~F
    RGBA:A是透明度，范围为0~1

    text-align : 排版，center为居中

    text-indent : 段落首行缩进,em为缩进多少字母，px为缩进多少像素

    background : wheat;
    height : 100px; 背景颜色块
    line-height : 100px;  行高
    行高和背景颜色块高一样就可以保证该部分文字在背景颜色块中上下居中

    text-decoration : overline;上划线
    text-decoration : line-through;中划线
    text-decoration : underline;下划线
    text-decoration : none;去除装饰

    vertical-align : middle文本和图片水平对齐

-->
    <style>
        h1{
            color : rgba(0,255,255,0.5);
            text-align : center;
        }
        .p1{
            text-indent : 2em;
        }
        .p3{
            background : wheat;
            height : 100px;
            line-height : 100px;
        }
        .l1{
            text-decoration : overline;
        }
        .l2{
            text-decoration : line-through;
        }
        .l3{
            text-decoration : underline;
        }
        a{
            text-decoration : none;
        }
        img,span{
            vertical-align : middle;
        }

    </style>

</head>
<body>

<p class="l1">上划线</p>
<p class="l2">中划线</p>
<p class="l3">下划线</p>

<h1>基本介绍</h1>
<p class="p1">
    《三国演义》（全名为《三国志通俗演义》，又称《三国志演义》）是元末明初小说家罗贯中根据陈寿《三国志》和裴松之注解以及民间三国故事传说经过艺术加工创作而成的长篇章回体历史演义小说，与《西游记》《水浒传》《红楼梦》并称为中国古典四大名著。该作品成书后有嘉靖壬午本等多个版本传于世，到了明末清初，毛宗岗对《三国演义》整顿回目、修正文辞、改换诗文，该版本也成为诸多版本中水平最高、流传最广的版本。
</p>
<p class="p2">
    《三国演义》可大致分为黄巾起义、董卓之乱、群雄逐鹿、三国鼎立、三国归晋五大部分，描写了从东汉末年到西晋初年之间近百年的历史风云，以描写战争为主，诉说了东汉末年的群雄割据混战和魏、蜀、吴三国之间的政治和军事斗争，最终司马炎一统三国，建立晋朝的故事。反映了三国时代各类社会斗争与矛盾的转化，并概括了这一时代的历史巨变，塑造了一群叱咤风云的三国英雄人物。

</p>
<p class="p3">
    《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说，明清时期甚至有“第一才子书”之称。

</p>
<p class="p4">
    To see a world in a grain of sand,

    And a heaven in a wild flower,

    Hold infinity in the palm of your hand,

    And eternity in an hour.

</p>
<p>
    <a href="">去除超链接下划线装饰</a>
</p>

<img src="images/你懂得.jpg" alt="" width="600" height="400">

<span>该行文字和左侧图片水平对齐</span>

</body>
</html>