CSS lesson3 美化网页元素

最新推荐文章于 2024-08-14 12:22:11 发布

汤三石

最新推荐文章于 2024-08-14 12:22:11 发布

阅读量895

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45437848/article/details/121912232

版权

本文详细介绍了如何使用CSS来美化网页元素，包括字体样式、文本样式、超链接伪类、文本阴影、列表、背景以及渐变效果的运用，旨在提升页面视觉效果和用户体验。

摘要由CSDN通过智能技术生成

3、美化网页元素

3.1、为什么要美化网页

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 40px;
        }
    </style>
</head>


<body>
<span id="title1">复旦大学</span>欢迎来到复旦大学
</body>
</html>

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文本阴影

  <style>
        /*去下划线*/
        a{
            text-decoration: none;
        }
        /*鼠标悬浮颜色*/
        a:hover{
            color: antiquewhite;
        }
        /*鼠标按住未释放状态*/
        a:active{
            color: saddlebrown;
        }
        /*鼠标访问后*/
        a:visited{
            color: aqua;
        }
    /*    text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #slogan{
            text-shadow: yellow 10px 10px 2px;
        }
    </style>

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%);

在这里插入图片描述

汤三石

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS lesson3 美化网页元素

3、美化网页元素3.1、为什么要美化网页1、有效的传递页面信息2、美化页面，吸引用户3、凸显页面的主题4、提高用户的体验span标签：重点要突出的字，使用span套起来。约定俗成的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #tit
复制链接

扫一扫