目录
前端之css
基于form表单发送数据
- 用于获取用户数据的标签至少应该含有name属性
name属性相当于字典的键
用户输入的数据会被保存到标签的value属性中
value属性相当于字典的值 - 如果不需要用户填写数据 只需要选择 那么我们需要自己填写value
<input type="radio" name="gender" value="male">
ps:没有name属性的标签 form表单会直接忽略 不会发送
3. 针对input标签理论上应该配一个label标签绑定 但是也可以不写
<label for="d1">username:
<input type="text" id="d1">
</label>
<label for="d1">username:</label>
<input type="text" id="d1">
- 标签的属性如果和属性值相等 那么可以简写
<input type="file" multiple="multiple">
<input type="file" multiple>
- 针对选择类型的标签可以提前设置默认选项
<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">222</option>
<option value="" selected>222</option>
- 下拉框与文件上传可以复选
<input type="file" multiple>
css叠层样式表
主要用来调节html标签的各种样式
页面都是由HTML构成的页面上有很多相同的HTML标签 但是相同的HTML标签在不同位置可能有不同的样式
标签的两大重要属性》》》区分标签
- class属性
分门别类 主要用于批量查找 - id属性
精确查找 主要用于点对点
写css流程
-
先查找标签
-
在想如何调整样式
-
css语法结构
选择器{ 样式名1:样式值1; 样式名2:样式值2; } -
css注释语法
/*注释语句*/ -
引入css的多种方式
- head内sytle标签内部编写
- head内link标签链接css样式(标准引入方式)
- 标签内style属性内直接编写(不推荐)
css选择器
<!--<body>-->
<!--body-->
<!--<div class="c1 c2 c3">div-->
<!-- <p class="divp1">divp-->
<!-- <span class="divpspan">divpspan</span>-->
<!-- </p>-->
<!-- <div class="divdiv">divdiv</div>-->
<!--</div>-->
<!--<span class="span">sapn</span>-->
<!--</body>-->
-
css基本选择器
-
标签选择器(直接按照标签名查找标签)
div { color: #5affce; } -
类标签选择器(按照标签的class值查找标签)
.c1{ color: red; } -
id选择器（根据标签id值精准查找标签）
#span1{ color: aqua; } -
通用选择器(直接选择页面所有的标签)
*{ background-color: #2f0099; }
-
-
css组合选择器
预知知识点 我们对标签的嵌套有另外一套说辞 <p>ppp</p> <p>ppp</p> <div>div <div>divdiv <p>divdivp <span>divdivpspan</span> </p> </div> <p>divp</p> <span>divspan</span> </div> <p>ppp</p> <span>spanspan</span>针对标签的上下层级以及嵌套有另外的说法
父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签
-
后代选择器
div span{ color: aquamarine; } -
儿子选择器（不能隔代选择）
div>p{ color: red; } -
毗邻选择器（在用一级标签）谁在前就从哪一个标签向下找不想上找（如果有多个相连，必须要按照顺序找，一个没找到，就不行）
div+p{ color: #006699; } -
弟弟选择器（小波浪号）只要是同级向下标签都能找到
div~p{ color: red; }
-
-
分组与嵌套
#多个选择器合并查找，就是只要在这里面的选择都查找 div,p,span{ color: red; }#span1,.ppp1,span{ color: red; }查找class含有c1的div div.c1 { color: red; }查找id是p1的p p#p1{ color: red; }查找含义c1样式值里面 id是span1的span标签 .c1 span#span1{ color: aquamarine; } -
属性选择器
[username]:hover { background-color: red; } [username]{ background-color: aqua; } [username]:focus{ background-color: pink; } [password='password']{ background-color: aqua; } [password]:hover { background-color: pink; } div[divname='div1']{ background: red; } [divname='div1']{ background: red; }
-
伪类选择器
a标签补充说明 针对没有点击过的网址默认是蓝色点击过的则为紫色a:hover{ color: red; } input:focus{ background: pink; }
选择器优先级
-
选择器相同 导入方式不
就近原则<link rel="stylesheet" href="style.css"> <style> a{ color: pink; } </style>
-
选择器不同导入方式相同
内联样式 > id选择器 > 类选择器 > 标签选择器a{ color: pink; } .a1{ color: red; } #aa1{ color: aqua; }
css样式调节
字体样式
.niubi{
font-size: 48px;
font-family: "Microsoft JhengHei Light";
/*字体粗细*/
/*font-weight: lighter;*/
/*color: #006699;*/
/*color: red;*/
/*color: rgb(225,110,0);*/
/*颜色透明的最后一个参数是透明度0-1的小数*/
color: rgba(225,110,0,0.5);
/*局中*/
text-align: center;
/*也是局中*/
margin: 0 auto 0 auto;
/*常用于取消a标签下划线*//*但也可以用在其他方面line-through从中间线,overline底部线,underline顶部线*/
text-decoration: underline;
/*首行空多少*/
text-indent: 24px;
}
取色器工具
-
pycharm
-
截图工具
微信截图，qq截图之类的
背景属性
div{
width: 800px;
height: 800px;
background-color: pink;
/*background-image: url("https://img0.baidu.com/it/u=3194981343,487441191&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=417");*/
/*background-repeat: no-repeat;*/
/*cover自动缩放填充*/
/*contain横向填充*/
/*background-size: cover;*/
/*图片位置*/
/*background-position: center;*/
/*background-position-x: 100px;*/
/*background-position-y: 50px;*/
background: url("https://img0.baidu.com/it/u=3194981343,487441191&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=417")
no-repeat 100px 50px pink;
/*当有多个属性名相同的前缀 那么可以简写一次性完成*/
}
