CSS 页面美化

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

常小树哥

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

阅读量171

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/Sherry1107/article/details/121197613

版权

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>

常小树哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 页面美化

1.为什么要美化页面有效的传递页面信息美化网页吸引用户凸显页面主题提高用户体验感span 标签：重点要突出的字，使用span套起来div 可以套单纯写内容的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #good1{ ba
复制链接

扫一扫