1. HarmonyOS中的文本规则
1) 文本规则的含义 :
主要是通过属性和属性值为项目中的文本进行修饰;比如文本的加粗,文本的倾斜,文本颜色等等。
2)大小规则
<!--
字体大小属性 : font-size
取值 : 数值+单位(px单位/em单位)
默认字体大小 : 16px;
最小显示大小 : 12px;
注意事项 : 如果你的浏览器是最新版本的浏览器, 字体能设置可以设置成小于12px
-->
<!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>