css基础操作
今日内容总结
表单标签的补充说明
基于form表单发送数据
1.用于获取用户数据的标签含有name属性
name属性相当于字典的键
用户输入的数据会被保存到标签的value属性中
value属性相当于字典的值
2.如果不需要用户填写数据 而是选择 那我们需要自己先定义好value
<input type='radio' name='gander' value='male'>
ps:没有name标签 或者没有传入value的 都会被form表单忽略 不会发送
3.针对input标签理论上应该有一个label标签绑定 但是可以不写
<label for='d1'>username:
<input type='text' id='d1'>
</label>
/*写不写tabel的区别:*/
1.写了更加规范 不写也不影响使用
2.写了可以使input具有点击而前往对应的输入框的功能
4.标签的属性和属性值都相等 那么可以简写
<input type='file' multiple='multiple'>
<input type='file' multiple>
5.针对选择类型的标签可以提前设置默认选项
<input type='radio' name='gender' checked>
加上checked可以使选择时候默认选择该项
除此之外默认选项还有selected
selected针对的是下拉框
checked针对的是选项
6.下拉框与文件上传可以复选
<input type='file' multiple>
<select name='' id='' multiple>
css层叠样式表
css主要用来调节html标签的各种样式
'''
思考:页面都是由HTML构成的 并且页面上有很多相同的HTML标签 但是相同的HTML标签在不同的位置可能有不同的样式 我们如何区分标签？
'''
标签的量的重要属性
1.class属性
#分门别类 主要用于批量查找
2.id属性
#精确查找 主要用于点对点
1.css语法结构
选择器{
样式一:样式值1;
样式二:样式值2
}
2.css注释语法
/*注释内容*/
3.引入css的多种方式
1.head内style标签内部编写(学习的时候使用)
2.head内link标签引入(标准的方式)
3.标签内部通过style属性直接编写(不推荐)
css选择器
/*css基本选择器*/
1.标签选择器(直接按照标签名查找标签)
div {
color:red;
}
2.类选择器(按照标签的class值查找标签)
.c1 {
color:yellow;
}
'针对类的选择 一定要加上点号 .'
3.id选择器(根据标签的id 精准查找标签)
#d1 {
color:green;
}
4.通用选择器(直接选择页面所有的标签)
* {
color:blue;
}
/*css组合选择器*/
针对标签的上下层级以及嵌套有另外的说法
父标签 后代标签 子标签 弟弟标签 祖先标签
1.后代选择器(空格)
div span {
color: red;
}
2.儿子选择器(大于)
div>span {
color: red;
}
3.毗邻选择器(加号)
div+span{
color:yellow;
}
4.弟弟选择器(小波浪号)
div~span {
color:yellow;
}
/*分组与嵌套*/
1.多个选择器可以合并查找 使用逗号隔开
div,p,span {
color:yellow;
}
2.查找class含有c1的div
div.c1{
color:red;
}
3.查找id是d1的div
div#d1{
color: red;
}
4.查找含有c1样式值里面得含有c2样式值得p标签
.c1 p.c2{
color:yellow;
}
/*属性选择器*/
1.按照属性名查找
[username] {
color:red;
}
2.按照属性名等于属性值
[username='xiaochen'] {
color: yellow;
}
/*伪装选择器*/
可以针对点击过的和鼠标悬浮得地方做颜色处理
1.悬浮颜色变化
a：hover {
color:orange;
}
2.点击后得颜色变化
input:focus {
background-color:red;
}
/*伪元素选择器*/
可以针对内容做处理 仅仅只是展示内容
1.开头
p:before{
content:'文本内容';
color:blue;
}
2.结尾
p:after {
content:'文本';
color:red;
}
3.首字母
p:frist-letter{
font-size:48px(首字母的大小);
color: red;
}
css添加得文本时无法正常的选中的 before和after多用于清除浮动
选择器优先级
1.选择器相同 导入方式不同
就近原则
2.选择器不同 导入方式相同
内联样式 > id选择器 > 类选择器 > 标签择器
css样式调节
文字属性
文字对齐
text-align属性规定元素中的文本的水平对齐方式
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
文字装饰
text-decoration 属性用来给文字添加特殊效果
| 值 | 描述 |
|---|---|
| none | 默认 定义标准的文本 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
| inherit | 继承父元素的text-decoration |
#常用的为去掉a标签默认的下划线
a {
text-decoration: None;
}
首行缩进
将段落的第一行缩进n个(32)像素
p {
text-indenr: 32px;
}
背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image:url('图片地址');
/*
背景重复
repeat(默认):将背景图片平铺排满整个网页
repeat-x:背景图片只是水平方向上平铺
repeat-y:背景图片只是竖直方向上平铺
no-repeat:背景图片不平铺
*/
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
代码格式
div {
width: 800px;
height: 800px;
background-color: red;
background-image: url('图片地址');
background-repect: no-repeat;
background-repect: repect-x;
background-repect: repect-y;
background-posititon: center center;
}
'''
各行填写的代码所对应的意义
1.第一个以及第二个参数对应的是生成对应的背景布的大小
2.第三个是背景的颜色填充
3.第四个填写的是图片的地址
4.第五、六、七 填写的是图片填充的方式
5.第八个填写的也是填充模式 center center 对应的就是居中不填充
'''
tips:
当多个属性名具有相同的前缀 那么可以以次性完成
浙公网安备 33010602011771号