• css3的作用及各类样式

    目录

    1.美化网页元素

    1.1 为什么要美化网页

    1.2 字体样式

    1.3 文本样式

    1.美化网页元素

    1.1 为什么要美化网页

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

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

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.         #title1{
    8.             font-size: 50px;
    9.         }
    10.  
    11.     style>
    12. head>
    13. <body>
    14. 欢迎学习<span id="title1">Javaspan>
    15. body>
    16. html>

    1.2 字体样式

    • font-family：字体
    • font-size：字体大小
    • font-weight：字体粗细
    • color：字体颜色
    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.  
    7.     <style>
    8.         body{
    9.             font-family:Arial, 楷体;
    10.             color: darkblue;
    11.         }
    12.         h1{
    13.             font-size: 50px;
    14.         }
    15.         .p1{
    16.             font-weight: bold;
    17.         }
    18.     style>
    19.  
    20. head>
    21. <body>
    22. <h1>故事介绍h1>
    23.  
    24. <p class="p1">高中生侦探工藤新一和青梅竹马的同学毛利兰一同去游乐园玩的时候，目击了黑衣男子的可疑交易现场。只顾偷看交易的工藤新一，却忽略了从背后接近的另一名同伙。他被那名男子灌下了毒药，当他醒来时，身体居然缩小了！p>
    25. <p>如果让那些家伙知道工藤新一还活着的话，不仅性命难保，还会危及身边的人。在阿笠博士的建议下他决定隐瞒身份，在被小兰问及名字时，化名江户川柯南，为了搜集那些家伙的情报，寄住在父亲以侦探为业的小兰家中。p>
    26. <p>谜团重重的黑衣组织……他所了解的，就只有他们是以酒的名称作为代号的。为了揭露那些家伙的真面目，小小侦探江户川柯南开始大显身手！p>
    27.  
    28. <p>I love three things：the sun ，the moon and you.p>
    29. <p>The sun is for the day ，the moon is for the night.p>
    30. <p>and you forever.p>
    31.  
    32. body>
    33. html>

    页面效果：

    1.3 文本样式

    • 颜色–>color

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

    1. h1{
    2.             /*rba():可以调整颜色的透明度  透明度的值为0-1*/
    3.             color: rgba(0,255,255,0.9);
    4.         }
    • 文本对齐方式–>text-align
    1. h1{
    2.             /*rba():可以调整颜色的透明度  透明度的值为0-1*/
    3.             color: rgba(0,255,255,0.9);
    4.             text-align: center;
    5.         }
    • 首行缩进–>text-indent

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

    1. .p1{
    2.             text-indent: 2em;
    3.         }
    • 行高–>line-height

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

    1. .p3{
    2.             background: lavender;
    3.             height: 50px;
    4.             line-height: 50px;
    5.         }

    • 下划线–>text-decoration  

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

    1. .l1{
    2.             text-decoration: underline;
    3.         }
    • 中划线
    1. .l2{
    2.             text-decoration: line-through;
    3.         }
    • 上划线
    1. .l3{
    2.             text-decoration: overline;
    3.         }

    完整测试代码：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.         h1{
    8.             /*rba():可以调整颜色的透明度  透明度的值为0-1*/
    9.             color: rgba(0,255,255,0.9);
    10.             text-align: center;
    11.         }
    12.         .p1{
    13.             text-indent: 2em;
    14.         }
    15.         .p3{
    16.             background: lavender;
    17.             height: 50px;
    18.             line-height: 50px;
    19.         }
    20.         .l1{
    21.             text-decoration: underline;
    22.         }
    23.         .l2{
    24.             text-decoration: line-through;
    25.         }
    26.         .l3{
    27.             text-decoration: overline;
    28.         }
    29.     style>
    30. head>
    31. <body>
    32. <p class="l1">123123p>
    33. <p class="l2">123123p>
    34. <p class="l3">123123p>
    35. <h1>故事简介h1>
    36. <p class="p1">高中生侦探工藤新一和青梅竹马的同学毛利兰一同去游乐园玩的时候，目击了黑衣男子的可疑交易现场。只顾偷看交易的工藤新一，却忽略了从背后接近的另一名同伙。他被那名男子灌下了毒药，当他醒来时，身体居然缩小了！p>
    37. <p>如果让那些家伙知道工藤新一还活着的话，不仅性命难保，还会危及身边的人。在阿笠博士的建议下他决定隐瞒身份，在被小兰问及名字时，化名江户川柯南，为了搜集那些家伙的情报，寄住在父亲以侦探为业的小兰家中。p>
    38. <p>谜团重重的黑衣组织……他所了解的，就只有他们是以酒的名称作为代号的。为了揭露那些家伙的真面目，小小侦探江户川柯南开始大显身手！p>
    39.  
    40. <p class="p3">I love three things：the sun ，the moon and you.p>
    41. <p>The sun is for the day ，the moon is for the night.p>
    42. <p>and you forever.p>
    43.  
    44. body>
    45. html>

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

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    7.     <style>
    8.         img,style{
    9.             vertical-align: middle;
    10.         }
    11.     style>
    12.  
    13. head>
    14. <body>
    15. <p>
    16.     <img src="images/a.PNG" alt="">
    17.     <span>The sun is for the day ，the moon is for the night.span>
    18. p>
    19. body>
    20. html>

  • 相关阅读:
    【Java并发入门】02 Java内存模型：看Java如何解决可见性和有序性问题
    Java接入sqlserver的一些坑点记录
    X3DAudio1_7.dll丢失原因，X3DAudio1_7.dll丢失怎样解决分享
    手写迷你Spring框架
    cv2.split函数与cv2.merge函数
    【前端】JavaScript —— WebAPI
    Spring Bean 的作用域（Bean Scope）
    “蔚来杯“2022牛客暑期多校训练营1——I题：Chiitoitsu（详解+知识点拆析）
    斯凯奇诉爱马仕侵权——品牌发展需警惕知识产权侵权
    手把手教你实现一个流动的渐变色边框
  • 原文地址：https://blog.csdn.net/qq_61727355/article/details/126512357