首页 前端知识 鸿蒙应用开发-学习-第一章-CSS基础(一)

鸿蒙应用开发-学习-第一章-CSS基础(一)

2024-02-14 09:02:40 前端知识 前端哥 280 129 我要收藏

Tips:这个只是作者的学习笔记,仅作参考

目录

一、表单标签

        1.1 input系列标签

        1.2 input系列标签-文本框

        1.3 input系列标签-密码框

        1.4 input系列标签-按钮

        1.5 from表单域

        1.6 from当中method的get和post的区别

二、基础认知

       1 CSS初识

        1.1 什么是CSS

        1.3 CSS初体验

      2 CSS引入方式

        2.1 引入方式有三种:

        2.2 外部样式表的创建

        2.3 Link与import的区别

        三、基础选择器

        1.1 标签选择器

        1.2 类选择器

       1.3 id选择器

        1.4 通配符选择器

        1.5 后代选择器

        1.6 子代符选择器

        练习: id选择器,后代选择器,子代选择器混用

        1.7 并集选择器

        1.8 交集选择器

        交集选择器练习

        1.9 伪类符选择器

              1.9.1 :hover伪类选择器

             1.9.2 链接伪类选择器

        2.1 选择优先级

        2.2 权重叠加计算

       


一、表单标签

        1.1 input系列标签

        使用场景:采集数据时的页面效果,例如:登录页面、注册页面

        input标签可以根据type属性值的不同,展示不同效果

        

type属性值说明
text文本框,用于输入单行文本
password密码框
submit提交按钮
reset重置按钮
button纯按钮,功能需搭配JavaScript

        1.2 input系列标签-文本框

        使用场景:需要输入单行文本时

        type属性值:text

        常用属性:

        placeholder:占位符,提示用户输入文本内容。

        格式如下:        展现的效果就是单一文本框

<input type="text">

        1.3 input系列标签-密码框

        使用场景:需要输入密码时

        type属性值:password

        Tips:type属性值不能拼错,否则默认文本框

    <input type="text">账号
    <br>
    <input type="password">密码

        

        1.4 input系列标签-按钮

        使用场景:不同功能的按钮需求(实现需配合form表单域进行使用)

type属性值说明
submit提交按钮,点击之后提交数据给后端服务器
reset重置按钮,点击之后恢复表单默认值
button普通按钮,无功能,但可以配合JS添加功能
<p><button>
        选择文件
    </button>未接收任何文件</p>
    <p>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="普通按钮"></p>

   效果图:

        1.5 from表单域

        使用场景:搭配(包裹)按钮使用

        代码格式:

<form method="以get或post其中一个方式发送请求" action="对哪里发送(url)">
        <!-- type="text(文本框)"、"submit(提交框)"、"button(按钮框)"、"reset(清空框)" -->
        <!-- placeholder="输入字段的简短的提示信息" -->
        <!-- name="名字,对表单进行标识(必须填写,否则提交表单会失败)" -->
        <!-- value="填写的文本对出现在按钮内,也就是按钮的文字" -->
        <input type=" " placeholder=" " name=" " value=" "/>
    </form>

        1.6 from当中method的get和post的区别

        1.get是从服务器上获取数据、post是向服务器传送数据

        2.get是把得到的参数数据队列加到提交表单所指的URL(也就是action属性)中,值和表单内各个字段一一对应,可在URL中看到。

        3.post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的URL地址。用户看不到这个过程

        4.get传送的数据量较小,不能大于2KB。post则较大,一般被默认不受限制。但理论上IIS4Internet Information Service 互联网信息服务)中最大量为80KBIIS5中为100KB

        5.get安全性非常低,post安全性较高,但执行效率上get大于post

        6.常在查询时用get,增加、修改、删除时用post

二、基础认知

       1 CSS初识

        1.1 什么是CSS

        CSS:层叠样式表(Cascading style sheets)

        应用场景:HTML内标签需要设置样式时,使其更美观

        1.2 CSS 语法规则

        代码格式:写在style中,style写在head标签内,title标签下,例如:

