day02_HarmonyOS中的样式修饰

背景 : 无论是哪一款操作系统, 都离不开界面的搭建, 如何让我们的界面结构搭建起来我们的HTML部分必不可少, 如果让我们的界面变得更加的美观我们就需要通过今天要学习的CSS来完成。

打爆企鹅！

2219人浏览 · 2024-11-08 18:00:00

打爆企鹅！ · 2024-11-08 18:00:00 发布

day02_HarmonyOS中的样式修饰

背景 : 无论是哪一款操作系统, 都离不开界面的搭建, 如何让我们的界面结构搭建起来我们的HTML部分必不可少, 如果让我们的界面变得更加的美观我们就需要通过今天要学习的CSS来完成

今日学习目标

CSS的含义及作用
CSS的基本语法
CSS语法使用位置
CSS语法使用位置优先级
CSS基本语法详解之选择器
选择器的权重值与权重值相加

1.CSS的含义及作用

CSS含义 : CSS是 Cascading Style Sheet 的缩写, cascading代表的是层叠, style代表的是样式, sheet代表的表; 所以CSS中文释义为层叠样式表; 层叠代表的是一层一层的覆盖, 例如 : 护肤品的使用;

CSS作用 : CSS主要的作用是为了实现对HTML结构的修饰

2.CSS的基本语法

1) CSS基本语法 :

选择器 { 属性:属性值; 属性:属性值; 属性:属性值 }

2) CSS基本语法特点 :

基本语法有两个部分组成 , 分别是 : 选择器和{} ( {}又称之为样式规则 )
选择器含义 : 选择器是查找页面元素的方式方法
{}样式规则含义 : 对选择器查找到的元素进行修饰实现的效果
其他特点 :
- 属性和属性值使用冒号连接
- 每一组属性和属性值使用分号分隔
- 属性值不用带引号
- 最后一组属性和属性值后面可以带引号也可以不带引号,推荐添加引号
案例 :

男生 { 发型:3mm; T恤:大红色; 裤子:紧身裤; 鞋子:豆豆鞋 }

男生===等价于===选择器

{}=====等价于===样式规则

3.CSS语法使用位置

关于CSS基本语法的使用位置其实有很多 , 接下来我们一一学习使用位置

1) 行内使用位置

含义 : 行内使用位置是将CSS基本语法放在标签的开始位置处

基本语法 : <div style="属性:属性值;属性值:属性值;">文本/图片/其他元素</div>

注意事项 : 在这里标签名字代表了选择器, style和引号代表了{} 也就是我们的样式规则

案例 :

<div style="width:500px;height:50px;background-color:red">我是一个普通的div</div>
<div style="width:500px;height:50px;background-color:red">我是一个普通的div</div>
<div style="width:500px;height:50px;background-color:red">我是一个普通的div</div>
<p style="width:300px;height:50px;background-color:green">我是一个独立的p标签</p>
<p style="width:300px;height:50px;background-color:green">我是一个独立的p标签</p>
<p style="width:300px;height:50px;background-color:green">我是一个独立的p标签</p>
<h1 style="width:400px;height:50px;background-color:yellow">我是一个普通的标题标签</h1>
<h1 style="width:400px;height:50px;background-color:yellow">>我是一个普通的标题标签</h1>
<h1 style="width:400px;height:50px;background-color:yellow">>我是一个普通的标题标签</h1>

优缺点 :

优点 : 快速直接, 直接对一个标签修饰

缺点 : 结构样式没有分离 ; 不易于维护 ; 代码复用项不强

2) 内部使用位置

含义 : 讲对应的CSS的基本语法放在一个独立的style标签里面 , 同时将style标签放在head标签里面

基本语法 :

<head>
    <style>
        选择器{
            属性:属性值;
            属性:属性值;
            属性:属性值;
        }
    </style>    
</head>

案例 :

<head>
    div{
        width:500px;
        height:50px;
        background-color:red
    }
    p{
        width:300px;
        height:50px;
        background-color:green
    }
    h1{
        width:400px;
        height:50px;
        background-color:yellow
    }
</head>
<body>
    <div>我是一个普通的div</div>
    <div>我是一个普通的div</div>
    <div>我是一个普通的div</div>
    <p>我是一个独立的p标签</p>
    <p>我是一个独立的p标签</p>
    <p>我是一个独立的p标签</p>
    <h1>我是一个普通的标题标签</h1>
    <h1>>我是一个普通的标题标签</h1>
    <h1>我是一个普通的标题标签</h1>
