鸿蒙应用开发-学习-第一章-CSS基础
Tips：这个只是作者的学习笔记，仅作参考
目录
? ? ? ? ? ? ? 1.9.1 :hover伪类选择器
一、表单标签
? ? ? ? 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则较大，一般被默认不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为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的标签进行样式设置。
? ? ? ? 代码格式：
div p {
color:red;
}? ? ? ? Tips：选择器与选择器之间用空格隔开
? ? ? ? 1.6?子代符选择器
? ? ? ? 作用：根据HTML中标签的嵌套关系，选择父元素的子代（只包括儿子）中满足条件的元素
? ? ? ? 代码格式：
div(父)>a（子）{
color:red;
}? ? ? ? Tips：选择器之间用>隔开
? ? ? ? 1.7 并集选择器
? ? ? ? 作用：同时选择多组标签，设置同样的样式
? ? ? ? 代码格式：
.one,
#two,
a{
color:red;
}????????Tips:每组选择器之间用，隔开，
????????每组选择器都可以是基础选择器或者复合选择器，
? ? ? ? 通常一行写一个选择器，确保可读性
? ? ? ? 1.8 交集选择器
? ? ? ? 作用（既又原则）：同时找到能同时满足多个选择器的标签，既能被选择器1选中又能被选择器2选中进行设置样式。
? ? ? ? 代码格式:
p.box{
color:red;
}? ? ? ? Tips：如果选择器中含有标签选择器，则标签选择器必须写在前面。
? ? ? ? 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写在属性值后面，分号前面，且不能提升继承优先级，只要是继承优先级就是最低。
? ? ? ? 2.2 权重叠加计算
? ? ? ? 如果是复合选择器，则需要通过权重叠加计算，判断哪个选择器优先级最高可以生效
? ? ? ? Taps：如果第一级数字就比较出来了，后面的就不用看了，如果第一级一样就比较第二级，比较出来的话后面也不用看了，以此类推。?
? ? ? ? 如果所有都相同，就看谁写在下面（比较层叠性）谁优先级就高 。
? ? ? ? !important权重最高? ? ?
? ? ? ?
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！