前端(二)

🍓前端篇章(二)

  • 表单标签的补充说明
  • 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的样式表:

image

上图:

​ 🍒页面都是有HTML构成,并且页面上有很多相同的HTML标签,但是相同的HTML标签在图通的位置可能有不同的样式,我们如何区分标签

🍉标签的两种属性>>>用于区分标签

1.class属性
	是用于分门别类,主要的功能就是为批量的查找
2.id属性
	是用于精确查找某个想要的标签,主要用于点对点的查找

🍓css语法结构

🍉1.选择器{
    样式名1:样式值1
    样式名2:样式值2
}

🍉2.css注释语法:
/*注释内容*/

🍉3.引入css的方式
	1.headstyle标签的内部中编写
	2.headlink标签引入(最标准的方式)
	3.标签内部通过style属性值直接编写(不推荐)

img

🍓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选择器语法使用的符号:

image

🍓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选择器>类选择器>标签选择器

image

🍓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调节大小)

🍉背景属性

image

🍒1.背景的颜色

  • 属性名:background-color(bgc)
  • 属性值:
    • 颜色取值:关键字、rgb表达法、rgba表达法、十六进制表达法
  • 注意点:
    • 背景颜色默认值是透明:agba(0,0,0,0)、transparent
    • 颜色的背景并不会影响盒子的大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色

🍒2.背景图片

  • 属性名:background-image(bgi)
  • 属性值:background-image:url(图片的位置)
  • 注意点:
    • 背景图片中url中可以省略引导
    • 背景图片默认是水平和垂直方向平铺的
    • 背景图片仅仅是指盒子起到装饰效果。类似于背景颜色,是不能撑开盒子的

🍒3.背景平铺

属性名:background-repeat(bgr)

属性值:

image

🍒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>

    image

posted @ 2022-12-01 20:02  亓官扶苏  阅读(233)  评论(0编辑  收藏  举报