CSS lesson3 美化网页元素

3、美化网页元素

3.1、为什么要美化网页

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

span标签：重点要突出的字，使用span套起来。约定俗成的。

    
    
    




复旦大学欢迎来到复旦大学

3.2 字体样式

font-family：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色

3.3文本样式

1、颜色 color
2、文本对齐方式 text-align=center
3、首行缩进 text-indent：2em；
4、行高 line-height 单行文字上下居中 line-height=height
5、装饰 text-decoration 下划线等功能
6、文本图片水平对齐 要有参照物 ：vertical-align：middle

3.4 超链接伪类和3.5文本阴影

3.6 列表

#nav{
    width:300px;
    background: bisque;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

a{
    text-decoration: none;
    color: black;
    background: azure;
}
a:hover{
    color: aliceblue;
}

3.7 背景

 div{
            width: 1000px;
            height: 100px;
            border: 1px solid red;
            background-image: url("../4.超链接伪类/image/bb.png");
        }
        .div1{
            background-repeat: no-repeat;
        }
        .div2{
            background-repeat: repeat-x;
        }
        .div3{
            background-repeat: repeat-y;
        }

#nav{
    width:300px;
    background: bisque;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*颜色，图片，图片位置，平铺方式*/
    background: red url("../../4.超链接伪类/image/bb.png") 100px 5px no-repeat;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../../4.超链接伪类/image/bb.png");
    background-repeat: no-repeat;
    background-position: 236px 2px;
}

插入背景图片，控制样式

3.8 渐变

background-color: #4158D0;
background-image: linear-gradient(116deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);