Day04_HarmonyOS中的核心属性
背景 : 任何操作系统的界面搭建 , 都需要进行完整的修饰 , 界面修饰需要使用到的样式到底有哪些?本节课我们主要学习界面的修饰内容, 本节课也为重点内容需要各位小伙伴熟练使用。
Day04_HarmonyOS中的核心属性
背景 : 任何操作系统的界面搭建 , 都需要进行完整的修饰 , 界面修饰需要使用到的样式到底有哪些 ? 本节课我们主要学习界面的修饰内容, 本节课也为重点内容需要各位小伙伴熟练使用
今日学习目标
-
文本规则
-
背景规则
-
列表规则
-
面试题
-
案例
1. 文本规则
背景 : 我们以百度新闻为例 ( 百度新闻——海量中文资讯平台 ) 我们可以从一些网站或者是app设置的过程中, 都能看到不同的文本, 大小, 颜色, 样式, 等等; 这些内功均需要使用文本的相关规则来进行
1) 文本大小
含义 : 用来修饰文本的大小 , UI设计师和产品经理, 告诉我们测量文本大小的时候从文本的上面测量到文本的下面, 也就是测量文本的高度即可
属性 : font-size ;
取值 : 数值+px单位
案例 :
<style>
/*通过对比,我们能得出默认字体大小为:16px; 同时再高版本的Chrome浏览器可以设置成小于12px的字体大小, 原来版本能显示最小字体为12px*/
.box2{
font-size:30px;
}
</style>
<div class="box1">原本:我是HarmonyOS生态系统中的,容器标签</div>
<div class="box2">对比:我是HarmonyOS生态系统中的,容器标签</div>
2) 文本字体
含义 : 用来修饰文本的字体, 例如, 楷体, 行书 , 宋体, 微软雅黑等等
属性 : font-family
取值 : 隶书, 楷体, 等等常见的字体
案例 :
<style>
/*
font-family用来设置字体;
取值有以下特点
1)取值可以为一个值, 也可以为多个值, 多个值使用逗号分隔;
2)中文字体不用使用引号, 单个英文单词组成的字体不用使用引号; 多个英文单词组成的字体需要带引号
3)默认的字体为宋体, 因为高版本浏览器为了增强用户体验度,更改成了微软雅黑
4)取值为多个字体的时候,代码是从左向右依次读取,如果第一个字体浏览器支持,则实现不支持则依次向后; 都不支持则使用默认字体
*/
.box2{
font-family:宋体
}
</style>
<div class="box1">原本:我是HarmonyOS生态系统中的,容器标签</div>
<div class="box2">对比:我是HarmonyOS生态系统中的,容器标签</div>
3) 文本颜色
含义 : 为文本添加颜色, 让文本变得更漂亮
属性 : color
取值 : 代表颜色的英文单词 / #六位十六进制颜色 / rgb()颜色
<style>
.box2{
/*颜色单词:red,green,blue,orange....*/
color:red;
/*#六位十六进制的颜色值: 十六进制; 取值范围:0-9A-F 六位随机组合,就能组成一个颜色*/
color:#123edd;
/*rgb(red,green,blue)颜色:代表的是三个颜色兑再一起的颜色: 分别是红,绿,蓝三个颜色的占比; 颜色取值:0-255;包括0,包括255*/
color:rgb(23,122,233)
}
</style>
<div class="box1">原本:我是HarmonyOS生态系统中的,容器标签</div>
<div class="box2">对比:我是HarmonyOS生态系统中的,容器标签</div>
4) 文本加粗
含义 : 让文本进行加粗显示
属性 : font-weight
取值 : 两种类型
1) 数值类型
取值为 100 - 900 整百的数值 ( 100, 200, 300, 400, 500, 600, 700, 800, 900 )
特殊值: 100=细体; 400=正常字体; 700=加粗字体; 900=更粗字体
2) 关键词类型
lighter==细体
normal=正常字体
bold====加粗字体
bolder==更粗字体
案例 :
<style>
.box2{
font-weight:100px;
font-weight:lighter;
}
</style>
<div class="box1">原本:我是HarmonyOS生态系统中的,容器标签</div>
<div class="box2">对比:我是HarmonyOS生态系统中的,容器标签</div>
<!--
思考1:为啥我们学习了b标签还要学习font-weight:bold
思考2:为啥我们默认字体没有加粗,属于普通字体,还要学习font-weight:normal/100
-->
5) 文本倾斜
含义 : 让文本以倾斜样式进行显示
属性 : font-style
取值 : italic / oblique / normal
italic;====倾斜
oblique;==斜体字
normal;==普通字体
案例 :
<style>
.box2{
/*让文本倾斜显示, 效果与oblique一致*/
font-style:italic
}
</style>
<div class="box1">原本:我是HarmonyOS生态系统中的,容器标签</div>
<div class="box2">对比:我是HarmonyOS生态系统中的,容器标签</div>
6) 文本修饰线
含义 : 为文本添加修饰线效果, 修饰线效果有:下划线,中划线,上划线等等
属性 : text-decoration ( 复合属性 )
取值 : underline dashed red;
取值分别代表的是 : underline=代表的是修饰线的位置; dashed=代表的是修饰线的样式; red=代表的是修饰线的颜色;
单一属性 :
text-decoration-line: 代表了修饰线的位置
underline;下划线 line-through;中划线 overline;上划线; none;取消修饰线
text-decoration-style: 代表了修饰线的样式
solid;单实线 double;双实线 dashed;线段状虚线 dotted;点状虚线 wavy;波浪线
text-decoration-color: 代表了修饰线的颜色
颜色取值与文本颜色取值一致
案例 :
<style>
.box2{
text-decoration:underline wavy red;
}
</style>
<div class="box1">原本:我是HarmonyOS生态系统中的,容器标签</div>
<div class="box2">对比:我是HarmonyOS生态系统中的,容器标签</div>
7) 文本首行缩进
含义 : 让文本实现开头空几个汉字的大小
语法 : text-indent
取值 : 数值+px; 数值+em
案例 :
<style>
/*
px是固定的像素单位, 是多少个像素就是多少个像素;
em是相对单位, 相对于自己字体大小或者是父元素字体大小缩放的一个倍数; 默认的1em=16px; 如果标签字体大小发生改变 则 1em代表的距离也发生了改变
*/
.box2{
text-indent:20px
text-indent:2em;
}
</style>
<div class="box1">原本:我是HarmonyOS生态系统中的,容器标签</div>
<div class="box2">对比:我是HarmonyOS生态系统中的,容器标签</div>
8) 文本对其方式
含义 : 实现文本的水平对其方式
语法 : text-align
取值 : left / right / center / justify
案例 :
<style>
div{
/*
控制文本水平对其方式
left;===左侧对其
right;==右侧对其
center;=居中对其
justify;两端对其
*/
text-align:left
}
</style>
<div>
玛卡·巴卡(Makka Pakka)是英国学龄前儿童电视节目《花园宝宝》中的角色。 玛卡巴卡是一个扁饼蛋糕造型的宝宝,住在花园边上小渠尽头的洞穴里。他最喜欢的事是收集并清洗石头。他也喜欢为花园里其他的玩偶们洗脸并且帮他们吹干。 他为此准备了一块可爱的大海绵和一块紫色的肥皂,还有一个风箱似的吹风机。他把所有这些设备都放在推推车上,推着满花园走。因为他是花园里个头最小的角色之一,所以他还有个小喇叭,告诉大家他来了。 爱好 玛卡巴卡是一个扁饼;
</div>
9) 单行文本垂直居中
含义 : 单行文本垂直居中, 除了应用于单行文本之外还可以应用于多行文本之间, 使用于多行文本之间, 用于调整行与行之间的间距 ;
属性 : line-height
取值 : 如果是单行文本垂直居中, 则line-height取值与高度保持一致; 如果调整行间距则根据需求设置即可 ; 需要注意的是 : 单行文本垂直居中对其取值不要超过高度, 超过高度容易影响后面布局
案例 :
<style>
div{
width:300px;
height:100px;
background-color:red;
text-align:center;
line-height:100px;
}
</style>
<div>
欢迎来到鸿蒙
</div>
10) 扩展 ( 学员了解 )
a) 调整文本左右间距
字符间距 : 用来调整字符和字符之间的距离 ; 使用属性 : letter-spacing;
词间距 : 用来调整单词与单词之间的距离 ; 使用属性 : word-spacing;
取值为 : 数值+px单位
b) 大小写转换
用来切换大小写字母;
属性 : text-transform
lowercase=全部小写;
uppercase=全部大写;
capitalize=首字母大写;
c) 字体复合属性 :
font : weight style size/line-height family;
注意事项 : 复合属性字体大小和字体为必须值, 并且必须位于最后面, 不能调整位置大小
注意事项 : 加粗和倾斜可以省略
注意事项 : 如果有字体大小和行间距, 则二者可以连在一起书写;
2. 背景规则
背景 : 我们单纯只设置宽度或者是变样, 容器区域还是比较单调的, 如何让容器区域内变得更加漂亮, 这就是我们接下来要学习的背景相关内容 ;切记 背景不会影响容器的大小, 也不会把容器撑开, 并不会影响文本的显示, 背景始终位于文本的底部显示
1) 背景颜色
含义 : 背景颜色用来修饰容器的底色 ;
属性 : background-color
取值 : 代表颜色的英文单词 / #六位十六进制 / rgb(red,green,blue) / rgba(red,green,blue,alpha)
在这里我们只需要为大家讲解: rgba()即可, 因为rgb颜色已经在文本区域进行讲解;
应用场景 : 遮罩层, 半遮罩, 京东商城删除商品的遮罩层, 婚纱摄影网站的的半这招效果
案例 :
<style>
body{
background-color:blue;
}
/*
在这里 : rgba() 代表了让前面的颜色变的透明; 生活中案例: 橘子汁兑水
a代表的是alpha 通道的颜色; 控制颜色的透明度
取值:0 - 1 之间的小数, 包括0, 包括1; 0代表透明; 1代表不透明;
取值保留一位小数; 小数点前面的0可以省略;
*/
div{
width:300px;
height:300px;
border:10px solid gray;
background-color:rgba(23,34,45,0.5)
}
</style>
<div></div>
2) 背景图片
含义 : 因为背景颜色比较单调, 所以我们需要使用背景图片进行替换 ;
属性 : background-image;
取值 : url(图片路径)
案例 :
<style>
/*
在这里需要注意的是:
1)只要插入背景图片,就会产生背景的平铺;类似于天花板顶棚
2)如果图片大小,小于容器; 则能直接显示平铺效果;
3)如果图片大小,大于容器; 则背景图片会显示不全
*/
div{
width:300px;
height:300px;
border:10px solid gray;
background-image:url(../img/pic.png)
}
</style>
<div></div>
3) 背景平铺(背景重复)
前提 : 背景平铺属性, 只要插入背景图片之后就能显示出来平铺效果, 如何解决平铺呢 ?
属性 : background-repeat
取值 :
repeat;====平铺
no-repeat;=不平铺
repeat-x;===水平平铺
repeat-y;===垂直平铺
案例 :
<style>
/*
只要插入背景图片默认就是平铺的;
取消平铺之后, 图片默认显示在容器的左上角;
*/
div{
width:300px;
height:300px;
border:10px solid gray;
background-image:url(../img/pic.png);
background-repeat:no-repeat;
}
</style>
<div></div>
4) 背景位置
含义 : 取消平铺之后, 背景图片默认再左上角显示, 如何调整背景图片的显示位置 ?
属性 : background-position
取值 : x y ; x代表水平方向; y代表垂直方向; 同时取值还可以为关键词; 水平方向关键词:left/right/center; 垂直方向关键词:top/bottom/center
案例 :
<style>
/*
调整背景图片位置 :
如果取值为数值的时候, 第一个值代表的是水平方向; 第二个值代表的是垂直方向;
如果取值为关键词的时候, 则不分水平垂直方向;
*/
div{
width:300px;
height:300px;
border:10px solid gray;
background-image:url(../img/pic.png);
background-repeat:no-repeat;
background-position:right top;
}
</style>
<div></div>
5) 背景大小
前提 : 当背景图片太大或者是太小的时候, 都不合适, 我们该如何调整背景图片的大小呢 ?
属性 : background-size
取值 : x y; xy代表的是水平方向和垂直方向的大小; 取值除了数值单位还可以取值为:关键词
关键词取值 : 直接替换x和y; 使用一个关键词即可;
cover: ===== 等比例放大这个背景图, 然后直到铺满这个容器为止; 背景图片会显示不全
contain: == 等比例缩放这个背景图, 然后只要横向或者是纵向有一个边铺满容器就可以; 背景图片会铺不满容器
<style>
/*
调整背景图片尺寸大小;
*/
div{
width:300px;
height:300px;
border:10px solid gray;
background-image:url(../img/pic.png);
background-repeat:no-repeat;
background-position:right top;
background-size:100px 100px;
}
</style>
<div></div>
6) 背景固定滚动
背景 : 背景图片的滚动和固定, 主要是用来实现, 视觉切换的效果; 当滚动屏幕的时候背景图片是否随着滚动条滚上去或者是固定再一个位置
属性 : background-attachment
取值 :
fixed; 背景固定; 当浏览器滚动的时候不会影响背景图片, 背景图片会固定再某一个位置
scroll; 背景滚动; 当浏览器滚动的时候,背景图片会随着浏览器滚动条滚动上去;
案例 :
<style>
/*
body高度比较大的时候会让浏览器产生滚动条
*/
body{
height:1800px;
}
div{
width:300px;
height:300px;
border:10px solid gray;
background-image:url(../img/pic.png);
background-repeat:no-repeat;
background-position:right top;
background-size:100px 100px;
/* 当添加了对应的背景图片的固定之后, 背景图片的参照位置调整,大小设置不在参照容器,而是参照浏览器窗口;*/
backgrund-attachment:fixed;
}
</style>
<div></div>
7) 背景复合属性
前面学习的六个属性均为单一属性; 一个属性只能实现一个样式; 但是这样写起来比较麻烦, 所以我们要简化代码, 我们需要使用复合属性;
属性 : background
取值 : color image repeat position/size attachment
注意事项 :
a) 复合属性后面可以跟一个值,也可以跟多个值, 多个值使用空格隔开, 多个取值的时候取值先后顺序可以交换
b) 复合属性使用位置和大小的时候, 必须按照顺序书写, 不能拆开书写
c) /前面代表的是位置; /后面代表的是大小
d) 如果只要位置, /以及后面的大小可以不用跟;
e) 如果只要大小, /前面的位置必须要书写, 就算不调整位置也要写0px 0px
案例 :
<style>
div{
width:300px;
padding:300px;
border:10px solid gray;
/*单一属性*/
background-color:red;
background-image:url(../img/pic.png);
background-repeat:no-repeat;
background-position:20px 20px;
background-size:100px 100px;
background-attachment:scroll;
/*复合属性*/
background:red url(../img/pic.png) no-repeat 20px 20px/100px 100px scroll
}
</style>
<div></div>
3. 列表规则
背景 : 列表规则主要是针对列表标签的修饰, 再实际开发的过程中使用列表比较高的为无序列表; 我们接下来就以无序列表为例来来学习列表的相关属性
1) 列表单一属性
含义 : 列表的单一属性只对列表的某一个样式进行修饰;
属性 :
list-style-type;====列表项的类型
list-style-image;===列表项的图片
list-style-position;=列表项的位置
案例 :
<style>
ul{
/*
1)列表项样式
取值可以为:
disc;黑色实心圆;
circle;空心圆;
square;黑色正方形;
none;取消列表项;使用频率比较高
*/
list-style-tyle:circle;
/*
2)列表项图片
取值:url(图片的路径)
实际开发的时候列表项图片我们也不会使用列表项图片 因为上下的位置,以及大小没有办法控制, 所以我们几乎不会使用
*/
list-style-image:url(../img/pic.png);
/*
3)列表项位置
用来调整列表项位于列表的内外位置;
属性:list-style-position:inside/outside
*/
list-style-position:inside;
}
li{
/*通过这个辅助线能看到列表项的位置是位于里面还是外边距*/
border:1px solid gray;
}
/*
实际开发的时候,单一属性几乎不使用, 为啥我们还要学习呢? 你可以尝试把ul里面的单一属性修饰放在li里面, 效果也能实现
这里隐藏了一个面试题:
什么事继承性?
CSS属性中有一部分属性和属性值可以放在父元素上面实现修饰效果, 也可以放在子元素上面实现修饰效果, 这种修饰我们称之为属性具有继承性;
*/
</style>
<ul>
<li>我是鸿蒙中的无序列表</li>
<li>我是鸿蒙中的无序列表</li>
<li>我是鸿蒙中的无序列表</li>
<li>我是鸿蒙中的无序列表</li>
<li>我是鸿蒙中的无序列表</li>
</ul>
2) 列表复合属性
实际开发的时候虽然单一属性我们使用频率比较低, 但是综合一句话, 实际开发的时候我们经常使用复合属性;
属性 : list-style:type image position
特点 : 复合属性后面可以跟一个值, 也可以跟多个值; 多个值使用空格隔开; 也可以调整顺序
注意 : 实际开发的时候 我们只会使用 list-style:none 这一行代码;
4. 面试题
1. 继承性 1. 层叠性
5. 案例
1. 视觉切换 1. 背景知乎案例 1. 案例1 1. 案例2 1. 案例3 1
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
47
0- 0
已为社区贡献6条内容
所有评论(0)