文章目录
表单标签知识补充
-
获取用户输入的标签(input)的两大重要属性
- name属性
相当于字典里的健 - value属性
相当于字典里的值
强调
:form表单在往后端发送数据的时候,必须要有name属性,否则后端不知道你发送的是什么属性,所以也就不会发送该标签的值。 - name属性
-
获取用户输入的标签理论上是需要label的配合的
<p> <label for=""> <input type="text"> </label> </p>
-
获取用户输入的input标签也可以给name属性添加提示
<p> <input type="text" name="password" placeholder="密码"> </p>
-
获取用户输入的标签如果不是用户自己选择的,那我们要提前写好value值
<p>gender: <input type="radio" name="gender" value="male" checked>男 <input type="radio" name="gender" value="female">女 </p>
-
针对radio和checkbox可以默认选中
checked="checked" 如果属性名和属性值相等 那么可以简写 checked
-
针对option标签也可以默认选中
selected = 'selected' 格式可以简写为selected
CSS层叠样式表
简介
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
语言特征
CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
总体来说,CSS具有以下特点:
- 丰富的样式定义
- 易于使用和修改
- 多页面应用
- 层叠
- 页面压缩
语言结构
选择器 {
属性名1:属性值1;
属性名2:属性值2;
}
注释语法
/*注释内容*/
编写CSS的三种方式
- head中style标签内部直接编写(学习阶段使用 方便)
- head中link标签引入外部css文件(最正规)
- 直接在标签内部通过style属性编写(不推荐)
CSS选择器
CSS基本选择器
-
标签选择器
(范围查找)
直接编写标签名来查找标签div { color: red /*查找所有的div标签 并将内部的文本颜色变为红色*/ }
-
类选择器
(范围查找)
通过编写class的值来查找.c { color: red /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/ }
-
id选择器
(精确查找)
通过编写id的值来精确的查找到标签#d1 { color: red /*查找id值是d1的标签 并将内部的文本颜色改为红色*/ }
-
通用选择器
查找所有的标签* { color: red /*查找所有的标签 并将内部的文本颜色改为红色*/ }
CSS组合选择器
预备知识:
标签之间的关系
<div>div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
</div>
通过嵌套层级分析关系:
- 对于div1来说div2、p2、span2都是儿子
- 对于div2、p2、span2来说div1就是父亲
- 对于p1来说div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)
- 对于span2来说div2、p2是哥哥 span2是弟弟
- div1内部所有的标签无论层级都可以称之为是div1的后代
-
后代选择器
(关键字是空格)#d1 span{ color: red /*查找id是d1标签内部所有的后代span*/ }
-
儿子选择器
(关键字是大于符)#d1 > span{ color: red /*查找id是d1标签内部所有的儿子span*/ }
-
毗邻选择器
(关键字是加号)#d1 + p{ color: red /*查找id是d1标签同级别下面紧挨着第一个p标签*/ }
-
弟弟选择器
(关键字是小波浪符)#d1 ~ span{ color: red /*查找id是d1标签同级别下面的所有的span标签*/ }
CSS属性选择器
根据标签内部的属性名和属性值查找标签(关键符号是中括号)
所有的标签除了有自己默认的属性之外 还可以拥有自定义的任意属性
默认属性 id class
自定义属性 x=1 y=2
-
方法一:直接通过属性查找
[name] { background-color: blue; /*查找属性名含有name的标签*/ }
-
方法二:查找属性名含有name并且值是username的标签
[name = username] { background-color: red; }
-
方式三:查找input标签并且 属性名含有name值是username的
input[name = username] { background-color: orange; }
强调:
前面的选择器可以是任意类型的 标签、id、class
分组与嵌套
-
当多个选择器查找到的标签需要调整相同的样式 那么可以合并
div, p, span { font-size: 20px; color: aqua }
-
并且合并的选择器彼此不干扰也没有类型的限制
#d1, .c1, span { background-color: red }
-
还可以在选择器基础之上添加额外的选择使得查找更精确
div#d1 查找id是d1的div标签 div.c1 查找class包含c1的div标签 div #d1 查找div内部id是d1的后代标签 #d1>.c1 查找id是d1的内部class包含c1的儿子标签
常用伪类选择器
补充知识:
a标签默认的颜色有两种 紫色跟蓝色
紫色:链接地址已经被点击过了
蓝色:链接地址从来没有点击过
-
鼠标悬浮(适用于含有所有文本的标签)
a:hover { color: red } 鼠标移动到p标签上方 字体颜色动态修改为红色
-
获取聚点
input:focus { 输入框被鼠标左键选中(聚焦) background-color: black; }
伪元素选择器
-
修改首个字体样式
p:first-letter { font-size: 20px; color: orange; }
-
在文本开头添加内容
p:before { conter: '加油'; color: red; }
-
在文本末尾添加内容
p:after { conter: '好结果'; color: blue; }
强调
:伪元素选择器可以用在解决标签浮动所带来的的负面影响 也可以用来做数据的防爬
before和after多用于清除浮动。
选择器优先级
-
相同选择器
就近原则
:谁离标签越近就听谁的!!! -
不同选择器
行内选择器 > id选择器 > 类选择器 > 标签选择器
CSS修改属性
CSSx修改文字属性
宽和高:
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度,内联标签的宽度由内容来决定。
-
文字字体
font-family: '微软雅黑'
-
字体大小
font-size: 20px
-
字体粗细
font-weight: lighter
值 描述 normal 默认值,标准粗细 bold 粗体 bolder 更粗 lighter 更细 100~900 设置具体粗细,400等同于normal,而700等同于bold inherit 继承父元素字体的粗细值 -
字体颜色
-
方式一
color: red
-
方式二
color: rgb(128, 128, 128)
-
方式三
color: #4F4F4F
-
方式四
color: rgba(128,128,128, 0~1) # 0~1表示的是颜色透明度
-
-
文字对齐
text-align: center(居中)/left(左对齐)/right(右对齐)
-
文字装饰
a标签默认带下划线a { text-decoration: none (主要就是用于去除a标签的下划线) text-decoration: line-through; 删除线 text-decoration: overline; 上边线 text-decoration: underline; 下划线 }
-
文字首行缩进
text-indent: 32px
补充: 可以使用浏览器做样式的动态调整,查找到标签的css 然后左键选中 通过方向键上下动态修改数值
CSS背景属性
关键字:background
-
背景颜色
background-color: red;
-
背景图片
background-image: url(图片地址);
背景图片如果没有设置的区域大 那么默认自动填充满
background-repeat:no-repeat\repeat-x\repeat-y 是否平铺 background-position:left top; 图片位置 background-attachment: fixed; 背景附着
如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)
eg:background:#336699 url('1.png') no-repeat left top;
CSS边框属性
关键字:border
-
自定义调整每个边的边框
border-left/top/right/bottom-color: black; border-left/top/right/bottom-width: 5px; border-left/top/right/bottom-style: solid;
-
统一调整每个边的边框
border: 5px solid blue; (依次是:大小、样式、颜色) 顺序无所谓 只要给了三个就行
边框样式:
值 | 描述 |
---|---|
none | 无边框。 |
dotted | 点状虚线边框。 |
dashed | 矩形虚线边框。 |
solid | 实线边框。 |
边框属性
-
border-width
-
border-style
-
border-color
-
圆角边框
border-radius: 50%
用这个属性能实现圆角边框的效果。
将
border-radius
设置为长或高的一半即可得到一个圆形。如果长宽一样那么就是圆,不一样就是椭圆
CSS-display属性
根据CSS规范的规定,每一个网页标签都有一个display属性,用于确定该标签的类型,每一个元素都有默认的display属性值,比如div标签,它的默认display属性值为“block”,称为块级标签,而span元素的默认display属性值为“inline”,称为“行内”标签。
值 | 意义 |
---|---|
display:“none” | HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
display:“block” | 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。 |
display:“inline” | 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
display:“inline-block” | 使元素同时具有行内元素和块级元素的特点。 |
重点掌握:
display: none
visibility:hidde 也是隐藏标签 但是位置会保留