css3的作用及各类样式

1uuue

于 2022-08-25 17:08:02 发布

阅读量250

点赞数

分类专栏： CSS3 文章标签：前端 css3

本文链接：https://blog.csdn.net/qq_61727355/article/details/126512357

版权

CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.美化网页元素

1.1 为什么要美化网页

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

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

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }

    </style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>
</html>

1.2 字体样式

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

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            font-family:Arial, 楷体;
            color: darkblue;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>

</head>
<body>
<h1>故事介绍</h1>

<p class="p1">高中生侦探工藤新一和青梅竹马的同学毛利兰一同去游乐园玩的时候，目击了黑衣男子的可疑交易现场。只顾偷看交易的工藤新一，却忽略了从背后接近的另一名同伙。他被那名男子灌下了毒药，当他醒来时，身体居然缩小了！</p>
<p>如果让那些家伙知道工藤新一还活着的话，不仅性命难保，还会危及身边的人。在阿笠博士的建议下他决定隐瞒身份，在被小兰问及名字时，化名江户川柯南，为了搜集那些家伙的情报，寄住在父亲以侦探为业的小兰家中。</p>
<p>谜团重重的黑衣组织……他所了解的，就只有他们是以酒的名称作为代号的。为了揭露那些家伙的真面目，小小侦探江户川柯南开始大显身手！</p>

<p>I love three things：the sun ，the moon and you.</p>
<p>The sun is for the day ，the moon is for the night.</p>
<p>and you forever.</p>

</body>
</html>

页面效果：

1.3 文本样式

颜色–>color

rgba（）：调整颜色的透明度，透明度值的范围在0-1之间

h1{
            /*rba():可以调整颜色的透明度  透明度的值为0-1*/
            color: rgba(0,255,255,0.9);
        }

文本对齐方式–>text-align

h1{
            /*rba():可以调整颜色的透明度  透明度的值为0-1*/
            color: rgba(0,255,255,0.9);
            text-align: center;
        }

首行缩进–>text-indent

em表示缩进几个字，px表示缩进多少像素，常用em

.p1{
            text-indent: 2em;
        }

行高–>line-height

行高和块的高度一致就可以上下居中

.p3{
            background: lavender;
            height: 50px;
            line-height: 50px;
        }

下划线–>text-decoration

a标签（超链接）默认有下划线，去下划线：text-decoration:none

.l1{
            text-decoration: underline;
        }

中划线

.l2{
            text-decoration: line-through;
        }

上划线

.l3{
            text-decoration: overline;
        }

完整测试代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            /*rba():可以调整颜色的透明度  透明度的值为0-1*/
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: lavender;
            height: 50px;
            line-height: 50px;
        }
        .l1{
            text-decoration: underline;
        }
        .l2{
            text-decoration: line-through;
        }
        .l3{
            text-decoration: overline;
        }
    </style>
</head>
<body>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>
<h1>故事简介</h1>
<p class="p1">高中生侦探工藤新一和青梅竹马的同学毛利兰一同去游乐园玩的时候，目击了黑衣男子的可疑交易现场。只顾偷看交易的工藤新一，却忽略了从背后接近的另一名同伙。他被那名男子灌下了毒药，当他醒来时，身体居然缩小了！</p>
<p>如果让那些家伙知道工藤新一还活着的话，不仅性命难保，还会危及身边的人。在阿笠博士的建议下他决定隐瞒身份，在被小兰问及名字时，化名江户川柯南，为了搜集那些家伙的情报，寄住在父亲以侦探为业的小兰家中。</p>
<p>谜团重重的黑衣组织……他所了解的，就只有他们是以酒的名称作为代号的。为了揭露那些家伙的真面目，小小侦探江户川柯南开始大显身手！</p>

<p class="p3">I love three things：the sun ，the moon and you.</p>
<p>The sun is for the day ，the moon is for the night.</p>
<p>and you forever.</p>

</body>
</html>

实现图片相较于文字的居中：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--水平对齐需要有参照物-->
    <style>
        img,style{
            vertical-align: middle;
        }
    </style>

</head>
<body>
<p>
    <img src="images/a.PNG" alt="">
    <span>The sun is for the day ，the moon is for the night.</span>
</p>
</body>
</html>

1uuue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3的作用及各类样式

1.美化网页元素 1.1 为什么要美化网页有效的传递页面信息美化网页，页面漂亮才能吸引客户凸显页面的主题提高用户的体验 span标签：重点要突出的字，使用span标签套起来 1.2 字体样式 font-family：字体 font-size：字体大小 font-weight：字体粗细 color：字体颜色 1.3 文本样式颜色–>color rgba（）：调整颜色的透明度，透明度值的范围在0-1之间
复制链接

扫一扫