前端(二)
🍓前端篇章(二)
- 表单标签的补充说明
- CSS层叠样式
🍓表单标签的补充说明
🍉基于from发送表单标签
-
1.用于获取用户数据的标签至少应该含有name属性
- name属性相当于字典的键
-
用户数据的数据会别保存到标签的valeu属性中
- value属性相当于字典的值
-
2.如果不需要用户填写数据,只需要选择,那么我们自己填写value
<input type="radio name="gener" value="male">
ps:没有那么属性的标签,form表单会直接忽略,不会发送
- 3.针对input标签理论上应该匹配一个label标签绑定,但是也可以不写。
<label for="d1">username:
<input type="text" id="id">
</label>
<label for="id">username:</label>
<input type="text" id="d1">
- 4.标签的属性如果和属性值相等 那么可以简写
<input type="file" multiple="multiple">
<input type="file" multiple>
- 5.针对选择类型的标签可以提前设置默认选项
<input type="radio" name="gender" checked="checked">
<input type="radio" name="gender" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" name="gender" checked>
<option value=""selected="selected"> 文本</option>
<option value=""selected>文本</option>
-
6.下拉框与文件上传可以复选
<input type="file"mutiple> <select name="" id=""multiple>
🍓css层叠样式表
🍉什么是css呢?
🍒1.css指的是层叠样式表
🍒2.它描述了如何在屏幕。纸张或者其他媒体上显示的HTML元素
🍒3.css的存在节省了大量的工作,它可以同时控制多张页面的布局。
`样式定义通常保存在外部 .css 文件中。
通过使用外部样式表文件,您只需更改一个文件即可更改整个网站的外观!`
🍒4.外部的样式表也存储在css文件中 ;也称级联样式表
🍉总结:css是一种描述HTML文档样式的语言,css描述应该如何显示HTML元素。
下面看一张简单的HTML的样式表:
上图:
🍒页面都是有HTML构成,并且页面上有很多相同的HTML标签,但是相同的HTML标签在图通的位置可能有不同的样式,我们如何区分标签
🍉标签的两种属性>>>用于区分标签
1.class属性
是用于分门别类,主要的功能就是为批量的查找
2.id属性
是用于精确查找某个想要的标签,主要用于点对点的查找
🍓css语法结构
🍉1.选择器{
样式名1:样式值1;
样式名2:样式值2
}
🍉2.css注释语法:
/*注释内容*/
🍉3.引入css的方式
1.head内style标签的内部中编写
2.head内link标签引入(最标准的方式)
3.标签内部通过style属性值直接编写(不推荐)
🍓css选择器
🍒选择器的 作用:
选择器主要用于“查找”(或选取)想要设置样式的HTML元素。
🍒我们可以将css选择器分为五类:
- 基本选择器:根据名称、id、类来选取元素)
- 组合器选择器:根据他们之间的特定关系来选取元素
- 伪类选择器:根据特定状态选取元素
- 伪元素选择器:选取元素的一部分并设置其样式
- 属性选择器:根据属性或属性值来选取元素
🍓CSS基本选择器
🍒1.标签选择器:直接按照标签名查找标签
div{
color:red;
}
🍒2.类选择器:按照标签的class值查找标签
选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。
.c1{
color:red;
}
🍒3.id选择器:根据标签的id值精准查找标签
选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。
#d1{
color:yellow;
}
🍒4.通用选择器:直接选择页面的所有标签
通用选择器(*)选择页面上的所有的 HTML 元素。
*{
color:blue;
}
🍉简单css选择器语法使用的符号:
🍓CSS组合选择器
在学习组合选择器之前我们来了解一个小知识;
🍉在之前的文章中我们说过,标签一层又一层的组合我们称之为标签的嵌套;但是针对标签的上下级以及嵌套还有另一种说法,
父标签,后代标签,字标签,弟弟标签,哥哥标签、、、
🍉父子关系:父元素直接包含子元素,子元素直接被父元素包含
<div><p></p></div>
div标签是p标签的父元素,p标签是div标签的子元素
🍉祖先后代关系:祖先元素直接或间接包含后代元素
<div><p><span></span></p></div>
div标签是p标签和span标签的祖先元素,p标签和span标签是div标签的后代元素
🍉兄弟关系:拥有同一个父元素
<div><p></p><h1></h1></div>
p标签和h1标签就是兄弟关系
**🍒1.后代选择器(空格) **祖先元素 后代元素{ }
div span{
color:red
}
🍒2.儿子选择器(大于号)div下儿子标签
div > span{
color:blue;
}
🍒3.毗邻选择器(加号)相邻的两个同级标签
div+span{
color:gener;
}
🍒4.弟弟选择器(小波浪号)选中某个元素之后的 其他的兄弟元素
p1~h1{
color:yellow;
} #<div><p></p><h1></h1></div>
🍓分组与嵌套
🍉分组选择器就是选取具有相同样式定义的HTML元素
请看下面的 CSS 代码(h1、h2 和 p 元素具有相同的样式定义):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
-
最好对选择器进行分组,以最大程度地缩减代码。
-
如需对选择器进行分组,请用逗号来分隔每个选择器
🍉在上面这个例子中我们可以对上述代码中的选择器进行分组:
h1, h2, p { #多个选择器合并查找
text-align: center;
color: red;
}
div .c1{ # 查找class含有C1的div
color:red
}
div#d1{ #查找id是d1的div
color:yellow;
}
.c1 p.c2{ # 查找含有c1样式值里面含有c2样式值的p标签
color:antiquewhite;
}
🍓属性选择器
[username]{ # 按照属性名进行查找
color:red;
}
[username = '小明']{ # 按照属性名等于属性值
color:blue;
}
#在div标签的username属性的值进行改变
div [username="小明"]{
color:red;
}
🍓伪类选择器
🍒对于伪类的选择器,我们进行一个a标签的补充说明:针对没有点击过的网址,默认的颜色是蓝色,点击过后的就会变成紫色。
# input获取焦点(被点击)之后采用的样式
input:focus{
backround-color:red;
}
1.:root 只选中HTML元素
2.:focus 元素获取焦点时的样式
3.:not(css选择器) 选择不含有某个选择器的元素
4.:first-child 选中第一个子元素
5.:first-of-type 选中第一个指定元素
6.:last-child 选中最后一个子元素
7.:last-of-type 选中最后一个指定的元素
8.:nth-child(n) 选中第n个元素
9.:nth-of-type(n) 选中第n个指定的元素
nth-child() 和 :nth-of-type() 可以选择奇数和偶数
odd 选中奇数个元素
even 选中偶数个元素
2n 选中偶数个元素
2n-1 选中奇数个元素
10.:only-child 选中唯一一个的子元素
11.:only-of-type 选中唯一的指定元素
12.:empty 选中没有任何子元素(元素里面不能有任何的内容)的空元素
13.:checked 选中页面中被选中的单选框或复选框
14.:enabled 选中页面中, 处于可用(没有被禁用)的元素
15.:disabled 选中页面中 处于禁用状态的元素
16.:target 选中被激活的锚点
🍓伪元素选择器
🍉概念:在 CSS 中允许使用伪元素来添加一些选择器的特殊效果。
1. :first-letter 给第一个字符添加特殊样式
2. :first-line 给第一行添加样式
3. :before 在内容的前面 插入伪元素(理解成span元素)
一定要与content:一起使用
content: 内容, content 可以未空, 但必须要有
4. :after 在内容之后, 插入伪元素(理解成span元素)
一定要与content:一起使用
content: 内容, content 可以未空, 但必须要有
用来存放 只有装饰作用, 没有交互作用的小图标
p:first-leter{
font-size:48px;
color:red;
}
p:before { css添加文本无法正常选中
content: '嘿嘿嘿';
color: blue;
}
a:after { css添加文本无法正常选中
content: '呵呵呵';
color: red;
}
🍓选择器的优先级
🍒在我们执行使用css来装饰HTML的时候,也会根据优先级显示的样式也会不同,优先级高就会优先显示,关于优先级我们分为两类:
1.选择器相同的情况下,导入的方法不同
我们可以采用就近原则,从上往下执行,离装饰的标签越近优先级越高
2.选择器不相同的情况下,导入方式相同
优先级为:
内联样式>id选择器>类选择器>标签选择器
🍓css样式调节
🍉字体的样式:
🍒1.font-size:14px ,28px字体代码
🍒2.font-weight:lighter; 字体的粗细
🍒3.color: 三种模式
- color:red;
- color:#3d3d3d;
- color:rgb(186,11,22);
PS:()中最后一个参数还可以控制透明度 0~1
🍉文本的格式
text-align:center
文本居中text-decoration:none;
主要用于a标签取消下划线text-indent:32px;
首行缩进(可以用px调节大小)
🍉背景属性
🍒1.背景的颜色
- 属性名:background-color(bgc)
- 属性值:
- 颜色取值:关键字、rgb表达法、rgba表达法、十六进制表达法
- 注意点:
- 背景颜色默认值是透明:agba(0,0,0,0)、transparent
- 颜色的背景并不会影响盒子的大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色
🍒2.背景图片
- 属性名:background-image(bgi)
- 属性值:background-image:url(图片的位置)
- 注意点:
- 背景图片中url中可以省略引导
- 背景图片默认是水平和垂直方向平铺的
- 背景图片仅仅是指盒子起到装饰效果。类似于背景颜色,是不能撑开盒子的
🍒3.背景平铺
属性名:background-repeat(bgr)
属性值:
🍒4、背景位置
-
属性名:background-position (bgp)
-
属性值:background-position:水平方向位置 垂直方向位置
-
注意点:
- 方位名词取值和坐标取值可以混使用,第一个取值表示水平,第二个取值表示垂直
🍒5、背景相关属性连写
-
属性名:backgroud
-
属性值:
- 单个属性的合写,取值之间以空格隔开
-
书写顺序:
- 推荐:background:color image repeat position
PS:在pc端,如果盒子大小和背景图片大小一样,此时可以直接写background : url()
注意点:
- 如果需要设置单独的样式和连写
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
<style> div { width: 600px; height: 400px; background-color: #1a74ce; background-image: url("https://img1.baidu.com/it/u=2410885385,139292528&fm=253&fmt=auto&app=138&f=JPEG?w=580&h=435"); /*background-image: url("666.png");*/ /*background-repeat: no-repeat;*/ #不平铺 /*background-repeat: repeat-x;*/ #沿着x 轴平铺 /*background-repeat: repeat-y;*/ #沿着 y轴平铺 background-position: center center; /*background: url("666.png") blue no-repeat center center;*/ } </style>