前端 day02
前端 day02
今日内容概要
一.表单标签知识补充
1.获取用户输入的标签两大重要的属性
name属性 类似于字典的键
value属性 类似于字典的值
form表单在朝后端发送数据的时候，标签必须要有name，否则不会发送该标签的值
2.获取用户输入的input标签理论上需要有label配合使用
<label for="某个input标签的id值"></label>
3.获取用户输入的input标签也可以添加背景提示
<input type="text" name="gender" value="male">男
4.获取用户输入的标签如果不是让用户自己写而是选择，那么标签需要自己写value
<input type="radio" name="gender" value="male">男 <input type="checkbox" name="hobby" value="basketball">篮球 <select name="province" id=""> <option value="sh">上海</option> </select>
5.针对radio和checkbox可以默认选中
checked="checked" 如果属性名和属性值相等 那么可以简写 checked
6.针对option标签也可以默认选中
selected="selected" 简写为 selected
二.CSS介绍
CSS(Cascading Style Sheet,层叠样式表)，当浏览器读到一个样式表，他就会按照这个样式来对文档进行格式化。
三.CSS层叠样式表
1.调整标签样式
2.语法结构
每个CSS样式有两个组成部分:选择器和声明
选择器{
属性名1:属性值1；
属性名2：属性值2；
}
3.注释语法
/*注释内容*/
4.三种编写CSS的方式
- 行内样式
直接在标签内部通过style属性编写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 style="color:purple">今天下雨了</h1> </body> </html>
- 内部样式
head中style标签内部直接编写(学习阶段使用，方便)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color:deepskyblue; } </style> </head> <body> <h1>今天下雨了</h1> </body> </html>
- 外部样式
外部样式就是将CSS写在一个单独的文件中，然后在页面进行引入即可，推荐此方式（最正规而方式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<h1 >今天下雨了</h1>
</body>
</html>
四.CSS基本选择器
1.标签选择器
直接编写标签名来查找标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器：*/
div {
color:green; /*查找所有的div标签，并将内部的文本颜色变为绿色*/
}
</style>
</head>
<body>
<div id="d1">div</div>
<p class="c1">p</p>
<span>span</span>
<div class="c1">div</div>
</body>
</html>
2.类选择器
通过编写class的值来查找标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器:通过编写class的值来查找标签*/
.c1 {
color:red; /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/
}
</style>
</head>
<body>
<div id="d1">div</div>
<p class="c1">p</p>
<span>span</span>
<div class="c1">div</div>
</body>
</html>
3.id选择器
通过编写id的值来精准查找标签
#d1 { color: aquamarine; /*查找id值是d1的标签 并将内部的文本颜色改为天青色*/ }
4.通过选择器
查找所有的标签
* { color: blue; /*查找所有的标签 并将内部的文本颜色改为蓝色*/ }
五.CSS组合选择器
预备知识:标签之间的关系
<p></p>
<div>
<p>
<span></span>
</p>
</div>
<p></p>
代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*查找div标签内部所有的span(后代)*/ /*后代选择器: 两个选择器之间空格隔开 查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签*/ #d1 span { color: blue; } /*查找div标签内部所有的儿子span*/ /*儿子选择器 两个选择器之间大于号隔开 查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签*/ /*#d1>span {*/ /* color: orange;*/ /*}*/ /*查找div标签同级别下面紧挨着的一个span标签(弟弟)*/ /*#d1+span {*/ /* color: red;*/ /*}*/ /*查找div标签同级别下面所有的span标签(弟弟们)*/ #d1~span { color: blue; } </style> </head> <body> <div id="d1">div <span>div里面的span</span> <p>div里面的p <span>div里面的p里面的span</span> </p> <span>div里面的span</span> </div> <p>嘿嘿嘿</p> <span>div下面的span</span> <span>div下面的span</span> </body> </html>
1.后代选择器
两个选择器之间空格隔开，查找前面选择器渠道的标签内部所有符合空格后面选武器
/*查找div标签内部所有的span（后代）*/
#d1 span { color: blue; }
2.儿子选择器
两个选择器之间大于号隔开，查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签
/*查找div标签内部所有的儿子span*/ #d1>span { color: orange; }
3.毗邻选择器
/*查找div标签同级别下面紧挨着的一个span标签(弟弟)*/ #d1+span { color: red; }
4.弟弟选择器
/*查找div标签同级别下面所有的span标签(弟弟们)*/ #d1~span { color: blue; }
六、CSS属性选择器
所有的标签除了有自己默认的属性之外，还可以拥有自定义的任意属性
默认属性 id class
自定义属性 x=1 y=2
1.查找属性名含有name的标签
[name] { background-color: red; }
2.查找属性名含有name并且值是username的标签
[name='username'] { background-color: orange; }
3.查找input标签并且属性名含有name值是username的
input[name='username'] { background-color: aqua; }
ps:前面的选择器可以是任意类型的标签、id、class
七、CSS选择器之分组与嵌套
当多个选择器查找到的标签需要调整相同的样式，那么可以合并
div,p,span { color: red; }
并且合并的选择器彼此不干扰也没有类型的限制
#d1,.c1,span { color: red; }
还可以在选择器基础上添加额外的选择使得查找更精确
span.c1
div#d1
八.CSS选择器之伪类选择器
补充知识：
a标签默认的颜色有两种，紫色跟蓝色
紫色:链接地址已经被点击过了
蓝色:链接地址从来没有点击过
a:hover { color: blue; }
鼠标炫富上去之后样式改变，适用于所有含有文本的标签
九.CSS选择器之伪元素选择器
通过CSS代码来操作标签的文本内容
p:first-letter { font-size: 48px; color: red; } p:before { content:"想吃提拉米苏!"; color:red; } p:after { content:"提拉米苏是真的好吃"; color:blue; }
伪元素选择器可以用在解决标签浮动所带来的负面影响，也可以用来做数据的防爬
十.CSS选择器优先级
当多个选择器查找到相同的标签修改不同的样式，那么标签该听谁的
1.选择器相同，引入位置不同
就近原则
2.选择器不同的情况
行内 > id选择器 > 类选择器 > 标签选择器
ps:自行查阅强制修改标签样式的操作 ! important
十一.字体样式
1.宽和高
width属性可以为元素设置宽度
height属性可以为元素设置高度
块级标签才能设置宽度，行内标签的宽度有内容来决定
2.字体属性
(1)字体大小
p{ font-size:14px }
(2)字重(粗细)
font-weight用来设置字体的粗细
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
(3)文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
-
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
3.文字属性
text-align 属性规定元素的文本的水平对齐方式
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
4.文字装饰
text-decoration 属性用来给文字添加特殊效果。
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
常用的为去掉a标签默认的自划线：
a {
text-decoration: none;
}
5.首行缩进
将段落的第一行缩进 32像素：
p {
text-indent: 32px;
}
body { font-family: "微软雅黑"; } p { font-size: 16px; } p { font-weight:lighter; } p { color:red; color:rgb(); color:#3e3e3e; color:rgba(1,1,1,0.5) } p { text-align:center; } a { text-decoration: none; } p { text-indent: 32px; }
十二、背景属性
background
/*背景颜色*/background-color: red; /*背景图片*/ background-image: url('1.jpg');/* 背景重复 repeat(默认):背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺*/ background-repeat: no-repeat; /*背景位置*/ background-position: left top;/*background-position: 200px 200px;*/
十三.边框属性
边框属性
- border-width
- border-style
- border-color
边框样式
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
border
border-raduis
十四.display属性
用于控制HTML元素的显示效果。
| 值 | 意义 |
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
display:none
浙公网安备 33010602011771号