例中.wang、.xiaoqiao、.simayi,均为选择器,color为属性名,后面则为属性值,定义该选择器所对应的颜色

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        .wang{
            color: red;
        }
        .xiaoqiao{
            color: green;
        }
        .simayi{
            color: blue;
        }
    </style>
</head>

        选择器:查找页面元素的方式方法

        {}:规则、声明,对查找到的选择器进行修饰,让元素实现相应样式

        1.3 CSS初体验

        常见属性:

css常见属性作用
color文字颜色
font-size字体大小
background-color背景颜色
width宽度
height高度

        Tips:标点符号都要在英文状态下,且每一个样式键值对写完后都需要写分号;

      2 CSS引入方式

        2.1 引入方式有三种:

        内嵌式:CSS直接写在head(通常是这样)的style标签中,例如:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        .wang{
            color: red;
        }
        .xiaoqiao{
            color: green;
        }
        .simayi{
            color: blue;
        }
    </style>
</head>

        外联式:CSS写在单独的.css文件当中,但需要link标签在html中进行引用:

        rel(当前文件与被链接文件之间的联系)="stylesheet(样式表)"

        例如:HTML文件的head内:

<link rel="stylesheet" href="04text.css" type="text/css">

        css文件:04text.css:

a{
    color: aqua;
}

        调用:

<a>外部使用:</a>

        行内式:CSS写在标签的style属性中,需配合JS使用,现在暂不说明

        2.2 外部样式表的创建

        第一步:先创建对象,假设:

<body>
    <div>我要用外部样式表</div>
</body>

        第二步:创建一个.css文件,在.css文件中随便设定一下该标签样式

div{
    color: cadetblue;
}

        第三步:回到HTML文件中使用link或者import(任选一个方法即可)进行调用声明:

    <title>Test</title>
    <!-- 调用方法一:link -->
    <link rel="stylesheet" type="text/css" href="Test.css">
    <!-- 调用方法二:@import -->
    <style type="text/css">
        @import url(Test.css);
    </style>
</head>
<body>
    <div>我要用外部样式表</div>
</body>

        第四步:保存运行效果如下:

        2.3 Link与import的区别

        1.link属于XHTML标签,而@import是由CSS提供的一种方式

        2.加载顺序差别:浏览者在查看加载页面时,link引用的CSS同时加载,但@import则会等到页面加载完才开始加载。通俗点就是:link是吃汉堡会把肉饼连同面包一起咬,而@import则会把肉饼留到最后吃。

        3.兼容性差别:@import是CSS2.1版本时提出的,所以IE5以前的老浏览器不支持。但Link标签则不会有这问题

        4.当使用JavaScript控制dom(document object model文档对象模型 )去改变样式时,只能改变Link,@import不是dom可以控制的。

        三、基础选择器

        选择器有什么用:选择页面中的标签,方便后续为其设置样式

        1.1 标签选择器

        作用:通过标签名,找到所有同类(选择的是某类标签,而不是单独某个)标签设置样式,无论嵌套有多深都能找到对应的标签。

        代码格式:

a(某标签名){
    color: cadetblue;
}

        1.2 类选择器

        作用:直接找到所有同名类(所有标签都有class属性,class属性的属性值称为类名)

        代码格式:

.Test(类名){
    color:red;
}

        Tips:类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头。

                  一个标签可以同时有多个类名,每个类名之间空格隔开。

                  类名可以重复,一个类选择器可以选中多个标签。

       1.3 id选择器

        作用:通过id属性值找到页面中含有这个id属性(类似于身份证号,在一个页面中是唯一不可重复的)的标签进行样式设置。(一般配合JS使用)

        代码格式:

#one(id){
    color:red;
}

        Tips:所有标签都有id属性

                一个标签上只能有一个id属性值

                一个id选择器只能选中一个标签

        1.4 通配符选择器

        作用:选中页面中所有标签进行设置(极少使用机会)。

        代码格式:

*{
    color:rsd;
}

        1.5 后代选择器

        作用:根据HTML中的嵌套关系,选择父元素的后代(子代、孙代...)中满足条件的元素。在选择器1找到的标签的后代中,找到满足选择器2的标签进行样式设置。

        CSS格式:

