背景介绍 : HarmonyOS鸿蒙生态系统中HTML基础篇我们告一段落 , 今天我们逐渐步入到HarmonyOS中的CSS篇 ; CSS主要是对HarmonyOS系统中的结构进行美化 , 他就相当于我们的化妆师 , 能够修饰我们的网页,使其更美观一点
1. CSS含义
CSS含义 : Cascading Style Sheet , 被称之为层叠样式表
2. CSS在HarmonyOS中的作用
CSS作用 : 主要对于页面中HTML结构进行修饰 , 例如修饰的文本大小 , 文本加粗 , 文本颜色 , 背景颜色 等等
3. CSS基本语法
1)CSS基本语法为:
<!--
选择器{
属性名1:属性值;
属性名2:属性值;
属性名n:属性值
}
-->
2) CSS基本语法特点:
1.基本语法有两个部分组成 : 选择器和样式声明 ( 样式规则 ) ;
2.{}被称之为样式声明 , 声明中的属性和属性值使用冒号 ( : ) 链接 ;
3.每一组属性和属性值结束后需要使用分号 ( ; ) 进行分割 ;如果是最
4.后一组属性和属性值 , 我们可以不用添加分号 , 但是我们推荐一定要进行添加 , 方便我们后续继续添加对应的修饰。
4.CSS语言中的注释语句
快捷键 : ctrl+?
语法 : /* 注释语句 */
5.样式
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>
</head>
<body>
<!-- 行内样式:不用选择器的 需要添加样式的标签都要加一个style属性 -->
<!-- 不推荐 结构和样式相分离 结构和行为相分离 -->
<div style="width: 100px; height: 100px; background-color: aqua">文本</div>
<div
style="width: 100px; height: 100px; background-color: rgb(148, 33, 33)"
></div>
</body>
</html>
运行得:
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>
<!-- 通常会在head标签里写样式,但是又不能直接写,需要加一个style标签 -->
<style>
div {
width: 100px; /*宽度*/
height: 100px; /*高度*/
background-color: red; /*背景颜色*/
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
运行得:
3)外部样式
<!-- 05.css -->
div{
width: 100px;/*宽度*/
height: 100px;/*高度*/
background-color: red;/*背景颜色*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- href 链接外部资源文件 -->
<link href="./css/05.css" rel="stylesheet" />
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
运行得:
6.选择器
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>
div {
background-color: red;
}
p {
background-color: blue;
}
</style>
</head>
<body>
<!-- 标签选择器 标签名(tagName) 会选取所有的同名标签 -->
<div>
div1
<p>div1 p</p>
</div>
<div>div2</div>
<p>duanluo</p>
</body>
</html>
运行得:
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>
/* 文字颜色 */
/* span {
color: red;
} */
/* p {
color: red;
}
div {
color: red;
} */
/* 类名 */
/* .red {
color: red;
}
.bgBlue {
background-color: blue;
} */
.btn {
/* 行内元素是不能设置宽高 */
display: block; /* 无论本身是什么类型的元素,都会变成块级元素 */
width: 80px;
height: 30px;
background-color: rgb(201, 197, 197);
border-radius: 5px; /* 圆角 */
text-align: center; /* 文本居中 */
line-height: 30px; /* 行高 */
cursor: pointer; /* 鼠标变小手 */
}
</style>
</head>
<body>
<!-- 类选择器 不限定是哪个标签,只要我们需要显示同一类型的效果 凡是后面都需要显示红色文字的地方,都可以加red类名 -->
<!-- <p class="red bgBlue">这是一段话,这里需要显示<span>红色</span>的文字</p>
<div class="red"><span>红色</span>的文字</div>
<h1 class="red">biaoti</h1> -->
<!--<button>按钮</button> -->
<div class="btn">确定</div>
<span class="btn">取消</span>
</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>
/* 通配符* 会选中所有的标签 */
/* 去掉所有标签的默认留白 */
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
aaa
<p>duanluo</p>
<p>duanluo</p>
</body>
</html>
运行得:
4)id选择器
<!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>
#dl {
color: red;
}
</style>
</head>
<body>
<!-- id选择器 id是唯一的 适用于特定元素的样式呈现 -->
<p id="dl">duanluo1</p>
<p>duanluo2</p>
</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>
/* div > span {
color: red;
} */
#box > span {
color: red;
}
</style>
</head>
<body>
<!-- 子代选择器 父子关系 父 > 子-->
<div id="box">
<p>
<span>div p span</span>
</p>
<span>div span</span>
</div>
<div>
<span>div2 span</span>
</div>
</body>
</html>
运行得:
6)hover伪类选择器
<!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 {
background-color: aqua;
width: 100px;
height: 100px;
}
div:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<!-- 伪类选择器 :hover 鼠标移入后会呈现指定的样式 -->
<div></div>
</body>
</html>
运行得:
鼠标移入前:
鼠标移入后
7)选择器优先级
<!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>
/*行内(1000) > id选择器(100) > 类选择器(10) > 标签选择器(1) > 通配(0) > 继承 */
/* * {
color: red;
} */
/* div {
color: green;
} */
/* p {
color: yellow;
} */
/* p {
color: red;
}
.blue {
color: blue;
}
#dl {
color: aqua;
} */
span {
color: red;
}
h1 > span {
color: aqua;
}
.test > span {
color: rgb(108, 18, 26);
}
</style>
</head>
<body>
<div>
div
<p class="blue">div duanluo1</p>
<p id="dl" class="blue" style="color: blueviolet">div duanluo2</p>
</div>
<h1 class="test">
<span>h1 span</span>
</h1>
</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>
h3 {
width: 120px;
height: 40px;
background-color: rgb(227, 121, 211);
color: rgb(255, 69, 0);
}
li {
background-color: rgb(0, 128, 0);
}
/* .bg {
background-color: rgb(154, 205, 50);
} */
div {
background-color: rgb(154, 205, 50);
}
strong {
color: rgb(0, 185, 255);
}
em {
color: rgb(139, 0, 0);
}
ins {
color: rgb(255, 165, 0);
}
</style>
</head>
<body>
<h1>标签选择器应用</h1>
<h3>王昭君</h3>
<ul>
<li>
<strong>【招式1】:</strong
>凋零冰晶,王昭君的一技能会对范围内的英雄造成减速效果和攻速,在视觉上还能制造成冰冷效果,无疑前期可以很好的小号敌人。
</li>
<li class="bg">
<div>
<em>【招式2】:</em
>禁锢寒霜,王昭君的二技能会对范围内英雄进行短暂的控制效果,或造成一定法术伤害,时间持续1秒,不过她的二技能释放时间稍微慢点,这时就需要召唤师们及时做出预判,将敌人控制进行一波的消耗,待队友上前击杀。
</div>
</li>
<li>
<ins>【招式3】:</ins
>凛冬已至,王昭君的大招是一个大圈,在圈内的敌人会造成一定的减速和法术伤害,持续时间大概在5秒,这时没有技能保护的王昭君因为脱战后,被动被打出增加看护盾效果,待一、二技能冷却后将其击杀。
</li>
</ul>
<h3>王昭君</h3>
<ul>
<li>
<strong>【招式1】:</strong
>凋零冰晶,王昭君的一技能会对范围内的英雄造成减速效果和攻速,在视觉上还能制造成冰冷效果,无疑前期可以很好的小号敌人。
</li>
<li>
<div>
<em>【招式2】:</em
>禁锢寒霜,王昭君的二技能会对范围内英雄进行短暂的控制效果,或造成一定法术伤害,时间持续1秒,不过她的二技能释放时间稍微慢点,这时就需要召唤师们及时做出预判,将敌人控制进行一波的消耗,待队友上前击杀。
</div>
</li>
<li>
<ins>【招式3】:</ins
>凛冬已至,王昭君的大招是一个大圈,在圈内的敌人会造成一定的减速和法术伤害,持续时间大概在5秒,这时没有技能保护的王昭君因为脱战后,被动被打出增加看护盾效果,待一、二技能冷却后将其击杀。
</li>
</ul>
</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>
h1{
color: red;
width: 350px;
background-color: dodgerblue;
}
.aqua{
color: orange;
background-color: aqua;
}
.yellow{
width: 300px;
background-color: yellow;
}
.blueviolet{
background-color: blueviolet;
}
.blue{
background-color: blue;
}
.blue2{
color: blue;
}
</style>
</head>
<body>
<h1 ><b>今日家庭作业--类选择器</b></h1>
<p class="yellow">今天的家庭作业是,完成该效果,该段落使用<span class="aqua">十六进制颜色值</span>进行修饰</p>
<p class="yellow">Today's <span class="blueviolet">Homework</span> Is To Complete The Effect<br />today's <span class="blue">homework</span> is to complete the effect</p>
<p class="yellow">
<span class="blue2">完成作业在屏幕中弹幕回复,</span>***同学作业完成
</p>
<p class="yellow">
HOMEWORK HAS BEEN FINISHED
</p>
</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>
h1{
color: red;
width: 200px;
height: 80px;
background-color: blue;
}
h3{
width: 300px;
height: 80px;
background-color: peru;
}
.midnightblue {
color: midnightblue;
text-decoration: underline;
}
.pink{
width: 300px;
height: 80px;
background-color: pink;
}
</style>
</head>
<body>
<h1><b>澜</b></h1>
<h3>手游《王者荣耀》中的角色</h3>
<p>
1.<span class="midnightblue">背景故事</span><br />
2.<span class="midnightblue">英雄技能</span><br />
3.<span class="midnightblue">玩法分析</span><br />
4.<span class="midnightblue">英雄台词</span>
</p>
<div class="pink">澜,腾讯手游《王者荣耀》中的一位刺客型英雄角色,于2020年12月8日正式上线</div><br />
<div class="pink">澜属于《王者荣耀》背景故事中三分地区域的吴阵营,身手敏捷,能以魔道之力化作鲨鱼对敌人进行暗杀。</div><br />
<div class="pink">原型为三国时期孙策手下名将吕蒙。<sup>[1]</sup></div><br />
</body>
</html>
运行得:
<h3><!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>
.green{
color: green;
}
.red{
color:red;
}
.yellow{
color: yellow;
}
.cyan{
color: cyan;
}
.purple{
color: purple;
}
</style>
</head>
<body>
<h3>有带颜色的诗句</h3>
<span class="green">绿</span>杨烟外晓寒轻,<span class="red">红</span>杏枝头春意闹<b>————宋宋祁《春意闹》</b><br />
一道残阳铺水中,半江瑟瑟半江<span class="red">红</span><b>————唐白居易《暮江吟》</b><br />
<span class="yellow">黄</span>梅时节家家雨,<span class="cyan">青草</span>池塘处处蛙<b>>————宋赵师秀《有约》</b><br />
一水护田将<span class="green">绿</span>绕,两山排闼送<span class="cyan">青</span>来<b>————宋王安石《书湖阴先生壁》</b><br />
日出江花<span class="red">红</span>胜火,春来江水<span class="green">绿</span>如<span id="part10">蓝</span><b>————唐白居易《忆江南》</b><br />
等闲识得东风面,万<span class="purple">紫</span>千<span class="red">红</span>总是春<b>————宋朱熹《春日》</b>
</body>
</html>