CSS 页面美化

2021-11-08 16:33:38 作者：互联网

1.为什么要美化页面

有效的传递页面信息
美化网页吸引用户
凸显页面主题
提高用户体验感

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

div 可以套单纯写内容的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #good1{
      background: yellow;
    }
  </style>
</head>

<body>
欢迎学习 <span id="good1">Java</span>
</body>
</html>

2.字体样式

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

  <style>
    /*font-family:字体样式
    font-size:字体大小
    font-weight:字体粗细
    color:字体颜色
    */
    body{
        /*可以同时应用于中，英文*/
      font-family:"Arial Black", 楷体;
    }
    h1{
      font-size: 50px;
      color: #ff003b;
    }
    .p1{
      font-weight: bold;
    }

  </style>
</head>
<body>
<h1>航天员翟志刚成功出舱</h1>
<p class="p1">
  这是中国首位出舱航天员翟志刚时隔13年后再次进行出舱活动；王亚平成为中国首位进行出舱活动的女航天员，迈出了中国女性舱外太空行走第一步。
</p>
<p>
  两名出舱航天员将在机械臂支持下，配合开展机械臂悬挂装置与转接件安装和舱外典型动作测试等作业。
  期间，在舱内的航天员叶光富配合支持两名出舱航天员开展舱外操作。
</p>
<p>
  Life was like a box of chocolates, you never know what you're gonna get.
</p>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*字体风格，斜体加粗*/
    p{
      font:oblique bolder 12px "楷体";
    }
  </style>

</head>
<body>
<p>
  两名出舱航天员将在机械臂支持下，配合开展机械臂悬挂装置与转接件安装和舱外典型动作测试等作业。
  期间，在舱内的航天员叶光富配合支持两名出舱航天员开展舱外操作。
</p>
</body>
</html>

3.文本样式

颜色
文本对齐方式
首行缩进
行高
文本装饰

文本图片水平对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>

  <style>
    /*颜色表示方式两种：
    英文;
    #RGB(0-F)
    RGBA,a显示透明度 */
    h1{
      color: #ff003b;
        /*文本排版位置，居中、左、右*/
      text-align: center;
    }
    .p1{
        /*段落首行缩进*/
        text-indent: 2em;
    }
    .p2{
        background: darkorchid;
     /*行高和块的高度一致，就可以上下居中，通常用于单行文字*/
        height: 300px;
        line-height: 300px;
    }
  </style>
</head>

<body>
<h1>鄂尔多斯首度回应年薪60万招教师</h1>
<p class="p1">
  针对媒体日前发布的“鄂尔多斯年薪60万招中小学教师”一事，内蒙古自治区鄂尔多斯市伊金霍洛旗教体局官方7日首度作出回应表示，“这是一项人事改革措施，覆盖面非常广。”
</p>
<p class="p2">
  伊金霍洛旗是中国第三大产煤县和国家重要的能源战略基地之一，也是内蒙古重要的清洁能源输出基地，位居全国百强县前列。
</p>

</body>
</html>

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

  <style>
    /*文本与图片水平对齐，参照物*/
    img,span{
      vertical-align: middle;
    }
    .L1{
      /*下划线、中划线、上划线、没有划线或者叫超链接去下划线*/
      text-decoration: underline;
    }
    .L2{
      text-decoration: line-through;
    }
    .L3{
      text-decoration: overline;
    }
    a{
      text-decoration: none;
    }
  </style>
</head>
<body>

<p>
  <img src="img01.png" alt="">
  <span>
    这是一张随便的图片</span>
</p>
<p class="L1">我爱你</p>
<p class="L2">我很爱你</p>
<p class="L3">我超级爱你</p>
<a href="">你是傻瓜</a>
</body>
</html>

标签：CSS,文本,Title,text,美化,font,出舱,航天员,页面
来源： https://blog.csdn.net/Sherry1107/article/details/121197613