div p {
    color:red;
}

        Tips:选择器与选择器之间用空格隔开

        1.6 子代符选择器

        作用:根据HTML中标签的嵌套关系,选择父元素的子代(只包括儿子)中满足条件的元素

         CSS格式:

div(父)>a(子){
    color:red;
}

        Tips:选择器之间用>隔开        

        练习: id选择器,后代选择器,子代选择器混用

        HTML部分:        

<body>
    <p id="one">id选择器</p>
    <div id="two">
        <div>后代选择器
            <p>子代选择器</p>
        </div>
    </div>
</body>

        CSS部分:

#one{
    color: aqua;
}
#two div{
    color: yellowgreen;
}
#two div>p{
    color: cadetblue;
}

        1.7 并集选择器

        作用:同时选择多组标签,设置同样的样式

        代码格式:

.one,
#two,
a{
    color:red;
}

        Tips:每组选择器之间用,隔开,

        每组选择器都可以是基础选择器或者复合选择器,

        通常一行写一个选择器,确保可读性

        1.8 交集选择器

        作用(既又原则):同时找到能同时满足多个选择器的标签,能被选择器1选中能被选择器2选中进行设置样式。

        代码格式:

p.box{
    color:red;
}

        Tips:如果选择器中含有标签选择器,则标签选择器必须写在前面。 

        交集选择器练习

        HTML部分

<div id="ooo">交集选择器1</div>
    <div class="box">交集选择器2</div>
    <!-- 打出div.box#ooo后直接Tab可直接生成 -->
    <div class="box" id="ooo">交集选择器3</div>
    <!-- 打出div.box#ooo>a后直接Tab可直接生成 -->
    <div class="box" id="ooo"><a href="">交集选择器与子代选择器混用</a></div>

        CSS部分:

div.box{
    color: darkgrey;
}
div#ooo{
    color: chocolate;
}
div.box#ooo{
    color: cornsilk;
}
div.box#ooo>a{
    color: gold;
}

        1.9 伪类符选择器

              1.9.1 :hover伪类选择器

              作用:选中鼠标悬停的元素上的状态,并为其设置样式

                代码格式(意为鼠标悬停的地方背景块变黄):

:hover{
    background-color:yellow;
}
             1.9.2 链接伪类选择器

        作用:选中超链接的不同状态

选择器语法功能
a:link{ }选中a链接未访问过的状态

a:visited{ }

选中a链接访问之后的状态

a:hover{ }

选中鼠标悬停的状态
a:active{ }选中鼠标按下的状态

        代码格式:

<!--未访问过-->
a:link{
    color:red;
}
<!--访问后-->
a:visited{
    color:red;
}
<!--鼠标悬停-->
a:hover{
    color:red;
}
<!--鼠标按下-->
a:active{
    color:red;
}

        Tips::hover伪类选择器使用频繁,常用选择类元的悬状态

        2.1 选择优先级

        不同的选择器有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式

继承<通配符选择器(*{})<标签选择器(a/p/h1...{})<类选择器(.xxx{})<id选择器{#one/#two...{}}<行内样式<!important

        Tips:!important写在属性值后面,分号前面,且不能提升继承优先级,只要是继承优先级就是最低。且继承只能继承文本样式

        !important用法:

#one{
    color: aqua !important;
}

       

        2.2 权重叠加计算

        如果是复合选择器,则需要通过权重叠加计算,判断哪个选择器优先级最高可以生效

        Taps:如果第一级数字就比较出来了,后面的就不用看了,如果第一级一样就比较第二级,比较出来的话后面也不用看了,以此类推。 

        如果所有都相同,就看谁写在下面(比较层叠性)谁优先级就高 。

        !important权重最高     

       

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1962.html
评论
发布的文章

jQuery 下载与安装教程

2024-02-28 11:02:44

若依中jquey相关问题

2024-02-28 11:02:41

【JavaWeb】1.JQuery

2024-02-28 11:02:21

jQuery日历签到插件下载

2024-02-28 11:02:20

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!