前端学习2

一、表单标签的补充说明

基于form表单发送数据

1.用于获取用户数据的标签至少应该含有name属性
name属性相当于字典的键
用户输入的数据会被保存到标签的value属性中 
value属性相当于字典的值

2.如果不需要用户填写数据 只需要选择 那么需要自己填写value 没有name属性的标签 form表单会直接忽略 不会发送 
<input type="radio" name="gender" value="female">
3.针对input标签理论上应该配一个label标签绑定 但是也可以不写 它有两种写法
    <label for="di"> username: </label>
    <input type="text" id="di">  # 第一种

    <label for="di"> username: 
    <input type="text" id="di">
    </label>  # 第二种

4.标签的属性如果和属性值相等那么可以简写
    <input type="file" multiple="multiple">  # 标准情况
    <input type="file" multiple>  # 简写的情况

5.针对选择类型的标签可以提前甚至默认选项
    <input type="radio" name="gender">男
    <input type="radio" name="gender" checked="checked">女
    <input type="radio" name="gender">其他

    <input type="checkbox"  checked="checked">篮球
    <input type="checkbox" checked>足球
    <input type="checkbox">排球

    <select name="" id="">
        <option value="">111</option>
        <option value="" selected>222</option>
        <option value="">333</option>
    </select>

6.下拉框与文件上传可以复选
    <input type="file" multiple>
    <selecte name="" id= "" multiple>

二、CSS层叠样式表

"""
页面都是由HTML构成的 并且页面上有很多相同的HTML标签
但是相同的HTML标签在不同的位置可能有不同的样式
那么到底如何区分呢?
标签的两大重要属性>>>:区分标签
    
1.class属性>>>:分门别类 主要用于批量查找
2.id属性>>>:精确查找 主要用于点对点

学习CSS的流程
1.先学习如何查找标签
2.再学习如何调整样式
"""

1.CSS语法结构
    选择器 {
        样式名1:样式指1;
        样式名2:样式指2;
    }

2.CSS注释语法
	/*注释内容*/
3.引入CSS的多种方式
    1.head内style标签内部编写(学习的时候适合使用)
    2.head内link标签引入(标准的方式)
    3.标签内部通过style属性直接编写(不推荐)

1、CSS选择器

1.CSS基本选择器
	1.标签选择器(直接喊标签名)
        div {
            color: red;
        }
    2.类选择器(按照class值查找标签)
        .c1 {
            color: green
        }
    3.id选择器(根据标签的id值精准查找标签)
        #d1 {
            color: yellow;
        }
    4.通用选择器(直接页面所有的标签 了解即可)
        * {
            color: black;
        }

    
2.CSS组合选择器
	"""
	对标签其实有另外一种说辞
	针对标签的上下层以及嵌套
	父标签 后代标签 子标签 
	弟弟标签 哥哥标签 祖先标签
	"""
    
    1.后代选择器(关键字是空格)
        div span {
            color: red;
        }
    2.儿子选择器(关键字是大于号>)
        div>span {
            color: yellow;
        }
    3.毗邻选择器(关键字是加号+)
        div+span {
            color:pink;
        }
    4.弟弟选择器(关键字是小波浪号~)
        diiv~span {
            color:white;
        }

3.分组与嵌套
    所有的选择器合并(各个选择器用逗号隔开 平起平坐)
    div,p,span {  # 多个选择器合并查找
        color:grey;
    }

    #d1,.c1,span {  # 多个选择器混合使用同一个样式 
        color:green;
    }

    div.c1 {  # 查找class含有c1的div
        color:red;
    }

    div#d1 {  # id是d1的div
        color:red;
    }

    .c1 p.c2 {  # 查找含有c1样式值里面的含有c2样式值
        color:antiquewhite;
    }
4.属性选择器
    [username] {  # 按照属性名查找
        color:red;
    }

    [username] = 'amlira' {  # 按照属性名等于属性值
        color:yellow;
    }

    div[username='almira'] {
        color:darkcyan
    }
5.伪类选择器
'a标签补充说明 针对没有点击过的网址 默认是蓝色 点击过的则为紫色'
a:hover {
    color:orange;
}
input:focus {  # input获取焦点(被点击)之后才用的样式
    backgroun-color:red;
}
6.伪元素选择器
p:first-letter {
    font-size:48px;
    color:red;
}

p:before {  # css添加文本无法正常选中 也就是已经不再是单纯的文内容了
    content: ' 哇哈哈哈'；
    color:blue;
}

p:after {  # css添加文本无法正常选中 也就是已经不再是单纯的文内容了
    content: '嘻嘻嘻 '；
    color:red;
}

2.选择器优先级问题

1.选择器相同 导入方式不同
	就近原则

2.选择器不同 导入方式相同
	精确度越高优先级越高
	内连样式(不怎么用)>id选择器>类选择器>标签选择器

3.CSS样式调节

1.字体样式相关
	font-size:14px 20px 28px 36px;
2.字体粗细相关
	font-weight:bolder lighter;
3.字体颜色相关
	color:red;  # 颜色的英语名字
     coior:#3d3d3d;  # 16进制的颜色编码
     color:rgb(186,67,897)；  # rgb值
     color:rgba(186,67,897,0.1);  # a字母可以控制透明度范围是0到1
     
    
3.文字装饰
text-decoration：none  # 主要用于a标签下取消下划线
text-align:center  # 文本居中
text-indent:96px  # 首行缩进
    
4.背景属性
div {
    width:800px;  # 背景的宽度
    hight:800px;  # 背景的高度
    background-color:red;  # 调节背景颜色
    background-image:url('图片地址');  # 背景可以用照片来充当
    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;  # 多个属性名有相同的前缀 那么可以简写一次性完成 
}