03鸿蒙生态中的核心样式-1

最新推荐文章于 2024-08-22 07:31:04 发布

gsdwe

最新推荐文章于 2024-08-22 07:31:04 发布

阅读量641

点赞数 19

文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/gsdwe/article/details/140530933

版权

1. HarmonyOS中的文本规则

1) 文本规则的含义 :

主要是通过属性和属性值为项目中的文本进行修饰；比如文本的加粗，文本的倾斜，文本颜色等等。

2)大小规则

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        /*  font-size: 12px; */ /* 字体大小 */
        /*  font-size: 1em;  */ /* 有参考物 */
        font-size: 20px;
        
      }
      div > p {
        font-size: 2em; /* 参照的是父元素字体大小 */
      }
    </style>
  </head>
  <body>
    <div>
      页面中的文本默认大小是16px
      <p>这里的文本大小按照em的单位来设置</p>
      <span>设置字体大小</span>
    </div>
  </body>
</html>

运行得：

3) 字体规则

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        /*  font-family: "微软雅黑";  */ /* 默认 */
        /* font-family: "黑体";
        font-family: "楷体";
        font-family: "宋体"; */
        font-family: arial, "Hiragino Sans GB", "Microsoft Yahei", "微软雅黑",
          "宋体", Tahoma, Arial, Helvetica, STHeiti;
      }
    </style>
  </head>
  <body>
    <div title="提示信息">改变字体的类型</div>
    <!--  <img src="./baidu.png" title="百度一下，了解更多" /> -->
  </body>
</html>

运行得

font-family: "楷体"; 取消注释得

4) 加粗规则

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .d1 {
        font-weight: bolder;
      }
      strong {
        font-weight: normal;
      }
      .d2 {
        font-weight: lighter;
      }
      .d3 {
        font-style: italic;
      }
      em {
        font-style: normal;
      }
    </style>
  </head>
  <body>
    <strong>又不想加粗</strong>
    <div class="d1">测试加粗</div>
    <div class="d2">测试变细</div>
    <div class="d3">测试斜体</div>
    <em>不想斜</em>
  </body>
</html>

运行得：

5) 颜色规则

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .d1 {
        color: #ccc;
      }
      .d2 {
        color: #ff0000;
      }
      .d3 {
        color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="d1">div1</div>
    <div class="d2">div2</div>
    <div class="d3">div3</div>
  </body>
</html>

运行得：

6) 大小写转换

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        /* 大写 */
        /* text-transform: uppercase; */
        /* 小写 */
        /* text-transform: lowercase; */
        /* 首字母大写 */
        text-transform: capitalize;
      }
      p {
        font-variant: small-caps;
      }
      span {
        /*  letter-spacing: 24px; */
        word-spacing: 24px;
      }
    </style>
  </head>
  <body>
    <div>How are you?</div>
    <p>How are you?</p>
    <span>How are you?</span>
  </body>
</html>

运行得：

2. HarmonyOS中的背景规则

HarmonyOS生态中的背景规则，主要是用来修饰背景颜色等其它效果，本次我们以背景颜色为主

1) 背景颜色规则

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .d1 {
        width: 100px;
        height: 100px;
        background-color: red;
        color: white;
      }
      .d2 {
        width: 540px;
        height: 258px;
        background-image: url(./baidu.png);
        border: 1px solid blue; /* 边框 */
      }
      img {
        width: 100px;
        height: 100px;
      }
      .d2 {
        width: 540px;
        height: 258px;
        background-image: url(./baidu.png);
        background-color: aqua;
        border: 1px solid blue; /* 边框 */
      }
    </style>
  </head>
  <body>
    <!-- 复合属性 -->
    <!-- 背景颜色 background-color -->
    <!-- 背景图片 background-image -->
    <!-- <div class="d1">文字</div> -->
    <div class="d2">
      <!-- <img src="./q.jpg" /> -->
      <!--  <p>直接在这里写文字</p>
      <p>直接在这里写文字</p>
      <p>直接在这里写文字</p>
      <p>直接在这里写文字</p>
      <p>直接在这里写文字</p>
      <p>直接在这里写文字</p> -->
      <!-- <img src="./baidu.png" /> -->
    </div>

    <div class="d3"></div>
  </body>
</html>

3. HarmonyOS中的浮动规则

HarmonyOS生态中的浮动规则，主要以研发PC项目为主，主要解决的问题：让原本纵向排列的元素横向显示；方便横向布局展示

注意事项：在初期接触浮动的时候，父元素要给定高度，这样能解决一部分问题，之后的问题以后再详细讲述

1) 浮动规则

示例一

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .header {
        height: 100px;
        background-color: aqua;
      }
      .aside {
        width: 20%;
        height: 500px;
        background-color: burlywood;
      }
      .main {
        width: 80%;
        height: 500px;
        background-color: blueviolet;
        float: right;
      }
      .footer {
        height: 100px;
        background-color: chocolate;
      }
    </style>
  </head>
  <body>
    <div class="header"></div>

    <div class="main"></div>
    <div class="aside"></div>
    <div class="footer"></div>
  </body>
</html>

示例二

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 想让块级元素一行显示 可以考虑浮动 */
      div {
        width: 100px;
        height: 100px;
        float: left; 
      }
      .d1 {
        background-color: red;
      }
      .d2 {
        background-color: green;
      }
      .d3 {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="d1">区块一</div>
    <div class="d2">区块二</div>
    <div class="d3">区块三</div>
  </body>
</html>

示例三

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .d1 {
        width: 100px;
        height: 100px;
        background-color: red;
        /*  float: left; */
        float: right;
      }
      /* 绿色的区块为什么会跑到红色区块的下面？ 因为红色区块浮动之后脱离了标准文档流，它的位置就会被后面的区块所占据 */
      .d2 {
        width: 100px;
        height: 100px;
        background-color: green;
      }
      .d3 {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
  </body>
</html>

示例四

蓝色区块因绿色区块浮动影响进入了绿色区块区域，进而无法看见

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .d1 {
        width: 100px;
        height: 100px;
        background-color: red;
        float: right;
      }
      .d2 {
        width: 100px;
        height: 100px;
        background-color: green;
        float: left;
      }
      .d3 {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
  </body>
</html>

示例五

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
      }
      /* 脱离文档流，没有脱离文本流 */
      .d1 {
        background-color: red;
        float: left;
      }
      .d2 {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="d1">11</div>
    <div class="d2">22</div>
  </body>
</html>

gsdwe

关注

19
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
03鸿蒙生态中的核心样式-1

HarmonyOS生态中的浮动规则，主要以研发PC项目为主，主要解决的问题：让原本纵向排列的元素横向显示；注意事项：在初期接触浮动的时候，父元素要给定高度，这样能解决一部分问题，之后的问题以后再详细讲述。HarmonyOS生态中的背景规则，主要是用来修饰背景颜色等其它效果，本次我们以背景颜色为主。注意事项 : 如果你的浏览器是最新版本的浏览器, 字体能设置可以设置成小于12px。比如文本的加粗，文本的倾斜，文本颜色等等。font-family: "楷体";取值 : 数值+单位(px单位/em单位)
复制链接

扫一扫