CSS美化网页

最新推荐文章于 2024-05-14 11:32:42 发布

安夜的cookie

最新推荐文章于 2024-05-14 11:32:42 发布

阅读量283

点赞数

分类专栏： Java前端文章标签： CSS 美化网页

本文链接：https://blog.csdn.net/qq_40763549/article/details/92830104

版权

Java前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

我们为什么要使用CSS

?有效的传递页面信息
?使用CSS美化过的页面文本，漂亮，美观，给用户以良好的观看体验
?可以很好的突出页面的主题内容，使用户能一眼看到开发者想让用户看到的内容
?。。。

1、span和div

span标签的作用：
能让某几个文字或者某个词与凸显出来，是行内元素
div标签
是块级元素，选择的是网页中一块地方，可为这块地方设置高度，背景颜色，字体颜色、大小等等

<!--span标签-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            font-size: 50px;
            color: red;
            font-weight: bold;
        }
        #right{
            font-size: 30px;
            color: blue;
            font-weight: bold;
        }
        span[class="there"]{
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
<p>你最后看到了这里</p>
<p>你先看到了<span>这里,</span>,<span id="right">对吧?</span></p>
<p>然后往<span class="there">这看</span></p>
</body>
</html>

2、文体样式和文本样式和文本阴影

文本样式：
在这里插入图片描述
文本属性

文本阴影
text-shaow:color x-offset y-offset blur-radius
color: 阴影颜色 x-offset：水平阴影位移量 y-offset：垂直阴影位移量 blur-radius：阴影模糊半径
文本示例：

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

    <link rel="stylesheet" href="style1.css">
</head>
<p>
<h1>公司简介</h1>
发布人:<span id="panda"> 熊猫的cookie</span> &nbsp;&nbsp;&nbsp;&nbsp; 时间:<span id="time">2020-09-01</span>
<p class="mi">北京小米科技有限责任公司成立于2010年3月3日 [1]  ，是一家专注于智能硬件和电子产品研发的移动互联网公司，同时也是一家专注于高端智能手机、互联网电视以及智能家居生态链建设的创新型科技企业。</p>
<p class="mi">“为发烧而生”是小米的产品概念。小米公司创造了用互联网模式开发手机操作系统、发烧友参与开发改进的模式。小米还是继苹果、三星、华为之后第四家拥有手机芯片自研能力的科技公司。</p>
<p class="mi">“让每个人都能享受科技的乐趣”是小米公司的愿景。小米公司应用了互联网开发模式开发产品的模式，用极客精神做产品，用互联网模式干掉中间环节，致力让全球每个人，都能享用来自中国的优质科技产品。</p>
</body>
</html>

CSS链接：

#panda{
    font-family: 楷体;
}
#time{
    font-family: italic;
}
/*设置首行缩进*/
.mi{
    text-indent: 2em;
}
h1{
    text-shadow: orange -1px 1px 10px;
}

3、超链接伪类

在这里插入图片描述
设置伪类顺序
a:link->a:visited->a:hover->a:active
案例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="Style2.css">
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.bilibili.com">Bilibili</a>
<a href="https://www.mi.com/">MI</a>
<a href="https://blog.csdn.net/qq_40763549">java知识大全</a>
<a href="https://www.qq.com">QQ</a>
</body>
</html>

/*未单击访问过的时候超链接样式*/
a:link{
    color: blue;
}
/*单机访问过后的超链接样式*/
a:visited{
    color: green;
}
/*鼠标悬浮在其上的超链接样式*/
a:hover{
    color: cyan;
}
/*鼠标点击后还未释放之前的超链接样式*/
a:active{
    color: mintcream;
}

4、列表样式

list-style-type
list-style-image
list-style-position
list-style:none //去除列表小黑点

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="Style3.css">
</head>
<body>
<ul>
    <li>java</li>
    <li>python</li>
    <li>c/c++</li>
    <li>linux</li>
</ul>
</body>

/*分开试，不然会覆盖*/
ul li{
    list-style-type: circle;
    list-style-image: inherit;
    list-style-position: outside;
    list-style: circle;
    list-style:none;
}

5、网页背景

背景颜色:background-color
背景图片:background-image
背景定位:background-position
背景重复方式:background-repeat

背景尺寸

backrtound-size
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="Style4.css">
</head>
<body>

</body>
</html>

body{
    background-color: #fff7b5;
    background-image: url("../111.jpg");
    background-repeat: no-repeat;
}

6、CSS3渐变

线性渐变：

颜色沿着一条直线过度：从左到右，从右到左，从上到下等
linear-gradient ( position, color1,color2...)

径向渐变：

圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 600px;

            background: linear-gradient(to left,red,black);
            background-repeat: no-repeat;
            background-color: #9be6ff;
        }
    </style>
</head>
<body>

</body>
</html>