</body>

优缺点 :

优点 : 简化页面结构, 做到了一部分的结构样式分离;

缺点 : 没有充分做到结构样式分离, 还是在一个文件中 ; 代码过多的时候, 来回滚动屏幕操作不易; 代码过多容易造成头重脚轻

3) 外部使用位置

含义 : 外部使用位置需要把CSS代码放在一个独立的以 .css为后缀名的文件中, 通过文件关联把CSS样式文件引入进来;

基本语法 : 通过link标签引入 <link rel="shylesheet" href="路径">

案例 :

css : 文件为 : index.css

div{
    width:500px;
    height:50px;
    background-color:red
}
p{
    width:300px;
    height:50px;
    background-color:green
}
h1{
    width:400px;
    height:50px;
    background-color:yellow
}

html

<head>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <div>我是一个普通的div</div>
    <div>我是一个普通的div</div>
    <div>我是一个普通的div</div>
    <p>我是一个独立的p标签</p>
    <p>我是一个独立的p标签</p>
    <p>我是一个独立的p标签</p>
    <h1>我是一个普通的标题标签</h1>
    <h1>>我是一个普通的标题标签</h1>
    <h1>我是一个普通的标题标签</h1>
</body>

优缺点 :

暂没有缺点 ;

优点 : 充分的做到了结构样式分离 ; 方便维护 , 便于开发

4.CSS语法使用位置的优先级

问题提出 : 三个样式使用位置都能跑通代码 , 都能实现样式 , 如果三个样式表一起使用的时候 , 会出现谁的样式呢 ? 通过两两对比的形式 , 可以得出结论

行内样式 > 内部样式 > 外部样式 ?

注意事项 : 实现样式遵循的原则 : 就近原则, 根据代码的执行顺序, 谁再下面, 实现谁的样式效果,
注意事项 : 当外部样式位于内部样式的底部, 则外部样式级别要比内部样式级别要高; 但是再实际开发的过程中外部引入的外部文件, 都要放在前面, 再进行独立的修饰; 所以得出的最终结论为内部 > 外部
有没有比行内样式级别还要高的方法吗?

有, 当然有 !important 的权重要比他的使用位置位于属性值的后面, 分号的前面

例如 : div{width:200px;height:200px; background-color:red !important; }

5.CSS中的选择器

1) 选择器含义

查找页面的方式方法 , 但是方式方法有很多 , 通过标签名字 , 通过起别名 , 通过标签之间的关系查找元素并进行修饰

2) 标签选择器

含义 : 通过标签名字查找页面元素 , 任何一个标签都可以当做选择器使用

基本语法 : P{ 样式规则 } div{ 样式规则 } h1{ 样式规则 }

案例 :

<style>
    /*匹配到的是页面中叫h1标签的元素实现颜色为红色*/
    h1{color:red}
    /*匹配到的是页面中叫p标签的元素,实现文本颜色为橙色*/
    /*除了匹配到独立的p标签之外div里面的p标签也能被匹配到*/
    p{color:orange}
</style>
<div>我是一个普通的div</div>
<div>我是一个普通的div</div>
<div>我是一个普通的div
    <p>我是div里面的p</p>
</div>
<h1>我是一级标题</h1>
<h1>我是一级标题</h1>
<h1>我是一级标题</h1>
<p>我是独立的p</p>
<p>我是独立的p</p>
<p>我是独立的p</p>

优缺点 :

优点 : 能直接找到对应的元素

缺点 : 匹配的范围过于广泛 , 精准度不高 . 如何提高精准度? 使用其他的选择器

3) 类选择器

含义 : 通过给元素起class类名 , 然后通过这个类名(起别名), 查找页面元素

基本语法 :

起名字 : <div class="box">文本/图片/其他元素</div>

查找元素 : .box{ 样式规则 }

注意事项 : 点必须携带, 相当于令牌, 没有令牌不能查找元素

注意事项 : 请名字过程, 1)不能以数字开头; 2)不要使用汉字; 3)不要出现特殊符号; 4)可以使用字母数字下划线连接符配合使用; 5)建议使用小写字母; 6)推荐使用语义化命名,做到见名知意; 7)可以使用驼峰命名法

