02-CSS基础

最新推荐文章于 2024-08-21 09:40:48 发布

gsdwe

最新推荐文章于 2024-08-21 09:40:48 发布

阅读量417

点赞数 4

文章标签： css 前端 harmonyos

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

版权

背景介绍 : 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>

gsdwe

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
02-CSS基础

背景介绍 : HarmonyOS鸿蒙生态系统中HTML基础篇我们告一段落 , 今天我们逐渐步入到HarmonyOS中的CSS篇;CSS主要是对HarmonyOS系统中的结构进行美化 , 他就相当于我们的化妆师 , 能够修饰我们的网页，使其更美观一点。
复制链接

扫一扫