进入python的世界_day43_前端——表单的补充、CSS的学习（选择器、样式调节）

一、表单标签的补充

关于form

如果没有value 前端就不会发送数据到后端，字典必须齐备
method="" 属性，这个是选择前端往后端传输数据的方式，有get和post两种方式，前者会把小数据带在URL上传，
后者会将表单数据附加到 HTTP 请求的 body 内，安全很多

关于Input

input 一般前面要配一个label ，然后label for 属性绑定input的 id，这样点lable的数据时，可以鼠标定位到input输入框，俗称聚焦。 专业的前端一般有强迫症都会配label
input 可以封很多属性，比如，disabled——选不了输不了啥都不能干，readonly——能选中但是输入不了

关于select

​ 针对选择类型的标签，可以提前设置默认选项，加一个属性 checked

​ 针对下拉选择类型的标签，也可以提前设置默认选项，加一个属性 selected

二、CSS层叠样式表——让网址更好看

​ 通过查看日常的网址的代码，看到他们的dvi啊之类的代码都有封一个class属性

class属性

​		分类，有点类似红警中的编队,一个单位可以属于很多队

id属性                                                                                                                         

​		精准定位

1.语法结构

选择器{

​ 样式1：值；

​ 样式2：值

}

2.注释语法

/*注释内容*/

3.引入CSS的多种方式

• 直接head里style里编写
• Link导入，也是head内（推荐用）
• 标签内部style写 （不推荐）

三、CSS选择器

​ 贯穿整个标签查找

1.CSS基本选择器

• 标签选择器，head里style里然后指某一种标签{}
• 类选择器，head里style里封 点类名 比如.c1 {}
• id选择器，head里style里封 井号id值 比如#999 {}
• 通用选择器，head里style里封直接选择所有标签 * {}

2.CSS组合选择器

​ 根据同级的先来后到分为哥哥、弟弟标签

​ 根据包裹的层级分为父子孙标签，包裹内的所有标签都是后代标签

• 后代选择器，head里style里封 标签名 空格 指定后代标签{} 意思是所有该标签内所有的指定后代都选择
• 儿子选择器，head里style里封 标签名 > 指定的标签，意思是该标签的儿子级标签选择
• 毗邻选择器，head里style里封 标签名+（+要打） 紧挨着的标签，意思是该标签紧挨着的选中，必须贴贴着的！
• 弟弟选择器，head里style里封 标签名~ 指定的标签名 ,意思是该标签之后同级别的某标签都选中

3.分组与嵌套

• 多选用逗号排一起即可
• 符号# 也可用上 注意，紧挨着是修饰左边的符号，如果有空格是找左边的里面的标签！！！！！！！！！
• 标签.类名，选中该标签以及后同级的有该类名的标签
• .类 标签.类 选中某类中带有某类的标签

4.属性选择器

所有标签除了有自己默认的属性之外 还可以拥有自定义的任意属性

• 默认属性：id class
• 自定义属性： x=1 y=2

1.查找属性名含有name的标签

# head里封
[name] {
    background-color:red; 
}

2.查找属性名含有那么 并且值是username的标签

# head里封
[name='username'] {
    background-color:blue;
}

3.查找div标签并且 属性名含有name值是username的

# head里封
div[name='username'] {
    background-color:aqua;
}

5.伪类选择器

a标签 默认的颜色有两种 紫色跟蓝色
紫色：链接地址已经被点过了
蓝色：链接地址从来没有点击过

a:hover {     # 鼠标悬浮上去 之后样式改变 适用于所有含有文本的标签
    color: blue;
}

a：link {          # 没点击的颜色
    color:red
}

a:visited {        # 点击过后的颜色
    color:yellow
}
    
a:active {        # 按住的颜色
    color:orange
}

# 获取焦点，被点击的，看我看我看我的意思
input.c888:focus {       # 这里是根据类标签选择的
    background-color: red;
}

6.伪元素选择器

# 能控制文本的第一个字大小
p:first-letter {
    font-size: 500px;
}   
# 能以CSS渲染的形式填充文字，防止被爬（一定程度上）
p:before/after {
    content:'真的假的';
    color: aquamarine;
}

• 补充：如何禁止页面用f12，禁止右击，禁止复制粘贴

https://www.jianshu.com/p/1a7ec4bc2576

7.选择器优先级问题

• 相同类型选择器

​ 就近原则，就便签，HTML代码从上到下执行，head中后执行的更靠近标签

• 不同选择器

​ 内联样式 > id选择器 > 类选择器 > 标签选择器

​ 一句话理解：谁更精准，按谁的来

四、CSS样式调节

1.调字体

# head里封style里封
#调字体大小
p {
    font-size: 50px;
}
——————————————————————————
# 调字体粗细
p {
    font-weight:xxx # xxx可选bold 粗 bolder更粗 lighter更细等
}
# 调字体颜色
p {
    color:xxx    # pycharm也可以选 
    color:rgb(xxx,xxx,xxx)  # 微信截图也显示三基色
    color:rgba(xxx,xxx,xxx,透明度值%)
}
——————————————————————————
# 居中显示
        p {
            text-align: center;
        }
————————————————————————————
# 取消或者加上下划线 常用于a标签的下划线取消，或者其他的线
text-decoration: underline; # 加上在脚下的线
text-decoration: none;     # 取消
text-decoration: overline  # 加上文本上的线，在头上
text-decoration: line-through # 加上穿过文本的线，类似叛忍
—————————————————————————————
# 首行缩进
p {
    text-indent: 32px;  字标签 默认16px 这里首行缩进两字符
}

# 设置背景颜色
body {
      background-color: #b7b6b6;
}
___________________________
# 设置图片为背景
div {
        height:1000px;  /*调整块 高度*/
        width: 1000px;  /*调整长度*/
   	    background-color: /*填充颜色*/
        background-image: url("图片地址" );
    	background-repeat: 填充的方法 repeat-英文意思重复
        background-position: 啥啥啥px 啥啥啥px  /* 图片 微调漂移
    	支持background（写在一起）
}