案例 :

<style>
    /*匹配到时是页面中class类名为box的元素*/
    /*无论是为相同的标签, 标签的类名是可以重复的; 类似于人的名字*/
    .box{
        width:120px;
        height:120px;
        background-color:red
    }
    /*匹配到的是页面中叫做p1的元素*/
    .p1{
        color:red
    }
    /*匹配到的是页面中叫p2的元素*/
    .p2{
        color:orange
    }
</style>
<div class="box">我是一个普通的div</div>
<div class="box">我是一个普通的div</div>
<div>我是一个普通的div
    <p class="p2">我是div里面的p</p>
</div>
<h1>我是一级标题</h1>
<h1>我是一级标题</h1>
<h1>我是一级标题</h1>
<p class="box">我是独立的p</p>
<p class="p1">我是独立的p</p>
<p>我是独立的p</p>

注意事项 : class类名是可以出现重复的, 相同的样式使用同一个类名即可

注意事项 : 一个元素可以有多个class类名 , 实际开发的时候多类名使用频率比较多, 但是多类名使用频率比较高的个数为 :2个 3个再多类名很少出现

多类名使用注意事项 : <div class="box1 box2"></div> 多个类名共用一个class多个类名之间使用空格隔开 ;

案例 :

<style>
    /*两个类选择器同时使用的时候, 后面的修饰会把前面的修饰覆盖掉, 因为代码从上向下执行, 后面的代码覆盖前面的代码*/
    .box1{
        width:100px;
        height:100px;
        background-color:red
    }
    .box2{
        width:200px;
        height:200px;
        background-color:orange
    }
</style>
<div class="box1 box2">我是一个普通的div</div>

4) ID选择器

含义 : id选择器是通过给元素起一个id的名字 , 通过id名字查找页面元素, 注意的是 : 任何一个元素都可以带id属性, 但是id属性的取值只能有一个取值, 不能出现重复 , 因为id具有唯一性

基本语法 :

起名字 : <div id="bobo"></div>

查找元素 : #bobo{样式规则}

注意事项 : 在这里需要注意的是 , #不能省略 ; 同时id的属性值不能出现相同的

注意事项 : id就相当于身份证, 每个人都有, 但是身份证号是不同的

案例 :

<style>
    /*找到页面中*/
    #bobo{
        width:300px;
        height:300px;
        background-color:green
    }
</style>
<div id="bobo">我是HarmonyOSdiv</div>

5) 通配符选择器

含义 : 通配符选择器是用来匹配页面中或者是某一个区内部所有的元素的一个方法

基本语法 : *{样式规则} 但是它的代码一般为 : *{margin:0;padding:0}

代码主要作用 : 取消元素自带的内边距和外边距

案例 :

<style>
    *{margin:0;padding:0}
</style>
<p>HarmonyOS生态中的段落</p>
<div>我是HarmonyOS中的容器</div>
<h1>我是Harmonyos中的标题</h1>
<ul>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>
<ol>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
<dl>
    <dt>自定义列表</dt>
    <dd>自定义列表</dd>
</dl>

6) 群组选择器

含义 : 群组选择器指的是把相同样式的选择器修饰放在一起, 起到节约代码的作用 , 降低代码的重复率

基本语法 : 选择器1,选择器2,选择器3{样式规则}

案例 :

<style>
    /*使用群组选择器可以节约代码让我们的代码更加简洁*/
    div,p,h1{
        width:100px;
        height:100px;
        background-color:red;
    }
</style>
<div></div>
<p></p>
<h1></h1>

7) 后代

含义 : 查找当前元素内部, 所有符合条件的元素

基本语法 : 选择器1 选择器2{ 样式规则 } 使用符号为空格

案例 :

<style>
    /* 能查找到七个li添加了边框样式 */
    ul li{
        border:2px solid gray;
    }
</style>
<ul>
    <li>无序列表</li>
    <li>无序列表
        <ol>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>
    </li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

8) 子代

含义 : 查看当前元素内部 , 所有符合条件的子元素 ( 儿子辈份的元素 )

基本语法 : 选择器1>选择器2{样式规则} 使用符号为大于号

案例 :

<style>
    /* 能查到四个li */
    ul>li{
        border:2px solid gray;
    }
