CSS美化网页元素

美化网页元素

1. 为什么要美化网页

1. 有效的传递页面信息
2. 美化网页，页面漂亮，才能吸引用户
3. 凸显页面的主题
4. 提高用户的体验

span标签：重点要突出的字，使用span标签套起来

    
    

    




欢迎学习 Java

2.字体样式

3. 文本样式

1. 颜色 color：rgb rgba

2. 文本对齐方式 text-align= center

3. 首行缩进 text-indent: 2em

4. 行高 line-height:

   

5. 装饰 text-decoration:

6. 文本图片水平对齐 vertical-align:

    
    

    
    





    TIL KINGDOM COME



One... two... 

Steal my heart... and hold my tongue 

I feel my time... my time has come 

Let me in... unlock the door 

I never felt this way before 

And the wheels just keep on turning 

The drummer begins to drum 

I don't know which way I'm going 

I don't know which way I've come 

Hold my head... inside your hands

I need someone... who understands

I need someone... someone who hears

For you I've waited all these years

For you I'd wait... 'Til Kingdom Come

Until my day... my day is done

and say you'll come... and set me free

just say you'll wait... you'll wait for me

In your tears... and in your blood

In your fire... and in your flood

I hear you laugh... I heard you sing

I wouldn't change a single thing

And the wheels just keep on turning

The drummers begin to drum

I don't know which way I'm going

I don't know what I've become

For you I'd wait... 'Til kingdom come

Until my days... my days are done

Say you'll come... and set me free

Just say you'll wait... you'll wait for me

Just say you'll wait... you'll wait for me

Just say you'll wait... you'll wait for me



112233
112233
112233

    
    

    
    





    
    这是一张图片

4. 阴影

/*text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
#price{
    text-shadow: aqua 10px 10px 2px;
}

5. 超链接伪类

正常情况下，a:hover

/*默认的状态*/
a{
    text-decoration: none;
    color: black;
}
/*鼠标悬浮的状态（只需要记住hover）*/
a:hover{
    color: orange;
    font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
    color: green;
    font-size: 30px;
}

6. 列表

/*ul li*/
/*
list-style:
    none    去掉原点
    circle  空心圆
    decimal 数字
    square  正方形
*/
ul{
    background: gray;
}

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

7. 背景

背景颜色

背景图片

8. 渐变

background-color: #00DBDE;
background-image: linear-gradient(40deg, #00DBDE 0%, #FC00FF 100%);