标签：color 标签 选择器 div 前端开发 CSS 属性
今日内容概要
- 表单标签的补充说明
- CSS层叠样式表
- CSS选择器
- 选择器优先级
- CSS样式调节
今日内容详细
表单标签的补充说明
基于form表单发送数据
1.用于获取用户数据的标签至少应该含有name属性
name属性相当于字典的键
用户输入的数据会被保存到标签的value属性中
value属性相当于字典的值
2.如果不需要用户填写数据 只需要选择 那么我们需要自己填写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">
4.如果标签属性与属性值相同 那么可以简写
<input type="file" multiple="mutiple">
<input type="file" multiple>
5.针对选择类型的标签可以提前设置默认选项
<input type="radio" name="gender" checked="checked">
<input type="radio" name="gender" checked>
<input type="checkbox" name="hobby" checked="checked">
<input type="checkbox" name="hobby" checked>
<select name="" id="">
<option value="" >上海</option>
<option value="" selected="selected">北京</option>
<option value="" selected>深圳</option>
</select>
6.下拉框与文件上传可以复选
<input type="file" multiple>
<select name="" id="" multiple>
CSS层叠样式表
主要用来调节HTML标签的各种样式
"""
思考:页面都是由HTML构成的 并且页面上有很多相同的HTML标签 但是相同的HTML标签在不同的位置可能有不同的样式 我们如何区分标签
标签的两大重要属性>>>:区分标签
1.class属性
分门别类 主要用于批量查找
2.id属性
精确查找 主要用于点对点
学习CSS的流程
1.先学习如何查找标签
2.再学习如何调整样式
"""
1.CSS语法结构
选择器 {
样式名1:样式值1;
样式名2:样式值2;
}
2.CSS注释语法
/*注释内容*/
3.引入CSS的多种方式
head内style标签内部编写(学习的时候使用)
head内link标签引入(标准的方式)
标签内部通过style属性直接编写(不推荐)
CSS选择器
1.CSS基本选择器
1.标签选择器(直接按照标签名查找标签)
div {
color: red;
}
2.类选择器(按照标签的class值查找标签)
.c1 {
color: blue;
}
3.id选择器(根据标签的id值精准的查找标签)
#d1 {
color: green;
}
4.通用选择器(直接选择页面所有的标签)
* {
color: yellow;
}
2.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>
针对标签的上下层级以及嵌套有另外的说法
父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签
*/
1.后代选择器(空格)
div span {
color: red;
}
2.儿子选择器(大于)
div>span {
color: yellow;
}
3.毗邻选择器(加号)
div+span {
color: pink;
}
4.弟弟选择器(小波浪号)
div~span {
color: blue;
}
3.分组与嵌套
div,p,span { /*多个选择器合并查找*/
color: yellow;
}
#d1,.c1,span {
color: red;
}
div.c1 { /*查找class含有c1的div*/
color: pink;
}
div#d1 { /*查找id是d1的div*/
color: blue;
}
.c1 p.c2 { /*查找含有c1样式值里面含有c2样式值的p标签*/
color: green;
}
4.属性选择器
[username] { /*按照属性名查找*/
color: red;
}
[username='jason'] { /*按照属性名等于属性值查找*/
color: yellow;
}
div[username='jason'] {
color: darkcyan;
}
5.伪类选择器
/*针对a标签的补充说明 没有点击过的网址 默认是蓝色 点击过的则为紫色*/
a:hover {
color: orange;
}
input:focus { /*input获取焦点(被点击过)之后采用的样式*/
background-color: red;
}
6.伪元素选择器
p:first-letter {
font-size: 48px;
color: red;
}
p:before { /*CSS添加的文本无法正常选中 开头加*/
content:'嘻嘻嘻';
color:blue;
}
p:after { /*末尾加*/
content: '嘿嘿嘿';
color: red;
}
选择器优先级
1.选择器相同 导入方式不同
就近原则
2.选择器不同 导入方式相同
内联样式>>>id选择器>>>类选择器>>>标签选择器
CSS样式调节
字体样式
font-size:14px 24px 28px 36px; 字体大小
font-weight:lighter 字体粗细
color:有三种模式
color: red; /* 直接填写对应颜色英文*/
color: #fffff; /*填写对应颜色十六进制*/
color: rgb(255,255,0) /*填写rgb数字*/
还有一个rgba() 最后一个参数还可以控制透明度
text-align: center; /*文本居中*/
text-decoration: none; /*主要用于a标签取消下划线*/
text-indent: 32px; /*首行缩进*/
背景属性
div {
width: 800px;
height: 800px; /*控制大小*/
background-color: red; /*修改背景颜色*/
background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");
/*给背景插入图片 可以是网址 也可以是本地文件*/
background-image: url("666.png");
background-repeat: no-repeat; /*不铺满背景*/
background-repeat: repeat-x; /*水平铺满*/
background-repeat: repeat-y; /*垂直铺满*/
background-position:center center; /*图片居中*/
background: url("666.png") blue no-repeat center center;
/*当多个属性名有相同的前缀 那么可以简写一次性完成*/
}
标签：color,
标签,
选择器,
div,
前端开发,
CSS,
属性
From： https://www.cnblogs.com/lzjjjj/p/16942614.html