</style>
<ul>
    <li>无序列表</li>
    <li>无序列表
        <ol>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>
    </li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

9) 伪类选择器

含义 : 伪类代表的是, 元素本身没有对应的样式, 需要通过鼠标事件等行为触发之后才会出现对应的效果 ; 例如 : 实际开发的时候,使用频率比较高的就是 : 鼠标划过;

基本语法 : 选择器:hover{}

注意事项 : 冒号前后不能有空格, 必须与前面的选择器挨在一起

案例 :

<style>
    /*div默认样式:宽度200;高度200;背景颜色:红色*/
    div{
        width:200px;
        height:200px;
        background:red
    }
    /*鼠标划过的时候改变宽度高度,背景颜色*/
    div:hover{
        width:250px;
        height:250px;
        background:green
    }
</style>
<div>
</div>

10) 扩展----相邻

含义 : 相邻值得是挨着 , 贴着的意思 ; 相邻选择器指的是匹配当前元素后面一个兄弟元素 ;

基本语法 : 选择器1+选择器2{}

案例 :

<style>
    /* 匹配当前元素后面的一个兄弟 : 匹配到是是第三个h1*/
    /* 切记:匹配的是当前元素的后面一个兄弟 */
    .box+h1{
        background-color:red
    }
    /* 提问:如果当前目标确定了, 无论当前元素后面是哪一个标签都能匹配到使用什么方法 */
    /* .box+*{} */
</style>
<h1>我是一级标题</h1>
<h1 class="box">我是一级标题</h1>
<h1>我是一级标题</h1>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>

11) 扩展----毗邻

含义 : 毗邻不一定是贴着挨着, 只要是后面的符合, 毗邻选择器匹配的是当前元素后面所有符合条件的兄弟元素

基本语法 : 选择器1~选择器2{}

案例 :

<style>
    /* 匹配到当前元素后面的所有p标签 ; 三个p标签可以完成 */
    .box~p{
        background-color:red
    }
</style>
<h1>我是一级标题</h1>
<h1 class="box">我是一级标题</h1>
<h1>我是一级标题</h1>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>

6.选择器的权重值

1)背景 :

为啥我们要学习权重值, 原因 : 这么多选择器学习完毕之后都可以对页面中的元素进行修饰, 如果不同的选择器或者是相同的选择器修饰同一个元素的时候, 元素到底实现的是谁的修饰呢?

2)研究方法 :

我们可以使用两两对比基础选择器的权重值

3) 选择器分类 :

基础选择器 : 标签, 类, id, 通配符属于基础选择器

复杂选择器 : 后代, 子代, 伪类等属于复杂选择器

4) 权重值比较

a) 基础选择器权重值对比 :

最终得出 id(100,0100) > class(10,0010) > 标签(1,0001) > 通配符(0,0000) ; 切记这里的值是一个虚拟的值 : 我们始终要牢记 : id>类>标签>通配符

<style>
    /*标签选择器*/
    div{
        width:100px;
        height:100px;
        background-color:red
    }
    /*类选择器*/
    .box{
        width:200px;
        height:200px;
        background-color:green;
    }
    /*id选择器*/
    .bobo{
        width:300px;
        height:300px;
        background-color:blue
    }
</style>
<div class="box" id="bobo">我是普通的div</div>

b) 复杂选择器权重值对比 :

不同的选择器修饰同一个元素的时候, 遵循的是权重值相加的情况

<style>
    /*查找p标签的方法有很多 : 例如 
    	p{}  div>p{}  .box>p{}  #bobo>p{} 
    */
    /*1+1=2*/
    div>p{
        color:blue
    }
    /*1=1*/
    p{
        color:red
    }
    /*10+1=11 */
    .box>p{
        color:yellow
    }
</style>
<div class="box" id="bobo">
    <p>
        我是普通的div
    </p>
</div>

c) 特殊案例权重 : n层相同的选择器嵌套

<style>
	/*多层嵌套*/
    /*n层嵌套不在遵循权重值相加, 因为我们的权重值本质是一个虚拟的值*/
    div>div>div>div>div>div>div>div>div>div>p{
        color:red
    }
    /*类名嵌套*/
    .box{
        color:orange
    }
</style>
<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <p class="box">我是独立的p</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>